diff --git a/check-locale.js b/check-locale.js
index 091835878..8252f6329 100644
--- a/check-locale.js
+++ b/check-locale.js
@@ -16,7 +16,7 @@ const exceptionList = [
   'invalid-credentials',
   'no-credentials',
   'token-not-found',
-]
+];
 
 const allStrings = {};
 
diff --git a/components/apiKey/APIKeys.tsx b/components/apiKey/APIKeys.tsx
index 03171f79d..d205f5836 100644
--- a/components/apiKey/APIKeys.tsx
+++ b/components/apiKey/APIKeys.tsx
@@ -1,14 +1,13 @@
 import { EmptyState, WithLoadingAndError } from '@/components/shared';
 import ConfirmationDialog from '@/components/shared/ConfirmationDialog';
-import fetcher from '@/lib/fetcher';
 import type { ApiKey, Team } from '@prisma/client';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { Button } from 'react-daisyui';
 import { toast } from 'react-hot-toast';
-import useSWR from 'swr';
 import type { ApiResponse } from 'types';
 import NewAPIKey from './NewAPIKey';
+import useAPIKeys from 'hooks/useAPIKeys';
 import { Table } from '@/components/shared/table/Table';
 
 interface APIKeysProps {
@@ -17,17 +16,12 @@ interface APIKeysProps {
 
 const APIKeys = ({ team }: APIKeysProps) => {
   const { t } = useTranslation('common');
+  const { data, isLoading, error, mutate } = useAPIKeys(team.slug);
   const [selectedApiKey, setSelectedApiKey] = useState<ApiKey | null>(null);
   const [createModalVisible, setCreateModalVisible] = useState(false);
   const [confirmationDialogVisible, setConfirmationDialogVisible] =
     useState(false);
 
-  // Fetch API Keys
-  const { data, isLoading, error, mutate } = useSWR<{ data: ApiKey[] }>(
-    `/api/teams/${team.slug}/api-keys`,
-    fetcher
-  );
-
   // Delete API Key
   const deleteApiKey = async (apiKey: ApiKey | null) => {
     if (!apiKey) return;
diff --git a/components/shared/Badge.tsx b/components/shared/Badge.tsx
index 11224fc29..765434b73 100644
--- a/components/shared/Badge.tsx
+++ b/components/shared/Badge.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { BadgeProps, Badge as BaseBadge } from 'react-daisyui';
 
 const Badge = (props: BadgeProps) => {
@@ -7,7 +8,7 @@ const Badge = (props: BadgeProps) => {
     <>
       <BaseBadge
         {...props}
-        className={`rounded text-xs py-2 text-white ${className}`}
+        className={classNames('rounded text-xs py-2 text-white', className)}
       >
         {children}
       </BaseBadge>
diff --git a/components/shared/InputWithCopyButton.tsx b/components/shared/InputWithCopyButton.tsx
index 1d6bd1432..91dcc51ed 100644
--- a/components/shared/InputWithCopyButton.tsx
+++ b/components/shared/InputWithCopyButton.tsx
@@ -19,9 +19,9 @@ const InputWithCopyButton = (props: InputWithCopyButtonProps) => {
         <CopyToClipboardButton value={value?.toString() || ''} />
       </div>
       <Input
-        className="input input-bordered w-full"
+        className="input input-bordered w-full text-sm"
         {...rest}
-        defaultValue={value}
+        value={value}
       />
       {description && (
         <label className="label">
diff --git a/components/shared/shell/NavigationItems.tsx b/components/shared/shell/NavigationItems.tsx
index 3da6f8d1c..5c32392c0 100644
--- a/components/shared/shell/NavigationItems.tsx
+++ b/components/shared/shell/NavigationItems.tsx
@@ -50,7 +50,7 @@ const NavigationItem = ({ menu, className }: NavigationItemProps) => {
       href={menu.href}
       className={`flex items-center rounded text-sm text-gray-900 hover:bg-gray-100 px-2 p-2 gap-2 hover:dark:text-black ${
         menu.active ? 'bg-gray-100 font-semibold' : ''
-      }${className}`}
+      } ${className}`}
     >
       {menu.icon && (
         <menu.icon
diff --git a/hooks/useAPIKeys.ts b/hooks/useAPIKeys.ts
new file mode 100644
index 000000000..253a87dda
--- /dev/null
+++ b/hooks/useAPIKeys.ts
@@ -0,0 +1,25 @@
+import fetcher from '@/lib/fetcher';
+import { ApiKey } from '@prisma/client';
+import useSWR, { mutate } from 'swr';
+import type { ApiResponse } from 'types';
+
+const useAPIKeys = (slug: string | undefined) => {
+  const url = `/api/teams/${slug}/api-keys`;
+
+  const { data, error, isLoading } = useSWR<ApiResponse<ApiKey[]>>(() => {
+    return slug ? url : null;
+  }, fetcher);
+
+  const mutateAPIKeys = async () => {
+    mutate(url);
+  };
+
+  return {
+    data,
+    isLoading,
+    error,
+    mutate: mutateAPIKeys,
+  };
+};
+
+export default useAPIKeys;