smaller stat cards

.env

@@ -1,2 +1,3 @@
 VITE_API_URL=http://localhost:3000/api
+VITE_WS_URL=ws://localhost:3000
 VITE_MOCK_AUTH=true

.env.example

@@ -1,5 +1,5 @@
 # API base URL for the backend that wraps the abra CLI
 VITE_API_URL=http://localhost:3000/api
 
-# Set to 'true' to bypass authentication for development
+# Set to 'true' to use mock data
 VITE_MOCK_AUTH=true

Netlify.toml

@@ -1,14 +0,0 @@
-[build]
-  command = "npm run build"
-  publish = "dist"
-
-# Environment variables for build
-[build.environment]
-  VITE_MOCK_AUTH = "true"
-  VITE_API_URL = "http://localhost:3000/api"
-
-# Redirect all requests to index.html for client-side routing
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

src/App.tsx

@@ -1,37 +1,28 @@
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
-import { AuthProvider } from './context/AuthContext';
-import { LoginForm } from './routes/Login/LoginForm';
-import { Authenticated } from './components/Authenticated';
-import { Dashboard } from './routes/Authenticated/Dashboard/Dashboard';
-import { Apps } from './routes/Authenticated/Apps/Apps';
-import { AppDetail } from './routes/Authenticated/Apps/App';
-import { Servers } from './routes/Authenticated/Servers/Servers';
-import { Server } from './routes/Authenticated/Servers/Server';
+import { Dashboard } from './routes/Dashboard/Dashboard';
+import { Apps } from './routes/Apps/Apps';
+import { AppDetail } from './routes/Apps/App';
+import { Servers } from './routes/Servers/Servers';
+import { Server } from './routes/Servers/Server';
+import { Recipes } from './routes/Recipes/Recipes';
 
 function App() {
   return (
     <BrowserRouter>
-      <AuthProvider>
-        <Routes>
-          {/* Public routes */}
-          <Route path="/login" element={<LoginForm />} />
-          
-          {/* Protected routes */}
-          <Route element={<Authenticated />}>
-            <Route path="/" element={<Navigate to="/dashboard" replace />} />
-            <Route path="/dashboard" element={<Dashboard />} />
-            <Route path="/apps" element={<Apps />} />
-            <Route path="/apps/:server/:appName" element={<AppDetail />} />
-            <Route path="/servers" element={<Servers />} />
-            <Route path="/servers/:serverName" element={<Server />} />
-          </Route>
-          
+      <Routes>
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/apps" element={<Apps />} />
+          <Route path="/apps/:server/:appName" element={<AppDetail />} />
+          <Route path="/servers" element={<Servers />} />
+          <Route path="/servers/:serverName" element={<Server />} />
+          <Route path="/recipes" element={<Recipes />} />
+
           {/* 404 catch-all */}
           <Route path="*" element={<Navigate to="/dashboard" replace />} />
         </Routes>
-      </AuthProvider>
     </BrowserRouter>
   );
 }
 
-export default App;
+export default App;

src/components/Authenticated.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-
-export const Authenticated: React.FC = () => {
-  const { isAuthenticated, loading } = useAuth();
-
-    console.log('ProtectedRoute:', { isAuthenticated, loading });
-
-  if (loading) {
-    return (
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100vh' 
-      }}>
-        <p>Loading...</p>
-      </div>
-    );
-  }
-
-  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
-};

src/components/Header/Header.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
 import './_Header.scss';
 import logo from '../../assets/coopcloud_logo_grey.svg';
 
@@ -10,13 +9,7 @@ interface HeaderProps {
 }
 
 export const Header: React.FC<HeaderProps> = ({ children }) => {
-  const { user, logout } = useAuth();
   const navigate = useNavigate();
-
-  const handleLogout = async () => {
-    await logout();
-    navigate('/login');
-  };
 return(
 <header className="layout-header">
     <div className="header-content">
@@ -34,13 +27,6 @@ return(
           Servers
         </button>
       </nav>
-
-      <div className="user-menu">
-        <span className="username">{user?.username}</span>
-        <button onClick={handleLogout} className="logout-button">
-          Logout
-        </button>
-      </div>
     </div>
   </header>
 )}

src/components/Header/_Header.scss

@@ -78,50 +78,4 @@
       font-size: $font-size-xl;
     }
   }
-
-  .user-menu {
-    display: flex;
-    align-items: center;
-    gap: $spacing-lg;
-
-    @media (max-width: 768px) {
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    .username {
-      font-weight: $font-weight-medium;
-      font-size: $font-size-base;
-      
-      @media (max-width: 480px) {
-        font-size: $font-size-sm;
-      }
-    }
-
-    .logout-button {
-      background: rgba(255, 255, 255, 0.2);
-      border: 1px solid rgba(255, 255, 255, 0.4);
-      color: $text-primary;
-      padding: $spacing-sm $spacing-lg;
-      border-radius: $radius-md;
-      cursor: pointer;
-      transition: all $transition-base;
-      font-weight: $font-weight-medium;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-      }
-
-      &:active {
-        transform: translateY(0);
-      }
-
-      @media (max-width: 480px) {
-        padding: $spacing-sm $spacing-md;
-        font-size: $font-size-sm;
-      }
-    }
-  }
 }

src/context/AuthContext.tsx

@@ -1,89 +0,0 @@
-import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
-import { apiService } from '../services/api';
-import type { LoginCredentials, User } from '../types';
-
-interface AuthContextType {
-  user: User | null;
-  loading: boolean;
-  login: (credentials: LoginCredentials) => Promise<void>;
-  logout: () => Promise<void>;
-  isAuthenticated: boolean;
-}
-
-export const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-interface AuthProviderProps {
-  children: ReactNode;
-}
-
-export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      console.log('checkAuth running, isMockMode:', isMockMode);
-      try {
-        if (isMockMode) {
-          console.log('Mock mode - setting mock user');
-          setUser({
-            id: 'mock-user-1',
-            username: 'developer',
-            email: 'dev@coopcloud.tech',
-          });
-          setLoading(false);
-          console.log('Mock user set, loading set to false');
-          return;
-        }
-
-        const token = localStorage.getItem('auth_token');
-        if (token) {
-          const currentUser = await apiService.getCurrentUser();
-          setUser(currentUser);
-        }
-      } catch (error) {
-        console.error('Auth check failed:', error);
-        localStorage.removeItem('auth_token');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    checkAuth();
-  }, [isMockMode]);
-
-  const login = async (credentials: LoginCredentials) => {
-    try {
-      const response = await apiService.login(credentials);
-      setUser(response.user);
-    } catch (error) {
-      throw error;
-    }
-  };
-
-  const logout = async () => {
-    await apiService.logout();
-    setUser(null);
-  };
-
-  const value: AuthContextType = {
-    user,
-    loading,
-    login,
-    logout,
-    isAuthenticated: !!user,
-  };
-  console.log('AuthContext state:', { user, loading, isAuthenticated: !!user });
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
-
-export function useAuth() { 
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-}

src/hooks/useAuth.ts

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { AuthContext } from '../context/AuthContext';
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  
-  return context;
-};

src/routes/Apps/App.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 .app-detail-page {
   @extend .page-wrapper;

src/routes/Apps/App.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { Terminal } from '../../../components/Terminal/Terminal';
-import { apiService } from '../../../services/api';
-import type { AbraApp } from '../../../types';
-import type { LogEntry } from '../../../services/mockApi';
+import { Header } from '../../components/Header/Header';
+import { Terminal } from '../../components/Terminal/Terminal';
+import { apiService } from '../../services/api';
+import type { AbraApp } from '../../types';
+import type { LogEntry } from '../../services/mockApi';
 import './App.scss';
 
 export const AppDetail: React.FC = () => {
@@ -26,7 +26,7 @@ export const AppDetail: React.FC = () => {
     const fetchApp = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import('../../services/mockApi');
           const appsData = await mockApiService.getAppsGrouped();
           
           const serverApps = appsData[server || ''];
@@ -67,22 +67,19 @@ export const AppDetail: React.FC = () => {
     
     try {
       if (isMockMode) {
-        const { mockApiService } = await import('../../../services/mockApi');
+        const { mockApiService } = await import('../../services/mockApi');
         
         const onLog = (log: LogEntry) => {
           setTerminalLogs(prev => [...prev, log]);
         };
         
         switch (action) {
-          case 'start':
-            await mockApiService.startApp(app.appName, onLog);
+          case 'deploy':
+            await mockApiService.deployApp(app.appName, onLog);
             break;
           case 'stop':
             await mockApiService.stopApp(app.appName, onLog);
             break;
-          case 'deploy':
-            await mockApiService.deployApp(app.appName, onLog);
-            break;
           case 'upgrade':
             if (version) {
               await mockApiService.upgradeApp(app.appName, version, onLog);
@@ -95,9 +92,6 @@ export const AppDetail: React.FC = () => {
       } else {
         // Real API calls
         switch (action) {
-          case 'start':
-            await apiService.startApp(app.appName);
-            break;
           case 'stop':
             await apiService.stopApp(app.appName);
             break;
@@ -302,12 +296,13 @@ export const AppDetail: React.FC = () => {
               <h2>Quick Actions</h2>
               
               <div className="action-list">
+
                 <button 
                   className="action-list-item"
-                  onClick={() => handleAction('start')}
+                  onClick={() => handleAction('deploy')}
                   disabled={!!actionLoading}
                 >
-                  <span className="action-text">▶️ Start Application</span>
+                  <span className="action-text">Deploy Application</span>
                 </button>
 
                 <button 
@@ -315,15 +310,7 @@ export const AppDetail: React.FC = () => {
                   onClick={() => handleAction('stop')}
                   disabled={!!actionLoading}
                 >
-                  <span className="action-text">⏹️ Stop Application</span>
-                </button>
-
-                <button 
-                  className="action-list-item"
-                  onClick={() => handleAction('deploy')}
-                  disabled={!!actionLoading}
-                >
-                  <span className="action-text">🚀 Deploy Application</span>
+                  <span className="action-text">Stop Application</span>
                 </button>
 
                 <button 
@@ -335,7 +322,7 @@ export const AppDetail: React.FC = () => {
                   }}
                   disabled={!!actionLoading}
                 >
-                  <span className="action-text">🗑️ Remove Application</span>
+                  <span className="action-text">Remove Application</span>
                 </button>
               </div>
             </section>

src/routes/Apps/Apps.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .apps-page {
@@ -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

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../../types';
+import { Header } from '../../components/Header/Header';
+import { apiService } from '../../services/api';
+import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../types';
 import './Apps.scss';
 
 export const Apps: React.FC = () => {
@@ -14,14 +14,15 @@ 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(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import('../../services/mockApi');
           const data = await mockApiService.getAppsGrouped();
           setAppsData(data);
         } else {
@@ -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/Dashboard/Dashboard.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Header } from '../../../components/Header/Header';
+import { Header } from '../../components/Header/Header';
 import { useNavigate } from 'react-router-dom';
-import { apiService } from '../../../services/api';
-import type { AbraApp, AbraServer } from '../../../types';
+import { apiService } from '../../services/api';
+import type { AbraApp, AbraServer } from '../../types';
 import './_Dashboard.scss';
 
 export const Dashboard: React.FC = () => {
@@ -19,7 +19,7 @@ export const Dashboard: React.FC = () => {
       try {
         if (isMockMode) {
           // Use mock API in development
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import('../../services/mockApi');
           const [appsData, serversData] = await Promise.all([
             mockApiService.getAppsGrouped(),
             mockApiService.getServers(),

src/routes/Dashboard/_Dashboard.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .dashboard-page {

src/routes/Login/LoginForm.scss

@@ -1,94 +0,0 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
-
-.login-container {
-  @include flex-center;
-  min-height: 100vh;
-  width: 100%;
-  // @include gradient-primary;
-  background-color: $primary-light;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.login-card {
-  @include card;
-  width: 100%;
-  max-width: 400px;
-
-  h1 {
-    margin: 0 0 $spacing-sm;
-    font-size: $font-size-3xl;
-    color: $text-primary;
-    text-align: center;
-  }
-
-  .login-subtitle {
-    text-align: center;
-    color: $text-secondary;
-    margin: 0 0 $spacing-2xl;
-    font-size: $font-size-sm;
-  }
-}
-
-.form-group {
-  margin-bottom: $spacing-lg;
-
-  label {
-    display: block;
-    margin-bottom: $spacing-sm;
-    color: $text-primary;
-    font-weight: $font-weight-medium;
-    font-size: $font-size-sm;
-  }
-
-  input {
-    width: 100%;
-    padding: $spacing-md;
-    border: 2px solid $border-color;
-    border-radius: $radius-md;
-    font-size: $font-size-base;
-    transition: border-color $transition-base;
-    box-sizing: border-box;
-
-    &:focus {
-      outline: none;
-      border-color: $primary;
-    }
-
-    &:disabled {
-      background-color: $bg-secondary;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.error-message {
-  // background-color: rgba($error, 0.1);
-  // color: darken($error, 10%);
-  padding: $spacing-md;
-  border-radius: $radius-md;
-  margin-bottom: $spacing-md;
-  font-size: $font-size-sm;
-  // border-left: 4px solid $error;
-}
-
-.login-button {
-  @include button-base;
-  @include gradient-primary;
-  width: 100%;
-  color: white;
-  font-size: $font-size-base;
-
-  &:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 16px rgba($primary, 0.4);
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(0);
-  }
-}

src/routes/Login/LoginForm.tsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
-import './LoginForm.scss';
-
-export const LoginForm: React.FC = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  
-  const { login } = useAuth();
-  const navigate = useNavigate();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-
-    try {
-      await login({ username, password });
-      navigate('/dashboard');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Login failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="login-container">
-      <div className="login-card">
-        <h1>Coop Cloud</h1>
-        <p className="login-subtitle">Sign in to manage your applications</p>
-        
-        <form onSubmit={handleSubmit}>
-          {error && <div className="error-message">{error}</div>}
-          
-          <div className="form-group">
-            <label htmlFor="username">Username</label>
-            <input
-              id="username"
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-              autoComplete="username"
-              disabled={loading}
-            />
-          </div>
-
-          <div className="form-group">
-            <label htmlFor="password">Password</label>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              autoComplete="current-password"
-              disabled={loading}
-            />
-          </div>
-
-          <button type="submit" disabled={loading} className="login-button">
-            {loading ? 'Signing in...' : 'Sign in'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};

src/routes/Recipes/RecipeForm.tsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from "react";
+import { apiService } from '../../services/api';
+import type { AbraServer } from '../../types';
+
+
+
+function RecipeForm({ recipe, onClose }) {
+  const [loading, setLoading] = useState(true);
+  const [servers, setServers] = useState<AbraServer[]>([]);
+  const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
+  const [chaos, setChaos] = useState(false);
+  const [secrets, setSecrets] = useState(false);
+  const [error, setError] = useState('');
+  
+  useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const [serversData] = await Promise.all([
+            apiService.getServers(),
+          ]);
+            
+          setServers(serversData);
+          
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Failed to load servers');
+        } finally {
+          setLoading(false);
+        }
+      };
+  
+      fetchData();
+    });
+  const [formData, setFormData] = useState({
+    domain: "",
+    chaos: false,
+    secrets: true,
+  });
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Submitting:", formData);
+    onClose();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h2>{recipe.name}</h2>
+      { loading ? (<p> Loading servers...</p> 
+      ) : (
+      <div>
+        <label>
+            Choose a server to deploy to: 
+            <select
+              value={selectedServer}
+              onChange={(e) => setSelectedServer(e.target.value)}
+            >
+              <option value="">None</option>
+              {servers.map((server) => (
+                <option key={server.name} value={server.name}>
+                  {server.name}
+                </option>
+              ))}
+            </select>
+        </label>
+      </div>
+      )}
+      <div> 
+        <label>
+          Domain:
+          <input
+            name="Domain"
+            value={formData.name}
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+      <div> 
+        <label>
+          Chaos Mode Enabled: 
+          <input
+            type="checkbox"
+            name="chaos"
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+
+      <div> 
+        <label>
+          Autogenerate Secrets: 
+          <input
+            type="checkbox"
+            name="secrets"
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+
+      <button type="submit">Submit</button>
+      <button type="button" onClick={onClose}>Cancel</button>
+    </form>
+  );
+}
+
+export default RecipeForm;

src/routes/Recipes/Recipes.scss

@@ -0,0 +1,177 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+// Extend global page wrapper
+.recipes-page {
+  @extend .page-wrapper;
+}
+
+.recipes-content {
+  @extend .page-content;
+}
+
+// Servers grid
+.recipes-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: $spacing-xl;
+  margin-bottom: $spacing-xl;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Server card
+.recipe-card {
+  @include card;
+  display: grid;
+  grid-template-rows: 1fr 2fr auto 0.9fr;
+  transition: transform $transition-base, box-shadow $transition-base;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: $shadow-xl;
+  }
+
+  .recipe-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: $spacing-lg;
+    padding-bottom: $spacing-md;
+    border-bottom: 2px solid $bg-secondary;
+
+    .recipe-title {
+      h3 {
+        margin: 0 0 $spacing-xs;
+        font-size: $font-size-xl;
+        color: $text-primary;
+        font-weight: $font-weight-bold;
+      }
+
+      .recipe-host {
+        font-size: $font-size-sm;
+        color: $text-muted;
+        font-family: monospace;
+      }
+    }
+    img {
+      width: clamp(20px, 3vw, 32px);
+      height: clamp(20px, 3vw, 32px);
+      object-fit: contain;
+    }
+  }
+  .card-tags {
+    display: flex;
+    gap: 6px;
+    margin-top: $spacing-sm;
+    height: $spacing-md;
+    flex-wrap: wrap;
+  }
+  .tag-category {
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    font-weight: 700;
+    background-color: rgb(111, 128, 255);
+
+  }
+  .tag-feature {
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    font-weight: 700;
+    background-color: rgb(22, 180, 22);
+
+  }
+  .recipe-stats {
+    flex-grow: 1;
+    flex: 1;
+    margin-bottom: $spacing-lg;
+
+    .stat-row {
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+    }
+  }
+
+  .recipe-actions {
+    display: flex;
+    gap: $spacing-sm;
+    .action-btn {
+      flex: 1;
+      padding: $spacing-sm $spacing-md;
+      border: 2px solid $border-color;
+      background: none;
+      color: $text-primary;
+      border-radius: $radius-md;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      cursor: pointer;
+      transition: all $transition-base;
+
+      &:hover {
+        background-color: rgba($primary, 0.1);
+        border-color: $primary;
+        transform: translateY(-1px);
+      }
+
+      &.primary {
+        background-color: $primary;
+        color: white;
+        border-color: $primary;
+
+        &:hover {
+          background-color: $primary-light;
+          border-color: $primary-light;
+        }
+      }
+    }
+  }
+
+  .recipe-alert {
+    background-color: rgba($warning, 0.1);
+    border-left: 4px solid $warning;
+    padding: $spacing-sm $spacing-md;
+    margin: 0 (-$spacing-xl) (-$spacing-xl);
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+
+    .alert-icon {
+      font-size: $font-size-lg;
+      color: $warning;
+    }
+
+    .alert-text {
+      font-size: $font-size-sm;
+      color: $text-primary;
+      font-weight: $font-weight-medium;
+    }
+  }
+}
+.modal-overlay {
+position: fixed;
+inset: 0;
+background: rgba(0, 0, 0, 0.4);
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.modal {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  width: min(90%, 500px);
+}

src/routes/Recipes/Recipes.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { apiService } from '../../services/api';
+import type { AbraApp, AppWithServer, AbraRecipe } from '../../types';
+import RecipeForm from './RecipeForm.tsx'
+import './Recipes.scss';
+
+export const Recipes: React.FC = () => {
+  const navigate = useNavigate();
+  const [recipesData, setRecipesData] = useState<AbraRecipe[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterServer, setFilterServer] = useState<string>('all');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [selectedRecipe, setSelectedRecipe] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+
+
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        if (isMockMode) {
+          const { mockApiService } = await import('../../services/mockApi');
+          const data = await mockApiService.getRecipes();
+          console.log(data)
+          setRecipesData(data);
+        } else {
+          const data = await apiService.getRecipes();
+          setRecipesData(data);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load apps');
+      } finally {
+        setLoading(false);
+      }
+    }; 
+    
+    fetchData();
+  }, [isMockMode]);
+
+  // Flatten and enrich apps data
+  const allRecipes: AbraRecipe[] = useMemo(() => {
+    if (!recipesData) return [];
+    
+    return recipesData;
+  }, [recipesData]);
+
+
+  // Filter apps
+  const filteredRecipes = useMemo(() => {
+    return allRecipes.filter(recipe => {
+      const matchesSearch = 
+        recipe.name.toLowerCase().includes(searchTerm.toLowerCase());
+
+      return matchesSearch;
+    });
+  }, [allRecipes, searchTerm, filterServer, filterStatus]);
+
+  const stats = useMemo(() => {
+    const total = allRecipes.length;
+
+    return { total };
+  }, [allRecipes]);
+
+  if (loading) {
+    return (
+      <div className="apps-page">
+        <Header />
+        <main className="recipes-content">
+          <div className="loading">Loading applications...</div>
+        </main>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="recipes-page">
+        <Header />
+        <main className="recipes-content">
+          <div className="error">Error: {error}</div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="recipes-page">
+      <Header />
+      <main className="recipes-content">
+        <div className="page-header">
+          <h1>Applications</h1>
+          <p className="subtitle">{stats.total} recipes</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 Recipes</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="filters">
+          <input
+            type="text"
+            placeholder="Search apps by name, recipe, or domain..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="search-input"
+          />
+
+          <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>
+
+        </div>
+
+        {/* Server Cards */}
+        <div className="recipes-grid">
+          {filteredRecipes.length === 0 ? (
+            <div className="no-results">No recipes found matching your search</div>
+          ) : (
+            filteredRecipes.map((recipe) => (
+              <div 
+                key={recipe.name} 
+                className="recipe-card"
+                style={{ cursor: 'pointer' }}
+              >
+                <div className="recipe-header">
+                  <div className="recipe-title">
+                    <h3>{recipe.name}</h3>
+                  </div>
+                  <div>
+                    {recipe.icon.length > 0 ? <img src={`${recipe.icon}`} /> : null }
+                  </div>
+                </div>
+
+                <div className="recipe-stats">
+                  <div className="stat-row">
+                    <span className="stat-value">{recipe.description}</span>
+                  </div>
+                </div>
+
+                <div className="recipe-actions">
+                  <button 
+                    className="action-btn"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      console.log('clicked');
+                      setSelectedRecipe(recipe);
+                      console.log('selectedRecipe:', selectedRecipe);
+                    }}
+                  >
+                    Add Recipe
+                  </button>
+                </div>
+                <div className="card-tags">
+                  {recipe.features.backups.toLowerCase().includes("yes") ? <span className="tag-feature"> Backups </span> : null}
+                  {recipe.features.healthcheck.toLowerCase().includes("yes") ? <span className="tag-feature"> Healthcheck </span> : null}
+                  {recipe.category.length > 0 ? <span className="tag-category"> {recipe.category} </span> : null}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+        {selectedRecipe && (
+          <div className="modal-overlay" onClick={() => setSelectedRecipe(null)}>
+            <div className="modal" onClick={(e) => e.stopPropagation()}>
+              {}
+              <RecipeForm recipe={selectedRecipe} onClose={() => setSelectedRecipe(null)} />
+            </div>
+          </div>
+        )}
+
+        <div className="results-count">
+          Showing {filteredRecipes.length} of {allRecipes.length} apps
+        </div>
+      </main>
+    </div>
+  );
+};

src/routes/Servers/Server.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 .server-detail-page {
   @extend .page-wrapper;

src/routes/Servers/Server.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { Terminal } from '../../../components/Terminal/Terminal';
-import { apiService } from '../../../services/api';
-import type { AbraServer, ServerAppsResponse } from '../../../types';
-import type { LogEntry } from '../../../services/mockApi';
+import { Header } from '../../components/Header/Header';
+import { Terminal } from '../../components/Terminal/Terminal';
+import { apiService } from '../../services/api';
+import type { AbraServer, ServerAppsResponse } from '../../types';
+import type { LogEntry } from '../../services/mockApi';
 import './Server.scss';
 
 interface ServerWithApps extends AbraServer {
@@ -35,7 +35,7 @@ export const Server: React.FC = () => {
     const fetchServer = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import('../../services/mockApi');
           const appsData = await mockApiService.getAppsGrouped();
           const serversData = await mockApiService.getServers();
           
@@ -95,7 +95,7 @@ export const Server: React.FC = () => {
     
     try {
       if (isMockMode) {
-        const { mockApiService } = await import('../../../services/mockApi');
+        const { mockApiService } = await import('../../services/mockApi');
         
         const onLog = (log: LogEntry) => {
           setTerminalLogs(prev => [...prev, log]);
@@ -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>
@@ -319,7 +319,7 @@ export const Server: React.FC = () => {
                   onClick={() => handleAction('refresh')}
                   disabled={!!actionLoading}
                 >
-                  <span className="action-text">🔄 Refresh Server Info</span>
+                  <span className="action-text">Refresh Server Info</span>
                 </button>
 
                 <button 
@@ -327,7 +327,7 @@ export const Server: React.FC = () => {
                   onClick={() => handleAction('deploy-all')}
                   disabled={!!actionLoading}
                 >
-                  <span className="action-text">🚀 Deploy All Apps</span>
+                  <span className="action-text">Deploy All Apps</span>
                 </button>
 
                 <button 
@@ -335,7 +335,7 @@ export const Server: React.FC = () => {
                   onClick={() => handleAction('upgrade-all')}
                   disabled={!!actionLoading || server.upgradeCount === 0}
                 >
-                  <span className="action-text">⬆️ Upgrade All Apps</span>
+                  <span className="action-text">⬆Upgrade All Apps</span>
                 </button>
               </div>
             </section>

src/routes/Servers/Servers.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/scss/variables' as *;
-@use '../../../assets/scss/mixins' as *;
-@use '../../../assets/scss/global' as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .servers-page {

src/routes/Servers/Servers.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraServer, ServerAppsResponse } from '../../../types';
+import { Header } from '../../components/Header/Header';
+import { apiService } from '../../services/api';
+import type { AbraServer, ServerAppsResponse } from '../../types';
 import './Servers.scss';
 
 interface ServerWithStats extends AbraServer {
@@ -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([
+          const { mockApiService } = await import('../../services/mockApi');
+          [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 */}
@@ -233,7 +237,7 @@ export const Servers: React.FC = () => {
                   {server.upgradeCount > 0 && (
                     <div className="stat-row highlight">
                       <span className="stat-label">
-                        <span className="upgrade-icon">⬆️</span> Need Upgrade
+                        Need Upgrade
                       </span>
                       <span className="stat-value">{server.upgradeCount}</span>
                     </div>
@@ -241,7 +245,7 @@ export const Servers: React.FC = () => {
                   {server.chaosCount > 0 && (
                     <div className="stat-row chaos-row">
                       <span className="stat-label">
-                        <span className="chaos-icon">☠️</span> Chaos Mode
+                        Chaos Mode
                       </span>
                       <span className="stat-value">{server.chaosCount}</span>
                     </div>
@@ -271,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>
@@ -288,4 +291,4 @@ export const Servers: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/services/api.ts

@@ -1,6 +1,6 @@
-import type { AbraServer, ServerAppsResponse, AuthResponse, LoginCredentials, User } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
 
-// Log entry type - shared between mock and real API
+// Log entry type
 export type LogEntry = {
   type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
   text: string;
@@ -19,12 +19,6 @@ const processLogResponse = (logData: any[]): LogEntry[] => {
 };
 
 class ApiService {
-  private token: string | null = null;
-
-  constructor() {
-    this.token = localStorage.getItem('auth_token');
-  }
-
   private async request<T>(
     endpoint: string,
     options: RequestInit = {}
@@ -34,10 +28,6 @@ class ApiService {
       ...options.headers,
     };
 
-    if (this.token) {
-      headers['Authorization'] = `Bearer ${this.token}`;
-    }
-
     const response = await fetch(`${API_BASE_URL}${endpoint}`, {
       ...options,
       headers,
@@ -51,51 +41,19 @@ class ApiService {
     return response.json();
   }
 
-  // Auth methods
-  async login(credentials: LoginCredentials): Promise<AuthResponse> {
-    const response = await this.request<AuthResponse>('/auth/login', {
-      method: 'POST',
-      body: JSON.stringify(credentials),
-    });
-
-    this.token = response.token;
-    localStorage.setItem('auth_token', response.token);
-    return response;
-  }
-
-  async logout(): Promise<void> {
-    this.token = null;
-    localStorage.removeItem('auth_token');
-  }
-
-  async getCurrentUser(): Promise<User> {
-    return this.request<User>('/auth/me');
-  }
-
-  // Abra CLI wrapper methods
+  // Get all apps grouped by server
   async getAppsGrouped(): Promise<ServerAppsResponse> {
-    return this.request<ServerAppsResponse>('/abra/apps');
+    return this.request<ServerAppsResponse>('/apps');
   }
 
+  // Get all servers
   async getServers(): Promise<AbraServer[]> {
-    return this.request<AbraServer[]>('/abra/servers');
+    return this.request<AbraServer[]>('/servers');
   }
 
-  // App actions with log streaming
+  // App actions with log streaming (websocket future)
   async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/deploy`, {
-      method: 'POST',
-    });
-
-    // Process logs and stream to callback
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
-  }
-
-  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/stop`, {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/deploy`, {
       method: 'POST',
     });
 
@@ -105,8 +63,8 @@ class ApiService {
     }
   }
 
-  async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/start`, {
+  async undeployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/undeploy`, {
       method: 'POST',
     });
 
@@ -117,7 +75,7 @@ class ApiService {
   }
 
   async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/upgrade`, {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/upgrade`, {
       method: 'POST',
       body: JSON.stringify({ version }),
     });
@@ -129,7 +87,7 @@ class ApiService {
   }
 
   async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/remove`, {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/remove`, {
       method: 'POST',
     });
 
@@ -141,7 +99,7 @@ class ApiService {
 
   // Server actions with log streaming
   async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/refresh`, {
+    const response = await this.request<{ logs: any[] }>(`/servers/${serverName}/refresh`, {
       method: 'POST',
     });
 
@@ -152,7 +110,7 @@ class ApiService {
   }
 
   async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/deploy-all`, {
+    const response = await this.request<{ logs: any[] }>(`/servers/${serverName}/deploy-all`, {
       method: 'POST',
     });
 
@@ -163,7 +121,7 @@ class ApiService {
   }
 
   async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/upgrade-all`, {
+    const response = await this.request<{ logs: any[] }>(`/servers/${serverName}/upgrade-all`, {
       method: 'POST',
     });
 
@@ -172,6 +130,11 @@ class ApiService {
       logs.forEach(log => onLog(log));
     }
   }
+  // recipe catalog imports
+  async getRecipes(): Promise<AbraRecipe[]> {
+    return this.request<AbraRecipe[]>('/abra/catalogue');
+  }
 }
+    
 
-export const apiService = new ApiService();
+export const apiService = new ApiService();

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",

src/services/mockApi.ts

@@ -1,7 +1,9 @@
-import type { AbraServer, ServerAppsResponse } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
 import appsData from './mock-apps.json';
 import serversData from './mock-servers.json';
 import logsData from './mock-logs.json';
+import catalogue from './mock-catalogue.json';
+
 
 // Log entry type
 export type LogEntry = {
@@ -91,15 +93,6 @@ export const mockApiService = {
     }
   },
 
-  async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const logs = processLogs('start', { appName });
-    
-    for (const log of logs) {
-      await delay(150);
-      onLog?.(log);
-    }
-  },
-
   async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
     const logs = processLogs('upgrade', { appName, version });
     
@@ -144,4 +137,9 @@ export const mockApiService = {
       onLog?.(log);
     }
   },
+  // recipe catalog imports
+  async getRecipes(): Promise<AbraRecipe[]> {
+    await delay(300);
+    return catalogue as AbraRecipe[];
+  }
 };

src/types/index.ts

@@ -1,19 +1,3 @@
-export interface User {
-  id: string;
-  username: string;
-  email: string;
-}
-
-export interface AuthResponse {
-  user: User;
-  token: string;
-}
-
-export interface LoginCredentials {
-  username: string;
-  password: string;
-}
-
 export interface ApiError {
   message: string;
   status: number;
@@ -52,4 +36,36 @@ export interface AppWithServer extends AbraApp {
     appCount: number;
     upgradeCount: number;
   };
+}
+export interface Image {
+  image: string;
+  rating: string
+  source: string
+  url: string
+}
+type RecipeVersions = Record<string, Record<string, ServiceMeta>>[];
+export interface ServiceMeta {
+  image: string;
+  tag: string
+}
+export interface Features {
+  backups: string;
+  email: string;
+  healthcheck: string;
+  image: Image;
+  status: number;
+  tests: string;
+  sso: string;
+}
+export interface AbraRecipe {
+  category: string;
+  default_branch: string;
+  description: string;
+  features: Features;
+  icon: string;
+  name: string;
+  repository: string;
+  ssh_url: string;
+  versions: RecipeVersions;
+  website: string;
 }