diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx
index 1c6d2f9ee3..8669012ba9 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx
@@ -102,7 +102,7 @@ export const UsageSetup = ({
   };
 
   return (
-    <div className="space-y-5 px-2 py-1">
+    <div className="flex flex-col gap-y-5 px-2 py-1">
       {!overrideEnabled && (
         <ProtectionSwitch
           description="Turn on to limit how many times this key can be used. Once the limit
@@ -136,7 +136,7 @@ export const UsageSetup = ({
         control={control}
         name="limit.data.refill.interval"
         render={({ field }) => (
-          <div className="space-y-1.5">
+          <div className="gap-y-1.5">
             <div className="text-gray-11 text-[13px] flex items-center">Refill Rate</div>
             <Select
               onValueChange={(value) => {
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/expiration-setup.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/expiration-setup.tsx
index aedaedb565..872933a2fa 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/expiration-setup.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/expiration-setup.tsx
@@ -143,7 +143,7 @@ export const ExpirationSetup = ({
   };
 
   return (
-    <div className="space-y-5 px-2 py-1">
+    <div className="flex flex-col gap-y-5 px-2 py-1">
       {!overrideEnabled && (
         <ProtectionSwitch
           description="Turn on to set an expiration date. When reached, the key will be automatically disabled."
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/general-setup.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/general-setup.tsx
index e06b1b2dd1..a21846c528 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/general-setup.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/general-setup.tsx
@@ -13,9 +13,9 @@ export const GeneralSetup = () => {
   } = useFormContext<FormValues>();
 
   return (
-    <div className="space-y-5 px-2 py-1 ">
+    <div className="flex flex-col gap-y-5 px-2 py-1 ">
       <FormInput
-        className="[&_input:first-of-type]:h-[36px]"
+        className="[&_input:first-of-type]:h-9"
         placeholder="Enter name"
         label="Name"
         maxLength={256}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
index cdd4ea393f..dde25f32f0 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
@@ -12,10 +12,10 @@ type RolesSectionProps = {
 export const RolesSection: React.FC<RolesSectionProps> = ({ roles }) => {
   if (!roles || roles.length === 0) {
     return (
-      <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="flex flex-col gap-1 mt-4 px-4">
         <div className="border bg-gray-2 border-gray-4 rounded-[10px]">
-          <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">Roles</div>
-          <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+          <div className="text-gray-11 text-[12px] leading-6 px-3.5 py-1.5 font-sans">Roles</div>
+          <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-4 py-2">
             <span className="text-xs text-gray-11">No roles assigned</span>
           </div>
         </div>
@@ -24,12 +24,12 @@ export const RolesSection: React.FC<RolesSectionProps> = ({ roles }) => {
   }
 
   return (
-    <div className="flex flex-col gap-1 mt-[16px] px-4">
+    <div className="flex flex-col gap-1 mt-4 px-4">
       <div className="border bg-gray-2 border-gray-4 rounded-[10px]">
-        <div className="text-gray-11 text-xs leading-6 px-[14px] py-1.5 font-sans">
+        <div className="text-gray-11 text-xs leading-6 px-4 py-1.5 font-sans">
           Roles ({roles.length})
         </div>
-        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 space-y-2">
+        <div className="flex flex-col border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 gap-2">
           {roles.map((role) => (
             <div
               key={role.name}
@@ -68,12 +68,12 @@ type PermissionsSectionProps = {
 export const PermissionsSection = ({ permissions }: PermissionsSectionProps) => {
   if (!permissions || permissions.length === 0) {
     return (
-      <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="flex flex-col gap-1 mt-4 px-4">
         <div className="border bg-gray-2 border-gray-4 rounded-[10px]">
-          <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">
+          <div className="text-gray-11 text-[12px] leading-6 px-3.5 py-1.5 font-sans">
             Permissions
           </div>
-          <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+          <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-4 py-2">
             <span className="text-xs text-gray-11">No permissions assigned</span>
           </div>
         </div>
@@ -82,9 +82,9 @@ export const PermissionsSection = ({ permissions }: PermissionsSectionProps) =>
   }
 
   return (
-    <div className="flex flex-col gap-1 mt-[16px] px-4">
+    <div className="flex flex-col gap-1 mt-4 px-4">
       <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative">
-        <div className="text-gray-11 text-xs leading-6 px-[14px] py-1.5 font-sans flex items-center justify-between">
+        <div className="text-gray-11 text-xs leading-6 px-3.5 py-1.5 font-sans flex items-center justify-between gap-2">
           <span>Permissions ({permissions.length})</span>
           {permissions.length > 1 && (
             <CopyButton
@@ -103,7 +103,7 @@ export const PermissionsSection = ({ permissions }: PermissionsSectionProps) =>
             />
           )}
         </div>
-        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 space-y-2">
+        <div className="flex flex-col border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 gap-2">
           {permissions.map((permission) => (
             <div
               key={permission.name}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-key-name.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-key-name.tsx
index 120a780e34..390e3d1aea 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-key-name.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-key-name.tsx
@@ -118,9 +118,9 @@ export const EditKeyName = ({ keyDetails, isOpen, onClose }: EditKeyNameProps) =
           <div className="py-1 my-2">
             <div className="h-px bg-grayA-3 w-full" />
           </div>
-          <div className="space-y-4">
+          <div>
             <FormInput
-              className="[&_input:first-of-type]:h-[36px]"
+              className="[&_input:first-of-type]:h-9"
               placeholder="Key Name"
               label="Name"
               defaultValue={keyDetails.name ?? ""}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsx
index eaabbc9cf2..100cc4366b 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsx
@@ -55,7 +55,7 @@ export function createPermissionOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-100"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-80 z-100"
           >
             <div className="flex flex-col h-full">
               {/* Header */}
@@ -63,7 +63,7 @@ export function createPermissionOptions({
                 Permission Details
               </div>
               {/* Content */}
-              <div className="px-4 py-3 space-y-3">
+              <div className="flex flex-col gap-3 px-4 py-3">
                 <div>
                   <div className="text-xs font-medium text-gray-11 mb-1">Permission ID</div>
                   <div className="text-xs text-gray-12 font-mono break-all">{permission.id}</div>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/permissions-field.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/permissions-field.tsx
index 8056dfe259..2bbc90a5b8 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/permissions-field.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/permissions-field.tsx
@@ -188,7 +188,7 @@ export const PermissionField = ({
   const isComboboxLoading = isLoading || (isSearching && trimmedSearchVal.length > 0);
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-3">
       <FormCombobox
         label="Assign permissions"
         description="Select permissions from your workspace."
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsx
index a03462fb94..97dd60a12a 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsx
@@ -64,7 +64,7 @@ export function createRoleOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-100"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-80 z-100"
           >
             <div className="flex flex-col h-full">
               {/* Header */}
@@ -72,7 +72,7 @@ export function createRoleOptions({
                 Role Details
               </div>
               {/* Content */}
-              <div className="px-4 py-3 space-y-3">
+              <div className="flex flex-col px-4 py-3 gap-3">
                 <div>
                   <div className="text-xs font-medium text-gray-11 mb-1">Role Name</div>
                   <div className="text-xs text-gray-12 break-all">{role.name}</div>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/role-field.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/role-field.tsx
index db67d114ed..06461696cd 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/role-field.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/role-field.tsx
@@ -118,7 +118,7 @@ export const RoleField = ({
 
   const isComboboxLoading = isLoading || (isSearching && trimmedSearchVal.length > 0);
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-3">
       <FormCombobox
         label="Assign roles"
         description="Select roles from your workspace."
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/granted-access.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/granted-access.tsx
index 76a06da87e..e166b1e5a4 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/granted-access.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/granted-access.tsx
@@ -58,7 +58,7 @@ export const GrantedAccess = ({
   return (
     <motion.div
       layout
-      className="space-y-3"
+      className="flex flex-col gap-3"
       initial={{ opacity: 0, height: 0 }}
       animate={{ opacity: 1, height: "auto" }}
       exit={{ opacity: 0, height: 0 }}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/index.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/index.tsx
index cb5f2650ee..8198ac4888 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/index.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/index.tsx
@@ -208,7 +208,7 @@ export const KeyRbacDialog = ({
               </div>
             }
           >
-            <div className="space-y-5 px-2 py-1">
+            <div className="flex flex-col gap-5 px-2 py-1">
               <KeyInfo
                 keyDetails={{
                   id: existingKey.id,
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx
index 75ca9f647b..597f2d4066 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx
@@ -53,7 +53,7 @@ export const LastUsedCell = ({
       </div>
       <div className="truncate">
         {isLoading ? (
-          <div className="flex items-center w-full space-x-1">
+          <div className="flex items-center w-full gap-1">
             <div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
             <div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
             <div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx
index 845baa5b0b..0279a5aea6 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx
@@ -60,7 +60,7 @@ export const LastUsedColumnSkeleton = () => (
 
 export const StatusColumnSkeleton = () => (
   <div
-    className="flex w-[100px] items-center h-[22px] space-x-2 px-1.5 py-1 rounded-md bg-grayA-3 animate-pulse"
+    className="flex w-25 items-center h-5.5 gap-2 px-1.5 py-1 rounded-md bg-grayA-3 animate-pulse"
     aria-busy="true"
     aria-live="polite"
   >
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx
index c66e46f98a..bc79b681e7 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx
@@ -30,7 +30,7 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP
   if (isLoading) {
     return (
       <div
-        className="flex w-[100px] items-center h-[22px] space-x-1 px-1.5 py-1 rounded-md bg-grayA-3"
+        className="flex w-25 items-center h-5.5 gap-1 px-1.5 py-1 rounded-md bg-grayA-3"
         aria-busy="true"
         aria-live="polite"
       >
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-api.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-api.tsx
index 726553ce9c..f2c80046da 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-api.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-api.tsx
@@ -137,13 +137,13 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
           permanently lost.
         </p>
         <form id="delete-api-form" onSubmit={handleSubmit(onSubmit)}>
-          <div className="space-y-1">
+          <div className="flex flex-col gap-1">
             <p className="text-gray-11 text-[13px]">
               Type <span className="text-gray-12 font-medium">{api.name}</span> to confirm
             </p>
             <Input {...register("name")} placeholder={`Enter "${api.name}" to confirm`} />
           </div>
-          <div className="space-y-1 mt-6">
+          <div className="flex flex-col gap-1 mt-6">
             <p className="text-gray-11 text-[13px]">
               To verify, type <span className="text-gray-12 font-medium">{intent}</span> to confirm
             </p>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-protection.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-protection.tsx
index 868b6eb039..87a2ab7fd6 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-protection.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-protection.tsx
@@ -150,7 +150,7 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
             />
           </p>
           <form id="delete-protection-form" onSubmit={handleSubmit(onSubmit)}>
-            <div className="space-y-1">
+            <div className="flex flex-col gap-1">
               <p className="text-gray-11 text-[13px]">
                 Type <span className="text-gray-12 font-medium">{api.name}</span> to confirm
               </p>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsx
index 45232c4938..78eb341862 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsx
@@ -79,7 +79,7 @@ export const ApiListClient = ({ workspaceSlug }: { workspaceSlug: string }) => {
             ))}
           </div>
 
-          <div className="flex flex-col items-center justify-center mt-8 space-y-4 pb-8">
+          <div className="flex flex-col items-center justify-center mt-8 pb-8 gap-4">
             <div className="text-center text-sm text-accent-11">
               Showing {apiList.length} of {apisData?.pages[0]?.total || 0} APIs
             </div>
@@ -87,12 +87,12 @@ export const ApiListClient = ({ workspaceSlug }: { workspaceSlug: string }) => {
             {!isSearching && hasNextPage && (
               <Button onClick={loadMore} disabled={isFetchingNextPage} size="md">
                 {isFetchingNextPage ? (
-                  <div className="flex items-center space-x-2">
+                  <div className="flex flex-row items-center gap-2">
                     <div className="animate-spin h-4 w-4 border-2 border-gray-7 border-t-transparent rounded-full" />
                     <span>Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex items-center space-x-2">
+                  <div className="flex flex-row items-center gap-2">
                     <span>Load more</span>
                   </div>
                 )}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx
index 5e849c9731..7f92ed5f8b 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx
@@ -175,9 +175,9 @@ export const UpsertPermissionDialog = ({
               </div>
             }
           >
-            <div className="space-y-5 px-2 py-1">
+            <div className="flex flex-col gap-5 px-2 py-1">
               <FormInput
-                className="[&_input:first-of-type]:h-[36px]"
+                className="[&_input:first-of-type]:h-9"
                 placeholder="Manage Domains"
                 label="Name"
                 maxLength={512}
@@ -189,7 +189,7 @@ export const UpsertPermissionDialog = ({
               />
 
               <FormInput
-                className="[&_input:first-of-type]:h-[36px]"
+                className="[&_input:first-of-type]:h-9"
                 placeholder="manage.domains"
                 label="Slug"
                 maxLength={128}
@@ -201,7 +201,7 @@ export const UpsertPermissionDialog = ({
               />
 
               <FormTextarea
-                className="[&_input:first-of-type]:h-[36px]"
+                className="[&_input:first-of-type]:h-9"
                 label="Description"
                 placeholder="Allows user to create, update, and delete domain configurations and DNS records"
                 maxLength={512}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsx
index 9ec9c87332..3dd43c4574 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsx
@@ -66,7 +66,7 @@ export function createKeyOptions({
                 Key Details
               </div>
               {/* Content */}
-              <div className="px-4 py-3 space-y-3">
+              <div className="flex flex-col px-4 py-3 gap-3">
                 <div>
                   <div className="text-xs font-medium text-gray-11 mb-1">Key ID</div>
                   <div className="text-xs text-gray-12 font-mono break-all">{key.id}</div>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/key-field.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/key-field.tsx
index 0cfa910d79..a9e682b0bd 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/key-field.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/key-field.tsx
@@ -124,7 +124,7 @@ export const KeyField = ({
   const isComboboxLoading = isLoading || (isSearching && searchValue.trim().length > 0);
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-3">
       <FormCombobox
         optional
         label="Assign keys"
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/create-permission-options.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/create-permission-options.tsx
index 1b2d4620e7..ee3ca1bdd2 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/create-permission-options.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/create-permission-options.tsx
@@ -77,7 +77,7 @@ export function createPermissionOptions({
                 Permission Details
               </div>
               {/* Content */}
-              <div className="px-4 py-3 space-y-3">
+              <div className="flex flex-col px-4 py-3 gap-3">
                 <div>
                   <div className="text-xs font-medium text-gray-11 mb-1">Permission ID</div>
                   <div className="text-xs text-gray-12 font-mono break-all">{permission.id}</div>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/permissions-field.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/permissions-field.tsx
index 91312e94a2..2f2ee64210 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/permissions-field.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/permissions-field.tsx
@@ -131,7 +131,7 @@ export const PermissionField = ({
   const isComboboxLoading = isLoading || (isSearching && searchValue.trim().length > 0);
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-3">
       <FormCombobox
         optional
         label="Assign permissions"
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/index.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/index.tsx
index 66d9005882..a1eb1626af 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/index.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/index.tsx
@@ -196,9 +196,9 @@ export const UpsertRoleDialog = ({
               </div>
             }
           >
-            <div className="space-y-5 px-2 py-1">
+            <div className="flex flex-col gap-5 px-2 py-1">
               <FormInput
-                className="[&_input:first-of-type]:h-[36px]"
+                className="[&_input:first-of-type]:h-9"
                 placeholder="domain.manager"
                 label="Name"
                 maxLength={512}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/dialogs/general-setup.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/dialogs/general-setup.tsx
index c6d7a3a552..f6fd3b07b1 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/dialogs/general-setup.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/dialogs/general-setup.tsx
@@ -11,7 +11,7 @@ export const GeneralSetup = () => {
   } = useFormContext<FormValues>();
 
   return (
-    <div className="space-y-5 px-2 py-1">
+    <div className="flex flex-col gap-5 px-2 py-1">
       <FormInput
         label="External ID"
         description="A unique identifier for this identity (3-255 characters)"
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/last-used.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/last-used.tsx
index bb95c0178e..ad4088793e 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/last-used.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/last-used.tsx
@@ -35,7 +35,7 @@ export const LastUsedCell = ({ identityId }: { identityId: string }) => {
       </div>
       <div className="truncate">
         {isLoading ? (
-          <div className="flex items-center w-full space-x-1">
+          <div className="flex items-center w-full gap-1">
             <div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
             <div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
             <div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/canvas/canvas-boundary.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/canvas/canvas-boundary.tsx
index 6d68ffa943..56670a8398 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/canvas/canvas-boundary.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/canvas/canvas-boundary.tsx
@@ -45,7 +45,7 @@ export const CanvasBoundary = ({ children }: PropsWithChildren) => {
               </div>
 
               {/* Error message */}
-              <div className="p-4 space-y-2">
+              <div className="flex flex-col p-4 gap-2">
                 <div className="text-xs font-medium text-gray-11">{error.message}</div>
                 <div className="text-xs text-gray-9">Check console for details</div>
               </div>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx
index 3225f65f13..8754872f50 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx
@@ -129,7 +129,7 @@ export function InternalDevTreeGenerator({ onGenerate, onReset }: DevTreeGenerat
           <XMark iconSize="sm-medium" />
         </Button>
       </div>
-      <div className="p-3 space-y-3 max-h-[600px] overflow-y-auto">
+      <div className="flex flex-col gap-3 max-h-150 overflow-y-auto p-3">
         {/* Loading State */}
         {generateMutation.isLoading && (
           <div className="absolute inset-0 bg-black/50 flex items-center justify-center rounded-lg">
@@ -138,7 +138,7 @@ export function InternalDevTreeGenerator({ onGenerate, onReset }: DevTreeGenerat
         )}
 
         {/* Presets */}
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <div className="text-xs font-medium text-gray-11">Presets</div>
           <div className="grid grid-cols-1 gap-2">
             {Object.entries(PRESETS).map(([key, preset]) => (
@@ -158,11 +158,11 @@ export function InternalDevTreeGenerator({ onGenerate, onReset }: DevTreeGenerat
         </div>
 
         {/* Custom Configuration */}
-        <div className="space-y-3 pt-3 border-t border-grayA-4">
+        <div className="flex flex-col gap-3 pt-3 border-t border-grayA-4">
           <div className="text-xs font-medium text-gray-11">Custom</div>
 
           {/* Sentinels*/}
-          <div className="space-y-1">
+          <div className="flex flex-col gap-1">
             <div className="text-xs text-gray-11">Sentinels: {customConfig.sentinels}</div>
             <input
               type="range"
@@ -181,9 +181,9 @@ export function InternalDevTreeGenerator({ onGenerate, onReset }: DevTreeGenerat
           </div>
 
           {/* Layout Direction Controls */}
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <div className="text-xs text-gray-11">Layout Direction</div>
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-1.5">
               <div className="flex items-center gap-2">
                 <span className="text-xs text-gray-11 w-20">Sentinels:</span>
                 <select
@@ -222,7 +222,7 @@ export function InternalDevTreeGenerator({ onGenerate, onReset }: DevTreeGenerat
           </div>
 
           {/* Instances per sentinel */}
-          <div className="space-y-1">
+          <div className="flex flex-col gap-1">
             <div className="text-xs text-gray-11">
               Instances per sentinel: {customConfig.instancesPerSentinel.min}-
               {customConfig.instancesPerSentinel.max}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/promotion-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/promotion-dialog.tsx
index 34fc3076fb..ebb421205f 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/promotion-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/promotion-dialog.tsx
@@ -21,7 +21,7 @@ const DeploymentSection = ({
   isCurrent,
   showSignal,
 }: DeploymentSectionProps) => (
-  <div className="space-y-2">
+  <div className="flex flex-col gap-2">
     <div className="flex items-center gap-2">
       <h3 className="text-[13px] text-grayA-11">{title}</h3>
       <CircleInfo iconSize="sm-regular" className="text-gray-9" />
@@ -105,7 +105,7 @@ export const PromotionDialog = ({
         </Button>
       }
     >
-      <div className="space-y-9">
+      <div className="flex flex-col gap-9">
         <DeploymentSection
           title="Current Deployment"
           deployment={currentDeployment}
@@ -114,7 +114,7 @@ export const PromotionDialog = ({
         />
         <div>
           {domains.map((domain) => (
-            <div className="space-y-2" key={domain.id}>
+            <div className="flex flex-col gap-2" key={domain.id}>
               <div className="flex items-center gap-2">
                 <h3 className="text-[13px] text-grayA-11">Domain</h3>
                 <CircleInfo iconSize="sm-regular" className="text-gray-9" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/rollback-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/rollback-dialog.tsx
index 211de9a87b..a4b61396a0 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/rollback-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/rollback-dialog.tsx
@@ -21,7 +21,7 @@ const DeploymentSection = ({
   isCurrent,
   showSignal,
 }: DeploymentSectionProps) => (
-  <div className="space-y-2">
+  <div className="flex flex-col gap-2">
     <div className="flex items-center gap-2">
       <h3 className="text-[13px] text-grayA-11">{title}</h3>
       <CircleInfo iconSize="sm-regular" className="text-gray-9" />
@@ -100,7 +100,7 @@ export const RollbackDialog = ({
         </Button>
       }
     >
-      <div className="space-y-9">
+      <div className="flex flex-col gap-9">
         <DeploymentSection
           title="Current Deployment"
           deployment={currentDeployment}
@@ -109,7 +109,7 @@ export const RollbackDialog = ({
         />
         <div>
           {domains.map((domain) => (
-            <div className="space-y-2" key={domain.id}>
+            <div className="flex flex-col gap-2" key={domain.id}>
               <div className="flex items-center gap-2">
                 <h3 className="text-[13px] text-grayA-11">Domain</h3>
                 <CircleInfo iconSize="sm-regular" className="text-gray-9" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/deployment-section.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/deployment-section.tsx
index a44986f0fb..bffb570073 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/deployment-section.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/deployment-section.tsx
@@ -15,7 +15,7 @@ export const DeploymentSection = ({
   isCurrent,
   showSignal,
 }: DeploymentSectionProps) => (
-  <div className="space-y-2">
+  <div className="flex flex-col gap-2">
     <div className="flex items-center gap-2">
       <h3 className="text-[13px] text-grayA-11">{title}</h3>
       <CircleInfo iconSize="sm-regular" className="text-gray-9" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/domains-section.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/domains-section.tsx
index 5aa7ea44b3..feee73965e 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/domains-section.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/domains-section.tsx
@@ -11,7 +11,7 @@ export const DomainsSection = ({ domains }: DomainsSectionProps) => {
   }
 
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-2">
       <div className="flex items-center gap-2">
         <h3 className="text-[13px] text-grayA-11">{domains.length === 1 ? "Domain" : "Domains"}</h3>
         <CircleInfo iconSize="sm-regular" className="text-gray-9" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/promotion-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/promotion-dialog.tsx
index f569337a29..4f438fbc3a 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/promotion-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/promotion-dialog.tsx
@@ -87,7 +87,7 @@ export const PromotionDialog = ({
         </Button>
       }
     >
-      <div className="space-y-9">
+      <div className="flex flex-col gap-9">
         <DeploymentSection
           title="Current Deployment"
           deployment={currentDeployment}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/redeploy-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/redeploy-dialog.tsx
index a848637ded..7cea1d65c2 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/redeploy-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/redeploy-dialog.tsx
@@ -63,7 +63,7 @@ export const RedeployDialog = ({ isOpen, onClose, selectedDeployment }: Redeploy
         </Button>
       }
     >
-      <div className="space-y-9">
+      <div className="flex flex-col gap-9">
         <DeploymentSection title="Deployment" deployment={selectedDeployment} isCurrent={false} />
       </div>
     </DialogContainer>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/rollback-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/rollback-dialog.tsx
index e4620e148c..ab7e5aa02a 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/rollback-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/rollback-dialog.tsx
@@ -86,7 +86,7 @@ export const RollbackDialog = ({
         </Button>
       }
     >
-      <div className="space-y-9">
+      <div className="flex flex-col gap-9">
         <DeploymentSection
           title="Current Deployment"
           deployment={currentDeployment}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/domain_list.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/domain_list.tsx
index 2111afd566..e81a0f9621 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/domain_list.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/domain_list.tsx
@@ -71,7 +71,7 @@ export const DomainList = ({ deploymentId, status }: Props) => {
           align: "start",
         }}
         content={
-          <div className="space-y-2 max-w-[300px] py-2">
+          <div className="flex flex-col gap-2 max-w-75 py-2">
             {additionalDomains.map((d) => (
               <div key={d.id} className="text-xs font-medium flex items-center gap-1.5">
                 <div className="w-1 h-1 bg-gray-8 rounded-full shrink-0" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/details/project-details-expandables/project-details-content.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/details/project-details-expandables/project-details-content.tsx
index b171440ba8..5019058125 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/details/project-details-expandables/project-details-content.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/details/project-details-expandables/project-details-content.tsx
@@ -66,7 +66,7 @@ export const ProjectDetailsContent = () => {
                   side: "bottom",
                 }}
                 content={
-                  <div className="space-y-2 max-w-[300px] py-2">
+                  <div className="flex flex-col gap-2 max-w-75 py-2">
                     {gitShaAndBranchNameDomains.map((d) => (
                       <div key={d.domain} className="text-xs font-medium flex items-center gap-1.5">
                         <div className="w-1 h-1 bg-gray-8 rounded-full shrink-0" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/logs/components/table/runtime-log-details/index.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/logs/components/table/runtime-log-details/index.tsx
index 82b6c39f67..c4c864eb8c 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/logs/components/table/runtime-log-details/index.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/logs/components/table/runtime-log-details/index.tsx
@@ -32,7 +32,7 @@ export function RuntimeLogDetails({ distanceToTop }: Props) {
         <LogSection
           title="Log Information"
           details={
-            <div className="space-y-2 text-xs">
+            <div className="flex flex-col gap-2 text-xs">
               <div>
                 <span className="text-grayA-11">Time:</span>{" "}
                 <TimestampInfo
@@ -55,7 +55,7 @@ export function RuntimeLogDetails({ distanceToTop }: Props) {
         <LogSection
           title="Deployment Info"
           details={
-            <div className="space-y-2 text-xs">
+            <div className="flex flex-col gap-2 text-xs">
               <div>
                 <span className="text-grayA-11">Deployment ID:</span>{" "}
                 <span className="font-mono">{log.deployment_id}</span>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/client.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/client.tsx
index 5d91a7c4a4..f9db7325f7 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/client.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/client.tsx
@@ -122,9 +122,9 @@ export const DiffViewerContent: React.FC<DiffViewerContentProps> = ({
             />
           </div>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <h3 className="text-grayA-12 font-medium text-sm">No noteworthy changes</h3>
-          <p className="text-grayA-9 text-xs max-w-[280px] leading-relaxed">
+          <p className="text-grayA-9 text-xs max-w-70 leading-relaxed">
             The specifications for <span className="text-grayA-11">{fromDeployment} </span>
             and <span className="text-grayA-11">{toDeployment} </span>
             are functionally identical.
@@ -286,7 +286,7 @@ export const DiffViewerContent: React.FC<DiffViewerContentProps> = ({
                               {operation}
                             </Badge>
                           </div>
-                          <div className="space-y-1">
+                          <div className="flex flex-col gap-1">
                             {changes.map((change, index) => (
                               <div
                                 key={`${change.id}-${index}`}
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/empty.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/empty.tsx
index f30734899b..2c3908620a 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/empty.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/empty.tsx
@@ -19,9 +19,9 @@ export const DiffViewerEmpty = () => (
         </div>
       </div>
       {/* Content */}
-      <div className="space-y-2">
+      <div className="flex flex-col gap-2">
         <h3 className="text-gray-12 font-medium text-sm">No deployments selected</h3>
-        <p className="text-gray-9 text-xs max-w-[280px] leading-relaxed">
+        <p className="text-gray-9 text-xs max-w-70 leading-relaxed">
           Select two deployments above to compare their OpenAPI specifications and see what changed
           between versions.
         </p>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/page.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/page.tsx
index 46dadb8947..6b7ecf36f2 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/page.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/page.tsx
@@ -163,9 +163,9 @@ export default function DiffPage() {
                   />
                 </div>
               </div>
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 <h3 className="text-grayA-12 font-medium text-sm">No deployments selected</h3>
-                <p className="text-grayA-9 text-xs max-w-[280px] leading-relaxed">
+                <p className="text-grayA-9 text-xs max-w-70 leading-relaxed">
                   Select two deployments above to compare their OpenAPI specifications and see what
                   changed between versions.
                 </p>
@@ -195,7 +195,7 @@ export default function DiffPage() {
                         />
                       </div>
                     </div>
-                    <div className="space-y-2">
+                    <div className="flex flex-col gap-2">
                       <h3 className="text-error-11 font-medium text-sm">
                         Unable to compare deployments
                       </h3>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/projects-card.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/projects-card.tsx
index 21db9cdb55..f07836dd12 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/projects-card.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/projects-card.tsx
@@ -59,11 +59,7 @@ export const ProjectCard = ({
         </div>
         <div className="flex flex-col w-full gap-2 py-[5px] min-w-0">
           {/*Top Section > Project Name*/}
-          <InfoTooltip
-            content={name}
-            asChild
-            position={{ align: "start", side: "top" }}
-          >
+          <InfoTooltip content={name} asChild position={{ align: "start", side: "top" }}>
             <Link
               href={projectPath}
               className="font-medium text-sm leading-[14px] text-accent-12 truncate hover:underline"
@@ -73,11 +69,7 @@ export const ProjectCard = ({
           </InfoTooltip>
           {/*Top Section > Domains/Hostnames*/}
           {domain && (
-            <InfoTooltip
-              content={domain}
-              asChild
-              position={{ align: "start", side: "top" }}
-            >
+            <InfoTooltip content={domain} asChild position={{ align: "start", side: "top" }}>
               <a
                 href={`https://${domain}`}
                 target="_blank"
@@ -95,11 +87,7 @@ export const ProjectCard = ({
       {/*Middle Section > Last commit title*/}
       <div className="flex flex-col gap-2">
         {commitTitle ? (
-          <InfoTooltip
-            content={commitTitle}
-            asChild
-            position={{ align: "start", side: "top" }}
-          >
+          <InfoTooltip content={commitTitle} asChild position={{ align: "start", side: "top" }}>
             <Link
               href="#"
               className="text-[13px] font-medium text-accent-12 leading-5 min-w-0 truncate cursor-pointer hover:underline"
@@ -108,46 +96,28 @@ export const ProjectCard = ({
             </Link>
           </InfoTooltip>
         ) : (
-          <div className="text-[13px] text-accent-12 leading-5 opacity-70">
-            No commit info
-          </div>
+          <div className="text-[13px] text-accent-12 leading-5 opacity-70">No commit info</div>
         )}
 
         <div className="flex gap-2 items-center min-w-0 justify-between">
           <div className="flex items-center gap-2">
             {commitTimestamp ? (
-              <TimestampInfo
-                value={commitTimestamp}
-                className="hover:underline whitespace-pre"
-              />
+              <TimestampInfo value={commitTimestamp} className="hover:underline whitespace-pre" />
             ) : (
               <span className="text-xs text-gray-12 truncate max-w-[70px] opacity-70">
                 No deployments
               </span>
             )}
-            <CodeBranch
-              className="text-gray-12 shrink-0"
-              iconSize="sm-regular"
-            />
-            <InfoTooltip
-              content={branch}
-              asChild
-              position={{ align: "start", side: "top" }}
-            >
-              <span className="text-xs text-gray-12 truncate max-w-[70px]">
-                {branch}
-              </span>
+            <CodeBranch className="text-gray-12 shrink-0" iconSize="sm-regular" />
+            <InfoTooltip content={branch} asChild position={{ align: "start", side: "top" }}>
+              <span className="text-xs text-gray-12 truncate max-w-[70px]">{branch}</span>
             </InfoTooltip>
           </div>
           {authorAvatar && (
             <div className="flex items-center gap-2">
               <span className="text-xs text-gray-10">by</span>
               <Avatar alt="Author avatar" src={authorAvatar} />
-              <InfoTooltip
-                content={author}
-                asChild
-                position={{ align: "start", side: "top" }}
-              >
+              <InfoTooltip content={author} asChild position={{ align: "start", side: "top" }}>
                 <span className="text-xs text-gray-12 font-medium truncate max-w-[90px]">
                   {author}
                 </span>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/region-badges.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/region-badges.tsx
new file mode 100644
index 0000000000..7f73b4fa2f
--- /dev/null
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/region-badges.tsx
@@ -0,0 +1,52 @@
+import { Earth } from "@unkey/icons";
+import { InfoTooltip } from "@unkey/ui";
+import { RepoDisplay } from "./repo-display";
+
+type RegionBadgesProps = {
+  regions: string[];
+  repository?: string;
+};
+
+export const RegionBadges = ({ regions, repository }: RegionBadgesProps) => {
+  const visibleRegions = regions.slice(0, 1);
+  const remainingRegions = regions.slice(1);
+  const remainingCount = remainingRegions.length;
+
+  return (
+    <div className="flex gap-2 items-center mt-auto">
+      {visibleRegions.map((region) => (
+        <div
+          key={region}
+          className="bg-grayA-4 px-1.5 font-medium text-xs text-gray-12 rounded-full min-h-[22px] flex items-center gap-1.5"
+        >
+          <Earth iconSize="lg-medium" className="shrink-0" />
+          {region}
+        </div>
+      ))}
+      {remainingCount > 0 && (
+        <InfoTooltip
+          content={
+            <div className="flex flex-col gap-1">
+              {remainingRegions.map((region) => (
+                <div key={region} className="text-xs font-medium flex items-center gap-1.5">
+                  <div className="w-1 h-1 bg-gray-8 rounded-full" />
+                  {region}
+                </div>
+              ))}
+            </div>
+          }
+        >
+          <div className="bg-grayA-4 px-1.5 font-medium text-xs text-gray-12 rounded-full min-h-[22px] flex items-center">
+            +{remainingCount} more
+          </div>
+        </InfoTooltip>
+      )}
+      {repository && (
+        <RepoDisplay
+          url={repository}
+          className="bg-grayA-4 px-1.5 font-medium text-xs text-gray-12 rounded-full min-h-[22px] max-w-[130px]"
+        />
+      )}
+    </div>
+  );
+};
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/delete-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/delete-dialog.tsx
index c7d1241e2f..4642f07eb7 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/delete-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/delete-dialog.tsx
@@ -69,7 +69,7 @@ export const DeleteDialog = ({ isModalOpen, onOpenChange, overrideId, identifier
       </p>
 
       <form id="delete-override-form" onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <p className="text-gray-11 text-[13px]">
             Type <span className="text-gray-12 font-medium">{identifier}</span> to confirm
           </p>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx
index fe7281c1b4..6f382b5d1d 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx
@@ -81,7 +81,7 @@ export const DeleteNamespaceDialog = ({
         </p>
 
         <form id="delete-namespace-form" onSubmit={handleSubmit(onSubmit)}>
-          <div className="space-y-1">
+          <div className="flex flex-col gap-1">
             <p className="text-gray-11 text-[13px]">
               Type <span className="text-gray-12 font-medium">{namespace.name}</span> to confirm
             </p>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/overrides/last-used-cell.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/overrides/last-used-cell.tsx
index be6b9394d2..e1c263e70e 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/overrides/last-used-cell.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/overrides/last-used-cell.tsx
@@ -39,7 +39,7 @@ export const LastUsedCell = ({ namespaceId, identifier }: LastUsedCellProps) =>
       </div>
       <div className="truncate">
         {isLoading ? (
-          <div className="flex items-center space-x-1">
+          <div className="flex items-center gap-1">
             <div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
             <div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
             <div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/current-plan-card.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/current-plan-card.tsx
index d813c77875..ccc0884701 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/current-plan-card.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/current-plan-card.tsx
@@ -49,7 +49,7 @@ type ProductHelperProps = {
 };
 const ProductHelper: React.FC<ProductHelperProps> = ({ currentProduct }) => {
   return (
-    <div className="space-y-1">
+    <div className="flex flex-col gap-1">
       <div className="flex items-center gap-2">
         <h3 className="font-semibold text-gray-12">{currentProduct?.name || "Free Plan"}</h3>
         <span className="text-xs bg-info-3 text-info-11 px-2 py-0.5 rounded-full">Active</span>
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/plan-selection-modal.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/plan-selection-modal.tsx
index 767217ddda..a1c630e663 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/plan-selection-modal.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/plan-selection-modal.tsx
@@ -136,7 +136,7 @@ export const PlanSelectionModal = ({
         onAttemptClose={() => {}}
         footer={<div className="w-full flex flex-col gap-3" />}
       >
-        <div className="space-y-4">
+        <div className="flex flex-col gap-4">
           <div className="animate-pulse flex gap-2">
             <div className="h-16 bg-grayA-3 rounded-lg" />
             <div className="h-16 bg-grayA-3 rounded-lg" />
@@ -189,8 +189,8 @@ export const PlanSelectionModal = ({
         </div>
       }
     >
-      <div className="space-y-4">
-        <div className="space-y-3">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-3">
           {/* Paid Plans */}
           {products.map((product) => (
             <label
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite-form.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite-form.tsx
index 8dd3ca8970..c22343c0dd 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite-form.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite-form.tsx
@@ -144,11 +144,11 @@ export const InviteForm = ({ organization }: InviteFormProps) => {
           </h3>
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-3">
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3">
             {fields.map((field, index) => (
-              <div key={field.id} className="flex gap-3 items-end">
-                <div className="flex-1">
+              <div key={field.id} className="flex flex-row gap-2 items-end">
+                <div className="flex-1 h-22">
                   <label
                     htmlFor={`invites.${index}.email`}
                     className="text-sm text-content-subtle mb-1.5 block"
@@ -163,7 +163,7 @@ export const InviteForm = ({ organization }: InviteFormProps) => {
                     {...register(`invites.${index}.email`)}
                   />
                 </div>
-                <div className="w-48">
+                <div className="flex flex-col w-48 h-22">
                   <label
                     htmlFor={`invites.${index}.role`}
                     className="text-sm text-content-subtle mb-1.5 block"
diff --git a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite.tsx b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite.tsx
index 0256885af9..45a50d103a 100644
--- a/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite.tsx
+++ b/web/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite.tsx
@@ -136,7 +136,7 @@ export const InviteButton = ({ user, organization, ...rest }: InviteButtonProps)
             control={control}
             name="role"
             render={({ field }) => (
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-1.5">
                 <div className="text-gray-11 text-[13px] flex items-center">Role</div>
                 <Select onValueChange={field.onChange} value={field.value}>
                   <SelectTrigger className="h-9">
diff --git a/web/apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx b/web/apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx
index 67c148833e..777ab88c5d 100644
--- a/web/apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx
+++ b/web/apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx
@@ -52,7 +52,7 @@ export default function AuthenticationPage() {
 
   return (
     <SignUpProvider>
-      <div className="flex flex-col justify-center space-y-6">
+      <div className="flex flex-col justify-center gap-6">
         {isLoading && <Loading />}
         {verify ? (
           <FadeIn>
diff --git a/web/apps/dashboard/app/new/components/onboarding-fallback.tsx b/web/apps/dashboard/app/new/components/onboarding-fallback.tsx
index 104dbdc9f0..9207561678 100644
--- a/web/apps/dashboard/app/new/components/onboarding-fallback.tsx
+++ b/web/apps/dashboard/app/new/components/onboarding-fallback.tsx
@@ -37,7 +37,7 @@ export function OnboardingFallback() {
                 body: (
                   <form>
                     <div className="flex flex-col">
-                      <div className="space-y-4 p-1">
+                      <div className="flex flex-col gap-4 p-1">
                         <FormInput
                           value="Acme Corp"
                           placeholder="Enter workspace name"
diff --git a/web/apps/dashboard/app/new/hooks/use-workspace-step.tsx b/web/apps/dashboard/app/new/hooks/use-workspace-step.tsx
index b66a394651..a2cb77d22c 100644
--- a/web/apps/dashboard/app/new/hooks/use-workspace-step.tsx
+++ b/web/apps/dashboard/app/new/hooks/use-workspace-step.tsx
@@ -154,7 +154,7 @@ export const useWorkspaceStep = (): OnboardingStep => {
     body: (
       <form ref={formRef} onSubmit={form.handleSubmit(onSubmit)}>
         <div className="flex flex-col">
-          <div className="space-y-4 p-1">
+          <div className="flex flex-col gap-4 p-1">
             <FormInput
               {...form.register("workspaceName", {
                 onChange: (evt) => {
diff --git a/web/apps/dashboard/components/auth/turnstile-challenge.tsx b/web/apps/dashboard/components/auth/turnstile-challenge.tsx
index 4b3a596b66..f84aaa6ff8 100644
--- a/web/apps/dashboard/components/auth/turnstile-challenge.tsx
+++ b/web/apps/dashboard/components/auth/turnstile-challenge.tsx
@@ -26,7 +26,7 @@ export function TurnstileChallenge({ email, onSuccess, onError }: TurnstileChall
   }
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       <div className="text-center">
         <h3 className="text-lg font-semibold text-white">Security Verification</h3>
         <p className="text-sm text-gray-400 mt-2">
@@ -39,7 +39,7 @@ export function TurnstileChallenge({ email, onSuccess, onError }: TurnstileChall
         <div className="relative w-[300px] h-[65px]">
           {isWidgetLoading && (
             <div className="absolute inset-0 flex items-center justify-center bg-gray-800/90 backdrop-blur-xs rounded-sm border border-gray-600 z-10">
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-2">
                 <div className="animate-spin h-4 w-4 border-2 border-gray-400 border-t-white rounded-full" />
                 <span className="text-sm text-gray-300">Loading verification...</span>
               </div>
diff --git a/web/apps/dashboard/components/dashboard/feedback-component.tsx b/web/apps/dashboard/components/dashboard/feedback-component.tsx
index 55aaf127f5..4adc718ae1 100644
--- a/web/apps/dashboard/components/dashboard/feedback-component.tsx
+++ b/web/apps/dashboard/components/dashboard/feedback-component.tsx
@@ -130,7 +130,7 @@ export const Feedback: React.FC = () => {
             control={control}
             name="issueType"
             render={({ field }) => (
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-1.5">
                 <div className="text-gray-11 text-[13px] flex items-center">Area</div>
                 <Select onValueChange={field.onChange} value={field.value}>
                   <SelectTrigger className="h-9">
@@ -159,7 +159,7 @@ export const Feedback: React.FC = () => {
             control={control}
             name="severity"
             render={({ field }) => (
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-1.5">
                 <div className="text-gray-11 text-[13px] flex items-center">Severity</div>
                 <Select onValueChange={field.onChange} value={field.value}>
                   <SelectTrigger className="h-9">
diff --git a/web/apps/dashboard/components/dashboard/metadata/metadata-setup.tsx b/web/apps/dashboard/components/dashboard/metadata/metadata-setup.tsx
index 169e4c3db7..21a119f0e2 100644
--- a/web/apps/dashboard/components/dashboard/metadata/metadata-setup.tsx
+++ b/web/apps/dashboard/components/dashboard/metadata/metadata-setup.tsx
@@ -96,7 +96,7 @@ export const MetadataSetup = ({ overrideEnabled = false, entityType }: MetadataS
   const descriptions = ENTITY_DESCRIPTIONS[entityType];
 
   return (
-    <div className="space-y-5 px-2 py-1">
+    <div className="flex flex-col gap-5 px-2 py-1">
       {!overrideEnabled && (
         <ProtectionSwitch
           description={descriptions.switch}
@@ -107,7 +107,7 @@ export const MetadataSetup = ({ overrideEnabled = false, entityType }: MetadataS
           {...register("metadata.enabled")}
         />
       )}
-      <div className="space-y-2 h-fit duration-300">
+      <div className="flex flex-col gap-2 h-fit duration-300">
         <FormTextarea
           placeholder={JSON.stringify(EXAMPLE_JSON, null, 2)}
           label="Metadata"
diff --git a/web/apps/dashboard/components/dashboard/ratelimits/ratelimit-setup.tsx b/web/apps/dashboard/components/dashboard/ratelimits/ratelimit-setup.tsx
index 915de6ed70..2385b57d77 100644
--- a/web/apps/dashboard/components/dashboard/ratelimits/ratelimit-setup.tsx
+++ b/web/apps/dashboard/components/dashboard/ratelimits/ratelimit-setup.tsx
@@ -85,7 +85,7 @@ export const RatelimitSetup = ({
       : "Turn on to restrict how frequently this identity can be used. Requests beyond the limit will be blocked.";
 
   return (
-    <div className="space-y-5 px-2 py-1">
+    <div className="flex flex-col gap-5 px-2 py-1">
       {!overrideEnabled && (
         <ProtectionSwitch
           description={description}
@@ -118,8 +118,8 @@ export const RatelimitSetup = ({
       <div>
         {/* biome-ignore lint/suspicious/noExplicitAny: useFieldArray with discriminated unions requires type assertion */}
         {(fields as any[]).map((field: any, index: number) => (
-          <div key={field.id} className="space-y-4 w-full border-t border-grayA-3 py-6">
-            <div className="flex items-center gap-[14px] w-full">
+          <div key={field.id} className="flex flex-col gap-4 w-full border-t border-grayA-3 py-6">
+            <div className="flex items-center gap-3.5 w-full">
               <FormInput
                 className={cn(
                   "[&_input:first-of-type]:h-[36px]",
diff --git a/web/apps/dashboard/components/logs/filter-operator-input/index.tsx b/web/apps/dashboard/components/logs/filter-operator-input/index.tsx
index c57c99440a..02d04a5cb2 100644
--- a/web/apps/dashboard/components/logs/filter-operator-input/index.tsx
+++ b/web/apps/dashboard/components/logs/filter-operator-input/index.tsx
@@ -123,8 +123,8 @@ export const FilterOperatorInput = <T extends string>({
           </div>
         ))}
       </div>
-      <div className="flex flex-col gap-[14px] py-3 w-full md:w-[320px] px-3">
-        <div className="space-y-2">
+      <div className="flex flex-col gap-3.5 py-3 w-full md:w-80 px-3">
+        <div className="flex flex-col gap-2">
           <p className="text-gray-9 text-xs" id="filter-operator-title">
             {label}{" "}
             <span className="font-medium text-gray-12">
diff --git a/web/apps/dashboard/components/selected-item-list.tsx b/web/apps/dashboard/components/selected-item-list.tsx
index 3c39e0b865..fe9a07d484 100644
--- a/web/apps/dashboard/components/selected-item-list.tsx
+++ b/web/apps/dashboard/components/selected-item-list.tsx
@@ -53,7 +53,7 @@ export function SelectedItemsList<T extends BaseItem>({
   const ItemComponent = enableTransitions ? motion.div : "div";
 
   return (
-    <div className={cn("space-y-2", className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       <div className={cn("grid gap-2", getGridColsClass(gridCols))}>
         <AnimatePresence mode="popLayout">
           {items.map((item) => {
diff --git a/web/apps/dashboard/components/ui/sheet.tsx b/web/apps/dashboard/components/ui/sheet.tsx
index 227d9da879..392d087af9 100644
--- a/web/apps/dashboard/components/ui/sheet.tsx
+++ b/web/apps/dashboard/components/ui/sheet.tsx
@@ -90,13 +90,13 @@ const SheetContent = React.forwardRef<
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} />
 );
 SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className)}
     {...props}
   />
 );