diff --git a/components/home/HeroSection/NavBar.tsx b/components/home/HeroSection/NavBar.tsx
index a17fe397..27c7ac79 100644
--- a/components/home/HeroSection/NavBar.tsx
+++ b/components/home/HeroSection/NavBar.tsx
@@ -1,11 +1,13 @@
-/* eslint-disable @next/next/no-img-element */
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import { useState, useEffect } from 'react';
 import { Disclosure } from '@headlessui/react';
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 const NavBar: React.FC = () => {
   const [isMobile, setIsMobile] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     if (window.screen.width < 1024) {
@@ -14,9 +16,17 @@ const NavBar: React.FC = () => {
   }, []);
 
   const navigation = [
-    { name: 'Home', href: '/#hero', current: true },
-    { name: 'About Us', href: '/about-us', current: false },
-    { name: 'Open Source Projects', href: '/#projects', current: false },
+    { name: 'Home', href: '/#hero', current: router.pathname === '/' },
+    {
+      name: 'About Us',
+      href: '/about-us',
+      current: router.pathname === '/about-us',
+    },
+    {
+      name: 'Open Source Projects',
+      href: '/#projects',
+      current: router.pathname === '/#projects',
+    },
     {
       name: 'Resources',
       href: 'https://clueless-resources.super.site/resources',
@@ -24,6 +34,17 @@ const NavBar: React.FC = () => {
     },
   ];
 
+  const [nav, setNav] = useState(navigation);
+
+  const setActive = (nameToSet: string) => {
+    const updatedNav = nav.map((item) => ({
+      ...item,
+      current: item.name === nameToSet,
+    }));
+
+    setNav(updatedNav);
+  };
+
   function classNames(...classes: string[]) {
     return classes.filter(Boolean).join(' ');
   }
@@ -50,14 +71,6 @@ const NavBar: React.FC = () => {
                       />
                     )}
                   </Disclosure.Button>
-                  {/* Profile Image */}
-                  {/* <button className="flex rounded-full md:ml-4 text-sm hover:outline-none hover:ring-2 hover:ring-[#7EE787] hover:ring-offset-2 hover:ring-offset-gray-800">
-                    <img
-                      className="w-10 h-10 rounded-full"
-                      src="https://pbs.twimg.com/profile_images/1626657457446752257/d4kJWBeS_400x400.jpg"
-                      alt=""
-                    />
-                  </button> */}
                 </div>
                 <div className="w-[100%] flex justify-between items-center">
                   {/* Hero Logo */}
@@ -74,7 +87,7 @@ const NavBar: React.FC = () => {
                     {/* Tabs */}
                     <div className="flex space-x-8">
                       {navigation.map((item) => (
-                        <a
+                        <Link
                           key={item.name}
                           href={item.href}
                           className={classNames(
@@ -83,22 +96,12 @@ const NavBar: React.FC = () => {
                               : 'text-gray-300 hover:text-[#7EE787]',
                             'rounded-md text-lg font-medium'
                           )}
-                          aria-current={item.current ? 'page' : undefined}
+                          onClick={() => setActive(item.name)}
                         >
                           {item.name}
-                        </a>
+                        </Link>
                       ))}
                     </div>
-                    {/* Profile Image */}
-                    {/* <div className="absolute inset-y-0 right-0 flex items-center pl-5 md:static md:inset-auto md:ml-6 md:pr-0">
-                      <button className="flex rounded-full text-sm hover:outline-none hover:ring-2 hover:ring-[#7EE787] hover:ring-offset-2 hover:ring-offset-gray-800">
-                        <img
-                          className="w-10 rounded-full"
-                          src="https://pbs.twimg.com/profile_images/1626657457446752257/d4kJWBeS_400x400.jpg"
-                          alt=""
-                        />
-                      </button>
-                    </div> */}
                   </div>
                 </div>
               </div>
@@ -106,9 +109,8 @@ const NavBar: React.FC = () => {
               <Disclosure.Panel className="lg:hidden">
                 <div className="space-y-1 px-2 pt-2 pb-3">
                   {navigation.map((item) => (
-                    <Disclosure.Button
+                    <Link
                       key={item.name}
-                      as="a"
                       href={item.href}
                       className={classNames(
                         item.current
@@ -116,10 +118,10 @@ const NavBar: React.FC = () => {
                           : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                         'block rounded-md px-3 py-2 text-base font-medium'
                       )}
-                      aria-current={item.current ? 'page' : undefined}
+                      onClick={() => setActive(item.name)}
                     >
                       {item.name}
-                    </Disclosure.Button>
+                    </Link>
                   ))}
                 </div>
               </Disclosure.Panel>
diff --git a/components/home/Testimonials/testimonials.tsx b/components/home/Testimonials/testimonials.tsx
index 60a097b5..991aaa7b 100644
--- a/components/home/Testimonials/testimonials.tsx
+++ b/components/home/Testimonials/testimonials.tsx
@@ -50,6 +50,7 @@ const Testimonial = () => {
         },
       },
     ],
+    variableWidth: true,
   };
   return (
     <div className="min-h-[45rem]">
diff --git a/package-lock.json b/package-lock.json
index e502e13a..a0ae96c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,10 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
     "node_modules/@babel/compat-data": {
       "version": "7.21.7",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.7.tgz",
@@ -219,7 +223,7 @@
       "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
       "peer": true,
       "dependencies": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.21.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -7351,13 +7355,17 @@
         "@babel/types": "^7.21.5"
       }
     },
+    "@babel/helper-module-imports": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
     "@babel/helper-split-export-declaration": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
       "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
       "peer": true,
       "requires": {
-        "@babel/types": "^7.18.6"
+        "@babel/types": "^7.21.4"
       }
     },
     "@babel/helper-string-parser": {