src/routes/Apps/Apps.scss

@@ -11,6 +11,76 @@
   @extend .page-content;
 }
 
+// Compact stats row
+.stats-row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  margin-bottom: $spacing-xl;
+  flex-wrap: wrap;
+}
+
+.stat-chip {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background: white;
+  border: 2px solid $border-color;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: all $transition-base;
+  font-size: $font-size-base;
+
+  &:hover:not(:disabled) {
+    border-color: $primary;
+    transform: translateY(-2px);
+    box-shadow: $shadow-sm;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.active {
+    border-color: $primary;
+    background: rgba($primary, 0.05);
+  }
+
+  .stat-label {
+    color: $text-secondary;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+  }
+
+  .stat-value {
+    color: $text-primary;
+    font-size: $font-size-xl;
+    font-weight: $font-weight-bold;
+    min-width: 24px;
+    text-align: center;
+  }
+}
+
+.reset-filters-btn {
+  padding: $spacing-sm $spacing-md;
+  background: $bg-secondary;
+  border: 2px solid $border-color;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: all $transition-base;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  color: $text-secondary;
+
+  &:hover {
+    background: white;
+    color: $text-primary;
+    border-color: $primary;
+  }
+}
+
 // Apps table specific styles
 .apps-table-container {
   @include card;
@@ -114,21 +184,28 @@
   .action-btn {
     background: none;
     border: 1px solid $border-color;
-    padding: $spacing-xs $spacing-sm;
+    padding: $spacing-xs $spacing-md;
     border-radius: $radius-sm;
     cursor: pointer;
-    font-size: $font-size-base;
+    font-size: $font-size-sm;
     color: $text-primary;
+    font-weight: $font-weight-medium;
     transition: all $transition-base;
 
     &:hover {
-      background-color: $bg-tertiary;
-      transform: scale(1.1);
+      background-color: $primary;
+      color: white;
+      border-color: $primary;
     }
 
     &.upgrade {
       border-color: $warning;
       color: $warning;
+
+      &:hover {
+        background-color: $warning;
+        color: white;
+      }
     }
   }
-}
+}

src/routes/Apps/Apps.tsx

@@ -14,7 +14,8 @@ export const Apps: React.FC = () => {
   const [filterServer, setFilterServer] = useState<string>('all');
   const [filterStatus, setFilterStatus] = useState<string>('all');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
-
+  const [showChaosOnly, setShowChaosOnly] = useState(false);
+  
   const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
@@ -86,6 +87,28 @@ export const Apps: React.FC = () => {
     return { total, needsUpgrade, chaosApps, totalServers };
   }, [allApps, servers]);
 
+  const resetFilters = () => {
+    setSearchTerm('');
+    setFilterServer('all');
+    setShowChaosOnly(false);
+    setShowUpgradesOnly(false);
+  };
+
+  const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
+  const toggleChaos = () => setShowChaosOnly(prev => !prev);
+
+  // Show only apps that need upgrades
+  const filterByUpgrades = () => {
+    setShowUpgradesOnly(true);
+    setFilterStatus('all');
+  };
+ 
+  // Show only chaos apps
+  const filterByChaos = () => {
+    setFilterStatus('chaos');
+    setShowUpgradesOnly(false);
+  };
+
   if (loading) {
     return (
       <div className="apps-page">
@@ -117,32 +140,46 @@ export const Apps: React.FC = () => {
           <p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.total}</p>
-              <p className="stat-label">Total Apps</p>
-            </div>
-          </div>
-          <div className="stat-card upgrade">
-            <div className="stat-info">
-              <p className="stat-number">{stats.needsUpgrade}</p>
-              <p className="stat-label">Upgrades Available</p>
-            </div>
-          </div>
-          <div className="stat-card chaos">
-            <div className="stat-info">
-              <p className="stat-number">{stats.chaosApps}</p>
-              <p className="stat-label">Chaos Mode</p>
-            </div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalServers}</p>
-              <p className="stat-label">Servers</p>
-            </div>
-          </div>
+        {/* Compact Stats Overview */}
+        <div className="stats-row">
+          <button
+            className="stat-chip"
+            onClick={resetFilters}
+            title="Click to show all apps"
+            > 
+            <span className="stat-label">Apps</span>
+            <span className="stat-value">{stats.total}</span>
+          </button>
+          
+          <button
+            className="stat-chip"
+            onClick={() => navigate('/servers')}
+            title="View servers"
+          >
+            <span className="stat-label">Servers</span>
+            <span className="stat-value">{stats.totalServers}</span>
+          </button>
+          
+          <button
+            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
+            onClick={toggleUpgrades}
+            title="Click to toggle apps with upgrades available"
+            disabled={stats.needsUpgrade === 0}
+          >
+            <span className="stat-label">Upgrades</span>
+            <span className="stat-value">{stats.needsUpgrade}</span>
+          </button>
+          
+          <button
+            className={`stat-chip ${showChaosOnly ? 'active' : ''}`}
+            onClick={toggleChaos}
+            title="Click to toggle chaos mode apps"
+            disabled={stats.chaosApps === 0}
+          >
+            <span className="stat-label">Chaos</span>
+            <span className="stat-value">{stats.chaosApps}</span>
+          </button>
+          
         </div>
 
         {/* Filters */}
@@ -161,21 +198,6 @@ export const Apps: React.FC = () => {
               <option key={server} value={server}>{server}</option>
             ))}
           </select>
-
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
-            <option value="all">All Status</option>
-            <option value="stable">Stable</option>
-            <option value="chaos">Chaos Mode</option>
-          </select>
-
-          <label className="checkbox-filter">
-            <input
-              type="checkbox"
-              checked={showUpgradesOnly}
-              onChange={(e) => setShowUpgradesOnly(e.target.checked)}
-            />
-            <span>Show only apps with upgrades</span>
-          </label>
         </div>
 
         {/* Apps Table */}

src/routes/Servers/Server.tsx

@@ -175,7 +175,7 @@ export const Server: React.FC = () => {
               <span className="host-badge">{server.host}</span>
               {server.upgradeCount > 0 && (
                 <span className="upgrade-badge">
-                  ⬆️ {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
+                  {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
                 </span>
               )}
             </div>
@@ -187,14 +187,14 @@ export const Server: React.FC = () => {
               onClick={() => handleAction('refresh')}
               disabled={!!actionLoading}
             >
-              {actionLoading === 'refresh' ? 'Refreshing...' : '🔄 Refresh'}
+              {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
             </button>
             <button 
               className="action-btn primary"
               onClick={() => handleAction('deploy-all')}
               disabled={!!actionLoading}
             >
-              {actionLoading === 'deploy-all' ? 'Deploying...' : '🚀 Deploy All'}
+              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
             </button>
           </div>
         </div>

src/routes/Servers/Servers.tsx

@@ -20,59 +20,46 @@ export const Servers: React.FC = () => {
   const [error, setError] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
+  const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
 
   const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
+        let serversData, appsData;
+        
         if (isMockMode) {
           const { mockApiService } = await import('../../services/mockApi');
-          const [serversData, appsData] = await Promise.all([
+          [serversData, appsData] = await Promise.all([
             mockApiService.getServers(),
             mockApiService.getAppsGrouped(),
           ]);
-          
-          // Enrich servers with stats from apps data
-          const enrichedServers = serversData.map(server => {
-            const serverStats = appsData[server.name];
-            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-            
-            return {
-              ...server,
-              appCount: serverStats?.appCount || 0,
-              versionCount: serverStats?.versionCount || 0,
-              latestCount: serverStats?.latestCount || 0,
-              upgradeCount: serverStats?.upgradeCount || 0,
-              chaosCount,
-            };
-          });
-          
-          setServers(enrichedServers);
         } else {
-          const [serversData, appsData] = await Promise.all([
+          [serversData, appsData] = await Promise.all([
             apiService.getServers(),
             apiService.getAppsGrouped(),
           ]);
-          
-          // Enrich servers with stats from apps data
-          const enrichedServers = serversData.map(server => {
-            const serverStats = appsData[server.name];
-            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-            
-            return {
-              ...server,
-              appCount: serverStats?.appCount || 0,
-              versionCount: serverStats?.versionCount || 0,
-              latestCount: serverStats?.latestCount || 0,
-              upgradeCount: serverStats?.upgradeCount || 0,
-              chaosCount,
-            };
-          });
-          
-          setServers(enrichedServers);
         }
+        
+        // Enrich servers with stats from apps data
+        const enrichedServers = serversData.map(server => {
+          const serverStats = appsData[server.name];
+          const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
+          
+          return {
+            ...server,
+            appCount: serverStats?.appCount || 0,
+            versionCount: serverStats?.versionCount || 0,
+            latestCount: serverStats?.latestCount || 0,
+            upgradeCount: serverStats?.upgradeCount || 0,
+            chaosCount,
+          };
+        });
+        
+        setServers(enrichedServers);
       } catch (err) {
+        console.error('Error loading servers:', err);
         setError(err instanceof Error ? err.message : 'Failed to load servers');
       } finally {
         setLoading(false);
@@ -94,26 +81,32 @@ export const Servers: React.FC = () => {
 
   // Filter and sort servers
   const filteredServers = useMemo(() => {
-    const filtered = servers.filter(server =>
+  const filtered = servers.filter(server => {
+    const matchesSearch =
       server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      server.host.toLowerCase().includes(searchTerm.toLowerCase())
-    );
+      server.host.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
+    return matchesSearch && matchesUpgrades;
+  });
 
-    // Sort
-    filtered.sort((a, b) => {
-      switch (sortBy) {
-        case 'apps':
-          return b.appCount - a.appCount;
-        case 'upgrades':
-          return b.upgradeCount - a.upgradeCount;
-        case 'name':
-        default:
-          return a.name.localeCompare(b.name);
-      }
-    });
+  filtered.sort((a, b) => {
+    switch (sortBy) {
+      case 'apps':
+        return b.appCount - a.appCount;
+      case 'name':
+      default:
+        return a.name.localeCompare(b.name);
+    }
+  });
 
-    return filtered;
-  }, [servers, searchTerm, sortBy]);
+  return filtered;
+}, [servers, searchTerm, sortBy, showUpgradesOnly]);
+
+const resetFilters = () => {
+  setSearchTerm('');
+  setSortBy('name');
+  setShowUpgradesOnly(false);
+};
 
   if (loading) {
     return (
@@ -146,36 +139,53 @@ export const Servers: React.FC = () => {
           <p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalServers}</p>
-              <p className="stat-label">Total Servers</p>
-            </div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalApps}</p>
-              <p className="stat-label">Total Apps</p>
-            </div>
-          </div>
-          <div className="stat-card upgrade">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalUpgrades}</p>
-              <p className="stat-label">Apps Need Upgrade</p>
-            </div>
-          </div>
-          <div className="stat-card chaos">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalChaos}</p>
-              <p className="stat-label">Chaos Apps</p>
-            </div>
-          </div>
+        {/* Compact Stats Row */}
+        <div className="stats-row">
+          <button
+            className="stat-chip"
+            onClick={resetFilters}
+            title="Click to reset filters"
+          >
+            <span className="stat-label">Servers</span>
+            <span className="stat-value">{stats.totalServers}</span>
+          </button>
+
+          <button
+            className="stat-chip"
+            onClick={() => navigate('/apps')}
+            title="View all apps"
+          >
+            <span className="stat-label">Apps</span>
+            <span className="stat-value">{stats.totalApps}</span>
+          </button>
+
+          <button
+            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
+            onClick={() => setShowUpgradesOnly(prev => !prev)}
+            title="Click to filter by servers with upgrades"
+            disabled={stats.totalUpgrades === 0}
+          >
+            <span className="stat-label">Upgrades</span>
+            <span className="stat-value">{stats.totalUpgrades}</span>
+          </button>
+
+          <button
+            className={`stat-chip ${sortBy === 'apps' ? 'active' : ''}`}
+            onClick={() => setSortBy(sortBy === 'apps' ? 'name' : 'apps')}
+            title="Click to sort by app count"
+          >
+            <span className="stat-label">Chaos</span>
+            <span className="stat-value">{stats.totalChaos}</span>
+          </button>
+
+          {(searchTerm || sortBy !== 'name' || showUpgradesOnly) && (
+            <button
+              className="reset-filters-btn"
+              onClick={resetFilters}
+            >
+              Clear filters
+            </button>
+          )}
         </div>
 
         {/* Filters */}
@@ -187,12 +197,6 @@ export const Servers: React.FC = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
             className="search-input"
           />
-
-          <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
-            <option value="name">Sort by Name</option>
-            <option value="apps">Sort by App Count</option>
-            <option value="upgrades">Sort by Upgrades</option>
-          </select>
         </div>
 
         {/* Server Cards */}
@@ -232,13 +236,17 @@ export const Servers: React.FC = () => {
                   </div>
                   {server.upgradeCount > 0 && (
                     <div className="stat-row highlight">
-                      <span className="stat-label">Need Upgrade</span>
+                      <span className="stat-label">
+                        Need Upgrade
+                      </span>
                       <span className="stat-value">{server.upgradeCount}</span>
                     </div>
                   )}
                   {server.chaosCount > 0 && (
                     <div className="stat-row chaos-row">
-                      <span className="stat-label">Chaos Mode</span>
+                      <span className="stat-label">
+                        Chaos Mode
+                      </span>
                       <span className="stat-value">{server.chaosCount}</span>
                     </div>
                   )}
@@ -267,7 +275,6 @@ export const Servers: React.FC = () => {
 
                 {server.upgradeCount > 0 && (
                   <div className="server-alert">
-                    <span className="alert-icon">⚠️</span>
                     <span className="alert-text">
                       {server.upgradeCount} app{server.upgradeCount > 1 ? 's' : ''} can be upgraded
                     </span>
@@ -284,4 +291,4 @@ export const Servers: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/services/mock-logs.json

@@ -119,7 +119,7 @@
     "logs": [
       {
         "type": "info",
-        "text": "⬆️ Upgrading {appName} to {version}..."
+        "text": "Upgrading {appName} to {version}..."
       },
       {
         "type": "command",
@@ -287,7 +287,7 @@
     "logs": [
       {
         "type": "info",
-        "text": "⬆️ Upgrading all apps on {serverName}..."
+        "text": "Upgrading all apps on {serverName}..."
       },
       {
         "type": "command",