diff --git a/Source/Toolbar/Toolbar.css b/Source/Toolbar/Toolbar.css
index 499d154..813a017 100644
--- a/Source/Toolbar/Toolbar.css
+++ b/Source/Toolbar/Toolbar.css
@@ -1,42 +1,12 @@
 /* Copyright (c) Cratis. All rights reserved. */
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
-/* ── Toolbar container ───────────────────────────────────────────────────── */
-.toolbar {
-    background: var(--surface-card);
-    border: 1px solid var(--surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-/* ── Toolbar button ──────────────────────────────────────────────────────── */
-.toolbar-button {
-    color: var(--text-color-secondary);
-    background: transparent;
-    border: none;
-    transition: background 0.15s, color 0.15s;
-}
-
-.toolbar-button:hover {
-    background: var(--surface-100);
-    color: var(--text-color);
-}
-
-.toolbar-button--active {
-    background: var(--primary-color);
-    color: var(--primary-color-text);
-}
-
-.toolbar-button--active:hover {
-    background: var(--primary-color);
-    color: var(--primary-color-text);
-}
-
 /* ── Toolbar project name label ──────────────────────────────────────────── */
 .toolbar-project-name {
     padding: 0 8px;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--text-color);
+    color: #f3f4f6;
     white-space: nowrap;
 }
 
@@ -102,8 +72,9 @@
     align-items: center;
     gap: 0.25rem;
     padding: 0.5rem;
-    background: var(--surface-card);
-    border: 1px solid var(--surface-border);
+    /* bg-gray-800 / border-white/10 — matches the Toolbar container Tailwind classes */
+    background: #1f2937;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     border-radius: 1rem;
     white-space: nowrap;
diff --git a/Source/Toolbar/Toolbar.tsx b/Source/Toolbar/Toolbar.tsx
index a273bcf..46ce351 100644
--- a/Source/Toolbar/Toolbar.tsx
+++ b/Source/Toolbar/Toolbar.tsx
@@ -2,7 +2,6 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { ReactNode } from 'react';
-import './Toolbar.css';
 
 /** Props for the {@link Toolbar} component. */
 export interface ToolbarProps {
@@ -19,9 +18,9 @@ export interface ToolbarProps {
  */
 export const Toolbar = ({ children, orientation = 'vertical' }: ToolbarProps) => (
     <div
-        className={`toolbar inline-flex ${
+        className={`inline-flex ${
             orientation === 'horizontal' ? 'flex-row' : 'flex-col'
-        } items-center gap-1 p-2 rounded-2xl`}
+        } items-center gap-1 p-2 rounded-2xl bg-gray-800 border border-white/10 shadow-md`}
     >
         {children}
     </div>
diff --git a/Source/Toolbar/ToolbarButton.tsx b/Source/Toolbar/ToolbarButton.tsx
index 4d3ad71..80f5d41 100644
--- a/Source/Toolbar/ToolbarButton.tsx
+++ b/Source/Toolbar/ToolbarButton.tsx
@@ -27,7 +27,9 @@ export interface ToolbarButtonProps {
  * Uses the shared {@link Tooltip} component for consistent hover labels.
  */
 export const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipPosition = 'right' }: ToolbarButtonProps) => {
-    const activeClass = active ? 'toolbar-button--active' : '';
+    const buttonStateClass = active
+        ? 'bg-blue-600 text-white'
+        : 'text-gray-400 hover:bg-gray-700 hover:text-gray-100';
 
     return (
         <Tooltip content={tooltip} position={tooltipPosition}>
@@ -35,7 +37,7 @@ export const ToolbarButton = ({ icon, tooltip, active = false, onClick, tooltipP
                 type='button'
                 aria-label={tooltip}
                 onClick={onClick}
-                className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}
+                className={`w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-colors duration-150 ${buttonStateClass}`}
             >
                 <i className={`${icon} text-lg`} />
             </button>
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index 5216008..a9c655f 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { ReactNode, useEffect, useRef, useState } from 'react';
+import './Toolbar.css';
 import { Tooltip } from '../Common/Tooltip';
 import type { TooltipPosition } from '../Common/Tooltip';
 
@@ -63,7 +64,9 @@ export const ToolbarFanOutItem = ({
         };
     }, [isExpanded]);
 
-    const activeClass = isExpanded ? 'toolbar-button--active' : '';
+    const buttonStateClass = isExpanded
+        ? 'bg-blue-600 text-white'
+        : 'text-gray-400 hover:bg-gray-700 hover:text-gray-100';
     const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
     const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
 
@@ -75,7 +78,7 @@ export const ToolbarFanOutItem = ({
                     aria-label={tooltip}
                     aria-expanded={isExpanded}
                     onClick={handleToggle}
-                    className={`toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`}
+                    className={`w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-colors duration-150 ${buttonStateClass}`}
                 >
                     <i className={`${icon} text-lg`} />
                 </button>
diff --git a/Source/Toolbar/ToolbarSection.tsx b/Source/Toolbar/ToolbarSection.tsx
index ac97e97..4276dbd 100644
--- a/Source/Toolbar/ToolbarSection.tsx
+++ b/Source/Toolbar/ToolbarSection.tsx
@@ -3,6 +3,7 @@
 
 import { Children, ReactElement, ReactNode, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
+import './Toolbar.css';
 import type { ToolbarContextProps } from './ToolbarContext';
 
 /** Props for the {@link ToolbarSection} component. */