diff --git a/app/dashboard/applications/Applications.tsx b/app/dashboard/applications/Applications.tsx
index ae9f14f..d187546 100644
--- a/app/dashboard/applications/Applications.tsx
+++ b/app/dashboard/applications/Applications.tsx
@@ -16,7 +16,7 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
-import { Plus, Link, Home, Trash2 } from "lucide-react";
+import { Plus, Link, Home, Trash2, LayoutGrid, List } from "lucide-react";
 import {
   Card,
   CardContent,
@@ -55,7 +55,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-
+import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import axios from 'axios';
 
@@ -70,6 +70,22 @@ export default function Dashboard() {
   const [maxPage, setMaxPage] = useState(1);
   const [applications, setApplications] = useState([]);
   const [servers, setServers] = useState([]);
+  const [isGridLayout, setIsGridLayout] = useState(false);
+
+  useEffect(() => {
+    const savedLayout = Cookies.get('layoutPreference');
+    setIsGridLayout(savedLayout === 'grid');
+  }, []);
+
+  const toggleLayout = () => {
+    const newLayout = !isGridLayout;
+    setIsGridLayout(newLayout);
+    Cookies.set('layoutPreference', newLayout ? 'grid' : 'standard', {
+      expires: 365,
+      path: '/',
+      sameSite: 'strict'
+    });
+  };
 
   const add = async () => {
     try {
@@ -142,20 +158,29 @@ export default function Dashboard() {
         <div className="pl-4 pr-4">
           <div className="flex justify-between items-center">
             <span className="text-2xl font-semibold">Your Applications</span>
-            {servers.length === 0 ? (
-              <p className="text-muted-foreground">You must first add a server.</p>
-            ) : (
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline" size="icon">
-                    <Plus />
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Add an application</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      <div className="space-y-4 pt-4">
+            <div className="flex gap-2">
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={toggleLayout}
+                title={isGridLayout ? "Switch to list view" : "Switch to grid view"}
+              >
+                {isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
+              </Button>
+              {servers.length === 0 ? (
+                <p className="text-muted-foreground">You must first add a server.</p>
+              ) : (
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="outline" size="icon">
+                      <Plus />
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Add an application</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        <div className="space-y-4 pt-4">
                         <div className="grid w-full items-center gap-1.5">
                           <Label>Name</Label>
                           <Input placeholder="e.g. Portainer" onChange={(e) => setName(e.target.value)}/>
@@ -191,41 +216,50 @@ export default function Dashboard() {
                           <Label>Local URL <span className="text-stone-600">(optional)</span></Label>
                           <Input placeholder="http://localhost:3000" onChange={(e) => setLocalURL(e.target.value)}/>
                         </div>
-                      </div>
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <Button onClick={add} disabled={!name || !publicURL || !serverId}>
-                      Add
-                    </Button>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            )}
+                        </div>
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <Button onClick={add} disabled={!name || !publicURL || !serverId}>
+                        Add
+                      </Button>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              )}
+          </div>
           </div>
           <br />
-          {applications.map((app) => (
-            <Card key={app.id} className="w-full mb-4">
-              <CardHeader>
-                <div className="flex items-center justify-between w-full">
-                  <div className="flex items-center">
-                    <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
-                      {app.icon ? (
-                        <img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" />
-                      ) : (
-                        <span className="text-gray-500 text-xs">Image</span>
-                      )}
+          <div className={isGridLayout ? 
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : 
+            "space-y-4"}>
+            {applications.map((app) => (
+              <Card 
+                key={app.id} 
+                className={isGridLayout ? 
+                  "h-full flex flex-col justify-between" : 
+                  "w-full mb-4"}
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between w-full">
+                    <div className="flex items-center">
+                      <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
+                        {app.icon ? (
+                          <img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" />
+                        ) : (
+                          <span className="text-gray-500 text-xs">Image</span>
+                        )}
+                      </div>
+                      <div className="ml-4">
+                        <CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
+                        <CardDescription className="text-md">
+                          {app.description}<br />
+                          Server: {app.server || 'No server'}
+                        </CardDescription>
+                      </div>
                     </div>
-                    <div className="ml-4">
-                      <CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
-                      <CardDescription className="text-md">
-                        {app.description}<br />
-                        Server: {app.server || 'No server'}
-                      </CardDescription>
-                    </div>
-                  </div>
-                  <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
+                    <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
                     <div className="flex items-center gap-2 w-full">
                       <div className="flex flex-col space-y-2 flex-grow">
                         <Button 
@@ -261,6 +295,7 @@ export default function Dashboard() {
               </CardHeader>
             </Card>
           ))}
+          </div>
           <div className="pt-4">
             <Pagination>
               <PaginationContent>
diff --git a/app/dashboard/servers/Servers.tsx b/app/dashboard/servers/Servers.tsx
index 5015dab..e31f844 100644
--- a/app/dashboard/servers/Servers.tsx
+++ b/app/dashboard/servers/Servers.tsx
@@ -16,7 +16,7 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar"
 import { Button } from "@/components/ui/button"
-import { Plus, Link, MonitorCog, FileDigit, Trash2 } from "lucide-react" // Importiere Icons
+import { Plus, Link, MonitorCog, FileDigit, Trash2, LayoutGrid, List } from "lucide-react"
 import {
   Card,
   CardContent,
@@ -54,13 +54,13 @@ import {
     SelectTrigger,
     SelectValue,
   } from "@/components/ui/select"
-  import {
+import {
     Tooltip,
     TooltipContent,
     TooltipProvider,
     TooltipTrigger,
   } from "@/components/ui/tooltip"
-  
+import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import axios from 'axios';
 
@@ -69,10 +69,25 @@ export default function Dashboard() {
   const [os, setOs] = useState("");
   const [ip, setIp] = useState("");
   const [url, setUrl] = useState("");
-
   const [currentPage, setCurrentPage] = useState(1);
   const [maxPage, setMaxPage] = useState(1);
   const [servers, setServers] = useState([]);
+  const [isGridLayout, setIsGridLayout] = useState(false);
+
+  useEffect(() => {
+    const savedLayout = Cookies.get('layoutPreference');
+    setIsGridLayout(savedLayout === 'grid');
+  }, []);
+
+  const toggleLayout = () => {
+    const newLayout = !isGridLayout;
+    setIsGridLayout(newLayout);
+    Cookies.set('layoutPreference', newLayout ? 'grid' : 'standard', {
+      expires: 365,
+      path: '/',
+      sameSite: 'strict'
+    });
+  };
 
   const add = async () => {
     try {
@@ -140,138 +155,171 @@ export default function Dashboard() {
           </div>
         </header>
         <div className="pl-4 pr-4">
-          <div className="flex justify-between">
+          <div className="flex justify-between items-center">
             <span className="text-2xl font-semibold">Your Servers</span>
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline" size="icon">
-                  <Plus />
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Add an server</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    <div className="space-y-4 pt-4">
-                      <div className="grid w-full items-center gap-1.5">
-                        <Label htmlFor="name">Name</Label>
-                        <Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/>
+            <div className="flex gap-2">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button 
+                      variant="outline" 
+                      size="icon"
+                      onClick={toggleLayout}
+                    >
+                      {isGridLayout ? (
+                        <List className="h-4 w-4" />
+                      ) : (
+                        <LayoutGrid className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {isGridLayout ? 
+                      "Switch to list view" : 
+                      "Switch to grid view"}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="outline" size="icon">
+                    <Plus />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Add an server</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      <div className="space-y-4 pt-4">
+                        <div className="grid w-full items-center gap-1.5">
+                          <Label htmlFor="name">Name</Label>
+                          <Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/>
+                        </div>
+                        <div className="grid w-full items-center gap-1.5">
+                          <Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label>
+                          <Select onValueChange={(value) => setOs(value)}>
+                              <SelectTrigger className="w-full">
+                                  <SelectValue placeholder="Select OS" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                  <SelectItem value="Windows">Windows</SelectItem>
+                                  <SelectItem value="Linux">Linux</SelectItem>
+                                  <SelectItem value="MacOS">MacOS</SelectItem>
+                              </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="grid w-full items-center gap-1.5">
+                          <Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label>
+                          <Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/>
+                        </div>
+                        <div className="grid w-full items-center gap-1.5">
+                          <TooltipProvider>
+                              <Tooltip>
+                                  <TooltipTrigger>
+                                      <Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                  Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed
+                                  </TooltipContent>
+                              </Tooltip>
+                          </TooltipProvider>
+                          <Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/>
+                        </div>
                       </div>
-                      <div className="grid w-full items-center gap-1.5">
-                        <Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label>
-                        <Select onValueChange={(value) => setOs(value)}>
-                            <SelectTrigger className="w-full">
-                                <SelectValue placeholder="Select OS" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="Windows">Windows</SelectItem>
-                                <SelectItem value="Linux">Linux</SelectItem>
-                                <SelectItem value="MacOS">MacOS</SelectItem>
-                            </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="grid w-full items-center gap-1.5">
-                        <Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label>
-                        <Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/>
-                      </div>
-                      <div className="grid w-full items-center gap-1.5">
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger>
-                                    <Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                        <Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/>
-                      </div>
-                    </div>
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <Button onClick={add}>Add</Button>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <Button onClick={add}>Add</Button>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
           </div>
           <br />
-          {servers.map((server) => (
-            <Card key={server.id} className="w-full mb-4">
-              <CardHeader>
-                <div className="flex items-center justify-between w-full">
-                  <div className="flex items-center">
-                  <div className="ml-4">
-                    <CardTitle className="text-2xl font-bold">{server.name}</CardTitle>
-                    <CardDescription className="text-sm space-y-1 mt-1">
-                        <div className="flex items-center gap-2 text-foreground/80">
-                        <MonitorCog className="h-4 w-4 text-muted-foreground" />
-                        <span>OS: {server.os || '-'}</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-foreground/80">
-                        <FileDigit className="h-4 w-4 text-muted-foreground" />
-                        <span>IP: {server.ip || 'Nicht angegeben'}</span>
-                        </div>
-                    </CardDescription>
+          <div className={isGridLayout ? 
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : 
+            "space-y-4"}>
+            {servers.map((server) => (
+              <Card 
+                key={server.id} 
+                className={isGridLayout ? 
+                  "h-full flex flex-col justify-between" : 
+                  "w-full mb-4"}
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between w-full">
+                    <div className="flex items-center">
+                    <div className="ml-4">
+                      <CardTitle className="text-2xl font-bold">{server.name}</CardTitle>
+                      <CardDescription className="text-sm space-y-1 mt-1">
+                          <div className="flex items-center gap-2 text-foreground/80">
+                          <MonitorCog className="h-4 w-4 text-muted-foreground" />
+                          <span>OS: {server.os || '-'}</span>
+                          </div>
+                          <div className="flex items-center gap-2 text-foreground/80">
+                          <FileDigit className="h-4 w-4 text-muted-foreground" />
+                          <span>IP: {server.ip || 'Nicht angegeben'}</span>
+                          </div>
+                      </CardDescription>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
+                      <div className="flex items-center gap-2 w-full">
+                      <div className="flex flex-col space-y-2 flex-grow">
+                          {server.url && (
+                              <Button 
+                              variant="outline" 
+                              className="gap-2 w-full"
+                              onClick={() => window.open(server.url, "_blank")}
+                              >
+                              <Link className="h-4 w-4" />
+                              Open Management URL
+                              </Button>
+                          )}
+                          </div>
+                      <Button 
+                          variant="destructive" 
+                          size="icon"
+                          className="w-10"
+                          onClick={() => deleteApplication(server.id)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
                     </div>
                   </div>
-                  <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
-                    <div className="flex items-center gap-2 w-full">
-                    <div className="flex flex-col space-y-2 flex-grow">
-                        {server.url && (
-                            <Button 
-                            variant="outline" 
-                            className="gap-2 w-full"
-                            onClick={() => window.open(server.url, "_blank")}
-                            >
-                            <Link className="h-4 w-4" />
-                            Open Management URL
-                            </Button>
-                        )}
-                        </div>
-                    <Button 
-                        variant="destructive" 
-                        size="icon"
-                        className="w-10"
-                        onClick={() => deleteApplication(server.id)}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </CardHeader>
-            </Card>
-          ))}
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
           <div className="pt-4">
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious 
-              href="#" 
-              onClick={handlePrevious}
-              isActive={currentPage > 1}
-            />
-          </PaginationItem>
-          
-          <PaginationItem>
-            <PaginationLink isActive>{currentPage}</PaginationLink>
-          </PaginationItem>
+            <Pagination>
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious 
+                    href="#" 
+                    onClick={handlePrevious}
+                    isActive={currentPage > 1}
+                  />
+                </PaginationItem>
+                
+                <PaginationItem>
+                  <PaginationLink isActive>{currentPage}</PaginationLink>
+                </PaginationItem>
 
-          <PaginationItem>
-            <PaginationNext 
-              href="#" 
-              onClick={handleNext}
-              isActive={currentPage < maxPage}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </div>
+                <PaginationItem>
+                  <PaginationNext 
+                    href="#" 
+                    onClick={handleNext}
+                    isActive={currentPage < maxPage}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          </div>
         </div>
       </SidebarInset>
     </SidebarProvider>
   )
-}
+}
\ No newline at end of file