diff --git a/frontend/src/App.css b/frontend/src/App.css
index a01294d..4c0593d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2,11 +2,18 @@
 
 .app-container {
     display: flex;
+    flex-direction: column;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
 }
 
+.app-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
 .main-content {
     flex: 1;
     height: 100%;
@@ -32,6 +39,7 @@
     transition: margin-left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
     overflow: hidden;
     flex-shrink: 0;
+    height: 100%;
 }
 
 .sidebar.hidden {
@@ -39,27 +47,6 @@
     opacity: 0;
 }
 
-.logo-area {
-    padding: 16px 20px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    border-bottom: 1px solid var(--border-color);
-    min-height: 65px;
-}
-
-.logo-area img {
-    width: 64px;
-    height: 64px;
-}
-
-.logo-area h1 {
-    font-size: 1.1rem;
-    font-weight: 600;
-    margin: 0;
-    white-space: nowrap;
-}
-
 .nav-scroll-area {
     flex: 1;
     overflow-y: auto;
@@ -189,6 +176,100 @@
     color: var(--text-primary);
 }
 
+/* Title Bar Styles */
+.titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--cds-layer);
+  border-bottom: 1px solid var(--border-color);
+  height: 38px;
+  min-height: 38px;
+  flex-shrink: 0;
+  -webkit-app-region: drag;
+  user-select: none;
+}
+
+.titlebar.macos {
+  padding-left: 80px;
+}
+
+.titlebar.other-platform {
+  padding: 0 8px;
+}
+
+.titlebar-left,
+.titlebar-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  -webkit-app-region: no-drag;
+}
+
+.titlebar-center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titlebar-appname {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--cds-text-primary);
+  letter-spacing: 0.2px;
+}
+
+.titlebar-sidebar-toggle {
+  margin-right: 4px;
+}
+
+/* Window controls for non-macOS platforms */
+.window-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.window-control-btn {
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.window-control-btn:hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.window-control-btn.close:hover {
+  background-color: #ff5f57;
+  color: white;
+}
+
+/* Titlebar settings */
+.titlebar-settings {
+  margin-right: 4px;
+}
+
+/* Update main-content to account for title bar */
+.main-content {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  background-color: var(--bg-color);
+  transition: margin-left 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  margin-top: 0;
+}
+
 /* Tool Container and Panes (Same as before) */
 .tool-container {
     max-width: 1400px;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f9cee85..6727ac5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
 import { Sidebar } from './components/Sidebar';
-import { Theme, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { Settings } from '@carbon/icons-react';
+import { TitleBar } from './components/TitleBar';
+import { Theme } from '@carbon/react';
 
 // Tools Imports
 import DateTimeConverter from './pages/DateTimeConverter';
@@ -119,83 +119,26 @@ function App() {
         <ErrorBoundary>
             <Theme theme={theme} style={{ height: '100%' }}>
                 <div className="app-container">
-                    <Sidebar
-                        activeTool={activeTool}
-                        setActiveTool={setActiveTool}
-                        isVisible={isSidebarOpen}
+                    <TitleBar 
+                        isSidebarOpen={isSidebarOpen} 
+                        toggleSidebar={toggleSidebar}
+                        themeMode={themeMode}
+                        setThemeMode={setThemeMode}
                     />
-
-                    <main className="main-content">
-                        {/* Top Bar Area for Toggle & Settings */}
-                        <div style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            height: '48px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            padding: '0 16px',
-                            zIndex: 900,
-                            pointerEvents: 'none' /* Passthrough to tool interactions if no header bg */
-                        }}>
-                            <div style={{ pointerEvents: 'auto' }}>
-                                {!isSidebarOpen && (
-                                    <IconButton
-                                        kind="ghost"
-                                        size="sm"
-                                        onClick={toggleSidebar}
-                                        label="Toggle Sidebar"
-                                        align="bottom"
-                                        className="cds-icon-btn" // Ensuring Carbon class
-                                    >
-                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                            <line x1="3" y1="12" x2="21" y2="12"></line>
-                                            <line x1="3" y1="6" x2="21" y2="6"></line>
-                                            <line x1="3" y1="18" x2="21" y2="18"></line>
-                                        </svg>
-                                    </IconButton>
-                                )}
-                            </div>
-
-                            <div style={{ pointerEvents: 'auto' }}>
-                                <OverflowMenu
-                                    renderIcon={Settings}
-                                    flipped
-                                    size="sm"
-                                    ariaLabel="Settings"
-                                    iconDescription="Settings"
-                                    title="Theme Settings"
-                                >
-                                    <OverflowMenuItem itemText="System Theme" onClick={() => setThemeMode('system')} requireTitle />
-                                    <OverflowMenuItem itemText="Dark Theme" onClick={() => setThemeMode('dark')} requireTitle />
-                                    <OverflowMenuItem itemText="Light Theme" onClick={() => setThemeMode('light')} requireTitle />
-                                </OverflowMenu>
+                    
+                    <div className="app-body">
+                        <Sidebar
+                            activeTool={activeTool}
+                            setActiveTool={setActiveTool}
+                            isVisible={isSidebarOpen}
+                        />
+
+                        <main className="main-content">
+                            <div className="content-area">
+                                {renderTool()}
                             </div>
-                        </div>
-
-
-                        <div className="content-area" style={{ marginTop: '0px' }}>
-                            {renderTool()}
-                        </div>
-                    </main>
-
-                    {isSidebarOpen && (
-                        <div style={{ position: 'absolute', top: '10px', left: '215px', zIndex: 900 }}>
-                            <IconButton
-                                kind="ghost"
-                                size="sm"
-                                onClick={toggleSidebar}
-                                label="Close Sidebar"
-                                align="bottom"
-                            >
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                    <path d="M18 6L6 18M6 6l12 12"></path>
-                                </svg>
-                            </IconButton>
-                        </div>
-                    )}
+                        </main>
+                    </div>
                 </div>
             </Theme>
         </ErrorBoundary>
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index a55c28e..564830a 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import logo from '../assets/images/logo-universal.png';
 
-export function Sidebar({ activeTool, setActiveTool, isVisible, toggleSidebar }) {
+export function Sidebar({ activeTool, setActiveTool, isVisible }) {
     const [searchTerm, setSearchTerm] = useState('');
     const [pinned, setPinned] = useState(() => {
         try {
@@ -52,18 +51,22 @@ export function Sidebar({ activeTool, setActiveTool, isVisible, toggleSidebar })
 
     return (
         <div className={`sidebar ${!isVisible ? 'hidden' : ''}`}>
-            <div className="logo-area">
-                <img src={logo} alt="Logo" />
-                <h1>DevToolbox</h1>
-            </div>
-
-            <div style={{ padding: '10px 10px 0', minHeight: '52px' }}>
+            {/* Search bar at the top */}
+            <div style={{ padding: '12px 12px 8px' }}>
                 <input
                     type="text"
-                    placeholder="Search..."
+                    placeholder="Search tools..."
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    style={{ width: '100%', padding: '6px 10px', fontSize: '13px', backgroundColor: 'rgba(0,0,0,0.2)', border: '1px solid var(--border-color)' }}
+                    style={{ 
+                        width: '100%', 
+                        padding: '8px 12px', 
+                        fontSize: '13px', 
+                        backgroundColor: 'var(--cds-field)', 
+                        border: '1px solid var(--border-color)',
+                        borderRadius: '4px',
+                        color: 'var(--cds-text-primary)'
+                    }}
                 />
             </div>
 
@@ -134,3 +137,5 @@ export function Sidebar({ activeTool, setActiveTool, isVisible, toggleSidebar })
         </div>
     );
 }
+
+export default Sidebar;
diff --git a/frontend/src/components/TitleBar.jsx b/frontend/src/components/TitleBar.jsx
new file mode 100644
index 0000000..c7cd89e
--- /dev/null
+++ b/frontend/src/components/TitleBar.jsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { Menu, Close, Subtract, Maximize, Settings } from '@carbon/icons-react';
+
+export function TitleBar({ 
+  isSidebarOpen, 
+  toggleSidebar, 
+  appName = 'DevToolbox',
+  themeMode,
+  setThemeMode 
+}) {
+  // Detect if running in desktop mode
+  const isDesktop = typeof window !== 'undefined' && window.wails;
+  
+  // Detect platform
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isMac = userAgent.includes('mac') && !userAgent.includes('iphone') && !userAgent.includes('ipad');
+
+  // Don't render in browser mode
+  if (!isDesktop) {
+    return null;
+  }
+
+  // Window control handlers for non-macOS platforms
+  const handleMinimize = () => {
+    if (window.wails?.WindowMinimise) {
+      window.wails.WindowMinimise();
+    }
+  };
+
+  const handleMaximize = () => {
+    if (window.wails?.WindowMaximise) {
+      window.wails.WindowMaximise();
+    }
+  };
+
+  const handleClose = () => {
+    if (window.wails?.Quit) {
+      window.wails.Quit();
+    }
+  };
+
+  return (
+    <div className={`titlebar ${isMac ? 'macos' : 'other-platform'}`}>
+      {/* Left section - Sidebar toggle (always visible on desktop) */}
+      <div className="titlebar-left">
+        <IconButton
+          kind="ghost"
+          size="sm"
+          onClick={toggleSidebar}
+          label={isSidebarOpen ? 'Hide Sidebar' : 'Show Sidebar'}
+          align="bottom"
+          className="titlebar-sidebar-toggle"
+        >
+          <Menu size={16} />
+        </IconButton>
+      </div>
+
+      {/* Center section - App name */}
+      <div className="titlebar-center">
+        <span className="titlebar-appname">{appName}</span>
+      </div>
+
+      {/* Right section - Settings + Window controls */}
+      <div className="titlebar-right">
+        {/* Settings menu */}
+        <OverflowMenu
+          renderIcon={Settings}
+          flipped
+          size="sm"
+          ariaLabel="Settings"
+          iconDescription="Settings"
+          title="Theme Settings"
+          className="titlebar-settings"
+        >
+          <OverflowMenuItem itemText="System Theme" onClick={() => setThemeMode('system')} requireTitle />
+          <OverflowMenuItem itemText="Dark Theme" onClick={() => setThemeMode('dark')} requireTitle />
+          <OverflowMenuItem itemText="Light Theme" onClick={() => setThemeMode('light')} requireTitle />
+        </OverflowMenu>
+
+        {/* Window controls for non-macOS platforms */}
+        {!isMac && (
+          <div className="window-controls">
+            <IconButton
+              kind="ghost"
+              size="sm"
+              onClick={handleMinimize}
+              label="Minimize"
+              className="window-control-btn minimize"
+            >
+              <Subtract size={16} />
+            </IconButton>
+            <IconButton
+              kind="ghost"
+              size="sm"
+              onClick={handleMaximize}
+              label="Maximize"
+              className="window-control-btn maximize"
+            >
+              <Maximize size={16} />
+            </IconButton>
+            <IconButton
+              kind="ghost"
+              size="sm"
+              onClick={handleClose}
+              label="Close"
+              className="window-control-btn close"
+            >
+              <Close size={16} />
+            </IconButton>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TitleBar;