diff --git a/src-tauri/src/panel.rs b/src-tauri/src/panel.rs
index 5833bdcc..edb42ee1 100644
--- a/src-tauri/src/panel.rs
+++ b/src-tauri/src/panel.rs
@@ -115,7 +115,7 @@ pub fn position_panel_at_tray_icon(
 
     let icon_center_x_phys = icon_phys_x + (icon_width_phys / 2);
     let panel_x_phys = icon_center_x_phys - (window_width_phys / 2);
-    let padding_phys = (8.0 * scale_factor).round() as i32;
+    let padding_phys = (-8.0 * scale_factor).round() as i32;
     let panel_y_phys = icon_phys_y + icon_height_phys + padding_phys;
 
     let final_pos = tauri::PhysicalPosition::new(panel_x_phys, panel_y_phys);
diff --git a/src/App.tsx b/src/App.tsx
index 1b4b3e6d..53730e0a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,6 +30,7 @@ import {
 const PANEL_WIDTH = 350;
 const MAX_HEIGHT_FALLBACK_PX = 600;
 const MAX_HEIGHT_FRACTION_OF_MONITOR = 0.8;
+const ARROW_OVERHEAD_PX = 13; // .tray-arrow (7px) + wrapper pt-1.5 (6px)
 
 type PluginState = {
   data: PluginOutput | null
@@ -489,27 +490,29 @@ function App() {
   }
 
   return (
-    <div
-      ref={containerRef}
-      className="bg-card rounded-lg border shadow-lg overflow-hidden select-none"
-      style={maxPanelHeightPx ? { maxHeight: `${maxPanelHeightPx}px` } : undefined}
-    >
-      <div className="flex h-full min-h-0 flex-row">
-        <SideNav
-          activeView={activeView}
-          onViewChange={setActiveView}
-          plugins={navPlugins}
-        />
-        <div className="flex-1 flex flex-col px-3 pt-2 pb-1.5 min-w-0">
-          <div className="flex-1 min-h-0 overflow-y-auto">
-            {renderContent()}
-          </div>
-          <PanelFooter
-            version={appVersion}
-            autoUpdateNextAt={autoUpdateNextAt}
-            updateStatus={updateStatus}
-            onUpdateInstall={triggerInstall}
+    <div ref={containerRef} className="flex flex-col items-center pt-1.5">
+      <div className="tray-arrow" />
+      <div
+        className="bg-card rounded-lg border shadow-lg overflow-hidden select-none w-full"
+        style={maxPanelHeightPx ? { maxHeight: `${maxPanelHeightPx - ARROW_OVERHEAD_PX}px` } : undefined}
+      >
+        <div className="flex h-full min-h-0 flex-row">
+          <SideNav
+            activeView={activeView}
+            onViewChange={setActiveView}
+            plugins={navPlugins}
           />
+          <div className="flex-1 flex flex-col px-3 pt-2 pb-1.5 min-w-0">
+            <div className="flex-1 min-h-0 overflow-y-auto">
+              {renderContent()}
+            </div>
+            <PanelFooter
+              version={appVersion}
+              autoUpdateNextAt={autoUpdateNextAt}
+              updateStatus={updateStatus}
+              onUpdateInstall={triggerInstall}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/index.css b/src/index.css
index 3ec33424..a79045ce 100644
--- a/src/index.css
+++ b/src/index.css
@@ -132,6 +132,28 @@ body,
   padding: 0;
 }
 
+/* Arrow pointing up toward the tray icon */
+.tray-arrow {
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid var(--border);
+  position: relative;
+  flex-shrink: 0;
+}
+.tray-arrow::after {
+  content: "";
+  position: absolute;
+  left: -6px;
+  top: 1.5px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid var(--card);
+}
+
 /* Remove focus rings - this is a menu bar app, not keyboard-navigated */
 *:focus,
 *:focus-visible {