Cleaned up UI

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/toaster'
+import Navbar from '@/components/Navbar'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -27,6 +28,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
+            <Navbar />
             {children}
             <Toaster />
           </ThemeProvider>

app/page.tsx

@@ -1,4 +1,5 @@
 import RouteCards from '@/components/RouteCards';
+import { CardTitle, Card, CardDescription, CardHeader, CardContent } from '@/components/ui/card';
 import { getRoutes } from '@/lib/serverActions';
 
 export default async function Home() {
@@ -6,10 +7,21 @@ export default async function Home() {
 
   return (
     <main>
-      <div className=''>
+      <div className='flex items-center justify-center p-2'>
-        <div className='flex grid grid-cols-6 p-2'>
+        <Card className='flex'>
-          <RouteCards routes={routes} />
+          <CardHeader>
-        </div>
+            <CardTitle>Active Routes</CardTitle>
+            <CardDescription>Amount of configured routes</CardDescription>
+          </CardHeader>
+          <CardContent className='flex items-center'>
+            <div className=''>
+              <p className='text-xl font-semibold translate-y-2'>{routes.length}</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
+        <RouteCards routes={routes} />
       </div>
     </main>
   )

components/Navbar.tsx

@@ -0,0 +1,7 @@
+export default function Navbar() {
+    return (
+        <div className='bg-red-500 flex items-center justify-center h-12'>
+            <p>Navbar</p>
+        </div>
+    )
+}

components/RouteCards.tsx

@@ -41,7 +41,7 @@ export default function RouteCards({ routes }: { routes: Array<Route> }) {
                     </CardHeader>
                     <CardContent>
                         <p className="text-sm font-medium leading-none">
-                            Proxying to
+                            Tunneling to
                         </p>
                         <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
                     </CardContent>