diff --git a/web/src/pages/ApiServices/index.tsx b/web/src/pages/ApiServices/index.tsx
index f7e0e25..45b9383 100644
--- a/web/src/pages/ApiServices/index.tsx
+++ b/web/src/pages/ApiServices/index.tsx
@@ -1,4 +1,6 @@
+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";
 
@@ -48,19 +50,22 @@ const ApiServicesPage: FC = () => {
 
   return (
     <div className="relative overflow-x-auto flex flex-col w-full h-full">
-      <div className="p-4">
+      <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>
       </div>
 
-      {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...
+      <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>
           </div>
-        </div>
-      )}
+        )}
 
-      <table className="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">
         <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">