diff --git a/src/App.tsx b/src/App.tsx
index 7381b0d4..8d16f38f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,13 +18,19 @@ function getCookie(name: string) {
     }, "");
 }
 
+function setCookie(name: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+}
+
 function App() {
-    const [view, setView] = React.useState<string>("homepage")
-    const [mountedViews, setMountedViews] = React.useState<Set<string>>(new Set(["homepage"]))
+    const [view, setView] = useState<string>("homepage")
+    const [mountedViews, setMountedViews] = useState<Set<string>>(new Set(["homepage"]))
     const [isAuthenticated, setIsAuthenticated] = useState(false)
     const [username, setUsername] = useState<string | null>(null)
     const [isAdmin, setIsAdmin] = useState(false)
     const [authLoading, setAuthLoading] = useState(true)
+    const [isTopbarOpen, setIsTopbarOpen] = useState<boolean>(true)
 
     useEffect(() => {
         const checkAuth = () => {
@@ -71,41 +77,102 @@ function App() {
         setView(nextView)
     }
 
+    const handleAuthSuccess = (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => {
+        setIsAuthenticated(true)
+        setIsAdmin(authData.isAdmin)
+        setUsername(authData.username)
+    }
+
     return (
         <div>
-            <LeftSidebar
-                onSelectView={handleSelectView}
-                disabled={!isAuthenticated || authLoading}
-                isAdmin={isAdmin}
-                username={username}
-            >
-                {mountedViews.has("homepage") && (
-                    <div style={{display: view === "homepage" ? "block" : "none"}}>
-                        <Homepage onSelectView={handleSelectView}/>
+            {/* Enhanced background overlay - detailed pattern when not authenticated */}
+            {!isAuthenticated && !authLoading && (
+                <div 
+                    className="fixed inset-0 bg-gradient-to-br from-background via-muted/20 to-background z-[9999]"
+                    aria-hidden="true"
+                >
+                    {/* Diagonal stripes pattern */}
+                    <div className="absolute inset-0 opacity-20">
+                        <div className="absolute inset-0" style={{
+                            backgroundImage: `repeating-linear-gradient(
+                                45deg,
+                                transparent,
+                                transparent 20px,
+                                hsl(var(--primary) / 0.4) 20px,
+                                hsl(var(--primary) / 0.4) 40px
+                            )`
+                        }} />
                     </div>
-                )}
-                {mountedViews.has("ssh_manager") && (
-                    <div style={{display: view === "ssh_manager" ? "block" : "none"}}>
-                        <SSHManager onSelectView={handleSelectView}/>
+                    
+                    {/* Subtle grid pattern */}
+                    <div className="absolute inset-0 opacity-10">
+                        <div className="absolute inset-0" style={{
+                            backgroundImage: `linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
+                                            linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px)`,
+                            backgroundSize: '40px 40px'
+                        }} />
                     </div>
-                )}
-                {mountedViews.has("terminal") && (
-                    <div style={{display: view === "terminal" ? "block" : "none"}}>
-                        <Terminal onSelectView={handleSelectView}/>
-                    </div>
-                )}
-                {mountedViews.has("tunnel") && (
-                    <div style={{display: view === "tunnel" ? "block" : "none"}}>
-                        <SSHTunnel onSelectView={handleSelectView}/>
-                    </div>
-                )}
-                {mountedViews.has("config_editor") && (
-                    <div style={{display: view === "config_editor" ? "block" : "none"}}>
-                        <ConfigEditor onSelectView={handleSelectView}/>
-                    </div>
-                )}
-                <TopNavbar/>
-            </LeftSidebar>
+                    
+                    {/* Radial gradient overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-background/60" />
+                </div>
+            )}
+            
+            {/* Show login form directly when not authenticated */}
+            {!isAuthenticated && !authLoading && (
+                <div className="fixed inset-0 flex items-center justify-center z-[10000]">
+                    <Homepage 
+                        onSelectView={handleSelectView}
+                        isAuthenticated={isAuthenticated}
+                        authLoading={authLoading}
+                        onAuthSuccess={handleAuthSuccess}
+                        isTopbarOpen={isTopbarOpen}
+                    />
+                </div>
+            )}
+            
+            {/* Show sidebar layout only when authenticated */}
+            {isAuthenticated && (
+                <LeftSidebar
+                    onSelectView={handleSelectView}
+                    disabled={!isAuthenticated || authLoading}
+                    isAdmin={isAdmin}
+                    username={username}
+                >
+                    {mountedViews.has("homepage") && (
+                        <div style={{display: view === "homepage" ? "block" : "none"}}>
+                            <Homepage 
+                                onSelectView={handleSelectView}
+                                isAuthenticated={isAuthenticated}
+                                authLoading={authLoading}
+                                onAuthSuccess={handleAuthSuccess}
+                                isTopbarOpen={isTopbarOpen}
+                            />
+                        </div>
+                    )}
+                    {mountedViews.has("ssh_manager") && (
+                        <div style={{display: view === "ssh_manager" ? "block" : "none"}}>
+                            <SSHManager onSelectView={handleSelectView}/>
+                        </div>
+                    )}
+                    {mountedViews.has("terminal") && (
+                        <div style={{display: view === "terminal" ? "block" : "none"}}>
+                            <Terminal onSelectView={handleSelectView}/>
+                        </div>
+                    )}
+                    {mountedViews.has("tunnel") && (
+                        <div style={{display: view === "tunnel" ? "block" : "none"}}>
+                            <SSHTunnel onSelectView={handleSelectView}/>
+                        </div>
+                    )}
+                    {mountedViews.has("config_editor") && (
+                        <div style={{display: view === "config_editor" ? "block" : "none"}}>
+                            <ConfigEditor onSelectView={handleSelectView}/>
+                        </div>
+                    )}
+                    <TopNavbar isTopbarOpen={isTopbarOpen} setIsTopbarOpen={setIsTopbarOpen}/>
+                </LeftSidebar>
+            )}
         </div>
     )
 }
diff --git a/src/components/ui/button-group.tsx b/src/components/ui/button-group.tsx
new file mode 100644
index 00000000..e8029346
--- /dev/null
+++ b/src/components/ui/button-group.tsx
@@ -0,0 +1,53 @@
+import { Children, ReactElement, cloneElement } from 'react';
+
+import { ButtonProps } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ButtonGroupProps {
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+  children: ReactElement<ButtonProps>[];
+}
+
+export const ButtonGroup = ({
+  className,
+  orientation = 'horizontal',
+  children,
+}: ButtonGroupProps) => {
+  const totalButtons = Children.count(children);
+  const isHorizontal = orientation === 'horizontal';
+  const isVertical = orientation === 'vertical';
+
+  return (
+    <div
+      className={cn(
+        'flex',
+        {
+          'flex-col': isVertical,
+          'w-fit': isVertical,
+        },
+        className
+      )}
+    >
+      {Children.map(children, (child, index) => {
+        const isFirst = index === 0;
+        const isLast = index === totalButtons - 1;
+
+        return cloneElement(child, {
+          className: cn(
+            {
+              'rounded-l-none': isHorizontal && !isFirst,
+              'rounded-r-none': isHorizontal && !isLast,
+              'border-l-0': isHorizontal && !isFirst,
+
+              'rounded-t-none': isVertical && !isFirst,
+              'rounded-b-none': isVertical && !isLast,
+              'border-t-0': isVertical && !isFirst,
+            },
+            child.props.className
+          ),
+        });
+      })}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ui/shadcn-io/status/index.tsx b/src/components/ui/shadcn-io/status/index.tsx
new file mode 100644
index 00000000..37836101
--- /dev/null
+++ b/src/components/ui/shadcn-io/status/index.tsx
@@ -0,0 +1,62 @@
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+export type StatusProps = ComponentProps<typeof Badge> & {
+  status: 'online' | 'offline' | 'maintenance' | 'degraded';
+};
+
+export const Status = ({ className, status, ...props }: StatusProps) => (
+  <Badge
+    className={cn('flex items-center gap-2', 'group', status, className)}
+    variant="secondary"
+    {...props}
+  />
+);
+
+export type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement>;
+
+export const StatusIndicator = ({
+  className,
+  ...props
+}: StatusIndicatorProps) => (
+  <span className="relative flex h-2 w-2" {...props}>
+    <span
+      className={cn(
+        'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+        'group-[.online]:bg-emerald-500',
+        'group-[.offline]:bg-red-500',
+        'group-[.maintenance]:bg-blue-500',
+        'group-[.degraded]:bg-amber-500'
+      )}
+    />
+    <span
+      className={cn(
+        'relative inline-flex h-2 w-2 rounded-full',
+        'group-[.online]:bg-emerald-500',
+        'group-[.offline]:bg-red-500',
+        'group-[.maintenance]:bg-blue-500',
+        'group-[.degraded]:bg-amber-500'
+      )}
+    />
+  </span>
+);
+
+export type StatusLabelProps = HTMLAttributes<HTMLSpanElement>;
+
+export const StatusLabel = ({
+  className,
+  children,
+  ...props
+}: StatusLabelProps) => (
+  <span className={cn('text-muted-foreground', className)} {...props}>
+    {children ?? (
+      <>
+        <span className="hidden group-[.online]:block">Online</span>
+        <span className="hidden group-[.offline]:block">Offline</span>
+        <span className="hidden group-[.maintenance]:block">Maintenance</span>
+        <span className="hidden group-[.degraded]:block">Degraded</span>
+      </>
+    )}
+  </span>
+);
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 5d8d3cad..fe6a02e8 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -242,7 +242,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border-2 group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>
diff --git a/src/ui/Homepage/Homepage.tsx b/src/ui/Homepage/Homepage.tsx
index 00967404..cc894c7b 100644
--- a/src/ui/Homepage/Homepage.tsx
+++ b/src/ui/Homepage/Homepage.tsx
@@ -6,6 +6,10 @@ import {HomepageAlertManager} from "@/ui/Homepage/HomepageAlertManager.tsx";
 
 interface HomepageProps {
     onSelectView: (view: string) => void;
+    isAuthenticated: boolean;
+    authLoading: boolean;
+    onAuthSuccess: (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => void;
+    isTopbarOpen?: boolean;
 }
 
 function getCookie(name: string) {
@@ -26,51 +30,51 @@ const API = axios.create({
     baseURL: apiBase,
 });
 
-export function Homepage({onSelectView}: HomepageProps): React.ReactElement {
-    const [loggedIn, setLoggedIn] = useState(false);
+export function Homepage({onSelectView, isAuthenticated, authLoading, onAuthSuccess, isTopbarOpen = true}: HomepageProps): React.ReactElement {
+    const [loggedIn, setLoggedIn] = useState(isAuthenticated);
     const [isAdmin, setIsAdmin] = useState(false);
     const [username, setUsername] = useState<string | null>(null);
     const [userId, setUserId] = useState<string | null>(null);
-    const [authLoading, setAuthLoading] = useState(true);
     const [dbError, setDbError] = useState<string | null>(null);
 
+    // Update local state when props change
     useEffect(() => {
-        const jwt = getCookie("jwt");
+        setLoggedIn(isAuthenticated);
+    }, [isAuthenticated]);
 
-        if (jwt) {
-            setAuthLoading(true);
-            Promise.all([
-                API.get("/me", {headers: {Authorization: `Bearer ${jwt}`}}),
-                API.get("/db-health")
-            ])
-                .then(([meRes]) => {
-                    setLoggedIn(true);
-                    setIsAdmin(!!meRes.data.is_admin);
-                    setUsername(meRes.data.username || null);
-                    setUserId(meRes.data.userId || null);
-                    setDbError(null);
-                })
-                .catch((err) => {
-                    setLoggedIn(false);
-                    setIsAdmin(false);
-                    setUsername(null);
-                    setUserId(null);
-                    setCookie("jwt", "", -1);
-                    if (err?.response?.data?.error?.includes("Database")) {
-                        setDbError("Could not connect to the database. Please try again later.");
-                    } else {
+    useEffect(() => {
+        if (isAuthenticated) {
+            const jwt = getCookie("jwt");
+            if (jwt) {
+                Promise.all([
+                    API.get("/me", {headers: {Authorization: `Bearer ${jwt}`}}),
+                    API.get("/db-health")
+                ])
+                    .then(([meRes]) => {
+                        setIsAdmin(!!meRes.data.is_admin);
+                        setUsername(meRes.data.username || null);
+                        setUserId(meRes.data.userId || null);
                         setDbError(null);
-                    }
-                })
-                .finally(() => setAuthLoading(false));
-        } else {
-            setAuthLoading(false);
+                    })
+                    .catch((err) => {
+                        setIsAdmin(false);
+                        setUsername(null);
+                        setUserId(null);
+                        if (err?.response?.data?.error?.includes("Database")) {
+                            setDbError("Could not connect to the database. Please try again later.");
+                        } else {
+                            setDbError(null);
+                        }
+                    });
+            }
         }
-    }, []);
+    }, [isAuthenticated]);
 
     return (
-        <div className="w-full min-h-svh grid place-items-center">
-            <div className="flex flex-row items-center justify-center gap-8">
+        <div className={`w-full min-h-svh grid place-items-center relative transition-[padding-top] duration-200 ease-linear ${
+            isTopbarOpen ? 'pt-[66px]' : 'pt-2'
+        }`}>
+            <div className="flex flex-row items-center justify-center gap-8 relative z-[10000]">
                 <HomepageAuth
                     setLoggedIn={setLoggedIn}
                     setIsAdmin={setIsAdmin}
@@ -80,6 +84,7 @@ export function Homepage({onSelectView}: HomepageProps): React.ReactElement {
                     authLoading={authLoading}
                     dbError={dbError}
                     setDbError={setDbError}
+                    onAuthSuccess={onAuthSuccess}
                 />
                 <HomepageUpdateLog
                     loggedIn={loggedIn}
diff --git a/src/ui/Homepage/HomepageAlertManager.tsx b/src/ui/Homepage/HomepageAlertManager.tsx
index 07772d2a..6e12c1a2 100644
--- a/src/ui/Homepage/HomepageAlertManager.tsx
+++ b/src/ui/Homepage/HomepageAlertManager.tsx
@@ -121,19 +121,6 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea
         return null;
     }
 
-    if (loading) {
-        return (
-            <div className="fixed top-4 right-4 z-50">
-                <div className="bg-background border rounded-lg p-3 shadow-lg">
-                    <div className="flex items-center gap-2">
-                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
-                        <span className="text-sm text-muted-foreground">Loading alerts...</span>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
     if (alerts.length === 0) {
         return null;
     }
@@ -152,7 +139,7 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea
     const hasMultipleAlerts = alerts.length > 1;
 
     return (
-        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
+        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-[99999]">
             <div className="relative w-full max-w-2xl mx-4">
                 <HomepageAlertCard
                     alert={currentAlert}
diff --git a/src/ui/Homepage/HomepageAuth.tsx b/src/ui/Homepage/HomepageAuth.tsx
index 4a9346c1..ca121d2b 100644
--- a/src/ui/Homepage/HomepageAuth.tsx
+++ b/src/ui/Homepage/HomepageAuth.tsx
@@ -33,6 +33,7 @@ interface HomepageAuthProps extends React.ComponentProps<"div"> {
     authLoading: boolean;
     dbError: string | null;
     setDbError: (error: string | null) => void;
+    onAuthSuccess: (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => void;
 }
 
 export function HomepageAuth({
@@ -45,6 +46,7 @@ export function HomepageAuth({
                                  authLoading,
                                  dbError,
                                  setDbError,
+                                 onAuthSuccess,
                                  ...props
                              }: HomepageAuthProps) {
     const [tab, setTab] = useState<"login" | "signup" | "external" | "reset">("login");
@@ -147,6 +149,14 @@ export function HomepageAuth({
             setUsername(meRes.data.username || null);
             setUserId(meRes.data.id || null);
             setDbError(null);
+            // Call onAuthSuccess to update App state
+            onAuthSuccess({
+                isAdmin: !!meRes.data.is_admin,
+                username: meRes.data.username || null,
+                userId: meRes.data.id || null
+            });
+            // Update internal state immediately
+            setInternalLoggedIn(true);
             if (tab === "signup") {
                 setSignupConfirmPassword("");
             }
@@ -255,10 +265,6 @@ export function HomepageAuth({
         setError(null);
     }
 
-    async function resetPassword() {
-
-    }
-
     async function handleOIDCLogin() {
         setError(null);
         setOidcLoading(true);
@@ -303,6 +309,14 @@ export function HomepageAuth({
                     setUsername(meRes.data.username || null);
                     setUserId(meRes.data.id || null);
                     setDbError(null);
+                    // Call onAuthSuccess to update App state
+                    onAuthSuccess({
+                        isAdmin: !!meRes.data.is_admin,
+                        username: meRes.data.username || null,
+                        userId: meRes.data.id || null
+                    });
+                    // Update internal state immediately
+                    setInternalLoggedIn(true);
                     window.history.replaceState({}, document.title, window.location.pathname);
                 })
                 .catch(err => {
@@ -331,12 +345,13 @@ export function HomepageAuth({
     return (
         <div
             className={cn(
+                "",
                 className
             )}
             {...props}
         >
             <div
-                className={`w-[420px] max-w-full bg-background rounded-xl shadow-lg p-6 flex flex-col ${internalLoggedIn ? '' : 'border border-border'}`}>
+                className={`w-[420px] max-w-full bg-background/95 backdrop-blur-md rounded-xl shadow-2xl p-6 flex flex-col relative ${internalLoggedIn ? '' : 'ring-1 ring-border/50'} focus-within:ring-2 focus-within:ring-primary/50 transition-all duration-200`}>
                 {dbError && (
                     <Alert variant="destructive" className="mb-4">
                         <AlertTitle>Error</AlertTitle>
@@ -369,16 +384,16 @@ export function HomepageAuth({
                         </AlertDescription>
                     </Alert>
                 )}
-                {(internalLoggedIn || (authLoading && getCookie("jwt"))) && (
+                {(internalLoggedIn || getCookie("jwt")) && (
                     <div className="flex flex-col items-center gap-4">
-                        <Alert className="my-2">
-                            <AlertTitle>Logged in!</AlertTitle>
-                            <AlertDescription>
+                        <div className="my-2 text-center bg-muted/50 border border-border rounded-lg p-4 w-full">
+                            <h3 className="text-lg font-semibold mb-2">Logged in!</h3>
+                            <p className="text-muted-foreground">
                                 You are logged in! Use the sidebar to access all available tools. To get started,
                                 create an SSH Host in the SSH Manager tab. Once created, you can connect to that
                                 host using the other apps in the sidebar.
-                            </AlertDescription>
-                        </Alert>
+                            </p>
+                        </div>
 
                         <div className="flex flex-row items-center gap-2">
                             <Button
@@ -607,17 +622,18 @@ export function HomepageAuth({
                                                     <p>Enter your new password for
                                                         user: <strong>{localUsername}</strong></p>
                                                 </div>
-                                                <div className="flex flex-col gap-4">
+                                                <div className="flex flex-col gap-5">
                                                     <div className="flex flex-col gap-2">
                                                         <Label htmlFor="new-password">New Password</Label>
                                                         <Input
                                                             id="new-password"
                                                             type="password"
                                                             required
-                                                            className="h-11 text-base"
+                                                            className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
                                                             value={newPassword}
                                                             onChange={e => setNewPassword(e.target.value)}
                                                             disabled={resetLoading}
+                                                            autoComplete="new-password"
                                                         />
                                                     </div>
                                                     <div className="flex flex-col gap-2">
@@ -626,10 +642,11 @@ export function HomepageAuth({
                                                             id="confirm-password"
                                                             type="password"
                                                             required
-                                                            className="h-11 text-base"
+                                                            className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
                                                             value={confirmPassword}
                                                             onChange={e => setConfirmPassword(e.target.value)}
                                                             disabled={resetLoading}
+                                                            autoComplete="new-password"
                                                         />
                                                     </div>
                                                     <Button
@@ -719,4 +736,4 @@ export function HomepageAuth({
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/src/ui/Navigation/Hosts/FolderCard.tsx b/src/ui/Navigation/Hosts/FolderCard.tsx
new file mode 100644
index 00000000..967bec0b
--- /dev/null
+++ b/src/ui/Navigation/Hosts/FolderCard.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import {CardTitle} from "@/components/ui/card.tsx";
+import {ChevronDown, Folder} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+import {Host} from "@/ui/Navigation/Hosts/Host.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface FolderCardProps {
+    folderName: string;
+    hosts: SSHHost[];
+    isFirst: boolean;
+    isLast: boolean;
+}
+
+export function FolderCard({ folderName, hosts, isFirst, isLast }: FolderCardProps): React.ReactElement {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const toggleExpanded = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    return (
+        <div className="bg-[#0e0e10] border-2 border-[#303032] rounded-lg overflow-hidden" style={{padding: '0', margin: '0'}}>
+            <div className={`px-4 py-3 relative ${isExpanded ? 'border-b-2' : ''} bg-[#131316]`}>
+                <div className="flex gap-2 pr-10">
+                    <div className="flex-shrink-0 flex items-center">
+                        <Folder size={16} strokeWidth={3}/>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <CardTitle className="mb-0 leading-tight break-words text-md">{folderName}</CardTitle>
+                    </div>
+                </div>
+                <Button
+                    variant="outline"
+                    className="w-[28px] h-[28px] absolute right-4 top-1/2 -translate-y-1/2 flex-shrink-0"
+                    onClick={toggleExpanded}
+                >
+                    <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? '' : 'rotate-180'}`}/>
+                </Button>
+            </div>
+            {isExpanded && (
+                <div className="flex flex-col p-2 gap-y-3">
+                    {hosts.map((host, index) => (
+                        <React.Fragment key={`${folderName}-host-${host.id}-${host.name || host.ip}`}>
+                            <Host host={host} />
+                            {index < hosts.length - 1 && (
+                                <div className="relative -mx-2">
+                                    <Separator className="p-0.25 absolute inset-x-0" />
+                                </div>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/ui/Navigation/Hosts/Host.tsx b/src/ui/Navigation/Hosts/Host.tsx
new file mode 100644
index 00000000..48db28f3
--- /dev/null
+++ b/src/ui/Navigation/Hosts/Host.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import {Status, StatusIndicator} from "@/components/ui/shadcn-io/status";
+import {Button} from "@/components/ui/button.tsx";
+import {ButtonGroup} from "@/components/ui/button-group.tsx";
+import {Server, Terminal} from "lucide-react";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface HostProps {
+    host: SSHHost;
+}
+
+export function Host({ host }: HostProps): React.ReactElement {
+    const tags = Array.isArray(host.tags) ? host.tags : [];
+    const hasTags = tags.length > 0;
+    
+    return (
+        <div>
+            <div className="flex items-center gap-2">
+                <Status status={"online"} className="!bg-transparent !p-0.75 flex-shrink-0">
+                    <StatusIndicator/>
+                </Status>
+                <p className="font-semibold flex-1 min-w-0 break-words text-sm">
+                    {host.name || host.ip}
+                </p>
+                <ButtonGroup className="flex-shrink-0">
+                    <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                        <Server/>
+                    </Button>
+                    <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                        <Terminal/>
+                    </Button>
+                </ButtonGroup>
+            </div>
+            {hasTags && (
+                <div className="flex flex-wrap items-center gap-2 mt-1">
+                    {tags.map((tag: string) => (
+                        <div key={tag} className="bg-[#18181b] border-1 border-[#303032] pl-2 pr-2 rounded-[10px]">
+                            <p className="text-sm">{tag}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/ui/Navigation/LeftSidebar.tsx b/src/ui/Navigation/LeftSidebar.tsx
index 6ee63189..56848ee6 100644
--- a/src/ui/Navigation/LeftSidebar.tsx
+++ b/src/ui/Navigation/LeftSidebar.tsx
@@ -46,6 +46,32 @@ import {
     TableRow,
 } from "@/components/ui/table.tsx";
 import axios from "axios";
+import {Card} from "@/components/ui/card.tsx";
+import {FolderCard} from "@/ui/Navigation/Hosts/FolderCard.tsx";
+import {getSSHHosts} from "@/ui/SSH/ssh-axios";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
 
 interface SidebarProps {
     onSelectView: (view: string) => void;
@@ -119,6 +145,14 @@ export function LeftSidebar({
 
     const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
 
+    // SSH Hosts state management
+    const [hosts, setHosts] = useState<SSHHost[]>([]);
+    const [hostsLoading, setHostsLoading] = useState(false);
+    const [hostsError, setHostsError] = useState<string | null>(null);
+    const prevHostsRef = React.useRef<SSHHost[]>([]);
+    const [search, setSearch] = useState("");
+    const [debouncedSearch, setDebouncedSearch] = useState("");
+
     React.useEffect(() => {
         if (adminSheetOpen) {
             const jwt = getCookie("jwt");
@@ -147,6 +181,117 @@ export function LeftSidebar({
         }
     }, [isAdmin]);
 
+    // SSH Hosts data fetching
+    const fetchHosts = React.useCallback(async () => {
+        try {
+            const newHosts = await getSSHHosts();
+            const terminalHosts = newHosts.filter(host => host.enableTerminal);
+
+            const prevHosts = prevHostsRef.current;
+            
+            // Create a stable map of existing hosts by ID for comparison
+            const existingHostsMap = new Map(prevHosts.map(h => [h.id, h]));
+            const newHostsMap = new Map(terminalHosts.map(h => [h.id, h]));
+            
+            // Check if there are any meaningful changes
+            let hasChanges = false;
+            
+            // Check for new hosts, removed hosts, or changed hosts
+            if (terminalHosts.length !== prevHosts.length) {
+                hasChanges = true;
+            } else {
+                for (const [id, newHost] of newHostsMap) {
+                    const existingHost = existingHostsMap.get(id);
+                    if (!existingHost) {
+                        hasChanges = true;
+                        break;
+                    }
+                    
+                    // Only check fields that affect the display
+                    if (
+                        newHost.name !== existingHost.name ||
+                        newHost.folder !== existingHost.folder ||
+                        newHost.ip !== existingHost.ip ||
+                        newHost.port !== existingHost.port ||
+                        newHost.username !== existingHost.username ||
+                        newHost.pin !== existingHost.pin ||
+                        newHost.enableTerminal !== existingHost.enableTerminal ||
+                        JSON.stringify(newHost.tags) !== JSON.stringify(existingHost.tags)
+                    ) {
+                        hasChanges = true;
+                        break;
+                    }
+                }
+            }
+            
+            if (hasChanges) {
+                // Use a small delay to batch updates and reduce jittering
+                setTimeout(() => {
+                    setHosts(terminalHosts);
+                    prevHostsRef.current = terminalHosts;
+                }, 50);
+            }
+        } catch (err: any) {
+            setHostsError('Failed to load hosts');
+        }
+    }, []);
+
+    React.useEffect(() => {
+        fetchHosts();
+        const interval = setInterval(fetchHosts, 10000);
+        return () => clearInterval(interval);
+    }, [fetchHosts]);
+
+    // Search debouncing
+    React.useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(search), 200);
+        return () => clearTimeout(handler);
+    }, [search]);
+
+    // Filter and organize hosts with stable references
+    const filteredHosts = React.useMemo(() => {
+        if (!debouncedSearch.trim()) return hosts;
+        const q = debouncedSearch.trim().toLowerCase();
+        return hosts.filter(h => {
+            const searchableText = [
+                h.name || '',
+                h.username,
+                h.ip,
+                h.folder || '',
+                ...(h.tags || []),
+                h.authType,
+                h.defaultPath || ''
+            ].join(' ').toLowerCase();
+            return searchableText.includes(q);
+        });
+    }, [hosts, debouncedSearch]);
+
+    const hostsByFolder = React.useMemo(() => {
+        const map: Record<string, SSHHost[]> = {};
+        filteredHosts.forEach(h => {
+            const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder';
+            if (!map[folder]) map[folder] = [];
+            map[folder].push(h);
+        });
+        return map;
+    }, [filteredHosts]);
+
+    const sortedFolders = React.useMemo(() => {
+        const folders = Object.keys(hostsByFolder);
+        folders.sort((a, b) => {
+            if (a === 'No Folder') return -1;
+            if (b === 'No Folder') return 1;
+            return a.localeCompare(b);
+        });
+        return folders;
+    }, [hostsByFolder]);
+
+    const getSortedHosts = React.useCallback((arr: SSHHost[]) => {
+        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        return [...pinned, ...rest];
+    }, []);
+
     const handleToggle = async (checked: boolean) => {
         if (!isAdmin) {
             return;
@@ -344,7 +489,7 @@ export function LeftSidebar({
     return (
         <div className="min-h-svh">
             <SidebarProvider open={isSidebarOpen}>
-                <Sidebar variant="floating">
+                <Sidebar variant="floating" className="">
                     <SidebarHeader>
                         <SidebarGroupLabel className="text-lg font-bold text-white">
                             Termix
@@ -359,48 +504,53 @@ export function LeftSidebar({
                     </SidebarHeader>
                     <Separator className="p-0.25"/>
                     <SidebarContent>
-                        <SidebarGroup>
-                            <SidebarGroupContent>
-                                <SidebarMenu>
-                                    <SidebarMenuItem key={"SSH Manager"}>
-                                        <SidebarMenuButton onClick={() => onSelectView("ssh_manager")}
-                                                           disabled={disabled}>
-                                            <HardDrive/>
-                                            <span>SSH Manager</span>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                    <div className="ml-5">
-                                        <SidebarMenuItem key={"Terminal"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("terminal")}
-                                                               disabled={disabled}>
-                                                <Computer/>
-                                                <span>Terminal</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                        <SidebarMenuItem key={"Tunnel"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("tunnel")}
-                                                               disabled={disabled}>
-                                                <Server/>
-                                                <span>Tunnel</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                        <SidebarMenuItem key={"Config Editor"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("config_editor")}
-                                                               disabled={disabled}>
-                                                <File/>
-                                                <span>Config Editor</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
+                        <SidebarGroup className="!m-0 !p-0 !-mb-2">
+                            <Button className="m-2 flex flex-row font-semibold" variant="outline">
+                                <HardDrive strokeWidth="2.5"/>
+                                Host Manager
+                            </Button>
+                        </SidebarGroup>
+                        <Separator className="p-0.25"/>
+                        <SidebarGroup className="flex flex-col gap-y-2 !-mt-2">
+                            {/* Search Input */}
+                            <div className="bg-[#131316] rounded-lg">
+                                <Input
+                                    value={search}
+                                    onChange={e => setSearch(e.target.value)}
+                                    placeholder="Search hosts by any info..."
+                                    className="w-full h-8 text-sm border-2 border-[#272728] rounded-lg"
+                                    autoComplete="off"
+                                />
+                            </div>
+                            
+                            {/* Error Display */}
+                            {hostsError && (
+                                <div className="px-4 pb-2">
+                                    <div className="text-xs text-red-500 bg-red-500/10 rounded px-2 py-1 border border-red-500/20">
+                                        {hostsError}
                                     </div>
-                                    <SidebarMenuItem key={"Tools"}>
-                                        <SidebarMenuButton onClick={() => window.open("https://dashix.dev", "_blank")}
-                                                           disabled={disabled}>
-                                            <Hammer/>
-                                            <span>Tools</span>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                </SidebarMenu>
-                            </SidebarGroupContent>
+                                </div>
+                            )}
+
+                            {/* Loading State */}
+                            {hostsLoading && (
+                                <div className="px-4 pb-2">
+                                    <div className="text-xs text-muted-foreground text-center">
+                                        Loading hosts...
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Hosts by Folder */}
+                            {sortedFolders.map((folder, idx) => (
+                                <FolderCard
+                                    key={`folder-${folder}-${hostsByFolder[folder]?.length || 0}`}
+                                    folderName={folder}
+                                    hosts={getSortedHosts(hostsByFolder[folder])}
+                                    isFirst={idx === 0}
+                                    isLast={idx === sortedFolders.length - 1}
+                                />
+                            ))}
                         </SidebarGroup>
                     </SidebarContent>
                     <Separator className="p-0.25 mt-1 mb-1"/>
@@ -908,7 +1058,7 @@ export function LeftSidebar({
             {!isSidebarOpen && (
                 <div
                     onClick={() => setIsSidebarOpen(true)}
-                    className="absolute top-0 left-0 w-[10px] h-full bg-[#18181b] cursor-pointer z-20 flex items-center justify-center">
+                    className="absolute top-0 left-0 w-[10px] h-full bg-[#18181b] cursor-pointer z-20 flex items-center justify-center rounded-tr-md rounded-br-md">
                     <ChevronRight size={10} />
                 </div>
             )}
diff --git a/src/ui/Navigation/TopNavbar.tsx b/src/ui/Navigation/TopNavbar.tsx
index 235f7d1f..182b72ae 100644
--- a/src/ui/Navigation/TopNavbar.tsx
+++ b/src/ui/Navigation/TopNavbar.tsx
@@ -1,19 +1,48 @@
 import React from "react";
-import { useSidebar } from "@/components/ui/sidebar";
+import {useSidebar} from "@/components/ui/sidebar";
+import {Button} from "@/components/ui/button.tsx";
+import {ChevronDown, ChevronUpIcon} from "lucide-react";
+
+interface TopNavbarProps {
+    isTopbarOpen: boolean;
+    setIsTopbarOpen: (open: boolean) => void;
+}
+
+export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): React.ReactElement {
+    const {state} = useSidebar();
 
-export function TopNavbar(): React.ReactElement {
-    const { state } = useSidebar();
-    
     return (
-        <div 
-            className="fixed z-10 h-[50px] bg-[#18181b] border border-[#303032] rounded-lg transition-[left] duration-200 ease-linear"
-            style={{
-                top: "0.5rem",
-                left: state === "collapsed" ? "calc(1.5rem + 0.5rem)" : "calc(16rem + 0.5rem)",
-                right: "0.5rem"
-            }}
-        >
+        <div>
+            <div
+                className="fixed z-10 h-[50px] bg-[#18181b] border-2 border-[#303032] rounded-lg transition-all duration-200 ease-linear flex flex-row"
+                style={{
+                    top: isTopbarOpen ? "0.5rem" : "-3rem",
+                    left: state === "collapsed" ? "calc(1.5rem + 0.5rem)" : "calc(16rem + 0.5rem)",
+                    right: "0.5rem"
+                }}
+            >
+                <div className="h-full p-1 pr-2 border-r-2 border-[#303032] w-[calc(100%-3rem)]">
+                    test
+                </div>
 
+                <div className="flex items-center justify-center flex-1">
+                    <Button
+                        variant="outline"
+                        onClick={() => setIsTopbarOpen(false)}
+                        className="w-[28px] h-[28px]"
+                    >
+                        <ChevronUpIcon/>
+                    </Button>
+                </div>
+            </div>
+
+            {!isTopbarOpen && (
+                <div
+                    onClick={() => setIsTopbarOpen(true)}
+                    className="absolute top-0 left-0 w-full h-[10px] bg-[#18181b] cursor-pointer z-20 flex items-center justify-center rounded-bl-md rounded-br-md">
+                    <ChevronDown size={10} />
+                </div>
+            )}
         </div>
     )
 }
\ No newline at end of file