diff --git a/app/javascript/controllers/rainy_day_controller.js b/app/javascript/controllers/rainy_day_controller.js
index 7c5b7da..eed80d3 100644
--- a/app/javascript/controllers/rainy_day_controller.js
+++ b/app/javascript/controllers/rainy_day_controller.js
@@ -2,105 +2,79 @@ import { Controller } from "@hotwired/stimulus";
 
 
 export default class extends Controller {
+  static targets = ["link"]; // we now have a this.sourceTarget or a this.sourceTargets array
+  
+  static options = {
+         "mp": {
+             'widgetSelector': '#mountainProjectWidget',
+             'defaultZoom': 11,
+             'height': 500,
+             'urlBase': 'https://www.mountainproject.com/widget'
+         },
+         'areaListElementSelector': '[data-role="rainy-day-list-option"]',
+               'activeSelectorClass': 'active',
+               'activeLabelSelector': '[data-role="active-title"]'
+   }
   connect() {
-    console.log('Hello, rainy day controller!');
-  }
-
-  // Rebuild the old JQuery based functionality here
-};
-
-// function RainyDayController(watchedAreaSlug, options) {
-//   this.watchedAreaSlug = watchedAreaSlug;
-//   this.options = $.extend(options, {
-//       'mp': {
-//           'widgetSelector': '#mountainProjectWidget',
-//           'defaultZoom': 11,
-//           'height': 500,
-//           'urlBase': 'https://www.mountainproject.com/widget'
-//       },
-//       'areaListElementSelector': '[data-role="rainy-day-list-option"]',
-//       'activeSelectorClass': 'active',
-//       'activeLabelSelector': '[data-role="active-title"]'
-//   });
-
-//   this.initView();
-// }
-
-// RainyDayController.prototype.initView = function () {
-//   $(this.options.areaListElementSelector).click(this.handleAreaSelection.bind(this));
-
-//   this.$activeLocation = $('.' + this.options.activeSelectorClass);
-//   this.$activeLabel = $(this.options.activeLabelSelector);
-//   this.$description = $('p[data-role="area-description"]');
-//   this.$rockType = $('strong[data-role="area-rock-type"]');
-//   this.$driveTime = $('strong[data-role="area-drive-time"]');
 
-//   if (this.$activeLocation.length < 1)
-//   {
-//       console.error('No active list element found');
-//       return;
-//   }
+    }
+          
+updateMountainProjectWidget(event) {
+  const baseUrl = "https://www.mountainproject.com/widget?loc=fixed&";
+  const target = event.currentTarget
 
-//   this.updateMountainProjectWidget(this.$activeLocation);
-// }
+  const x = target.dataset.lon; //Replace const y = $activeElement.data('lon');
+  const y = target.dataset.lat; //Replace const x = $activeElement.data('lat');
+  const z = target.dataset.mtz ? target.dataset.mtz : this.constructor.options.mp.defaultZoom //Replace const z = $activeElement.data('mtz') ? $activeElement.data('mtz') : this.options.mp.defaultZoom;
+  const h = this.constructor.options.mp.height //Replace const h = this.options.mp.height
+  const url =  `${baseUrl}x=${x}&y=${y}&z=${z}&h=${h}`
 
-// RainyDayController.prototype.updateMountainProjectWidget = function ($activeElement) {
-//   var longitude = $activeElement.data('lon');
-//   var latitude = $activeElement.data('lat');
-//   var zoom = $activeElement.data('mtz') ? $activeElement.data('mtz') : this.options.mp.defaultZoom;
+  const iFrame = document.querySelector("iframe")
+  if (url === iFrame.src) return
 
-//   var newUrl = this.buildMountainProjectUrl(longitude, latitude, zoom);
-//   $(this.options.mp.widgetSelector).attr('src', newUrl);
-// }
-
-// RainyDayController.prototype.buildMountainProjectUrl = function (longitude, latitude, zoom) {
-//   return this.options.mp.urlBase + '?loc=fixed&' +
-//       'x=' + longitude + '&' +
-//       'y=' + latitude + '&' +
-//       'z=' + zoom + '&' +
-//       'h=' + this.options.mp.height
-// }
-
-// RainyDayController.prototype.handleAreaSelection = function (ev) {
-//   var $target = $(ev.target);
-//   var areaId = $target.data('id');
-//   var $selectedItems = $('[data-id="' + $target.data('id') + '"]');
-
-//   // Do nothing if the clicked element is already active
-//   if ($target.hasClass(this.options.activeSelectorClass))
-//   {
-//       return;
-//   }
+  return iFrame.setAttribute("src", url)
+  }
 
-//   this.fetchArea(areaId)
-//       .then(this.displayArea.bind(this, $selectedItems));
-// }
 
-// RainyDayController.prototype.fetchArea = function (id) {
-//   var url = '/' + this.watchedAreaSlug + '/rainy-day-options/';
-//   return $.get(url + id);
-// }
+/*********This function fetches the area attributes and replaces the old ones with these***********/
 
-// RainyDayController.prototype.displayArea = function ($newActiveListItem, response) {
-//   if (!response || response.length == 0) {
-//       console.error('Issue connecting to server :(');
-//   }
+async fetchArea (event) {
+  const href = this.linkTarget.getAttribute("href")
+  let url = href + '/rainy-day-options/'; 
 
-//   this.swapActiveClass($newActiveListItem);
-//   this.updatePageInformation(response);
-//   this.updateMountainProjectWidget($newActiveListItem);
+const response = await fetch(url + event.currentTarget.dataset.id)
+    if (!response.ok) {
+      throw new Error('Network response error')
+    }
+    const data = await response.json()
+ 
+    // We need to select the attributes from fetch
+    const description = data.climbing_area.description
+    const rockType = data.climbing_area.rock_type
+    // const drivingTime = data.driving_time
 
-//   this.$activeLocation = $newActiveListItem;
-// }
+    // We need to select the elements/attributes to replace
+    const areaDescription = document.querySelector('p[data-role="area-description"]')
+    areaDescription.innerHTML = description
 
-// RainyDayController.prototype.swapActiveClass = function($newActiveListItem) {
-//   this.$activeLocation.removeClass(this.options.activeSelectorClass);
-//   $newActiveListItem.addClass(this.options.activeSelectorClass);
-// }
+    const rockTypeElement = document.querySelector('strong[data-role="area-rock-type"]')
+    rockTypeElement.innerHTML = rockType
+    // const drivingTimeElement = document.querySelector('strong[data-role="area-drive-time"]')
+  }
 
-// RainyDayController.prototype.updatePageInformation = function(newAreaInformation) {
-//   this.$description.html(newAreaInformation['climbing_area']['description']);
-//   this.$rockType.html(newAreaInformation['climbing_area']['rock_type']);
-//   this.$driveTime.html(newAreaInformation['driving_time'] + ' minutes');
-//   this.$activeLabel.html(newAreaInformation['climbing_area']['name']);
-// }
\ No newline at end of file
+showArea(event) {
+this.updateMountainProjectWidget(event);
+this.fetchArea(event)
+this.handleAreaSelection(event)
+}
+
+// Method for changing the button text when an area from the dropdown menu is selected
+handleAreaSelection(event){
+  // We need to replace the text inside of the button with the active element
+  const menuInfo = document.getElementById("dropdownMenuButton")
+  if (!menuInfo) return 
+  const target = event.currentTarget;
+  menuInfo.innerText = target.innerText;
+}
+
+}
\ No newline at end of file
diff --git a/app/javascript/stylesheets/rainy_day_options.scss b/app/javascript/stylesheets/rainy_day_options.scss
index cde2274..70a3225 100644
--- a/app/javascript/stylesheets/rainy_day_options.scss
+++ b/app/javascript/stylesheets/rainy_day_options.scss
@@ -109,7 +109,7 @@ body[data-page-controller="rainy_day_options"] {
             .mobile {
                 display: none;
                 position: absolute;
-                top: 10px;
+                top: 21px;
                 right: 0;
 
                 .dropdown-toggle {
@@ -142,10 +142,10 @@ body[data-page-controller="rainy_day_options"] {
                         font-weight: $extraBold;
                     }
 
-                    &.active {
-                        background-color: transparent;
-                        color: $primaryColor;
-                    }
+                    // &.active {
+                    //     background-color: transparent;
+                    //     color: $primaryColor;
+                    // }
 
                     &:hover {
                         background-color: transparent;
@@ -186,8 +186,9 @@ body[data-page-controller="rainy_day_options"] {
     .crag-info {
         // padding: 0 10px 35px 10px;
         padding: 25px;
+        padding-left: 14px;
         // margin-bottom: 35px;
-        background-color: #fff;
+        background-color: #eee;
 
         &.bottom-border {
             border-bottom: 1px solid #eee;
diff --git a/app/views/area/rainy_day_options/index.html.erb b/app/views/area/rainy_day_options/index.html.erb
index b486772..d1025d7 100644
--- a/app/views/area/rainy_day_options/index.html.erb
+++ b/app/views/area/rainy_day_options/index.html.erb
@@ -3,24 +3,26 @@
 <% end %>
 <div class="page-header card">
     <div class="container">
-        <h1><a href="/<%= @watched_area.slug %>">WET ROCK POLICE</a></h1>
+        <h1><a data-rainy-day-target="link" href="/<%= @watched_area.slug %>">WET ROCK POLICE</a></h1>
         <h2>Rainy Day Options for <%= @watched_area.name %></h2>
     </div>
 </div> 
 <div class="container page-content">
     <div class="crags">
         <div class="crag-list">
-            <div class="area-header ">
+            <div class="area-header">
                 <span class="header">Areas</span>
                 <span class="header header-mobile">Area:</span>
             </div>
             <div class="mobile dropdown">
-                <button class="dropdown-toggle" data-role="active-title" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <button class="dropdown-toggle" data-role="active-title" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <%= @active_rainy_day_option.climbing_area.name %>
                 </button>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                     <% @watched_area.climbing_areas.each_with_index do |area, index| %>
-                        <a class="dropdown-item <% if index == 0 %>active<% end %>"
+                        <a 
+                        data-action="click->rainy-day#showArea"
+                        class="dropdown-item <% if index == 0 %>active<% end %>"
                             data-role="rainy-day-list-option"
                             data-id="<%= area.id %>"
                             data-name="<%= area.name %>"
@@ -32,17 +34,19 @@
                     <% end %>
                 </div>
             </div>
-            <ul class="desktop list-group-flush">
+            <ul class="desktop list-group-flush"> 
                 <% @watched_area.climbing_areas.each_with_index do |area, index| %>
-                    <li class="list-group-item list-group-item-action <% if index == 0 %>active<% end %>"
-                        data-role="rainy-day-list-option"
-                        data-id="<%= area.id %>"
-                        data-name="<%= area.name %>"
-                        data-lat="<%= area.location.latitude.to_f %>"
-                        data-lon="<%= area.location.longitude.to_f %>"
-                        data-mtz="<%= area.location.mt_z %>">
-                        <%= area.name %>
-                    </li>
+                        <li 
+                        data-action="click->rainy-day#showArea"
+                        class="list-group-item list-group-item-action <% if index == 0 %>active<% end %>"
+                            data-role="rainy-day-list-option"
+                            data-id="<%= area.id %>"
+                            data-name="<%= area.name %>"
+                            data-lat="<%= area.location.latitude.to_f %>"
+                            data-lon="<%= area.location.longitude.to_f %>"
+                            data-mtz="<%= area.location.mt_z %>">
+                            <%= area.name %>
+                        </li>
                 <% end %>
             </ul>
         </div>
@@ -50,11 +54,11 @@
             <iframe id="mountainProjectWidget" style="width:100%; max-width:1200px; height:500px;" frameborder="0" scrolling="no" src="https://www.mountainproject.com/widget?loc=fixed&x=-12871302&y=4337800&z=11.7&h=500"></iframe>
         </div>
     </div>
-    <div class="crag-info bottom-border">
+
         <h4>Description (via <a href="">Mountain Project</a>):</h4>
         <p data-role="area-description"><%= raw @active_rainy_day_option.climbing_area.description %></p>
     </div>
-    <div class="crag-info bottom-padding">
+    <div class="crag-info container bottom-padding">
         <h4>Features:</h4>
         <table>
             <tr>
@@ -81,6 +85,3 @@
     </div>
 </div>
 
-<script>
-    var rainyDayController = new RainyDayController('<%= @watched_area.slug %>', {});
-</script>
\ No newline at end of file