diff --git a/src/app/components/server/Header.tsx b/src/app/components/server/Header.tsx
index 365a60b..7f2ac49 100644
--- a/src/app/components/server/Header.tsx
+++ b/src/app/components/server/Header.tsx
@@ -1,8 +1,13 @@
 export default function Header() {
   return (
-    <header className="h-16 px-6 flex items-center justify-between bg-white border-b">
-      <h1 className="text-lg font-semibold">Dashboard</h1>
-      <div>User Menu</div>
+    <header className="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-white/10 bg-[#020817]/90 px-6 backdrop-blur">
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[#D9F99D]/80">
+          Operations
+        </p>
+        <h1 className="text-lg font-semibold text-white">StellarFlow Console</h1>
+      </div>
+      <div className="text-sm text-slate-300">User Menu</div>
     </header>
   )
-}
\ No newline at end of file
+}
diff --git a/src/app/components/server/Sidebar.tsx b/src/app/components/server/Sidebar.tsx
index dc01030..11aba77 100644
--- a/src/app/components/server/Sidebar.tsx
+++ b/src/app/components/server/Sidebar.tsx
@@ -2,15 +2,21 @@ import Link from 'next/link'
 
 export default function Sidebar() {
   return (
-    <aside className="w-64 h-screen bg-gray-900 text-white p-4">
-      <h2 className="text-xl font-bold mb-6">Dashboard</h2>
+    <aside className="flex h-screen w-64 shrink-0 flex-col border-r border-white/10 bg-[#0A1020] px-5 py-6 text-white">
+      <div className="mb-8">
+        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[#D9F99D]/80">
+          StellarFlow
+        </p>
+        <h2 className="mt-2 text-2xl font-semibold text-white">Dashboard</h2>
+      </div>
 
-      <nav className="space-y-4">
-        <Link href="/">Home</Link>
-        <Link href="/analytics">Analytics</Link>
-        <Link href="/transactions">Transactions</Link>
-        <Link href="/settings">Settings</Link>
+      <nav className="flex flex-col gap-2 text-sm text-slate-300">
+        <Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/">Home</Link>
+        <Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/contracts">Contracts</Link>
+        <Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/relayers">Relayers</Link>
+        <Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/logs">Logs</Link>
+        <Link className="rounded-lg px-3 py-2 transition hover:bg-white/5 hover:text-white" href="/settings">Settings</Link>
       </nav>
     </aside>
   )
-}
\ No newline at end of file
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8d7067d..1f64f97 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "./components/ThemeProvider";
 import { ProgressBarProvider } from "./components/TopLoadingBar";
+import Sidebar from "./components/server/Sidebar";
+import Header from "./components/server/Header";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -36,7 +38,7 @@ export default function RootLayout({
         <style>{`html { background-color: #0d1117; }`}</style>
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} h-screen overflow-hidden antialiased`}
       >
         <ThemeProvider
           attribute="class"
@@ -45,7 +47,15 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <ProgressBarProvider>
-            {children}
+            <div className="flex h-screen flex-row bg-[#020817] text-white">
+              <Sidebar />
+              <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+                <Header />
+                <main className="min-h-0 flex-1 overflow-y-auto">
+                  {children}
+                </main>
+              </div>
+            </div>
           </ProgressBarProvider>
         </ThemeProvider>
       </body>
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 974ee35..48927e0 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -3,8 +3,6 @@
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { Loader2 } from "lucide-react";
-import Nav from "./components/nav";
-import FloatingSidebar from "./components/FloatingSidebar";
 import SystemStats from "./components/SystemStats";
 import ModularStatsCard from "./components/ModularStatsCard";
 import PriceFeedCard from "./components/PriceFeedCard";
@@ -53,13 +51,8 @@ export default function DashboardPage() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-[#020817] text-white selection:bg-[#CBF34D]/30">
-      <Nav />
-      {/* Sidebar - Positioned for the dashboard layout */}
-      <FloatingSidebar />
-      
-      <main className="pl-24 pr-8 py-10 md:py-16">
-        <div className="max-w-6xl mx-auto space-y-12">
+    <div className="min-h-full bg-[#020817] px-8 py-10 text-white selection:bg-[#CBF34D]/30 md:py-16">
+      <div className="mx-auto max-w-6xl space-y-12">
           {/* System At-A-Glance Stats Section */}
           <SystemStats />
 
@@ -152,8 +145,7 @@ export default function DashboardPage() {
               </div>
             </div>
           </section>
-        </div>
-      </main>
+      </div>
     </div>
   );
 };
