diff --git a/src/app/components/href-button.tsx b/src/app/components/href-button.tsx
index e748239..5c65a43 100644
--- a/src/app/components/href-button.tsx
+++ b/src/app/components/href-button.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/common/utils";
 import Link from "next/link";
 import { ReactElement } from "react";
 
@@ -17,11 +18,16 @@ type ButtonProps = {
    * open the link in a new tab.
    */
   openInNewTab?: boolean;
+
+  /**
+   * The class names for the button.
+   */
+  className?: string;
 };
 
-export function HrefButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
+export function HrefButton({ title, url, openInNewTab, className }: ButtonProps): ReactElement {
   return (
-    <div className="w-fit rounded-lg">
+    <div className={cn("w-fit", className)}>
       <Link href={url} target={openInNewTab ? "_blank" : ""}>
         <p className="hover:text-primary transition-all">{title}</p>
       </Link>
diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx
index 1ecf173..c2516ec 100644
--- a/src/app/components/navbar.tsx
+++ b/src/app/components/navbar.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { ReactElement } from "react";
 import { HrefButton } from "./href-button";
 import Logo from "./logo";
@@ -30,6 +33,8 @@ const pages: Page[] = [
 ];
 
 export default function NavBar(): ReactElement {
+  const path = usePathname();
+
   return (
     <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
       <Link href="/" className="flex items-center gap-2 pl-3 pr-1">
@@ -41,7 +46,17 @@ export default function NavBar(): ReactElement {
 
       <div className="flex gap-4">
         {pages.map((page, index) => {
-          return <HrefButton key={index} title={page.name} url={page.url} openInNewTab={page.openInNewTab} />;
+          const isActive = path.includes(page.url);
+
+          return (
+            <HrefButton
+              className={isActive ? "text-primary" : ""}
+              key={index}
+              title={page.name}
+              url={page.url}
+              openInNewTab={page.openInNewTab}
+            />
+          );
         })}
       </div>
 
diff --git a/src/app/components/theme-toggle-button.tsx b/src/app/components/theme-toggle-button.tsx
index 5f9f683..2b30614 100644
--- a/src/app/components/theme-toggle-button.tsx
+++ b/src/app/components/theme-toggle-button.tsx
@@ -13,7 +13,7 @@ export function ToggleThemeButton(): ReactElement {
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
       aria-label="Toggle Theme"
     >
-      {theme === "dark" ? <SunIcon width={24} height={24} /> : <MoonIcon width={24} height={24} color="#000" />}
+      {theme == "dark" ? <SunIcon width={24} height={24} /> : <MoonIcon width={24} height={24} color="#000" />}
     </button>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 29d0f6f..fd0f5fc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -51,7 +51,7 @@ export default function RootLayout({
       <html className={Fonts.inter.className} lang="en" suppressHydrationWarning>
         <head />
         <body>
-          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
             <TooltipProvider>
               <Toaster />
               <Container>{children}</Container>
