diff --git a/ts_web/elements/upl-statuspage-statusbar.ts b/ts_web/elements/upl-statuspage-statusbar.ts
index 5ef5a97..2fe47f6 100644
--- a/ts_web/elements/upl-statuspage-statusbar.ts
+++ b/ts_web/elements/upl-statuspage-statusbar.ts
@@ -53,160 +53,144 @@ export class UplStatuspageStatusbar extends DeesElement {
         .statusbar-inner {
           display: flex;
           align-items: center;
-          justify-content: center;
-          min-height: 64px;
-          padding: 16px 24px;
-          border-radius: 8px;
-          cursor: pointer;
+          justify-content: space-between;
+          min-height: 56px;
+          padding: 16px 20px;
+          border-radius: 6px;
+          cursor: ${cssManager.bdTheme('default', 'default')};
           transition: all 0.2s ease;
           position: relative;
           overflow: hidden;
           font-weight: 500;
-          font-size: 16px;
-          border: 1px solid transparent;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+          font-size: 14px;
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
         }
 
         .statusbar-inner:hover {
-          transform: translateY(-1px);
-          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+          background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
         }
 
-        .statusbar-inner:active {
-          transform: translateY(0);
+        .status-indicator {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          flex-shrink: 0;
         }
 
-        .statusbar-inner.operational {
+        .statusbar-inner.operational .status-indicator {
           background: ${colors.status.operational};
-          border-color: ${colors.status.operational};
-          color: white;
         }
 
-        .statusbar-inner.degraded {
+        .statusbar-inner.degraded .status-indicator {
           background: ${colors.status.degraded};
-          border-color: ${colors.status.degraded};
-          color: white;
         }
 
-        .statusbar-inner.partial_outage {
+        .statusbar-inner.partial_outage .status-indicator {
           background: ${colors.status.partial};
-          border-color: ${colors.status.partial};
-          color: white;
         }
 
-        .statusbar-inner.major_outage {
+        .statusbar-inner.major_outage .status-indicator {
           background: ${colors.status.major};
-          border-color: ${colors.status.major};
-          color: white;
         }
 
-        .statusbar-inner.maintenance {
+        .statusbar-inner.maintenance .status-indicator {
           background: ${colors.status.maintenance};
-          border-color: ${colors.status.maintenance};
-          color: white;
         }
 
         .status-content {
           display: flex;
-          flex-direction: column;
           align-items: center;
-          gap: 4px;
+          gap: 12px;
+          flex: 1;
         }
 
         .status-main {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: 12px;
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
         }
 
-        .status-icon {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 20px;
-          height: 20px;
-          font-size: 14px;
+        .status-details {
+          font-size: 13px;
+          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
         }
 
         .loading-skeleton {
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: 6px;
+          height: 56px;
+          position: relative;
+          overflow: hidden;
+        }
+        
+        .loading-skeleton::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
           background: ${cssManager.bdTheme(
-            'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
-            'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
+            'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%)',
+            'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)'
           )};
-          background-size: 200% 100%;
           animation: loading 1.5s infinite;
-          height: 64px;
-          border-radius: 8px;
         }
 
         @keyframes loading {
           0% {
-            background-position: 200% 0;
+            transform: translateX(-100%);
           }
           100% {
-            background-position: -200% 0;
+            transform: translateX(200%);
           }
         }
 
-        .status-details {
-          font-size: 14px;
-          opacity: 0.9;
-        }
-
         .last-updated {
-          font-size: 13px;
-          text-align: right;
-          margin-top: 12px;
+          font-size: 12px;
           color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+          white-space: nowrap;
         }
 
         @media (max-width: 640px) {
           .statusbar-inner {
-            font-size: 14px;
+            font-size: 13px;
             padding: 12px 16px;
-            min-height: 56px;
+            min-height: 48px;
           }
           
-          .status-icon {
-            width: 18px;
-            height: 18px;
-            font-size: 12px;
+          .status-content {
+            gap: 10px;
+          }
+          
+          .status-indicator {
+            width: 6px;
+            height: 6px;
+          }
+          
+          .last-updated {
+            font-size: 11px;
           }
         }
     `,
   ]
 
   public render(): TemplateResult {
-    const getStatusIcon = () => {
-      switch (this.overallStatus.status) {
-        case 'operational':
-          return '✓';
-        case 'degraded':
-          return '!';
-        case 'partial_outage':
-          return '⚠';
-        case 'major_outage':
-          return '✕';
-        case 'maintenance':
-          return '🔧';
-        default:
-          return '';
-      }
-    };
-
     const formatLastUpdated = () => {
       const date = new Date(this.overallStatus.lastUpdated);
-      return date.toLocaleString();
-    };
-
-    const handleClick = () => {
-      if (this.expandable) {
-        this.dispatchEvent(new CustomEvent('statusClick', {
-          detail: { status: this.overallStatus },
-          bubbles: true,
-          composed: true
-        }));
-      }
+      const now = new Date();
+      const diff = now.getTime() - date.getTime();
+      const minutes = Math.floor(diff / 60000);
+      
+      if (minutes < 1) return 'Just now';
+      if (minutes < 60) return `${minutes}m ago`;
+      const hours = Math.floor(minutes / 60);
+      if (hours < 24) return `${hours}h ago`;
+      return date.toLocaleDateString();
     };
 
     return html`
@@ -214,21 +198,21 @@ export class UplStatuspageStatusbar extends DeesElement {
         ${this.loading ? html`
           <div class="loading-skeleton"></div>
         ` : html`
-          <div class="statusbar-inner ${this.overallStatus.status}" @click=${handleClick}>
+          <div class="statusbar-inner ${this.overallStatus.status}">
             <div class="status-content">
+              <div class="status-indicator"></div>
               <div class="status-main">
-                <span class="status-icon">${getStatusIcon()}</span>
                 <span>${this.overallStatus.message}</span>
+                ${this.overallStatus.affectedServices > 0 ? html`
+                  <span class="status-details">
+                    · ${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
+                  </span>
+                ` : ''}
               </div>
-              ${this.overallStatus.affectedServices > 0 ? html`
-                <div class="status-details">
-                  ${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
-                </div>
-              ` : ''}
             </div>
-          </div>
-          <div class="last-updated">
-            Last updated: ${formatLastUpdated()}
+            <div class="last-updated">
+              ${formatLastUpdated()}
+            </div>
           </div>
         `}
       </div>