diff --git a/components/Layout.tsx b/components/Layout.tsx
index 612cf6c12..6923e0cfd 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -137,18 +137,26 @@ const MainNavLink = ({
   className?: string;
 }) => {
   const router = useRouter();
+  const isActiveNav = extractPathWithoutFragment(router.asPath) === uri;
+
   return (
     <Link
       href={uri}
       className={classnames(
         className,
-        'font-semibold p-2 md:p-4 dark:text-slate-300',
+        'font-semibold p-2 md:p-4',
         // `${
         //   router.asPath === uri
         //     ? 'text-primary hover:text-primary'
         //     : 'text-slate-600 hover:text-primary'
         // }`,
-        `${extractPathWithoutFragment(router.asPath) === uri ? 'text-primary hover:text-primary' : 'text-slate-600 hover:text-primary'}`,
+        // `${extractPathWithoutFragment(router.asPath) === uri ? 'text-primary dark:text-white dark:underline hover:text-primary' : 'text-slate-600 dark:text-white hover:text-primary dark:hover:underline'}`,
+        {
+          'text-primary dark:text-white dark:underline hover:text-primary':
+            isActiveNav,
+          'text-slate-600 dark:text-white hover:text-primary dark:hover:underline':
+            !isActiveNav,
+        },
       )}
     >
       {label}
@@ -201,7 +209,7 @@ const MainNavigation = () => {
 
       <MainNavLink
         className='hidden lg:block hover:underline'
-        uri='/tools'
+        uri='/tools?query=&sortBy=name&sortOrder=ascending&groupBy=toolingTypes&licenses=&languages=&drafts=&toolingTypes=&environments='
         label='Tools'
         isActive={section === 'tools'}
       />
@@ -290,7 +298,11 @@ const MobileNav = () => {
         isActive={section === 'docs'}
       />
 
-      <MainNavLink uri='/tools' label='Tools' isActive={section === 'tools'} />
+      <MainNavLink
+        uri='/tools?query=&sortBy=name&sortOrder=ascending&groupBy=toolingTypes&licenses=&languages=&drafts=&toolingTypes=&environments='
+        label='Tools'
+        isActive={section === 'tools'}
+      />
       <MainNavLink uri='/blog' label='Blog' isActive={section === 'blog'} />
       <MainNavLink
         uri='/community'
diff --git a/styles/globals.css b/styles/globals.css
index 463c04848..5288d6aa4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -265,6 +265,10 @@ border-radius: 4px; */
   background-color: #fddf4784;
 }
 
+.bg-index-5 {
+  background-color: #773cff84;
+}
+
 @layer base {
   body {
     @apply dark:bg-slate-800 bg-white;
diff --git a/tailwind.config.js b/tailwind.config.js
index 4df42289c..8cdd360ff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  mode: 'jit', // Enable JIT mode
   content: [
     './pages/**/*.{js,ts,jsx,tsx,md}',
     './components/**/*.{js,ts,jsx,tsx,md}',