diff --git a/packages/devtools/src/components/agent-flow-visualization.tsx b/packages/devtools/src/components/agent-flow-visualization.tsx
index b6c0296b..94af0795 100644
--- a/packages/devtools/src/components/agent-flow-visualization.tsx
+++ b/packages/devtools/src/components/agent-flow-visualization.tsx
@@ -413,16 +413,15 @@ export function AgentFlowVisualization({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "#09090b",
+          background: "#000000",
         }}
       >
         <div className="ai-devtools-state-explorer-empty-content">
-          <div className="ai-devtools-state-explorer-empty-title">
-            No Agent Activity
+          <div className="ai-devtools-empty-title">
+            Waiting for agents...
           </div>
-          <div className="ai-devtools-state-explorer-empty-description">
-            Start a conversation with an agent-based
-            <br /> system to see the orchestration flow here
+          <div className="ai-devtools-empty-subtitle">
+            Start a conversation with an agent-based system to see the orchestration flow.
           </div>
         </div>
       </div>
diff --git a/packages/devtools/src/components/devtools-panel.tsx b/packages/devtools/src/components/devtools-panel.tsx
index d1285c99..d1e40cc1 100644
--- a/packages/devtools/src/components/devtools-panel.tsx
+++ b/packages/devtools/src/components/devtools-panel.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import {
-  ViewList as BottomPanelIcon,
-  Clear as ClearIcon,
+  CallToAction as BottomPanelIcon,
+  NotInterested as ClearIcon,
   Close as CloseIcon,
-  Pause as PauseIcon,
-  PlayArrow as PlayArrowIcon,
-  ViewSidebar as RightPanelIcon,
+  PlayCircle as PlayArrowIcon,
+  StopCircle as StopIcon,
 } from "@mui/icons-material";
 import React, {
   useCallback,
@@ -406,7 +405,7 @@ export function DevtoolsPanel({
                 // Delay hiding to allow clicking on suggestions
                 setTimeout(() => setShowSearchSuggestions(false), 200);
               }}
-              placeholder={`${filteredEvents.length} total events found...`}
+              placeholder={`${filteredEvents.length} events found…`}
               className="ai-devtools-search-input-main"
             />
 
@@ -543,10 +542,10 @@ export function DevtoolsPanel({
           <button
             type="button"
             onClick={onToggleCapturing}
-            className={`ai-devtools-btn ${isReceivingEvents ? "receiving" : ""}`}
+            className={`ai-devtools-btn ai-devtools-btn--with-icon ${isReceivingEvents ? "receiving" : ""}`}
           >
             {isCapturing ? (
-              <PauseIcon className="ai-devtools-btn-icon" />
+              <StopIcon className="ai-devtools-btn-icon" />
             ) : (
               <PlayArrowIcon className="ai-devtools-btn-icon" />
             )}
@@ -557,31 +556,33 @@ export function DevtoolsPanel({
           <button
             type="button"
             onClick={onClearEvents}
-            className="ai-devtools-btn"
+            className="ai-devtools-btn ai-devtools-btn--with-icon"
           >
             <ClearIcon className="ai-devtools-btn-icon" />
-            <span>clear</span>
+            <span>Clear</span>
           </button>
 
           {/* Position Toggle Button */}
           <button
             type="button"
             onClick={onTogglePosition}
-            className="ai-devtools-position-toggle-btn"
+            className="ai-devtools-btn ai-devtools-btn--icon"
             title={`Switch to ${config.position === "bottom" ? "right" : "bottom"} panel`}
           >
-            {config.position === "bottom" ? (
-              <RightPanelIcon className="ai-devtools-position-toggle-icon" />
-            ) : (
-              <BottomPanelIcon className="ai-devtools-position-toggle-icon" />
-            )}
+            <BottomPanelIcon
+              className="ai-devtools-position-toggle-icon"
+              style={{
+                transform:
+                  config.position === "bottom" ? "rotate(-90deg)" : "none",
+              }}
+            />
           </button>
 
           {/* Close */}
           <button
             type="button"
             onClick={onClose}
-            className="ai-devtools-close-btn"
+            className="ai-devtools-btn ai-devtools-btn--icon ai-devtools-btn--close"
           >
             <CloseIcon className="ai-devtools-close-icon" />
           </button>
@@ -706,56 +707,26 @@ export function DevtoolsPanel({
       )}
 
       {/* Tabs Navigation */}
-      <div
-        style={{
-          display: "flex",
-          gap: 0,
-          borderBottom: "1px solid #27272a",
-        }}
-      >
+      <div className="ai-devtools-tabs-navigation">
         <button
+          className={`ai-devtools-btn ai-devtools-btn--tab ${activeTab === "events" ? "ai-devtools-btn--tab-active" : ""}`}
           type="button"
           onClick={() => setActiveTab("events")}
-          style={{
-            padding: "8px 16px",
-            background: "transparent",
-            border: "none",
-            color: activeTab === "events" ? "#e5e7eb" : "#666666",
-            fontSize: 11,
-            cursor: "pointer",
-            transition: "all 0.2s",
-          }}
         >
           Events
         </button>
         <button
+          className={`ai-devtools-btn ai-devtools-btn--tab ${activeTab === "agents" ? "ai-devtools-btn--tab-active" : ""}`}
           type="button"
           onClick={() => setActiveTab("agents")}
-          style={{
-            padding: "8px 16px",
-            background: "transparent",
-            border: "none",
-            color: activeTab === "agents" ? "#e5e7eb" : "#666666",
-            fontSize: 11,
-            cursor: "pointer",
-            transition: "all 0.2s",
-          }}
         >
           Agents
         </button>
         {isStoreAvailable && (
           <button
+            className={`ai-devtools-btn ai-devtools-btn--tab ${activeTab === "state" ? "ai-devtools-btn--tab-active" : ""}`}
             type="button"
             onClick={() => setActiveTab("state")}
-            style={{
-              padding: "8px 16px",
-              background: "transparent",
-              border: "none",
-              color: activeTab === "state" ? "#e5e7eb" : "#666666",
-              fontSize: 11,
-              cursor: "pointer",
-              transition: "all 0.2s",
-            }}
           >
             State
           </button>
@@ -802,7 +773,6 @@ export function DevtoolsPanel({
             </div>
           </div>
         </div>
-
       </div>
     </div>
   );
diff --git a/packages/devtools/src/components/event-list.tsx b/packages/devtools/src/components/event-list.tsx
index 41c5cdaf..d60dced2 100644
--- a/packages/devtools/src/components/event-list.tsx
+++ b/packages/devtools/src/components/event-list.tsx
@@ -20,9 +20,9 @@ export function EventList({
     return (
       <div className={`ai-devtools-empty-state ${className}`}>
         <div className="ai-devtools-empty-content">
-          <div className="ai-devtools-empty-title">▸ waiting for events...</div>
+          <div className="ai-devtools-empty-title">Waiting for events…</div>
           <div className="ai-devtools-empty-subtitle">
-            start streaming to capture events
+            Start streaming to capture events.
           </div>
         </div>
       </div>
diff --git a/packages/devtools/src/components/state-data-explorer.tsx b/packages/devtools/src/components/state-data-explorer.tsx
index 5330f102..ef896d30 100644
--- a/packages/devtools/src/components/state-data-explorer.tsx
+++ b/packages/devtools/src/components/state-data-explorer.tsx
@@ -36,10 +36,10 @@ export function StateDataExplorer({
       <div className={`ai-devtools-state-explorer-empty ${className}`}>
         <div className="ai-devtools-state-explorer-empty-content">
           <div className="ai-devtools-state-explorer-empty-icon">⚡</div>
-          <div className="ai-devtools-state-explorer-empty-title">
+          <div className="ai-devtools-empty-title">
             No State Data
           </div>
-          <div className="ai-devtools-state-explorer-empty-description">
+          <div className="ai-devtools-empty-subtitle">
             Select a store to view its current state
           </div>
         </div>
diff --git a/packages/devtools/src/styles.css b/packages/devtools/src/styles.css
index f3352af3..0dca2b72 100644
--- a/packages/devtools/src/styles.css
+++ b/packages/devtools/src/styles.css
@@ -226,7 +226,6 @@
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0.375rem 0.75rem !important;
   background-color: rgba(0, 0, 0, 0.8) !important; /* Black with opacity */
   border-bottom: 1px solid #333333 !important; /* Dark gray border */
   overflow: visible !important;
@@ -269,7 +268,8 @@
 .ai-devtools-header-right {
   display: flex !important;
   align-items: center !important;
-  gap: 0.75rem !important;
+  gap: 0.5rem !important;
+  padding: 0.5rem !important;
 }
 
 /* Main Search Bar */
@@ -282,7 +282,6 @@
   border-radius: 0 !important;
   padding: 0 !important;
   flex: 1 !important;
-  margin-right: 1rem !important;
   min-height: 2.5rem !important;
   overflow: visible !important;
 }
@@ -290,15 +289,14 @@
 .ai-devtools-search-input-container {
   display: flex !important;
   align-items: center !important;
-  gap: 0.5rem !important;
+  align-self: stretch !important;
   width: 100% !important;
-  min-height: 2.5rem !important;
-  padding: 0.5rem 0.75rem !important;
   background-color: transparent !important;
   border: none !important;
   border-right: 1px solid #333333 !important;
   border-radius: 0 !important;
   position: relative !important;
+  padding-right: 0.5rem !important;
 }
 
 .ai-devtools-search-input-main {
@@ -310,8 +308,10 @@
   font-family:
     "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace !important;
-  font-size: 0.875rem !important;
+    font-size: 0.75rem !important;
   line-height: 1.2 !important;
+  height: 100% !important;
+  padding: 0 0.5rem !important;
 }
 
 .ai-devtools-search-input-main::placeholder {
@@ -633,7 +633,7 @@
   text-transform: uppercase !important;
   letter-spacing: 0.05em !important;
   background-color: #111111 !important;
-  border-bottom: 1px solid #222222 !important;
+  border-bottom: 1px solid #333333 !important;
 }
 
 .ai-devtools-suggestion-options {
@@ -650,7 +650,7 @@
   padding-right: 2.5rem !important;
   background-color: transparent !important;
   border: none !important;
-  border-bottom: 1px solid #222222 !important;
+  border-bottom: 1px solid #333333 !important;
   color: #cccccc !important;
   font-family:
     "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -723,12 +723,18 @@
   font-style: italic !important;
 }
 
+.ai-devtools-tabs-navigation {
+  display: flex !important;
+  gap: 0 !important;
+  border-bottom: 1px solid #333 !important;
+}
+
 /* Button styles */
 .ai-devtools-btn {
   display: flex !important;
   align-items: center !important;
-  gap: 0.25rem !important;
-  padding: 0.125rem 0.375rem !important;
+  gap: 0.225rem !important;
+  padding: 0 0.5rem !important;
   font-size: 10px !important;
   font-family:
     "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -738,11 +744,40 @@
   color: #cccccc !important; /* Light gray text */
   cursor: pointer !important;
   transition: all 0.15s ease !important;
+  height: 24px !important;
+}
+
+.ai-devtools-btn--with-icon {
+    padding-left: 0.4rem !important;
+}
+
+.ai-devtools-btn--icon {
+    width: 24px !important;
+    padding: 0 !important;
+  }
+
+.ai-devtools-btn--tab {
+  border: none !important;
+  height: 26px !important;
+}
+
+.ai-devtools-btn--tab-active {
+  color: #e5e7eb !important;
+  background-color: #1a1a1a !important;
+}
+
+.ai-devtools-btn--tab:not(.ai-devtools-btn--tab-active):hover {
+    background-color: transparent !important;
+}
+  
+.ai-devtools-btn--close {
+    border: none !important;
 }
 
 .ai-devtools-btn:hover {
   background-color: #1a1a1a !important; /* Dark background on hover */
   border-color: #555555 !important; /* Lighter border on hover */
+  color: #ffffff !important;
 }
 
 .ai-devtools-btn.active {
@@ -751,52 +786,19 @@
   border-color: #555555 !important; /* Lighter active border */
 }
 
-.ai-devtools-btn-icon {
-  width: 0.625rem !important;
-  height: 0.625rem !important;
+.ai-devtools-btn--close:hover {
+    color: #ffffff !important;
+    background-color: transparent !important;
 }
 
-.ai-devtools-close-btn {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 0.125rem !important;
-  color: #cccccc !important; /* Light gray text */
-  cursor: pointer !important;
-  transition: color 0.15s ease !important;
-}
-
-.ai-devtools-close-btn:hover {
-  color: #ffffff !important; /* White on hover */
+.ai-devtools-btn-icon {
+  width: 0.725rem !important;
+  height: 0.725rem !important;
 }
 
 .ai-devtools-close-icon {
-  width: 0.75rem !important;
-  height: 0.75rem !important;
-}
-
-/* Position Toggle Button */
-.ai-devtools-position-toggle-btn {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 22px !important;
-  height: 22px !important;
-  padding: 0 !important;
-  font-size: 10px !important;
-  font-family:
-    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace !important;
-  border: 1px solid #333333 !important; /* Dark gray border */
-  background-color: transparent !important;
-  color: #cccccc !important; /* Light gray text */
-  cursor: pointer !important;
-  transition: all 0.15s ease !important;
-}
-
-.ai-devtools-position-toggle-btn:hover {
-  background-color: #1a1a1a !important; /* Dark background on hover */
-  border-color: #555555 !important; /* Lighter border on hover */
+    width: 1rem !important;
+    height: 1rem !important;
 }
 
 .ai-devtools-position-toggle-icon {
@@ -827,7 +829,7 @@
 
 /* Event item styles */
 .ai-devtools-event-item {
-  border-bottom: 1px solid #222222 !important; /* Subtle border like terminal */
+  border-bottom: 1px solid #333333 !important; /* Subtle border like terminal */
 }
 
 .ai-devtools-event-header {
@@ -1052,7 +1054,7 @@
 
 .ai-devtools-session-events {
   background-color: #0a0a0a !important; /* Session events background */
-  border-top: 1px solid #222222 !important;
+  border-top: 1px solid #333333 !important;
 }
 
 .ai-devtools-session-event {
@@ -1062,7 +1064,7 @@
 }
 
 .ai-devtools-session-event:last-child {
-  border-bottom: 1px solid #222222 !important; /* Add border to last event */
+  border-bottom: 1px solid #333333 !important; /* Add border to last event */
 }
 
 .ai-devtools-event-timestamp {
@@ -1183,11 +1185,10 @@
 }
 
 .ai-devtools-empty-state {
-  margin-top: 1rem;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  height: 8rem !important;
+  height: 100% !important;
   color: #cccccc !important; /* Light gray */
   font-family:
     "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -1201,12 +1202,13 @@
 .ai-devtools-empty-title {
   font-size: 0.875rem !important;
   margin-bottom: 0.5rem !important;
-  color: #ffffff !important; /* White text */
+  color: #cccccc !important; /* White text */
 }
 
 .ai-devtools-empty-subtitle {
   font-size: 0.75rem !important;
   color: #888888 !important; /* Medium gray */
+  max-width: 300px !important;
 }
 
 /* Filter styles */
@@ -1663,7 +1665,7 @@
   right: -20px !important;
   transform: none !important;
   background-color: #0a0a0a !important;
-  border: 1px solid #222222 !important;
+  border: 1px solid #333333 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   z-index: 2147483648 !important;
@@ -2042,13 +2044,13 @@
 
 .ai-devtools-state-change-item {
   padding: 0.75rem 1rem !important;
-  border-bottom: 1px solid #222222 !important;
+  border-bottom: 1px solid #333333 !important;
   cursor: pointer !important;
   transition: background-color 0.2s ease !important;
 }
 
 .ai-devtools-state-change-item:hover {
-  background: #222222 !important;
+  background: #333333 !important;
 }
 
 .ai-devtools-state-change-item.selected {