diff --git a/src/App.tsx b/src/App.tsx
index 0a7e865..d7a4768 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Box } from "@primer/react";
 import styled, { ThemeProvider } from "styled-components";
 import useLocalState from "use-local-storage-state";
 import { Toaster } from "react-hot-toast";
@@ -9,7 +8,6 @@ import Footer from "./components/Common/Footer/Footer";
 import Navbar from "./components/Common/Navbar/Navbar";
 import HomePage from "./pages/HomePage/HomePage";
 import { routes } from "./routes/AppRoutes";
-import { ThemeToggle } from "./components/ui/ThemeToggle";
 import { pageTransition } from "./lib/animations";
 import { TOAST_CONFIG } from "./lib/constants";
 // @ts-expect-error - JS module without types
@@ -91,17 +89,7 @@ function App() {
             }}
           />
           <StyledApp>
-            <Navbar />
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                py: 3,
-              }}
-            >
-              <ThemeToggle theme={theme} onToggle={themeToggler} />
-            </Box>
+            <Navbar theme={theme} onToggle={themeToggler} />
             <BrowserRouter>
               <AnimatedRoutes />
             </BrowserRouter>
@@ -114,3 +102,4 @@ function App() {
 }
 
 export default App;
+
diff --git a/src/components/Common/Navbar/Navbar.tsx b/src/components/Common/Navbar/Navbar.tsx
index 9ed3041..473bd72 100644
--- a/src/components/Common/Navbar/Navbar.tsx
+++ b/src/components/Common/Navbar/Navbar.tsx
@@ -7,9 +7,15 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Header } from "@primer/react";
 import { MarkGithubIcon } from "@primer/octicons-react";
+import { ThemeToggle } from "../../ui/ThemeToggle";
 import "../../../scss/_natbar.scss";
 
-function Navbar() {
+interface NavbarProps {
+  theme: string;
+  onToggle: () => void;
+}
+
+function Navbar({ theme, onToggle }: NavbarProps) {
   return (
     <>
       <Header className="sticky-header">
@@ -20,6 +26,9 @@ function Navbar() {
           </Header.Link>
         </Header.Item>
         <Header.Item full />
+        <Header.Item>
+          <ThemeToggle theme={theme} onToggle={onToggle} />
+        </Header.Item>
         <Header.Link href="https://github.com/sliit-foss" target="blank" sx={{ mr: 2 }}>
           <FontAwesomeIcon icon={faGithub} />
         </Header.Link>
@@ -46,3 +55,4 @@ function Navbar() {
 }
 
 export default Navbar;
+
diff --git a/src/components/ui/ThemeToggle.scss b/src/components/ui/ThemeToggle.scss
index ff3040b..83a613d 100644
--- a/src/components/ui/ThemeToggle.scss
+++ b/src/components/ui/ThemeToggle.scss
@@ -48,6 +48,7 @@
 
 [data-theme="dark"] {
   .theme-toggle-thumb {
-    color: #fbbf24;
+    color: #1e293b;
+    background: #fbbf24;
   }
 }