diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index 0774055d..25284a51 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -1,7 +1,8 @@
 export function Navbar(props: { title?: string }) {
   return (
     <>
-      <header className="flex h-16 w-full items-center justify-between bg-[#333333] px-6">
+      <header className="flex w-full flex-row items-center justify-center align-middle">
+      < div className="flex h-16 items-center justify-between bg-[#333333] px-16 w-[50%] mt-3 rounded-3xl ">
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
             <img src="/Pictopy.svg" alt="" />
@@ -15,6 +16,7 @@ export function Navbar(props: { title?: string }) {
             Welcome {props.title || 'User'}
           </span>
         </div>
+      </div>
       </header>
     </>
   );
diff --git a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
index 01928663..54d9ec4e 100644
--- a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
@@ -20,7 +20,7 @@ function Sidebar() {
     }`;
 
   return (
-    <div className="sidebar flex w-40 flex-col justify-between space-y-4 border-r border-gray-700 bg-[#333333] p-4 dark:border-gray-700">
+    <div className="sidebar flex w-40 flex-col justify-between space-y-4 border-r border-gray-700 bg-[#333333] p-4 dark:border-gray-700 m-4 rounded-3xl">
       <div className="mt-2 flex flex-col gap-10">
         <Link to="/home" className={linkClasses('/home')}>
           <HomeIcon
@@ -34,7 +34,7 @@ function Sidebar() {
             className="h-5 w-5"
             fillColor={isActive('/ai-tagging') ? '#6465F3' : 'none'}
           />
-          <span className="font-sans">Ai tagging</span>
+          <span className="font-sans">AI Tagging</span>
         </Link>
 
         <Link to="/videos" className={linkClasses('/videos')}>
diff --git a/frontend/src/layout/main.tsx b/frontend/src/layout/main.tsx
index 8f1a443b..9302853d 100644
--- a/frontend/src/layout/main.tsx
+++ b/frontend/src/layout/main.tsx
@@ -7,7 +7,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       <Navbar />
       <div className="sidebar flex" style={{ height: 'calc(100vh - 64px)' }}>
         <Sidebar />
-        <div className="flex flex-1 overflow-x-auto bg-gray-900 p-4 text-white">
+        <div className="flex flex-1 overflow-x-auto bg-white p-4 text-gray-900">
           {children}
         </div>
       </div>
diff --git a/frontend/src/pages/SettingsPage/Settings.tsx b/frontend/src/pages/SettingsPage/Settings.tsx
index f3e1ae3b..6cdc187a 100644
--- a/frontend/src/pages/SettingsPage/Settings.tsx
+++ b/frontend/src/pages/SettingsPage/Settings.tsx
@@ -26,12 +26,12 @@ const Settings: React.FC = () => {
 
   return (
     <div className="container mx-auto flex-1 px-4 py-8">
-      <div className="space-y-6 rounded-lg bg-gray-800 p-6 shadow dark:bg-gray-800">
+      <div className="space-y-6 rounded-3xl bg-[#333333] p-6 shadow dark:bg-[#333333]">
         <div>
           <h2 className="mb-2 text-lg font-medium text-gray-50 dark:text-gray-50">
             Current Folder Path
           </h2>
-          <div className="rounded-md bg-gray-700 px-4 py-3 text-gray-300 dark:bg-gray-700 dark:text-gray-300">
+          <div className="rounded-md bg-[#414141] px-4 py-3 text-gray-300 dark:bg-[#414141] dark:text-gray-300">
             {currentPath && <>{currentPath}</>}
           </div>
         </div>
@@ -39,7 +39,7 @@ const Settings: React.FC = () => {
         <Button
           onClick={handleDeleteCache}
           variant="outline"
-          className="border-gray-500 text-gray-50 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-700"
+          className="border-gray-500 text-gray-50 hover:bg-[#414141] dark:border-[#414141] dark:text-gray-50 dark:hover:bg-[#414141]"
         >
           <RefreshCwIcon className="mr-2 h-5 w-5 text-gray-50 dark:text-gray-50" />
           Refresh Cache