diff --git a/src/features/prafrot/components/PrafrotSidebar.css b/src/features/prafrot/components/PrafrotSidebar.css
index b1c58ab..2695599 100644
--- a/src/features/prafrot/components/PrafrotSidebar.css
+++ b/src/features/prafrot/components/PrafrotSidebar.css
@@ -1,10 +1,44 @@
-/* PrafrotSidebar CSS - Reproduced / Angular Style */
+/* PrafrotSidebar CSS - Adaptive Theme (Light/Dark) */
+
+:root {
+  /* Light Theme Variables (Default) */
+  --pfs-bg: #ffffff;
+  --pfs-text: #475569;
+  --pfs-text-active: #0f172a;
+  --pfs-text-muted: #64748b;
+  --pfs-border: #f1f5f9;
+  --pfs-bg-search: #f8fafc;
+  --pfs-bg-hover: rgba(0, 0, 0, 0.03);
+  --pfs-tree-line: #e2e8f0;
+  --pfs-footer-bg: #f8fafc;
+  --pfs-user-card-bg: rgba(0, 0, 0, 0.01);
+  --pfs-toggle-bg: #ffffff;
+  --pfs-toggle-border: #e2e8f0;
+  --pfs-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
+}
+
+.dark .pfs-container {
+  /* Dark Theme Variables */
+  --pfs-bg: #1a1a1a;
+  --pfs-text: #ffffff;
+  --pfs-text-active: #141414;
+  --pfs-text-muted: #a0a0a0;
+  --pfs-border: rgba(255, 255, 255, 0.03);
+  --pfs-bg-search: #252525;
+  --pfs-bg-hover: rgba(255, 255, 255, 0.03);
+  --pfs-tree-line: #262626;
+  --pfs-footer-bg: #181818;
+  --pfs-user-card-bg: rgba(255, 255, 255, 0.02);
+  --pfs-toggle-bg: #262626;
+  --pfs-toggle-border: #333;
+  --pfs-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
 
 .pfs-container {
   width: 260px;
   height: calc(100vh - 20px);
-  background: #1a1a1a;
-  color: #ffffff;
+  background: var(--pfs-bg);
+  color: var(--pfs-text);
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -14,8 +48,8 @@
   border-radius: 16px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.03);
+  box-shadow: var(--pfs-shadow);
+  border: 1px solid var(--pfs-border);
 }
 
 /* Subtle Top Glow - Emerald */
@@ -51,9 +85,9 @@
   width: 28px;
   height: 28px;
   border-radius: 6px;
-  background: #262626;
-  border: 1px solid #333;
-  color: #666;
+  background: var(--pfs-toggle-bg);
+  border: 1px solid var(--pfs-toggle-border);
+  color: var(--pfs-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -62,7 +96,7 @@
 }
 
 .pfs-toggle-btn:hover {
-  background: #333;
+  background: var(--pfs-bg-search);
   color: #10b981;
   border-color: #10b981;
   transform: scale(1.05);
@@ -84,10 +118,10 @@
 .pfs-search-input {
   width: 100%;
   padding: 0.75rem 1rem 0.75rem 2.5rem;
-  background: #252525;
-  border: 1px solid #333;
+  background: var(--pfs-bg-search);
+  border: 1px solid var(--pfs-border);
   border-radius: 12px;
-  color: #fff;
+  color: var(--pfs-text);
   font-size: 0.85rem;
   outline: none;
   transition: all 0.2s ease;
@@ -95,7 +129,7 @@
 
 .pfs-search-input:focus {
   border-color: #10b981;
-  background: #2a2a2a;
+  background: var(--pfs-bg);
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
 }
 
@@ -112,7 +146,7 @@
 }
 
 .pfs-nav-content::-webkit-scrollbar-thumb {
-  background: #333;
+  background: var(--pfs-border);
   border-radius: 10px;
 }
 
@@ -127,7 +161,7 @@
   align-items: center;
   padding: 0.75rem 1rem;
   border-radius: 12px;
-  color: #a0a0a0;
+  color: var(--pfs-text-muted);
   text-decoration: none;
   transition: all 0.2s ease;
   cursor: pointer;
@@ -136,13 +170,13 @@
 }
 
 .pfs-link:hover:not(.active) {
-  background: rgba(255, 255, 255, 0.03);
-  color: #fff;
+  background: var(--pfs-bg-hover);
+  color: var(--pfs-text);
 }
 
 .pfs-link.active {
   background: #10b981 !important;
-  color: #141414 !important;
+  color: var(--pfs-text-active) !important;
   font-weight: 700;
   box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
 }
@@ -170,7 +204,7 @@
 
 .pfs-chevron {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  color: #666;
+  color: var(--pfs-text-muted);
 }
 
 .pfs-chevron.expanded {
@@ -181,7 +215,7 @@
 .pfs-submenu {
   margin-left: 0.5rem;
   padding-left: 1.25rem;
-  border-left: 2px solid #262626;
+  border-left: 2px solid var(--pfs-tree-line);
   margin-top: 4px;
   margin-bottom: 8px;
 }
@@ -191,7 +225,7 @@
   align-items: center;
   padding: 0.65rem 1rem;
   border-radius: 10px;
-  color: #888;
+  color: var(--pfs-text-muted);
   font-size: 0.85rem;
   transition: all 0.2s ease;
   text-decoration: none;
@@ -207,12 +241,12 @@
   top: 50%;
   width: 0.75rem;
   height: 2px;
-  background: #262626;
+  background: var(--pfs-tree-line);
 }
 
 .pfs-sublink:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.03);
+  color: var(--pfs-text);
+  background: var(--pfs-bg-hover);
 }
 
 .pfs-sublink.active {
@@ -233,8 +267,8 @@
 /* Footer Section */
 .pfs-footer {
   padding: 1.25rem;
-  border-top: 1px solid #262626;
-  background: #181818;
+  border-top: 1px solid var(--pfs-border);
+  background: var(--pfs-footer-bg);
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -276,7 +310,7 @@
   font-size: 0.95rem;
   letter-spacing: 0.5px;
   text-transform: uppercase;
-  color: #f8fafc;
+  color: var(--pfs-text);
 }
 
 .pfs-brand-name span {
@@ -285,7 +319,7 @@
 
 .pfs-app-sub {
   font-size: 0.7rem;
-  color: #666;
+  color: var(--pfs-text-muted);
   font-weight: 600;
 }
 
@@ -295,9 +329,9 @@
   align-items: center;
   gap: 12px;
   padding: 0.625rem;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--pfs-user-card-bg);
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--pfs-border);
 }
 
 .pfs-user-data {
@@ -309,7 +343,7 @@
 .pfs-user-name {
   font-size: 0.85rem;
   font-weight: 700;
-  color: #e2e8f0;
+  color: var(--pfs-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -317,7 +351,7 @@
 
 .pfs-logout-link {
   font-size: 0.75rem;
-  color: #64748b;
+  color: var(--pfs-text-muted);
   display: flex;
   align-items: center;
   gap: 4px;
@@ -339,7 +373,7 @@
   flex-direction: column;
   gap: 6px;
   padding-top: 0.75rem;
-  border-top: 1px solid #262626;
+  border-top: 1px solid var(--pfs-border);
 }
 
 .pfs-legal-item, .pfs-version {
@@ -347,7 +381,7 @@
   align-items: center;
   gap: 8px;
   font-size: 0.7rem;
-  color: #475569;
+  color: var(--pfs-text-muted);
 }
 
 .pfs-legal-item svg, .pfs-version svg {
diff --git a/src/features/prafrot/components/PrafrotSidebar.jsx b/src/features/prafrot/components/PrafrotSidebar.jsx
index 8c99df5..bd72101 100644
--- a/src/features/prafrot/components/PrafrotSidebar.jsx
+++ b/src/features/prafrot/components/PrafrotSidebar.jsx
@@ -176,7 +176,7 @@ export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
 
       <div className="pfs-search-wrapper">
         <div className="relative">
-          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
+          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--pfs-text-muted)]" />
           <input 
             type="text" 
             className="pfs-search-input" 
@@ -216,7 +216,7 @@ export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
 
         <div className="pfs-user-section">
           <div className={cn("pfs-user-card", isCollapsed && "justify-center")}>
-            <Avatar className="h-8 w-8 border border-zinc-800">
+            <Avatar className="h-8 w-8 border border-[var(--pfs-border)]">
               <AvatarImage src={`https://ui-avatars.com/api/?name=${user?.name || 'User'}&background=10b981&color=141414`} />
               <AvatarFallback className="bg-emerald-500 text-zinc-950 font-bold text-xs">
                 {(user?.name || 'U').charAt(0)}