diff --git a/src/App.tsx b/src/App.tsx
index cd5fa58..9884233 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { Toolbar } from "./components/Toolbar";
 import { Gallery } from "./components/Gallery";
 import { Lightbox } from "./components/Lightbox";
 import { TagCloud } from "./components/TagCloud";
+import { TitleBar } from "./components/TitleBar";
 
 export default function App() {
   const loadFolders = useGalleryStore((state) => state.loadFolders);
@@ -29,22 +30,29 @@ export default function App() {
   }, []);
 
   return (
-    <div className="flex h-screen bg-gray-950 text-white overflow-hidden select-none">
-      <Sidebar />
-      <main className="flex-1 flex flex-col min-w-0">
-        {activeView === "explore" ? (
-          <>
-            <BackgroundTasks />
-            <TagCloud />
-          </>
-        ) : (
-          <>
-            <Toolbar />
-            <BackgroundTasks />
-            <Gallery />
-          </>
-        )}
-      </main>
+    <div className="flex h-screen flex-col bg-gray-950 text-white overflow-hidden select-none">
+      {/* Custom title bar — sits at the very top */}
+      <TitleBar />
+
+      {/* Main app content below the title bar */}
+      <div className="flex flex-1 min-h-0">
+        <Sidebar />
+        <main className="flex-1 flex flex-col min-w-0">
+          {activeView === "explore" ? (
+            <>
+              <BackgroundTasks />
+              <TagCloud />
+            </>
+          ) : (
+            <>
+              <Toolbar />
+              <BackgroundTasks />
+              <Gallery />
+            </>
+          )}
+        </main>
+      </div>
+
       <Lightbox />
     </div>
   );