diff --git a/backend/templates/ciroh.html b/backend/templates/ciroh.html
index add17da..7bc432b 100644
--- a/backend/templates/ciroh.html
+++ b/backend/templates/ciroh.html
@@ -12,7 +12,6 @@
             background-size: cover;
             text-align: center;
             background-repeat: no-repeat;
-        
         }
         .section-accent {
             padding-top: 195px;
@@ -20,14 +19,6 @@
             background-color: url('{% static  "images/ciroh/water_data.jpeg" %}');
             text-align: center;
         }
-        .section-datasets {
-            padding-top: 100px;
-            padding-bottom: 100px;
-            background-color: #19a7ce;
-            background-size: cover;
-            text-align: center;
-            background-repeat: no-repeat;
-        }
     </style>
 {% endblock %}
 {% block base_js %}
@@ -65,9 +56,6 @@
         <div id="header-navbar-nav" class="collapse navbar-collapse">
           <ul class="navbar-nav ms-auto">
             {% show_menu 0 100 0 100  %}
-            <li class="nav-item text-center">
-                <a class="nav-link" href="/t"><span>Tethys Portal</span></a>
-            </li>
           </ul>
         </div>
       </div>
diff --git a/backend/templates/hydroshare_list_resources.html b/backend/templates/hydroshare_list_resources.html
index 8b5e364..5d328d6 100644
--- a/backend/templates/hydroshare_list_resources.html
+++ b/backend/templates/hydroshare_list_resources.html
@@ -12,22 +12,71 @@
   }
 
   .name{
-    width: 80%;
-
-    text-overflow: ellipsis;
-    margin-bottom: 12px;
+    height: 150px;
     cursor: pointer;
-    word-break: break-all;
-    overflow:hidden;
-    white-space: nowrap;
-}
-.name:hover{
-    overflow: visible; 
-    white-space: normal;
-    height:auto;  /* just added this line */
-}
+  }
 
+    /* Hide scrollbar for Chrome, Safari and Opera */
+  .name::-webkit-scrollbar {
+    display: none;
+  }
 
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .name {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  .hydroshare_resource{
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.125), inset 0 0 0 1px rgba(255,255,255,0.75);
+    border-color: white;
+    border-bottom: 3px solid #255f9c;
+  }
+  .hydroshare_resource:hover,
+  .hydroshare_resource:focus {
+    background: #f5f5f5;
+    border-color: #bebebe;
+    box-shadow: 0 1px 4px 0 rgba(0,117,180,0.4);
+  }
+  .cover-image {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  
+  .cover-image img {
+    display: block;
+    width: 100%;
+    transition: filter 0.5s ease; /* Smooth transition for the filter */
+  }
+  
+  .learn-more {
+    position: absolute;
+    color: white;
+    padding: 5px 10px;
+    visibility: hidden;
+    transition: visibility 0s, opacity 0.5s linear; /* Smooth transition for visibility and opacity */
+    opacity: 0;
+    border-color: #255f9c;
+    border-radius: 3px;
+    background: #255f9c;
+  }
+  
+  .cover-image:hover .learn-more {
+    visibility: visible;
+    opacity: 1; /* Make it fully opaque on hover */
+  }
+  
+  .cover-image:hover img {
+    filter: brightness(50%); /* Darken the image */
+  }
+  .learn-more > a {
+    color: inherit;
+    text-decoration: none;
+  }
 
 </style>
 {% endaddtoblock %}
diff --git a/backend/templates/single_hs_resource.html b/backend/templates/single_hs_resource.html
index cfa47a4..5f8ca42 100644
--- a/backend/templates/single_hs_resource.html
+++ b/backend/templates/single_hs_resource.html
@@ -1,81 +1,31 @@
 {% load cms_tags sekizai_tags %}
 
 {% addtoblock "js" %}
-<script type="text/javascript">
 
 
+{% endaddtoblock %}
 
-  //<p class="card-text d-inline-block text-truncate my-2 fs-8 lh-1.5 fw-light" style="max-width:300px;">{{ instance.description }}</p>
-  //for the js thing
-  //https://jsfiddle.net/my8jpn01/19/
-  /*
-
-  document.addEventListener('DOMContentLoaded', function () {
-
-
-    const helpIcon = document.getElementById('helpicon-{{ resource.unique_identifier }}');
-    const spanElement = document.getElementById('span-{{ resource.unique_identifier }}');
-    const truncatedElement = document.getElementById('truncate-{{ resource.unique_identifier }}');
-
-    helpIcon.addEventListener('click', function () {
-        truncatedElement.classList.add('truncated');
-      });
-  
-    spanElement.addEventListener('click', function () {
-        truncatedElement.classList.remove('truncated');
-    });
-  });
+    <div class="hydroshare_resource card mb-3 w-100 card-height" >
+        <div class="row g-0">
+            <div class="col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center  align-items-center" style="border-right-width: 2px" >
+            {% if resource.web_site_url  %} 
+                <!-- <a href="{{ resource.web_site_url }}">
+                    <img src="{{ resource.image }}" class="img-tile img-fluid rounded-start" alt="..."  style="width:200px; height:200px;">
+                </a> -->
 
-    <p id="truncate-{{ resource.unique_identifier }}" class="card-text truncate">
+                <header class="course-image">
+                    <div class="cover-image">
+                        <a href="{{ resource.web_site_url }}">
+                            <img src="{{ resource.image }}" class="img-tile img-fluid rounded-start" alt="..."  style="width:200px; height:200px;">
+                        </a>    
+                      <div class="learn-more" aria-hidden="true">
+                        <a href="{{ resource.web_site_url }}">LEARN MORE</a>
+                     </div>
                     
-    <span id="helpicon-{{ resource.unique_identifier }}" class="helpicon text-decoration-none text-secondary" href="#">
-        <i class="bi bi-chevron-compact-down"></i>
-    </span>
-    <span id="span-{{ resource.unique_identifier }}"><i class="bi bi-chevron-compact-up"></i></span>
-    </p>
-  https://stackoverflow.com/questions/34833815/showing-truncated-text-on-hover-using-css-ellipsis-overlaps-text-below-it
-    
-    .truncate {
-        position: relative;
-        max-width:90%;
-        width: 80%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        float: left;
-        word-wrap: break-word;
-        padding-right: 20px;
-    }
-    .truncate.truncated {
-        white-space: initial;
-        width: 100%;
-        text-align: initial;
-    }
-    .truncate.truncated .helpicon{
-        display: none;
-    }
-    
-    .helpicon {
-        right: 0;
-        top:0;
-        position: absolute;
-    }
-  
-  */
-
-
-
+                    </div>
+                </header>
 
-</script>
-{% endaddtoblock %}
 
-    <div class="card border-white mb-3 w-100 card-height" >
-        <div class="row g-0">
-            <div class="col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center justify-content-md-end justify-content-lg-end align-items-center align-items-lg-center align-items-md-center" >
-            {% if resource.web_site_url  %} 
-                <a href="{{ resource.web_site_url }}">
-                <img src="{{ resource.image }}" class="img-tile img-fluid rounded-start" alt="..."  style="width:200px; height:200px;">
-                </a>
             {% else %}
                 <a href='javascript:void(0)' class='portfolio-link'>
                 <img src="{{ resource.image }}" class="img-tile img-fluid rounded-start h-100" alt="..." style="width:200px; height:200px;">
@@ -83,7 +33,7 @@
             {% endif %}
             </div>
             <div class="col-12 col-sm-6 col-md-8 col-lg-8 border-light ">
-                <div class="card-body">
+                <div class="card-body h-100">
                     <div class="d-flex align-items-baseline gap-2 justify-content-center justify-content-lg-start justify-content-md-start">
                         <h5 class="card-title card-h5">{{ resource.title }}</h5>
                         <div style="width:fit-content;">
@@ -102,8 +52,8 @@ <h5 class="card-title card-h5">{{ resource.title }}</h5>
                     </div>
 
                     <p class="card-subtitle mb-2 text-muted fst-italic">{{ resource.subtitle }}</p>
-                    <div class="d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start">
-                        <p class="name w-100">
+                    <div class="d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start h-100">
+                        <p class="name w-100 mb-3 overflow-auto">
                             {{ resource.abstract }}
                         </p>
                     </div>
diff --git a/backend/templates/single_hydrolearn_module.html b/backend/templates/single_hydrolearn_module.html
index c683808..2bb1b18 100644
--- a/backend/templates/single_hydrolearn_module.html
+++ b/backend/templates/single_hydrolearn_module.html
@@ -22,7 +22,6 @@
                     <div class="d-flex align-items-baseline gap-2 justify-content-center justify-content-lg-start justify-content-md-start">
                         <h5 class="card-title card-h5">{{ module.course_title }}</h5>
                     </div>
-
                         <div class="row g-0">
                             <div class="col col-md-6 col-lg-6 col-xl-6 text-start">
                                 <p class="card-subtitle mb-2 text-muted" style="font-size:12px;">