diff --git a/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx b/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
index f5605f4d0a1..4a73d2dd5e6 100644
--- a/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
@@ -42,38 +42,34 @@ export default function InviteRow({ invite }) {
     <>
       <tr
         ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
+        className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
       >
-        <td scope="row" className="px-6 py-4 whitespace-nowrap">
+        <td scope="row" className="px-6 whitespace-nowrap">
           {titleCase(status)}
         </td>
-        <td className="px-6 py-4">
+        <td className="px-6">
           {invite.claimedBy
             ? invite.claimedBy?.username || "deleted user"
             : "--"}
         </td>
-        <td className="px-6 py-4">
-          {invite.createdBy?.username || "deleted user"}
-        </td>
-        <td className="px-6 py-4">{invite.createdAt}</td>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6">{invite.createdBy?.username || "deleted user"}</td>
+        <td className="px-6">{invite.createdAt}</td>
+        <td className="px-6 flex items-center gap-x-6 h-full mt-1">
           {status === "pending" && (
             <>
               <button
                 onClick={copyInviteLink}
                 disabled={copied}
-                className="border-none font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
+                className="text-xs font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
               >
                 {copied ? "Copied" : "Copy Invite Link"}
               </button>
-              <td className="px-6 py-4 flex items-center gap-x-6">
-                <button
-                  onClick={handleDelete}
-                  className="border-none font-medium text-theme-text-primary hover:text-red-500 px-2 py-1 rounded-lg"
-                >
-                  <Trash className="h-5 w-5" />
-                </button>
-              </td>
+              <button
+                onClick={handleDelete}
+                className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
+              >
+                <Trash className="h-5 w-5" />
+              </button>
             </>
           )}
         </td>
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index 87d26412457..b79c55d5fe8 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -84,7 +84,7 @@ function InvitationsContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
+    <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
       <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
diff --git a/frontend/src/pages/Admin/Logging/LogRow/index.jsx b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
index 3113aa45a15..cd5dc85f87a 100644
--- a/frontend/src/pages/Admin/Logging/LogRow/index.jsx
+++ b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
@@ -27,35 +27,35 @@ export default function LogRow({ log }) {
     <>
       <tr
         onClick={handleRowClick}
-        className={`bg-transparent text-white text-opacity-80 text-sm font-medium ${
+        className={`bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10 ${
           hasMetadata ? "cursor-pointer hover:bg-white/5" : ""
         }`}
       >
         <EventBadge event={log.event} />
-        <td className="px-6 py-4 border-transparent transform transition-transform duration-200">
+        <td className="px-6 border-transparent transform transition-transform duration-200">
           {log.user.username}
         </td>
-        <td className="px-6 py-4 border-transparent transform transition-transform duration-200">
+        <td className="px-6 border-transparent transform transition-transform duration-200">
           {log.occurredAt}
         </td>
         {hasMetadata && (
-          <>
+          <div className="mt-1">
             {expanded ? (
               <td
-                className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200 hover:scale-105`}
+                className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200`}
               >
                 <CaretUp weight="bold" size={20} />
                 <p className="text-xs text-white/50 w-[20px]">hide</p>
               </td>
             ) : (
               <td
-                className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200 hover:scale-105`}
+                className={`px-2 gap-x-1 flex items-center justify-center transform transition-transform duration-200`}
               >
                 <CaretDown weight="bold" size={20} />
                 <p className="text-xs text-white/50 w-[20px]">show</p>
               </td>
             )}
-          </>
+          </div>
         )}
       </tr>
       <EventMetadata metadata={metadata} expanded={expanded} />
@@ -106,9 +106,9 @@ const EventBadge = ({ event }) => {
     };
 
   return (
-    <td className="px-6 py-4 font-medium whitespace-nowrap text-white flex items-center">
+    <td className="px-6 py-2 font-medium whitespace-nowrap text-white flex items-center">
       <span
-        className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-sm font-medium ${colorTheme.text} shadow-sm`}
+        className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs font-medium ${colorTheme.text} shadow-sm`}
       >
         {event}
       </span>
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index 53300e708b9..2a482f51222 100644
--- a/frontend/src/pages/Admin/Logging/index.jsx
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -120,7 +120,7 @@ function LogsContainer({
 
   return (
     <>
-      <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
+      <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
         <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
diff --git a/frontend/src/pages/Admin/SystemPromptVariables/VariableRow/index.jsx b/frontend/src/pages/Admin/SystemPromptVariables/VariableRow/index.jsx
index 8713b5d704d..ac4c3ea8120 100644
--- a/frontend/src/pages/Admin/SystemPromptVariables/VariableRow/index.jsx
+++ b/frontend/src/pages/Admin/SystemPromptVariables/VariableRow/index.jsx
@@ -6,6 +6,7 @@ import ModalWrapper from "@/components/ModalWrapper";
 import EditVariableModal from "./EditVariableModal";
 import { titleCase } from "text-case";
 import truncate from "truncate";
+import { Trash } from "@phosphor-icons/react";
 
 /**
  * A row component for displaying a system prompt variable
@@ -63,40 +64,40 @@ export default function VariableRow({ variable, onRefresh }) {
     <>
       <tr
         ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
+        className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
       >
-        <th scope="row" className="px-6 py-4 whitespace-nowrap">
+        <th scope="row" className="px-4 py-2 whitespace-nowrap">
           {variable.key}
         </th>
-        <td className="px-6 py-4">
+        <td className="px-4 py-2">
           {typeof variable.value === "function"
             ? variable.value()
             : truncate(variable.value, 50)}
         </td>
-        <td className="px-6 py-4">
+        <td className="px-4 py-2">
           {truncate(variable.description || "-", 50)}
         </td>
-        <td className="px-6 py-4">
+        <td className="px-4 py-2">
           <span
             className={`rounded-full ${colorTheme.bg} px-2 py-0.5 text-xs leading-5 font-semibold ${colorTheme.text} shadow-sm`}
           >
             {titleCase(variable.type)}
           </span>
         </td>
-        <td className="px-6 py-4 flex items-center justify-end gap-x-6">
+        <td className="px-4 py-2 flex items-center justify-end gap-x-4">
           {variable.type === "static" && (
             <>
               <button
                 onClick={openModal}
-                className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
+                className="text-xs font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
               >
                 Edit
               </button>
               <button
                 onClick={handleDelete}
-                className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
+                className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
               >
-                Delete
+                <Trash className="h-4 w-4" />
               </button>
             </>
           )}
diff --git a/frontend/src/pages/Admin/SystemPromptVariables/index.jsx b/frontend/src/pages/Admin/SystemPromptVariables/index.jsx
index d8615100afe..21a84c4bab4 100644
--- a/frontend/src/pages/Admin/SystemPromptVariables/index.jsx
+++ b/frontend/src/pages/Admin/SystemPromptVariables/index.jsx
@@ -83,16 +83,16 @@ export default function SystemPromptVariables() {
               <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
                 <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
                   <tr>
-                    <th scope="col" className="px-6 py-3 rounded-tl-lg">
+                    <th scope="col" className="px-4 py-2 rounded-tl-lg">
                       Key
                     </th>
-                    <th scope="col" className="px-6 py-3">
+                    <th scope="col" className="px-4 py-2">
                       Value
                     </th>
-                    <th scope="col" className="px-6 py-3">
+                    <th scope="col" className="px-4 py-2">
                       Description
                     </th>
-                    <th scope="col" className="px-6 py-3">
+                    <th scope="col" className="px-4 py-2">
                       Type
                     </th>
                   </tr>
diff --git a/frontend/src/pages/Admin/Users/UserRow/index.jsx b/frontend/src/pages/Admin/Users/UserRow/index.jsx
index 2a115f4919f..3198895e091 100644
--- a/frontend/src/pages/Admin/Users/UserRow/index.jsx
+++ b/frontend/src/pages/Admin/Users/UserRow/index.jsx
@@ -57,18 +57,18 @@ export default function UserRow({ currUser, user }) {
     <>
       <tr
         ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
+        className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
       >
-        <th scope="row" className="px-6 py-4 whitespace-nowrap">
+        <th scope="row" className="px-6 whitespace-nowrap">
           {user.username}
         </th>
-        <td className="px-6 py-4">{titleCase(user.role)}</td>
-        <td className="px-6 py-4">{user.createdAt}</td>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6">{titleCase(user.role)}</td>
+        <td className="px-6">{user.createdAt}</td>
+        <td className="px-6 flex items-center gap-x-6 h-full mt-2">
           {canModify && (
             <button
               onClick={openModal}
-              className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
+              className="text-xs font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
             >
               Edit
             </button>
@@ -77,13 +77,13 @@ export default function UserRow({ currUser, user }) {
             <>
               <button
                 onClick={handleSuspend}
-                className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
+                className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
               >
                 {suspended ? "Unsuspend" : "Suspend"}
               </button>
               <button
                 onClick={handleDelete}
-                className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
+                className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
               >
                 Delete
               </button>
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index e2d29c0d229..37598947647 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -84,7 +84,7 @@ function UsersContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
+    <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
       <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
diff --git a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
index f95b3379f9d..8a774e0bada 100644
--- a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
@@ -20,22 +20,22 @@ export default function WorkspaceRow({ workspace, users }) {
     <>
       <tr
         ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
+        className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
       >
-        <th scope="row" className="px-6 py-4 whitespace-nowrap">
+        <th scope="row" className="px-6 whitespace-nowrap">
           {workspace.name}
         </th>
-        <td className="px-6 py-4 flex items-center">
+        <td className="px-6 flex items-center">
           <a
             href={paths.workspace.chat(workspace.slug)}
             target="_blank"
             rel="noreferrer"
             className="text-white flex items-center hover:underline"
           >
-            <LinkSimple className="mr-2 w-5 h-5" /> {workspace.slug}
+            <LinkSimple className="mr-2 w-4 h-4" /> {workspace.slug}
           </a>
         </td>
-        <td className="px-6 py-4">
+        <td className="px-6">
           <a
             href={paths.workspace.settings.members(workspace.slug)}
             className="text-white flex items-center underline"
@@ -43,11 +43,11 @@ export default function WorkspaceRow({ workspace, users }) {
             {workspace.userIds?.length}
           </a>
         </td>
-        <td className="px-6 py-4">{workspace.createdAt}</td>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6">{workspace.createdAt}</td>
+        <td className="px-6 flex items-center gap-x-6 h-full mt-1">
           <button
             onClick={handleDelete}
-            className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
+            className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index 0170efdd7ba..8cdb5765937 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -84,7 +84,7 @@ function WorkspacesContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
+    <table className="w-full text-xs text-left rounded-lg mt-6 min-w-[640px] border-spacing-0">
       <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
index 787c33d4595..9e4d0cb58da 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
@@ -46,26 +46,24 @@ export default function ApiKeyRow({ apiKey }) {
     <>
       <tr
         ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm font-medium"
+        className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
       >
-        <td scope="row" className="px-6 py-4 whitespace-nowrap">
+        <td scope="row" className="px-6 whitespace-nowrap">
           {apiKey.secret}
         </td>
-        <td className="px-6 py-4 text-center">
-          {apiKey.createdBy?.username || "--"}
-        </td>
-        <td className="px-6 py-4">{apiKey.createdAt}</td>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6 text-left">{apiKey.createdBy?.username || "--"}</td>
+        <td className="px-6">{apiKey.createdAt}</td>
+        <td className="px-6 flex items-center gap-x-6 h-full mt-1">
           <button
             onClick={copyApiKey}
             disabled={copied}
-            className="border-none font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
+            className="text-xs font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
           >
             {copied ? "Copied" : "Copy API Key"}
           </button>
           <button
             onClick={handleDelete}
-            className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
+            className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 590f00d0ae3..b3bffdfcf16 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -96,7 +96,7 @@ function ApiKeysContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
+    <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
       <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
index 85c9181ad53..902cd15f5dd 100644
--- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
@@ -58,48 +58,50 @@ export default function BrowserExtensionApiKeyRow({
   return (
     <tr
       ref={rowRef}
-      className="bg-transparent text-white text-opacity-80 text-sm font-medium"
+      className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
     >
-      <td scope="row" className="px-6 py-4 whitespace-nowrap flex items-center">
-        <span className="mr-2 font-mono">{connectionString}</span>
-        <div className="flex items-center space-x-2">
-          <button
-            onClick={handleCopy}
-            data-tooltip-id="copy-connection-text"
-            data-tooltip-content="Copy connection string"
-            className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
-          >
-            {copied ? (
-              <Check className="h-5 w-5 text-green-500" />
-            ) : (
-              <Copy className="h-5 w-5" />
-            )}
-          </button>
+      <td scope="row" className="px-6 py-2 whitespace-nowrap">
+        <div className="flex items-center">
+          <span className="mr-2 font-mono">{connectionString}</span>
+          <div className="flex items-center space-x-2">
+            <button
+              onClick={handleCopy}
+              data-tooltip-id="copy-connection-text"
+              data-tooltip-content="Copy connection string"
+              className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
+            >
+              {copied ? (
+                <Check className="h-4 w-4 text-green-500" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </button>
 
-          <button
-            onClick={handleConnect}
-            data-tooltip-id="auto-connection"
-            data-tooltip-content="Automatically connect to extension"
-            className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
-          >
-            <Plug className="h-5 w-5" />
-          </button>
+            <button
+              onClick={handleConnect}
+              data-tooltip-id="auto-connection"
+              data-tooltip-content="Automatically connect to extension"
+              className="border-none text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
+            >
+              <Plug className="h-4 w-4" />
+            </button>
+          </div>
         </div>
       </td>
       {isMultiUser && (
-        <td className="px-6 py-4">
+        <td className="px-6 py-2">
           {apiKey.user ? apiKey.user.username : "N/A"}
         </td>
       )}
-      <td className="px-6 py-4">
+      <td className="px-6 py-2">
         {new Date(apiKey.createdAt).toLocaleString()}
       </td>
-      <td className="px-6 py-4">
+      <td className="px-6 py-2">
         <button
           onClick={handleRevoke}
-          className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
+          className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
         >
-          <Trash className="h-5 w-5" />
+          <Trash className="h-4 w-4" />
         </button>
       </td>
     </tr>
diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
index ea48a609971..fdb4f071e11 100644
--- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
+++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
@@ -81,21 +81,21 @@ export default function BrowserExtensionApiKeys() {
             ) : error ? (
               <div className="text-red-500 mt-6">Error: {error}</div>
             ) : (
-              <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0 md:mt-6 mt-0">
+              <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0 md:mt-6 mt-0">
                 <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
                   <tr>
-                    <th scope="col" className="px-6 py-3 rounded-tl-lg">
+                    <th scope="col" className="px-6 py-2 rounded-tl-lg">
                       Extension Connection String
                     </th>
                     {isMultiUser && (
-                      <th scope="col" className="px-6 py-3">
+                      <th scope="col" className="px-6 py-2">
                         Created By
                       </th>
                     )}
-                    <th scope="col" className="px-6 py-3">
+                    <th scope="col" className="px-6 py-2">
                       Created At
                     </th>
-                    <th scope="col" className="px-6 py-3 rounded-tr-lg">
+                    <th scope="col" className="px-6 py-2 rounded-tr-lg">
                       Actions
                     </th>
                   </tr>
diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
index 7e1c928c060..52cb02dcd7a 100644
--- a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
@@ -45,31 +45,31 @@ export default function ChatRow({ chat, onDelete }) {
 
   return (
     <>
-      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
-        <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
+      <tr className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10">
+        <td className="px-6 font-medium whitespace-nowrap text-white">
           {chat.id}
         </td>
-        <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
+        <td className="px-6 font-medium whitespace-nowrap text-white">
           {chat.user?.username}
         </td>
-        <td className="px-6 py-4">{chat.workspace?.name}</td>
+        <td className="px-6">{chat.workspace?.name}</td>
         <td
           onClick={openPromptModal}
-          className="px-6 py-4 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
+          className="px-6 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
         >
           {truncate(chat.prompt, 40)}
         </td>
         <td
           onClick={openResponseModal}
-          className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
+          className="px-6 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
         >
           {truncate(parseText(chat.response), 40)}
         </td>
-        <td className="px-6 py-4">{chat.createdAt}</td>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6">{chat.createdAt}</td>
+        <td className="px-6 flex items-center gap-x-6 h-full mt-1">
           <button
             onClick={handleDelete}
-            className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
+            className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index a612e6d06d5..68d981c1e2a 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -175,7 +175,7 @@ export default function WorkspaceChats() {
                 {t("recorded.description")}
               </p>
             </div>
-            <div className="overflow-x-auto mt-6">
+            <div className="overflow-x-auto">
               <ChatsContainer
                 loading={loading}
                 chats={chats}
@@ -230,8 +230,8 @@ function ChatsContainer({
 
   return (
     <>
-      <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
-        <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase light:border-theme-sidebar-border border-white/10 border-b">
+      <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
+        <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
               {t("recorded.table.id")}
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
index 75996fa22d5..4b25eb6db2c 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
@@ -35,8 +35,8 @@ export default function ChatRow({ chat, onDelete }) {
 
   return (
     <>
-      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
-        <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
+      <tr className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10">
+        <td className="px-6 font-medium whitespace-nowrap text-white">
           <a
             href={paths.settings.embedSetup()}
             target="_blank"
@@ -49,32 +49,29 @@ export default function ChatRow({ chat, onDelete }) {
         </td>
         <td
           onClick={openConnectionDetailsModal}
-          className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
+          className="px-6 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
         >
           <div className="flex flex-col">
             <p>{truncate(chat.session_id, 20)}</p>
-            <ConnectionDetails
-              connection_information={chat.connection_information}
-            />
           </div>
         </td>
         <td
           onClick={openPromptModal}
-          className="px-6 py-4 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
+          className="px-6 border-transparent cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
         >
           {truncate(chat.prompt, 40)}
         </td>
         <td
           onClick={openResponseModal}
-          className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
+          className="px-6 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
         >
           {truncate(JSON.parse(chat.response)?.text, 40)}
         </td>
-        <td className="px-6 py-4">{chat.createdAt}</td>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6">{chat.createdAt}</td>
+        <td className="px-6 flex items-center gap-x-6 h-full mt-1">
           <button
             onClick={handleDelete}
-            className="border-none font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
+            className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index 6fb95325a85..f04ad108696 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -194,7 +194,7 @@ function ChatsContainer() {
 
   return (
     <>
-      <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
+      <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
         <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
index 222ca3fdc10..4579884e4b7 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { DotsThreeOutline, LinkSimple } from "@phosphor-icons/react";
+import { DotsThreeOutline, LinkSimple, Trash } from "@phosphor-icons/react";
 import showToast from "@/utils/toast";
 import { useModal } from "@/hooks/useModal";
 import ModalWrapper from "@/components/ModalWrapper";
@@ -63,11 +63,11 @@ export default function EmbedRow({ embed }) {
     <>
       <tr
         ref={rowRef}
-        className="bg-transparent text-white text-opacity-80 text-sm"
+        className="bg-transparent text-white text-opacity-80 text-xs font-medium border-b border-white/10 h-10"
       >
         <th
           scope="row"
-          className="px-6 py-4 whitespace-nowrap flex item-center gap-x-1"
+          className="px-6 whitespace-nowrap flex item-center gap-x-1"
         >
           <a
             href={paths.workspace.chat(embed.workspace.slug)}
@@ -78,39 +78,37 @@ export default function EmbedRow({ embed }) {
             <LinkSimple className="mr-2 w-5 h-5" /> {embed.workspace.name}
           </a>
         </th>
-        <th scope="row" className="px-6 py-4 whitespace-nowrap">
+        <th scope="row" className="px-6 whitespace-nowrap">
           {nFormatter(embed._count.embed_chats)}
         </th>
-        <th scope="row" className="px-6 py-4 whitespace-nowrap">
+        <th scope="row" className="px-6 whitespace-nowrap">
           <ActiveDomains domainList={embed.allowlist_domains} />
         </th>
-        <td className="px-6 py-4 flex items-center gap-x-6">
+        <td className="px-6 flex items-center gap-x-6 h-full mt-1">
           <button
             onClick={openSettingsModal}
-            className="font-medium text-white text-opacity-80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:text-opacity-60 hover:bg-white hover:bg-opacity-10"
+            className="text-xs font-medium text-white text-opacity-80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:text-opacity-60 hover:bg-white hover:bg-opacity-10"
           >
             <DotsThreeOutline weight="fill" className="h-5 w-5" />
           </button>
-          <>
-            <button
-              onClick={openSnippetModal}
-              className="font-medium text-blue-600 dark:text-blue-300 px-2 py-1 rounded-lg hover:bg-blue-50 hover:dark:bg-blue-800 hover:dark:bg-opacity-20"
-            >
-              Show Code
-            </button>
-            <button
-              onClick={handleSuspend}
-              className="font-medium text-orange-600 dark:text-orange-300 px-2 py-1 rounded-lg hover:bg-orange-50 hover:dark:bg-orange-800 hover:dark:bg-opacity-20"
-            >
-              {enabled ? "Disable" : "Enable"}
-            </button>
-            <button
-              onClick={handleDelete}
-              className="font-medium text-red-600 dark:text-red-300 px-2 py-1 rounded-lg hover:bg-red-50 hover:dark:bg-red-800 hover:dark:bg-opacity-20"
-            >
-              Delete
-            </button>
-          </>
+          <button
+            onClick={openSnippetModal}
+            className="text-xs font-medium text-blue-600 dark:text-blue-300 px-2 py-1 rounded-lg hover:bg-blue-50 hover:dark:bg-blue-800 hover:dark:bg-opacity-20"
+          >
+            Show Code
+          </button>
+          <button
+            onClick={handleSuspend}
+            className="text-xs font-medium text-orange-600 dark:text-orange-300 px-2 py-1 rounded-lg hover:bg-orange-50 hover:dark:bg-orange-800 hover:dark:bg-opacity-20"
+          >
+            {enabled ? "Disable" : "Enable"}
+          </button>
+          <button
+            onClick={handleDelete}
+            className="text-xs font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
+          >
+            <Trash className="h-5 w-5" />
+          </button>
         </td>
       </tr>
       <ModalWrapper isOpen={isSettingsOpen}>
@@ -129,8 +127,12 @@ function ActiveDomains({ domainList }) {
     const domains = JSON.parse(domainList);
     return (
       <div className="flex flex-col gap-y-2">
-        {domains.map((domain) => {
-          return <p className="font-mono !font-normal">{domain}</p>;
+        {domains.map((domain, index) => {
+          return (
+            <p key={index} className="font-mono !font-normal">
+              {domain}
+            </p>
+          );
         })}
       </div>
     );
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index 68fb15c01cc..5decb6b1ae7 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
@@ -83,7 +83,7 @@ function EmbedContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0">
+    <table className="w-full text-xs text-left rounded-lg min-w-[640px] border-spacing-0">
       <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">