diff --git a/web/src/pages/ApiServices/index.tsx b/web/src/pages/ApiServices/index.tsx
index 45b9383..32f66b1 100644
--- a/web/src/pages/ApiServices/index.tsx
+++ b/web/src/pages/ApiServices/index.tsx
@@ -1,44 +1,10 @@
+import Breadcrumbs from "@/components/ui/breadcrumbs";
 import { Button } from "@/components/ui/button";
 import { useAdmin } from "@/store/admin";
 import { Plus } from "lucide-react";
 import { useEffect, type FC } from "react";
 import { Link } from "react-router";
 
-// const services = [
-//   {
-//     id: "1",
-//     name: "User Service",
-//     clientId: "user-svc-001",
-//     isActive: true,
-//     createdAt: "2024-09-15T10:20:30Z",
-//     updatedAt: "2025-01-10T12:00:00Z",
-//   },
-//   {
-//     id: "2",
-//     name: "Billing Service",
-//     clientId: "billing-svc-009",
-//     isActive: false,
-//     createdAt: "2024-10-01T08:45:10Z",
-//     updatedAt: "2025-03-22T14:30:00Z",
-//   },
-//   {
-//     id: "3",
-//     name: "Analytics Service",
-//     clientId: "analytics-svc-777",
-//     isActive: true,
-//     createdAt: "2024-11-25T16:00:00Z",
-//     updatedAt: "2025-02-05T10:15:45Z",
-//   },
-//   {
-//     id: "4",
-//     name: "Email Service",
-//     clientId: "email-svc-333",
-//     isActive: false,
-//     createdAt: "2023-07-10T13:00:00Z",
-//     updatedAt: "2024-12-31T09:25:00Z",
-//   },
-// ];
-
 const ApiServicesPage: FC = () => {
   const apiServices = useAdmin((state) => state.apiServices);
   const loading = useAdmin((state) => state.loadingApiServices);
@@ -49,91 +15,107 @@ const ApiServicesPage: FC = () => {
   }, [fetchApiServices]);
 
   return (
-    <div className="relative overflow-x-auto flex flex-col w-full h-full">
+    <div className="relative flex flex-col items-stretch w-full h-full">
+      <Breadcrumbs
+        className="p-7 pb-2"
+        items={[
+          {
+            href: "/admin",
+            label: "Admin",
+          },
+          {
+            label: "API Services",
+          },
+        ]}
+      />
       <div className="p-4 flex flex-row items-center justify-between">
         <p className="text-gray-800 dark:text-gray-300">Search...</p>
-        <Button className="flex flex-row items-center gap-2">
-          <Plus /> Add API Service
-        </Button>
+        <Link to="/admin/api-services/create">
+          <Button className="flex flex-row items-center gap-2">
+            <Plus /> Add API Service
+          </Button>
+        </Link>
       </div>
 
-      <table className="relative min-w-full flex-1 border-l-0 border border-gray-700 dark:border-gray-800 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
-        {loading && (
-          <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
-            <div className="text-gray-800 dark:text-gray-200 font-medium">
-              Loading...
+      <div className="flex-1 overflow-x-auto">
+        <table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
+          {loading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
+              <div className="text-gray-800 dark:text-gray-200 font-medium">
+                Loading...
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
-        <thead className="bg-black/5 dark:bg-white/5">
-          <tr>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
-              Name
-            </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
-              Client ID
-            </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
-              Is Active
-            </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
-              Created At
-            </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
-              Updated At
-            </th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-          {!loading && apiServices.length === 0 ? (
+          <thead className="bg-black/5 dark:bg-white/5">
             <tr>
-              <td
-                colSpan={5}
-                className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
-              >
-                No services found.
-              </td>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Name
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Client ID
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Is Active
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Created At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Updated At
+              </th>
             </tr>
-          ) : (
-            apiServices.map((service) => (
-              <tr
-                key={service.id}
-                className="hover:bg-gray-50 dark:hover:bg-gray-800"
-              >
-                <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-700">
-                  <Link
-                    to={`/services/${service.id}`}
-                    className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-                  >
-                    {service.name}
-                  </Link>
-                </td>
-                <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-700">
-                  {service.client_id}
-                </td>
-                <td className="px-6 py-4 text-sm border border-gray-700">
-                  <span
-                    className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
-                      service.is_active
-                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
-                        : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
-                    }`}
-                  >
-                    {service.is_active ? "Yes" : "No"}
-                  </span>
-                </td>
-                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
-                  {new Date(service.created_at).toLocaleString()}
-                </td>
-                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
-                  {new Date(service.updated_at).toLocaleString()}
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+            {!loading && apiServices.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
+                >
+                  No services found.
                 </td>
               </tr>
-            ))
-          )}
-        </tbody>
-      </table>
+            ) : (
+              apiServices.map((service) => (
+                <tr
+                  key={service.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                  <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-700">
+                    <Link
+                      to={`/services/${service.id}`}
+                      className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                    >
+                      {service.name}
+                    </Link>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-700">
+                    {service.client_id}
+                  </td>
+                  <td className="px-6 py-4 text-sm border border-gray-700">
+                    <span
+                      className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
+                        service.is_active
+                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                          : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+                      }`}
+                    >
+                      {service.is_active ? "Yes" : "No"}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
+                    {new Date(service.created_at).toLocaleString()}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
+                    {new Date(service.updated_at).toLocaleString()}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };