diff --git a/src/App.tsx b/src/App.tsx
index 2f48154..b783ce1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2001,24 +2001,22 @@ export default function App() {
           <main className="workspace-container bg-background">
 
             {/* Top Workspace Header */}
-            <header className="h-16 border-b border-[#D9C5B2] bg-white flex items-center justify-between px-8 sticky top-0 z-30">
-              <div className="flex items-center gap-2 max-w-md w-full">
+            <header className="dashboard-header">
+              <div className="search-wrapper">
                 <span className="material-symbols-outlined text-secondary">search</span>
                 <input 
                   type="text" 
                   placeholder="Search products, orders, transactions..." 
-                  className="w-full bg-transparent border-none focus:outline-none focus:ring-0 text-sm placeholder:text-secondary-fixed-dim"
                 />
               </div>
-              <div className="flex items-center gap-4">
+              <div className="header-actions">
                 <button className="text-secondary hover:text-on-surface relative">
                   <span className="material-symbols-outlined">notifications</span>
-                  <span className="absolute top-1 right-1 w-2 h-2 bg-primary rounded-full"></span>
                 </button>
                 <button className="text-secondary hover:text-on-surface">
                   <span className="material-symbols-outlined">help_outline</span>
                 </button>
-                <div className="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm">
+                <div className="avatar-badge">
                   {CONFIG.logoLetter}
                 </div>
               </div>
diff --git a/src/index.css b/src/index.css
index 034f62d..c5566f3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1557,3 +1557,66 @@ aside.menu {
   color: #ffffff;
   font-weight: 600;
 }
+
+/* Dashboard Top Bar Header */
+.dashboard-header {
+  height: 4rem;
+  border-bottom: 1px solid var(--border);
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  box-sizing: border-box;
+}
+
+.search-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background-color: var(--surface-container-low);
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  border: 1px solid var(--border);
+  width: 24rem;
+}
+
+.search-wrapper input {
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  font-size: 0.875rem;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.avatar-badge {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background-color: var(--primary-container);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.header-actions button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+}