diff --git a/src/assets/images/chevron-down-light.svg b/src/assets/images/chevron-down-light.svg
index 98ac8f7..9c6eb65 100644
--- a/src/assets/images/chevron-down-light.svg
+++ b/src/assets/images/chevron-down-light.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="#080404" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/chevron-up-light.svg b/src/assets/images/chevron-up-light.svg
index 86d240a..782d2fa 100644
--- a/src/assets/images/chevron-up-light.svg
+++ b/src/assets/images/chevron-up-light.svg
@@ -1 +1 @@
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#434344" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up" fill="#3f4959" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/pages/resources-landing-page.html b/src/assets/pages/resources-landing-page.html
index 8687dc3..8c05db1 100644
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@@ -16,6 +16,8 @@
 
 <body hidden ONLOAD="$('body').removeAttr('hidden');" class="bg-secondary">
 
+
+
 <div class="fixed-top d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-0 bg-primary border-top shadow-sm">
     <a class="navbar-brand text-navbartext my-0 mr-md-auto">
         <img src="../images/Asset4.png" height="30" class="d-inline-block align-top"
@@ -63,51 +65,54 @@
     <a class="btn btn-outline-themebuttonoutline" id="theme-toggle">Theme</a>
 </div>
 
+
+
+
 <div class="container-fluid">
     <div class="row">
         <nav class="col-md-2 d-none d-md-block bg-sidebarfill sidebar">
             <div class="sidebar-sticky">
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link active text-sidebartext" href="#">
+                        <a class="nav-link active" href="#">
                             <span data-feather="home"></span>
                             Top <span class="sr-only">(current)</span>
                         </a>
                     </li>
                 </ul>
 
-                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-sidebartext">
+                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1">
                     <span>Resource Categories</span>
                     <a class="d-flex align-items-center" href="#">
                     </a>
                 </h6>
                 <ul class="nav flex-column mb-2 ml-4">
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#human-resources-collapser">
+                        <a class="nav-link" href="#human-resources-collapser">
                             <span data-feather="list-ul"></span>
                             Human Resources
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#marketing-collapser">
+                        <a class="nav-link" href="#marketing-collapser">
                             <span data-feather="list-ul"></span>
                             Marketing
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#productivity-collapser">
+                        <a class="nav-link" href="#productivity-collapser">
                             <span data-feather="list-ul"></span>
                             Productivity
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#training-collapser">
+                        <a class="nav-link" href="#training-collapser">
                             <span data-feather="list-ul"></span>
                             Training
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-sidebartext" href="#workflow-collapser">
+                        <a class="nav-link" href="#workflow-collapser">
                             <span data-feather="list-ul"></span>
                             Workflow
                         </a>
@@ -148,9 +153,8 @@
 
             <footer class="page-footer">
                 <div class="container">
-                    <p class="float-right footer-text">
-                        Here's some footer text that is not a link
-                        <a href="#">Back to top</a>
+                    <p class="float-right">
+                        <a href="#" class="footer-text">Back to top</a>
                     </p>
                 </div>
             </footer>
diff --git a/src/assets/pages/styles/resources-landing-page.scss b/src/assets/pages/styles/resources-landing-page.scss
index 59faa24..a05cbc2 100644
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@@ -2,7 +2,7 @@ html {
   font-size: 14px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 876px) {
   html {
     font-size: 16px;
   }
@@ -23,10 +23,11 @@ html {
 
 body {
   font-size: 1rem;
-  padding-top: 80px;
+  padding-top: 125px;
   padding-bottom: 20px;
 }
 
+
 .feather {
   width: 16px;
   height: 16 px;
@@ -62,7 +63,10 @@ body {
   bottom: 0;
   left: 0;
   z-index: 100; /* Behind the navbar */
-  padding: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 0px;
+  padding-right: 10px;
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
@@ -77,25 +81,6 @@ body {
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 }
 
-.sidebar .nav-link {
-  font-weight: 500;
-  color: navbartext;
-}
-
-.sidebar .nav-link .feather {
-  margin-right: 4px;
-  color: navbartextfeather;
-}
-
-.sidebar .nav-link.active {
-  color: navbartextactive;
-}
-
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
-  color: inherit;
-}
-
 .sidebar-heading {
   font-size: .75rem;
   text-transform: uppercase;
diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss
index b041e66..66fbe7f 100644
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@@ -168,29 +168,84 @@ body {
   cursor: pointer; /* Add a pointer on hover */
 }
 
-.help-menu-item{
-  color: map-get($theme-colors, activetextaccordion) !important;
+.help-menu-item {
+  color: map-get($theme-colors, navbartext) !important;
 }
 
-.help-menu-item:hover{
+.help-menu-item:hover {
   color: map-get($theme-colors, activetextaccordion) !important;
 }
 
-.footer-text{
-  color: red;
+.footer-text {
+  color: map-get($theme-colors, footerback);
 }
 
-.text-sidebartext{
-  color: map-get($theme-colors, navbartextactive) !important;
+.footer-text:focus {
+  color: map-get($theme-colors, footerbackfocus);
 }
 
-.text-sidebartext:hover{
-  color: map-get($theme-colors, navbartext) !important;
+
+
+.sidebarsticky li a:hover {
+  color: map-get($theme-colors, activetextaccordion) !important; /* This is NOT working */
+}
+
+
+.sidebar-sticky {
+  color: map-get($theme-colors, yellow) !important; /* This is NOT working */
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: blue; /* This is NOT working */
+}
+
+
+
+
+.sidebar {
+  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
+}
+
+.sidebar:hover {
+  color: map-get($theme-colors, sidebartext); /* This is the RESOURCE CATEGORIES color */
 }
 
+.sidebar .nav-link.active {
+  color: map-get($theme-colors, sidebartext); /* This is the color of the Top item in menu when inactive */
+}
+
+.sidebar .nav-link.active:hover {
+  color: map-get($theme-colors, activetextaccordion); /* This is the color of the Top item in menu when hovered */
+  background-color: map-get($theme-colors, sidebarbg);
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: map-get($theme-colors, sidebartext); /* This is the color of the category names when inactive */
+}
+
+.sidebar .nav-link:hover {
+  font-weight: 500;
+  color: map-get($theme-colors, activetextaccordion); /* This is the color of the category names when hovered */
+  background-color: map-get($theme-colors, sidebarbg);
+}
+
+
+
+
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: green;
+}
+
+
+
+
 .chevron-img{}
 
-.overlay-content{
+.overlay-content {
   position: fixed; /* Sit on top of the page content */
   width: 400px; /* Full width (cover the whole page) */
   height: 600px; /* Full height (cover the whole page) */
diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss
index 0b0236e..0dceaf5 100644
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@@ -18,6 +18,7 @@ $theme-colors: (
         "searchbuttonfill": #39393f,
         "searchicon": #737373,
         "sidebartext": #787572,
+        "sidebarbg": #29292d,
         "webcardimagebackground": #707070,
         "webcardimagebackgroundhover": #98928F,
         "headertextcolor": #9d9d9d,
@@ -40,6 +41,8 @@ $theme-colors: (
         "feedbackmessagefill": #3c3c42,
         "feedbackmessageborder": #363434,
         "feedbackmessagehint": #787572,
+        "footerback": rgba(120, 117, 114, 0.8),
+        "footerbackfocus": rgba(120, 117, 114, 1),
 );
 
 .theme-button{
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 45e4046..6b096ed 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -4,9 +4,9 @@ $theme-colors: (
         "success": #0B031C,
         "info": #f9f9f9,
         "warning": #700000,
-        "navbartext": #121213,
-        "navbartextfeather": #323233,
-        "navbartextactive": #212122,
+        "navbartext": #080404,
+        "navbartextfeather": #080404,
+        "navbartextactive": #080404,
         "inactivecard": #ffffff,
         "activecard": #13a04a,
         "boxborder": #c0c2c6,
@@ -15,20 +15,21 @@ $theme-colors: (
         "searchhint": #c0c2c6,
         "searchfont": #2c2c2c,
         "sidebarfill": #efefef,
-        "sidebartext": #545455,
+        "sidebartext": #3f4959,
+        "sidebarbg": #e5e5e5,
         "searchbuttonfill": #f6f6f6,
         "searchicon": #545455,
         "webcardimagebackground": #eeeeee,
         "webcardimagebackgroundhover": #f0f0f0,
-        "headertextcolor": #434344,
+        "headertextcolor": #080404,
         "headertextcolorhover": #ffffff,
-        "paragraphtextcolor": #434344,
+        "paragraphtextcolor": #080404,
         "paragraphtextcolorhover": #ffffff,
         "themebuttonoutline": #434344,
         "inactiveaccordion": #efefef,
         "activeaccordion": #ffffff,
-        "inactivetextaccordion": #434344,
-        "activetextaccordion": #434344,
+        "inactivetextaccordion": #3f4959,
+        "activetextaccordion": #080404,
         "borderaccordion": #c0c2c6,
         "inactiveborderaccordion": #c0c2c6,
         "activeborderaccordion": rgba(26, 26, 26, 0),
@@ -41,6 +42,8 @@ $theme-colors: (
         "feedbackmessagefill": #efefef,
         "feedbackmessageborder": #dbdbdb,
         "feedbackmessagehint": #c0c2c6,
+        "footerback": #434344,
+        "footerbackfocus": #000000,
 );
 
 .theme-button{
