diff --git a/app/dashboard/sites/[siteId]/SitePage.tsx b/app/dashboard/sites/[siteId]/SitePage.tsx
index 21be20d..b85561a 100644
--- a/app/dashboard/sites/[siteId]/SitePage.tsx
+++ b/app/dashboard/sites/[siteId]/SitePage.tsx
@@ -4,7 +4,7 @@ import useSite from "@/hooks/useSite"
 import { useEffect, useState } from "react"
 import { EditModeToggle } from "@/components/EditModeToggle"
 import AddNetwork from "@/components/dialogues/AddNetwork"
-import { Plus, Pencil, Trash } from "lucide-react"
+import { Plus, Pencil, Trash, Info, Building2, Network as NetworkIcon, Globe, Cpu } from "lucide-react"
 import EditNetwork from "@/components/dialogues/EditNetwork"
 import DeleteNetwork from "@/components/dialogues/DeleteNetwork"
 
@@ -25,81 +25,114 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
   }, [siteId, setSiteId])
 
   return (
-    <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Ressources", "Sites", site.name]}>
-      <main>
-        <div className="flex flex-col gap-4">
-          <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
-            <div className="flex-1">
-                <div className="w-full flex justify-between items-center">
-                    <h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1>
-                    <div className="w-1/2 flex justify-end">
-                        <EditModeToggle onToggle={setIsEditMode} />
-                    </div>
+    <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Resources", "Sites", site.name]}>
+      <main className="w-full">
+        <div className="flex flex-col gap-4 w-full">
+          {/* Site Info Card */}
+          <div className="card bg-base-100 shadow-lg rounded-xl overflow-hidden border border-base-200 w-full">
+            <div className="card-body p-6">
+              <div className="w-full flex justify-between items-center mb-4">
+                <h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1>
+                <div className="w-1/2 flex justify-end">
+                  <EditModeToggle onToggle={setIsEditMode} />
                 </div>
-              <p className="text-sm opacity-70">Description: {site.description || "No description"}</p>
+              </div>
+              
+              <div className="bg-base-200 p-4 rounded-xl mb-2">
+                <h2 className="text-sm font-semibold mb-1 flex items-center gap-1.5">
+                  <Info className="h-4 w-4 opacity-70" />
+                  Description
+                </h2>
+                <p className="text-sm">
+                  {site.description || "No description provided for this site."}
+                </p>
+              </div>
             </div>
           </div>
-          <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
-            <div className="flex-1">
-            <div className="flex justify-between items-center">
-              <h1 className="text-2xl font-bold">Networks</h1>
-              {isEditMode ? (
-                <button className="btn btn-primary btn-sm px-2" onClick={() => document.getElementById('add_network')?.showModal()}>
-                  <Plus className="w-5 h-5" />
+
+          {/* Networks Section */}
+          <div className="card bg-base-100 shadow-lg rounded-xl overflow-hidden border border-base-200 w-full">
+            <div className="card-body p-6">
+              <div className="flex justify-between items-center mb-6">
+                <h2 className="text-xl font-bold">Networks</h2>
+                {isEditMode && (
+                  <button 
+                    className="btn btn-primary btn-sm px-2" 
+                    onClick={() => (document.getElementById('add_network') as HTMLDialogElement)?.showModal()}
+                  >
+                    <Plus className="w-5 h-5" />
                   </button>
-              ) : null}
-            </div>
-              <p className="text-sm opacity-70">
-                <div className="overflow-x-auto">
-                    <table className="table">
-                        <thead>
+                )}
+              </div>
+
+              {site.networks && site.networks.length > 0 ? (
+                <div className="rounded-xl overflow-hidden border border-base-200">
+                  <div className="overflow-x-auto">
+                    <table className="table table-zebra">
+                      <thead className="bg-base-200 text-base-content">
                         <tr>
-                            <th></th>
-                            <th>Network Name</th>
-                            <th>IPv4 Subnet</th>
-                            <th>IPv6 Subnet</th>
-                            <th>Gateway</th>
-                            {isEditMode ? (
-                                <th className="w-20">Actions</th>
-                            ) : null}
+                          <th className="w-12 text-center">#</th>
+                          <th>Network Name</th>
+                          <th>IPv4 Subnet</th>
+                          <th>IPv6 Subnet</th>
+                          <th>Gateway</th>
+                          {isEditMode && <th className="w-24 text-center">Actions</th>}
                         </tr>
-                        </thead>
-                        <tbody>
-                        {site.networks?.map((network, index) => (
-                            <tr key={index}>
-                                <th>{index + 1}</th>
-                                <td>{network.name}</td>
-                                <td>{network.ipv4Subnet}</td>
-                                <td>{network.ipv6Subnet}</td>
-                                <td>{network.gateway}</td>
-                                {isEditMode ? (
-                                    <td className="px-0">
-                                        <div className="flex gap-1 justify-center">
-                                            <button 
-                                                className="btn btn-primary btn-s px-2" 
-                                                onClick={() => document.getElementById('edit_network')?.showModal()}
-                                        >
-                                            <Pencil className="w-3 h-3" />
-                                        </button>
-                                        <button 
-                                            className="btn btn-error btn-s px-2" 
-                                            onClick={() => document.getElementById('delete_network')?.showModal()}
-                                        >
-                                            <Trash className="w-3 h-3" />
-                                        </button>
-                                    </div>
-                                    <EditNetwork siteId={site.id} network={network} />
-                                    <DeleteNetwork networkId={network.id} />
-                                </td>
-                                ) : null}
-                            </tr>
+                      </thead>
+                      <tbody>
+                        {site.networks.map((network, index) => (
+                          <tr key={index} className="hover:bg-base-200/50">
+                            <th className="text-center font-normal text-base-content/70">{index + 1}</th>
+                            <td className="font-medium">{network.name}</td>
+                            <td className="font-mono text-xs">{network.ipv4Subnet || "—"}</td>
+                            <td className="font-mono text-xs">{network.ipv6Subnet || "—"}</td>
+                            <td className="font-mono text-xs">{network.gateway || "—"}</td>
+                            {isEditMode && (
+                              <td className="px-0">
+                                <div className="flex gap-1 justify-center">
+                                  <button 
+                                    className="btn btn-primary btn-s px-2" 
+                                    onClick={() => (document.getElementById('edit_network') as HTMLDialogElement)?.showModal()}
+                                  >
+                                    <Pencil className="h-3 w-3" />
+                                  </button>
+                                  <button 
+                                    className="btn btn-error btn-s px-2" 
+                                    onClick={() => (document.getElementById('delete_network') as HTMLDialogElement)?.showModal()}
+                                  >
+                                    <Trash className="h-3 w-3" />
+                                  </button>
+                                </div>
+                                <EditNetwork siteId={site.id} network={network} />
+                                <DeleteNetwork networkId={network.id} />
+                              </td>
+                            )}
+                          </tr>
                         ))}
-                        </tbody>
+                      </tbody>
                     </table>
+                  </div>
                 </div>
-              </p>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-12 bg-base-200 rounded-xl">
+                  <div className="bg-base-100 p-4 rounded-full mb-4">
+                    <Cpu className="h-8 w-8 text-base-content/50" />
+                  </div>
+                  <p className="text-base-content/70 mb-4">No networks have been added to this site yet.</p>
+                  {isEditMode && (
+                    <button 
+                      className="btn btn-primary btn-sm gap-2" 
+                      onClick={() => (document.getElementById('add_network') as HTMLDialogElement)?.showModal()}
+                    >
+                      <Plus className="h-4 w-4" />
+                      Add Your First Network
+                    </button>
+                  )}
+                </div>
+              )}
             </div>
           </div>
+          
           <AddNetwork siteId={site.id} />
         </div>
       </main>