diff --git a/components/dialogues/AddNetwork.tsx b/components/dialogues/AddNetwork.tsx
index 4c3630a..728841c 100644
--- a/components/dialogues/AddNetwork.tsx
+++ b/components/dialogues/AddNetwork.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import ErrorToast from "@/components/Error";
 import SuccessToast from "@/components/Success";
 import useNetworks from "@/hooks/useNetworks";
+import { PlusCircle, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
 
 interface AddNetworkProps {
     onNetworkAdded?: () => void;
@@ -19,25 +20,44 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
     const [success, setSuccess] = useState("");
     const { addNetwork } = useNetworks();
     
+    const handleAddNetwork = () => {
+        addNetwork({ 
+            id: "0", 
+            siteId, 
+            name, 
+            ipv4Subnet, 
+            ipv6Subnet, 
+            gateway 
+        });
+        
+        if (onNetworkAdded) {
+            onNetworkAdded();
+        }
+    };
 
     return (
         <div>
             <dialog id="add_network" className="modal">
-                <div className="modal-box w-2/3 max-w-2/3">
-                    <div className="flex flex-col gap-4">
-                        <header>
-                            <h3 className="text-2xl font-semibold tracking-tight">Add New Network</h3>
-                            <p className="text-sm text-gray-500 mt-1">Provide details for the new network</p>
-                        </header>
+                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
+                            <PlusCircle className="h-6 w-6" />
+                        </div>
+                        <h3 className="font-bold text-xl">Add New Network</h3>
+                    </div>
     
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
                         <div className="space-y-4">
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">Network Name</span>
+                                    <div className="flex items-center gap-2">
+                                        <NetworkIcon className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Network Name</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="e.g. VLAN 10"
                                     value={name}
                                     onChange={(e) => setName(e.target.value)}
@@ -46,62 +66,72 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
 
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        IPv4 Subnet
-                                    </span>
-                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                    <div className="flex items-center gap-2">
+                                        <Globe className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">IPv4 Subnet</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="Enter the IPv4 subnet"
                                     value={ipv4Subnet}
                                     onChange={(e) => setIpv4Subnet(e.target.value)}
                                 />
                             </div>
+                            
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        IPv6 Subnet
-                                    </span>
-                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                    <div className="flex items-center gap-2">
+                                        <Globe className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">IPv6 Subnet</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="Enter the IPv6 subnet"
                                     value={ipv6Subnet}
                                     onChange={(e) => setIpv6Subnet(e.target.value)}
                                 />
                             </div>
+                            
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        Gateway
-                                    </span>
-                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                    <div className="flex items-center gap-2">
+                                        <Wifi className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Gateway</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="Enter the gateway"
                                     value={gateway}
                                     onChange={(e) => setGateway(e.target.value)}
                                 />
                             </div>
                         </div>
+                    </div>
 
-                        <div className="modal-action flex justify-end">
-                            <form method="dialog" className="flex gap-3">
-                                <button className="btn btn-ghost">Cancel</button>
-                                <button className="btn btn-primary px-6" onClick={() => addNetwork({ id: "0", siteId, name, ipv4Subnet, ipv6Subnet, gateway })}>Add Network</button>
-                            </form>
-                        </div>
+                    <div className="modal-action">
+                        <form method="dialog" className="flex gap-3 w-full justify-end">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button 
+                                className="btn btn-success text-success-content" 
+                                onClick={handleAddNetwork}
+                            >
+                                Add Network
+                            </button>
+                        </form>
                     </div>
                 </div>
             </dialog>
             <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
             <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/components/dialogues/AddSite.tsx b/components/dialogues/AddSite.tsx
index 5f15db8..d96f83c 100644
--- a/components/dialogues/AddSite.tsx
+++ b/components/dialogues/AddSite.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import axios from "axios";
 import ErrorToast from "@/components/Error";
 import SuccessToast from "@/components/Success";
+import { Building2, MapPin, FileText } from "lucide-react";
 
 interface AddSiteProps {
     onSiteAdded?: () => void;
@@ -44,55 +45,67 @@ export default function AddSite({ onSiteAdded }: AddSiteProps) {
     return (
         <div>
             <dialog id="add_site" className="modal">
-                <div className="modal-box w-2/3 max-w-2/3">
-                    <div className="flex flex-col gap-4">
-                        <header>
-                            <h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3>
-                            <p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p>
-                        </header>
+                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
+                            <Building2 className="h-6 w-6" />
+                        </div>
+                        <h3 className="font-bold text-xl">Add New Site</h3>
+                    </div>
     
-                        <div className="space-y-6">
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
+                        <div className="space-y-4">
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">Site Name</span>
+                                    <div className="flex items-center gap-2">
+                                        <MapPin className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Site Name</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="e.g. Downtown Office"
                                     value={name}
                                     onChange={(e) => setName(e.target.value)}
+                                    required
                                 />
                             </div>
 
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        Description
-                                        <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
-                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <FileText className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Description</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <textarea 
-                                    className="textarea textarea-bordered w-full focus:ring-2" 
-                                    placeholder="Enter a brief description..."
+                                    className="textarea textarea-bordered w-full" 
+                                    placeholder="Enter a brief description of this site..."
                                     rows={4}
                                     value={description}
                                     onChange={(e) => setDescription(e.target.value)}
                                 ></textarea>
                             </div>
                         </div>
+                    </div>
 
-                        <div className="modal-action flex justify-end">
-                            <form method="dialog" className="flex gap-3">
-                                <button className="btn btn-ghost">Cancel</button>
-                                <button className="btn btn-primary px-6" onClick={addSite}>Add Site</button>
-                            </form>
-                        </div>
+                    <div className="modal-action">
+                        <form method="dialog" className="flex gap-3 w-full justify-end">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button 
+                                className="btn btn-success text-success-content" 
+                                onClick={addSite}
+                            >
+                                Add Site
+                            </button>
+                        </form>
                     </div>
                 </div>
             </dialog>
             <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
             <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/components/dialogues/DeleteNetwork.tsx b/components/dialogues/DeleteNetwork.tsx
index 3ca1a0e..4c9f777 100644
--- a/components/dialogues/DeleteNetwork.tsx
+++ b/components/dialogues/DeleteNetwork.tsx
@@ -1,5 +1,6 @@
 "use client";
 import useNetworks from "@/hooks/useNetworks";
+import { Trash2, AlertTriangle } from "lucide-react";
 
 interface DeleteNetworkProps {
     networkId: string;
@@ -7,17 +8,44 @@ interface DeleteNetworkProps {
 
 export default function DeleteNetwork({ networkId }: DeleteNetworkProps) {
     const { deleteNetwork } = useNetworks();
+    
+    const handleDelete = () => {
+        deleteNetwork(networkId);
+    };
 
     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-box w-11/12 max-w-md border-l-4 border-error">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-error text-error-content rounded-full p-2 flex items-center justify-center">
+                            <Trash2 className="h-6 w-6" />
+                        </div>
+                        <h3 className="font-bold text-xl">Delete Network</h3>
+                    </div>
+                    
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
+                        <p className="text-sm">
+                            <span className="font-medium">Are you sure you want to delete this network?</span>
+                        </p>
+                        <p className="text-sm mt-2">
+                            This will also delete all servers & applications associated with it.
+                        </p>
+                        <div className="mt-2 flex items-center gap-2 text-error">
+                            <AlertTriangle className="h-5 w-5" />
+                            <span className="font-bold">This action cannot be undone.</span>
+                        </div>
+                    </div>
+                    
                     <div className="modal-action">
-                        <form method="dialog">
-                            <button className="btn">Cancel</button>
-                            <button className="btn btn-primary" onClick={() => deleteNetwork(networkId)}>Delete</button>
+                        <form method="dialog" className="flex gap-2">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button 
+                                className="btn btn-error text-error-content" 
+                                onClick={handleDelete}
+                            >
+                                Delete Network
+                            </button>
                         </form>
                     </div>
                 </div>
diff --git a/components/dialogues/EditNetwork.tsx b/components/dialogues/EditNetwork.tsx
index 860c0a6..75c91a6 100644
--- a/components/dialogues/EditNetwork.tsx
+++ b/components/dialogues/EditNetwork.tsx
@@ -5,6 +5,7 @@ import ErrorToast from "@/components/Error";
 import SuccessToast from "@/components/Success";
 import useNetworks from "@/hooks/useNetworks";
 import { Network } from "@/app/types";
+import { PencilLine, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
 
 interface EditNetworkProps {
     onNetworkAdded?: () => void;
@@ -21,25 +22,40 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
     const [success, setSuccess] = useState("");
     const { editNetwork } = useNetworks();
     
+    const handleEdit = () => {
+        editNetwork({ 
+            id: network.id, 
+            siteId, 
+            name: editName, 
+            ipv4Subnet: editIpv4Subnet, 
+            ipv6Subnet: editIpv6Subnet, 
+            gateway: editGateway 
+        });
+    };
 
     return (
         <div>
             <dialog id="edit_network" className="modal">
-                <div className="modal-box w-2/3 max-w-2/3">
-                    <div className="flex flex-col gap-4">
-                        <header>
-                            <h3 className="text-2xl font-semibold tracking-tight">Edit Network</h3>
-                            <p className="text-sm text-gray-500 mt-1">Provide details for the network</p>
-                        </header>
+                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-primary">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-primary text-primary-content rounded-full p-2 flex items-center justify-center">
+                            <PencilLine className="h-6 w-6" />
+                        </div>
+                        <h3 className="font-bold text-xl">Edit Network</h3>
+                    </div>
     
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
                         <div className="space-y-4">
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">Network Name</span>
+                                    <div className="flex items-center gap-2">
+                                        <NetworkIcon className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Network Name</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="e.g. VLAN 10"
                                     value={editName}
                                     onChange={(e) => setEditName(e.target.value)}
@@ -48,62 +64,72 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
 
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        IPv4 Subnet
-                                    </span>
-                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                    <div className="flex items-center gap-2">
+                                        <Globe className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">IPv4 Subnet</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="Enter the IPv4 subnet"
                                     value={editIpv4Subnet}
                                     onChange={(e) => setEditIpv4Subnet(e.target.value)}
                                 />
                             </div>
+                            
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        IPv6 Subnet
-                                    </span>
-                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                    <div className="flex items-center gap-2">
+                                        <Globe className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">IPv6 Subnet</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="Enter the IPv6 subnet"
                                     value={editIpv6Subnet}
                                     onChange={(e) => setEditIpv6Subnet(e.target.value)}
                                 />
                             </div>
+                            
                             <div className="form-control">
                                 <label className="label">
-                                    <span className="label-text font-medium text-base">
-                                        Gateway
-                                    </span>
-                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                    <div className="flex items-center gap-2">
+                                        <Wifi className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Gateway</span>
+                                        <span className="ml-1 text-xs opacity-60">(optional)</span>
+                                    </div>
                                 </label>
                                 <input 
                                     type="text" 
-                                    className="input input-bordered w-full focus:ring-2" 
+                                    className="input input-bordered w-full" 
                                     placeholder="Enter the gateway"
-                                    value={ editGateway}
+                                    value={editGateway}
                                     onChange={(e) => setEditGateway(e.target.value)}
                                 />
                             </div>
                         </div>
+                    </div>
 
-                        <div className="modal-action flex justify-end">
-                            <form method="dialog" className="flex gap-3">
-                                <button className="btn btn-ghost">Cancel</button>
-                                <button className="btn btn-primary px-6" onClick={() => editNetwork({ id: network.id, siteId, name: editName, ipv4Subnet: editIpv4Subnet, ipv6Subnet: editIpv6Subnet, gateway: editGateway })}>Edit Network</button>
-                            </form>
-                        </div>
+                    <div className="modal-action">
+                        <form method="dialog" className="flex gap-3 w-full justify-end">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button 
+                                className="btn btn-primary" 
+                                onClick={handleEdit}
+                            >
+                                Save Changes
+                            </button>
+                        </form>
                     </div>
                 </div>
             </dialog>
             <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
             <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
         </div>
-    )
+    );
 }
\ No newline at end of file