diff --git a/apps/Frontend/src/components/appointment-procedures/appointment-procedures-dialog.tsx b/apps/Frontend/src/components/appointment-procedures/appointment-procedures-dialog.tsx
index 1f4e2e1..c5196c7 100644
--- a/apps/Frontend/src/components/appointment-procedures/appointment-procedures-dialog.tsx
+++ b/apps/Frontend/src/components/appointment-procedures/appointment-procedures-dialog.tsx
@@ -389,6 +389,17 @@ export function AppointmentProceduresDialog({
           </div>
 
           <div className="border rounded-lg divide-y bg-white">
+            {/* ===== TABLE HEADER ===== */}
+            <div className="grid grid-cols-[90px_1fr_90px_80px_80px_72px_72px] gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground bg-muted/40">
+              <div>Code</div>
+              <div>Label</div>
+              <div>Fee</div>
+              <div>Tooth</div>
+              <div>Surface</div>
+              <div className="text-center">Edit</div>
+              <div className="text-center">Delete</div>
+            </div>
+
             {isLoading && (
               <div className="p-4 text-sm text-muted-foreground">
                 Loading...
@@ -404,7 +415,7 @@ export function AppointmentProceduresDialog({
             {procedures.map((p) => (
               <div
                 key={p.id}
-                className="flex items-center gap-2 p-3 text-sm hover:bg-muted/40 transition"
+                className="grid grid-cols-[90px_1fr_90px_80px_80px_72px_72px] gap-2 px-3 py-3 text-sm hover:bg-muted/40 transition"
               >
                 {editingId === p.id ? (
                   <>
@@ -460,18 +471,21 @@ export function AppointmentProceduresDialog({
                         })
                       }
                     />
-
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={() => updateMutation.mutate()}
-                    >
-                      <Save className="h-4 w-4" />
-                    </Button>
-
-                    <Button size="icon" variant="ghost" onClick={cancelEdit}>
-                      <X className="h-4 w-4" />
-                    </Button>
+                    <div className="flex justify-center">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        onClick={() => updateMutation.mutate()}
+                      >
+                        <Save className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    
+                    <div className="flex justify-center">
+                      <Button size="icon" variant="ghost" onClick={cancelEdit}>
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
                   </>
                 ) : (
                   <>
@@ -490,21 +504,25 @@ export function AppointmentProceduresDialog({
                     <div className="w-[80px]">{p.toothNumber}</div>
                     <div className="w-[80px]">{p.toothSurface}</div>
 
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={() => startEdit(p)}
-                    >
-                      Edit
-                    </Button>
+                    <div className="flex justify-center">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        onClick={() => startEdit(p)}
+                      >
+                        Edit
+                      </Button>
+                    </div>
 
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={() => deleteMutation.mutate(p.id!)}
-                    >
-                      <Trash2 className="h-4 w-4 text-red-500" />
-                    </Button>
+                    <div className="flex justify-center">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        onClick={() => deleteMutation.mutate(p.id!)}
+                      >
+                        <Trash2 className="h-4 w-4 text-red-500" />
+                      </Button>
+                    </div>
                   </>
                 )}
               </div>