diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ccf4cab..9759072 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -70,15 +70,15 @@ export function Header({ activeTab, onTabChange, tabs }: HeaderProps) {
         </div>
 
         {/* Tabs */}
-        <nav className="flex gap-1 -mb-px">
+        <nav className="flex gap-1 mt-2">
           {tabs.map(tab => (
             <button
               key={tab.id}
               onClick={() => onTabChange(tab.id)}
-              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-none cursor-pointer rounded-t-lg transition-all whitespace-nowrap ${
                 activeTab === tab.id
-                  ? 'border-slate-900 dark:border-stone-100 text-slate-900 dark:text-stone-100'
-                  : 'border-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300 hover:border-slate-300 dark:hover:border-stone-700'
+                  ? 'bg-slate-100 dark:bg-stone-800 text-slate-900 dark:text-stone-50'
+                  : 'bg-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300'
               }`}
             >
               <Icon name={tab.icon} size={16} />