diff --git a/app/dashboard/settings/SettingsPage.tsx b/app/dashboard/settings/SettingsPage.tsx
index b284f1d..e5a738e 100644
--- a/app/dashboard/settings/SettingsPage.tsx
+++ b/app/dashboard/settings/SettingsPage.tsx
@@ -70,7 +70,7 @@ export default function SettingsPage({ username, name, email }: SettingsPageProp
                         <div className="tab-content relative bg-base-100 pl-4 pt-4">
                             <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
                             <div className="flex flex-col gap-4"> 
-                                <div className="w-full bg-base-300 p-4 rounded-2xl border border-stone-800">
+                                <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
                                     <h2 className="text-lg font-bold">Profile Settings</h2>
                                     <p className="text-sm opacity-70">Manage your profile settings</p>
                                     <div className="flex flex-col gap-2 pt-8">
@@ -89,7 +89,7 @@ export default function SettingsPage({ username, name, email }: SettingsPageProp
                                     </div>
                                     <button className="btn btn-primary mt-8 w-full" onClick={saveProfile}>Save Changes</button>
                                 </div>
-                                <div className="w-full bg-base-300 p-4 rounded-2xl border border-stone-800">
+                                <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
                                     <h2 className="text-lg font-bold">Password Settings</h2>
                                     <p className="text-sm opacity-70">Manage your password</p>
                                     <div className="flex flex-col gap-4 pt-8">
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 0f05e9d..4e41ead 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -5,6 +5,7 @@ import Breadcrumbs from "./Breadcrumbs"
 
 import { useState } from "react"
 import Link from "next/link"
+import { usePathname } from "next/navigation"
 import {
   Home,
   Globe,
@@ -31,6 +32,7 @@ interface SidebarProps {
 
 export default function Sidebar({ children, username, fullName, breadcrumbPath }: SidebarProps) {
   const router = useRouter()
+  const pathname = usePathname()
   const [isProfileOpen, setIsProfileOpen] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
@@ -87,7 +89,10 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
         <div className="overflow-y-auto" style={{ height: "calc(100vh - 160px)" }}>
           <ul className="menu menu-md p-4 w-full">
             <li className="w-full">
-              <Link href="/dashboard" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Home size={18} />
                 <span>Home</span>
               </Link>
@@ -97,25 +102,37 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
               <span>Resources</span>
             </li>
             <li className="w-full">
-              <Link href="/dashboard/sites" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard/sites" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/sites' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Globe size={18} />
                 <span>Sites</span>
               </Link>
             </li>
             <li className="w-full">
-              <Link href="/dashboard/servers" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard/servers" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/servers' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Server size={18} />
                 <span>Servers</span>
               </Link>
             </li>
             <li className="w-full">
-              <Link href="/dashboard/applications" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard/applications" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/applications' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Layout size={18} />
                 <span>Applications</span>
               </Link>
             </li>
             <li className="w-full">
-              <Link href="/dashboard/uptime" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard/uptime" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/uptime' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Clock size={18} />
                 <span>Uptime Pages</span>
               </Link>
@@ -125,13 +142,19 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
               <span>System</span>
             </li>
             <li className="w-full">
-              <Link href="/dashboard/maintenance" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard/maintenance" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/maintenance' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Tool size={18} />
                 <span>Maintenance</span>
               </Link>
             </li>
             <li className="w-full">
-              <Link href="/dashboard/settings" className="flex items-center w-full justify-start px-3 py-2">
+              <Link 
+                href="/dashboard/settings" 
+                className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/settings' ? 'bg-primary/20 text-primary font-medium' : ''}`}
+              >
                 <Settings size={18} />
                 <span>Settings</span>
               </Link>