diff --git a/app/dashboard/sites/[siteId]/SitePage.tsx b/app/dashboard/sites/[siteId]/SitePage.tsx
index 8710665..21be20d 100644
--- a/app/dashboard/sites/[siteId]/SitePage.tsx
+++ b/app/dashboard/sites/[siteId]/SitePage.tsx
@@ -4,8 +4,9 @@ import useSite from "@/hooks/useSite"
 import { useEffect, useState } from "react"
 import { EditModeToggle } from "@/components/EditModeToggle"
 import AddNetwork from "@/components/dialogues/AddNetwork"
-import { Plus, Pencil } from "lucide-react"
+import { Plus, Pencil, Trash } from "lucide-react"
 import EditNetwork from "@/components/dialogues/EditNetwork"
+import DeleteNetwork from "@/components/dialogues/DeleteNetwork"
 
 interface SitesPageProps {
   username: string
@@ -58,7 +59,9 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                             <th>IPv4 Subnet</th>
                             <th>IPv6 Subnet</th>
                             <th>Gateway</th>
-                            <th></th>
+                            {isEditMode ? (
+                                <th className="w-20">Actions</th>
+                            ) : null}
                         </tr>
                         </thead>
                         <tbody>
@@ -69,12 +72,26 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                                 <td>{network.ipv4Subnet}</td>
                                 <td>{network.ipv6Subnet}</td>
                                 <td>{network.gateway}</td>
-                                <td>
-                                    <button className="btn btn-primary btn-sm" onClick={() => document.getElementById('edit_network')?.showModal()}>
-                                        <Pencil className="w-5 h-5" />
-                                    </button>
+                                {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>
                         ))}
                         </tbody>
diff --git a/components/dialogues/DeleteNetwork.tsx b/components/dialogues/DeleteNetwork.tsx
new file mode 100644
index 0000000..3ca1a0e
--- /dev/null
+++ b/components/dialogues/DeleteNetwork.tsx
@@ -0,0 +1,27 @@
+"use client";
+import useNetworks from "@/hooks/useNetworks";
+
+interface DeleteNetworkProps {
+    networkId: string;
+}
+
+export default function DeleteNetwork({ networkId }: DeleteNetworkProps) {
+    const { deleteNetwork } = useNetworks();
+
+    return (
+        <div>
+            <dialog id="delete_network" className="modal">
+                <div className="modal-box w-2/3 max-w-2/3">
+                    <h3 className="text-lg font-bold">Delete Network</h3>
+                    <p className="py-4">Are you sure you want to delete this network?</p>
+                    <div className="modal-action">
+                        <form method="dialog">
+                            <button className="btn">Cancel</button>
+                            <button className="btn btn-primary" onClick={() => deleteNetwork(networkId)}>Delete</button>
+                        </form>
+                    </div>
+                </div>
+            </dialog>
+        </div>
+    );
+}
\ No newline at end of file