diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-header.tsx
index 89b345c247..9e0c7616a6 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-header.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-header.tsx
@@ -11,7 +11,7 @@ export const LogHeader = ({
   log: KeysOverviewLog;
 }) => {
   return (
-    <div className="border-b-[1px] flex justify-between items-center border-gray-4 pb-3">
+    <div className="border-b-[1px] flex justify-between items-center border-gray-4 h-[50px] px-4 py-2">
       <div className="flex gap-2 items-center flex-1 min-w-0">
         <Badge
           className={cn("uppercase px-[6px] rounded-md font-mono", {
@@ -21,13 +21,15 @@ export const LogHeader = ({
         >
           {log.key_details?.enabled ? "Active" : "Disabled"}
         </Badge>
-        <p className="text-xs text-accent-12 truncate flex-1 mr-4">
-          {log.key_details?.name || log.key_id}{" "}
+        <p className="text-xs text-accent-12 truncate flex-1">
+          {log.key_details?.name || log.key_id}
         </p>
       </div>
-      <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
-        <XMark className="text-gray-12 stroke-2" />
-      </Button>
+      <div className="flex gap-1 items-center shrink-0">
+        <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
+          <XMark className="text-grayA-9 stroke-2" size="sm-regular" />
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx
index a6598c5d20..7d29a09ca1 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx
@@ -1,6 +1,6 @@
 import { formatNumber } from "@/lib/fmt";
 import { cn } from "@/lib/utils";
-import { Card, CardContent, CopyButton } from "@unkey/ui";
+import { CopyButton } from "@unkey/ui";
 import { formatOutcomeName, getOutcomeColor } from "../../../../../utils";
 
 export const OutcomeDistributionSection = ({
@@ -21,25 +21,23 @@ export const OutcomeDistributionSection = ({
   };
 
   return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <div className="flex justify-between items-center">
-        <span className="text-[13px] text-accent-9 font-sans">
+    <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative group">
+        <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">
           Outcomes ({outcomeEntries.length})
-        </span>
-      </div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group">
+        </div>
+        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
           <div className="flex flex-col gap-1 whitespace-pre-wrap leading-relaxed">
             {outcomeEntries.map(([outcome, count]) => (
-              <div className="group flex items-center w-full p-[3px]" key={outcome}>
-                <div className="flex items-center text-left text-accent-9 whitespace-nowrap">
+              <div className="flex items-center w-full px-[3px] h-6" key={outcome}>
+                <div className="flex items-center text-left text-gray-11 whitespace-nowrap">
                   <div
                     className={cn(
                       "size-[10px] rounded-[2px] shadow-sm mr-2",
                       getOutcomeColor(outcome),
                     )}
                   />
-                  <span>{formatOutcomeName(outcome)}:</span>
+                  <span className="text-xs text-gray-11 ">{formatOutcomeName(outcome)}:</span>
                 </div>
                 <span className="ml-2 text-xs text-accent-12 truncate font-mono tabular-nums">
                   {formatNumber(count)}
@@ -47,16 +45,15 @@ export const OutcomeDistributionSection = ({
               </div>
             ))}
           </div>
-          <CopyButton
-            value={getTextToCopy()}
-            shape="square"
-            variant="primary"
-            size="2xlg"
-            className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
-            aria-label="Copy content"
-          />
-        </CardContent>
-      </Card>
+        </div>
+        <CopyButton
+          value={getTextToCopy()}
+          shape="square"
+          variant="outline"
+          className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
+          aria-label="Copy content"
+        />
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx
index 034ea29893..82ef110347 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx
@@ -1,6 +1,4 @@
-"use client";
-import { Card, CardContent, CopyButton } from "@unkey/ui";
-import React from "react";
+import { CopyButton } from "@unkey/ui";
 
 export const LogSection = ({
   details,
@@ -9,115 +7,51 @@ export const LogSection = ({
   details: Record<string, React.ReactNode> | string;
   title: string;
 }) => {
-  // Helper function to get the text to copy
   const getTextToCopy = () => {
-    let textToCopy: string;
-
     if (typeof details === "string") {
-      textToCopy = details;
-    } else {
-      // Extract text content from React components
-      textToCopy = Object.entries(details)
-        .map(([key, value]) => {
-          if (value === null || value === undefined) {
-            return key;
-          }
-          // If it's a React element, try to extract text content
-          if (typeof value === "object" && value !== null && "props" in value) {
-            return `${key}: ${extractTextFromReactElement(value)}`;
-          }
-          return `${key}: ${value}`;
-        })
-        .join("\n");
-    }
-    return textToCopy;
-  };
-
-  // Helper function to extract text from React elements
-  // This is used to extract text from React elements like TimestampInfo and Link components
-  const extractTextFromReactElement = (element: React.ReactNode): string => {
-    if (typeof element === "string" || typeof element === "number") {
-      return String(element);
+      return details;
     }
 
-    if (element === null || element === undefined) {
-      return "";
-    }
-
-    // Handle React elements
-    if (React.isValidElement(element)) {
-      const reactElement = element as React.ReactElement<{
-        value?: string | Date | number;
-        children?: React.ReactNode;
-        href?: string;
-        title?: string;
-      }>;
-
-      // For TimestampInfo and similar components, check for a 'value' prop first
-      if (reactElement.props.value) {
-        // If value is a date/timestamp, format it appropriately
-        if (reactElement.props.value instanceof Date) {
-          return reactElement.props.value.toISOString();
+    return Object.entries(details)
+      .map(([key, value]) => {
+        if (value === null || value === undefined) {
+          return key;
         }
-        return String(reactElement.props.value);
-      }
-
-      // Then check for children
-      if (reactElement.props.children) {
-        if (typeof reactElement.props.children === "string") {
-          return reactElement.props.children;
-        }
-        if (Array.isArray(reactElement.props.children)) {
-          return reactElement.props.children
-            .map((child: React.ReactNode) => extractTextFromReactElement(child))
-            .join("");
+        if (typeof value === "object" && value !== null && "props" in value) {
+          return `${key}: ${value}`;
         }
-        return extractTextFromReactElement(reactElement.props.children);
-      }
-
-      // For Link components, check for href or title
-      if (reactElement.props.href || reactElement.props.title) {
-        return reactElement.props.title || reactElement.props.href || "";
-      }
-    }
-
-    return String(element);
+        return `${key}: ${value}`;
+      })
+      .join("\n");
   };
 
   return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <div className="flex justify-between items-center">
-        <span className="text-[13px] text-accent-9 font-sans">{title}</span>
-      </div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group">
-          <pre className="flex flex-col gap-1 whitespace-pre-wrap leading-relaxed">
+    <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative group">
+        <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">{title}</div>
+        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+          <pre className="whitespace-pre-wrap break-words leading-relaxed text-xs">
             {typeof details === "object"
-              ? Object.entries(details).map((detail) => {
-                  const [key, value] = detail;
-                  return (
-                    <div className="group flex items-center w-full p-[3px]" key={key}>
-                      <span className="text-left text-accent-9 whitespace-nowrap">
-                        {key}
-                        {value ? ":" : ""}
-                      </span>
-                      <span className="ml-2 text-xs text-accent-12 truncate">{value}</span>
-                    </div>
-                  );
-                })
+              ? Object.entries(details).map(([key, value]) => (
+                  <div className="flex items-center w-full px-[3px] leading-7" key={key}>
+                    <span className="text-left text-gray-11 whitespace-nowrap">
+                      {key}
+                      {value ? ":" : ""}
+                    </span>
+                    <span className="ml-2 text-accent-12 truncate">{value}</span>
+                  </div>
+                ))
               : details}
           </pre>
-
-          <CopyButton
-            value={getTextToCopy()}
-            shape="square"
-            variant="primary"
-            size="2xlg"
-            className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
-            aria-label="Copy content"
-          />
-        </CardContent>
-      </Card>
+        </div>
+        <CopyButton
+          value={getTextToCopy()}
+          shape="square"
+          variant="outline"
+          className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
+          aria-label="Copy content"
+        />
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
index 4aa6f78362..429feadd3c 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, CopyButton } from "@unkey/ui";
+import { CopyButton } from "@unkey/ui";
 
 type Role = {
   name: string;
@@ -12,48 +12,45 @@ type RolesSectionProps = {
 export const RolesSection: React.FC<RolesSectionProps> = ({ roles }) => {
   if (!roles || roles.length === 0) {
     return (
-      <div className="flex flex-col gap-1 mt-[16px]">
-        <div className="flex justify-between items-center">
-          <span className="text-[13px] text-accent-9 font-sans">Roles</span>
+      <div className="flex flex-col gap-1 mt-[16px] 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">
+            <span className="text-xs text-gray-11">No roles assigned</span>
+          </div>
         </div>
-        <Card className="bg-gray-2 border-gray-4 rounded-lg">
-          <CardContent className="py-2 px-3 text-xs">
-            <span className="text-accent-9">No roles assigned</span>
-          </CardContent>
-        </Card>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <span className="text-[13px] text-accent-9 font-sans">Roles ({roles.length})</span>
-      <div className="space-y-2">
-        {roles.map((role) => (
-          <Card
-            key={role.name}
-            className="bg-gray-2 border-gray-4 rounded-lg hover:border-gray-5 transition-colors"
-          >
-            <CardContent className="py-3 px-4 text-xs relative group">
-              <div className="flex items-center">
-                <span className="text-accent-12 font-medium">{role.name}</span>
-              </div>
+    <div className="flex flex-col gap-1 mt-[16px] 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 ({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">
+          {roles.map((role) => (
+            <div
+              key={role.name}
+              className="relative group p-2 rounded-md border border-gray-4 bg-gray-2 hover:border-gray-5 transition-colors"
+            >
+              <div className="text-accent-12 font-medium text-xs">{role.name}</div>
               {role.description ? (
-                <div className="text-accent-10 mt-2 text-xs">{role.description}</div>
+                <div className="text-accent-10 mt-1 text-xs">{role.description}</div>
               ) : (
-                <div className="text-accent-9 mt-2 text-xs italic">No description</div>
+                <div className="text-gray-11 mt-1 text-xs italic">No description</div>
               )}
               <CopyButton
                 value={`${role.name}${role.description ? `\n${role.description}` : ""}`}
                 shape="square"
-                toastMessage={`${role.name}${role.description ? `\n${role.description}` : ""}`}
-                variant="primary"
-                className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
+                variant="outline"
+                className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
                 aria-label={`Copy ${role.name}`}
               />
-            </CardContent>
-          </Card>
-        ))}
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -71,65 +68,65 @@ type PermissionsSectionProps = {
 export const PermissionsSection = ({ permissions }: PermissionsSectionProps) => {
   if (!permissions || permissions.length === 0) {
     return (
-      <div className="flex flex-col gap-1 mt-[16px]">
-        <div className="flex justify-between items-center">
-          <span className="text-[13px] text-accent-9 font-sans">Permissions</span>
+      <div className="flex flex-col gap-1 mt-[16px] 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">
+            Permissions
+          </div>
+          <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+            <span className="text-xs text-gray-11">No permissions assigned</span>
+          </div>
         </div>
-        <Card className="bg-gray-2 border-gray-4 rounded-lg">
-          <CardContent className="py-2 px-3 text-xs">
-            <span className="text-accent-9">No permissions assigned</span>
-          </CardContent>
-        </Card>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <div className="flex justify-between items-center">
-        <span className="text-[13px] text-accent-9 font-sans">
-          Permissions ({permissions.length})
-        </span>
-        {permissions.length > 1 && (
-          <CopyButton
-            value={permissions
-              .map(
-                (permission) =>
-                  `${permission.name}${permission.description ? `\n${permission.description}` : ""}`,
-              )
-              .join("\n\n")}
-            shape="square"
-            variant="primary"
-            className="h-6 w-6 rounded-sm"
-            aria-label="Copy all permissions"
-          />
-        )}
-      </div>
-      <div className="space-y-2">
-        {permissions.map((permission) => (
-          <Card
-            key={permission.name}
-            className="bg-gray-2 border-gray-4 rounded-lg hover:border-gray-5 transition-colors"
-          >
-            <CardContent className="py-3 px-4 text-xs relative group">
-              <div className="flex items-center gap-2">
-                <span className="text-accent-12 font-medium">{permission.name}</span>
-              </div>
+    <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative">
+        <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans flex items-center justify-between">
+          <span>Permissions ({permissions.length})</span>
+          {permissions.length > 1 && (
+            <CopyButton
+              value={permissions
+                .map(
+                  (permission) =>
+                    `${permission.name}${
+                      permission.description ? `\n${permission.description}` : ""
+                    }`,
+                )
+                .join("\n\n")}
+              shape="square"
+              variant="outline"
+              className="h-6 w-6 rounded-sm bg-gray-2 hover:bg-gray-2"
+              aria-label="Copy all permissions"
+            />
+          )}
+        </div>
+        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 space-y-2">
+          {permissions.map((permission) => (
+            <div
+              key={permission.name}
+              className="relative group p-2 rounded-md border border-gray-4 bg-gray-2 hover:border-gray-5 transition-colors"
+            >
+              <div className="text-accent-12 font-medium text-xs">{permission.name}</div>
               {permission.description ? (
-                <div className="text-accent-10 mt-2 text-xs">{permission.description}</div>
+                <div className="text-accent-10 mt-1 text-xs">{permission.description}</div>
               ) : (
-                <div className="text-accent-9 mt-2 text-xs italic">No description</div>
+                <div className="text-gray-11 mt-1 text-xs italic">No description</div>
               )}
               <CopyButton
-                value={`${permission.name}${permission.description ? `\n${permission.description}` : ""}`}
+                value={`${permission.name}${
+                  permission.description ? `\n${permission.description}` : ""
+                }`}
                 shape="square"
-                variant="primary"
-                className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
+                variant="outline"
+                className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
                 aria-label={`Copy ${permission.name}`}
               />
-            </CardContent>
-          </Card>
-        ))}
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-footer.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-footer.tsx
index 8057c86a23..259f6a7da8 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-footer.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-footer.tsx
@@ -13,6 +13,7 @@ type Props = {
 export const LogFooter = ({ log }: Props) => {
   return (
     <RequestResponseDetails
+      className="px-4"
       fields={[
         {
           label: "Time",
@@ -44,12 +45,12 @@ export const LogFooter = ({ log }: Props) => {
                 <span className="text-sm text-content whitespace-nowrap">{`${user.username}`}</span>
               </div>
             ) : log.actor.type === "key" ? (
-              <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs md:flex-grow">
+              <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs md:flex-grow justify-end">
                 <KeySquare className="w-4 h-4" />
                 <span className="font-mono text-xs text-content">{log.actor.id}</span>
               </div>
             ) : (
-              <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs md:flex-grow">
+              <div className="flex items-center w-full gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs md:flex-grow justify-end">
                 <FunctionSquare className="w-4 h-4" />
                 <span className="font-mono text-xs text-content">{log.actor.id}</span>
               </div>
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-header.tsx
index ecc0c3eb19..544669f3fe 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-header.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-header.tsx
@@ -14,18 +14,16 @@ export const LogHeader = ({ onClose, log }: Props) => {
   const styles = AUDIT_STATUS_STYLES[eventType];
 
   return (
-    <div className="border-b-[1px] flex justify-between items-center border-gray-4 pb-3 w-full">
+    <div className="border-b-[1px] flex justify-between items-center border-gray-4 h-[50px] px-4 py-2">
       <div className="flex gap-2 items-center flex-1 min-w-0">
-        <Badge className={cn("px-[6px] rounded-md font-mono ", styles.badge.selected)}>
+        <Badge className={cn("px-[6px] rounded-md font-mono", styles.badge.selected)}>
           {log.auditLog.event}
         </Badge>
       </div>
-      <div className="flex gap-1 items-center">
-        <div className="flex gap-3">
-          <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
-            <XMark className="text-gray-12 stroke-2" />
-          </Button>
-        </div>
+      <div className="flex gap-1 items-center shrink-0">
+        <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
+          <XMark className="text-grayA-9 stroke-2" size="sm-regular" />
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-section.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-section.tsx
index ff56a874cb..eada6cdfe9 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-section.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/components/log-section.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, CopyButton } from "@unkey/ui";
+import { CopyButton } from "@unkey/ui";
 
 export const LogSection = ({
   details,
@@ -7,50 +7,47 @@ export const LogSection = ({
   details: string | string[];
   title: string;
 }) => {
+  const getFormattedContent = () => {
+    if (Array.isArray(details)) {
+      return details
+        .map((header) => {
+          const [key, ...valueParts] = header.split(":");
+          const value = valueParts.join(":").trim();
+          return `${key}: ${value}`;
+        })
+        .join("\n");
+    }
+    return details;
+  };
+
   return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <div className="flex justify-between items-center">
-        <span className="text-[13px] text-accent-9 font-sans">{title}</span>
-      </div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group ">
-          <pre className="flex flex-col gap-1 whitespace-pre-wrap leading-relaxed">
+    <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative group">
+        <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">{title}</div>
+        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+          <pre className="whitespace-pre-wrap break-words leading-relaxed text-xs">
             {Array.isArray(details)
               ? details.map((header) => {
                   const [key, ...valueParts] = header.split(":");
                   const value = valueParts.join(":").trim();
                   return (
-                    <div className="group flex items-center w-full p-[3px]" key={key}>
-                      <span className="w-28 text-left truncate text-accent-9">{key}:</span>
-                      <span className="ml-2 text-xs text-accent-12 ">{value}</span>
+                    <div className="flex items-center w-full px-[3px] leading-7" key={key}>
+                      <span className="text-left text-gray-11 whitespace-nowrap">{key}:</span>
+                      <span className="ml-2 text-accent-12 truncate">{value}</span>
                     </div>
                   );
                 })
               : details}
           </pre>
-          <CopyButton
-            value={getFormattedContent(details)}
-            shape="square"
-            variant="primary"
-            size="2xlg"
-            className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
-            aria-label="Copy content"
-          />
-        </CardContent>
-      </Card>
+        </div>
+        <CopyButton
+          value={getFormattedContent()}
+          shape="square"
+          variant="outline"
+          className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
+          aria-label="Copy content"
+        />
+      </div>
     </div>
   );
 };
-
-const getFormattedContent = (details: string | string[]) => {
-  if (Array.isArray(details)) {
-    return details
-      .map((header) => {
-        const [key, ...valueParts] = header.split(":");
-        const value = valueParts.join(":").trim();
-        return `${key}: ${value}`;
-      })
-      .join("\n");
-  }
-  return details;
-};
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/index.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/index.tsx
index 43bb852f01..19261fa928 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/index.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/index.tsx
@@ -35,7 +35,7 @@ export const AuditLogDetails = ({ distanceToTop, selectedLog, setSelectedLog }:
   return (
     <ResizablePanel
       onClose={handleClose}
-      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
+      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 pb-4"
       style={panelStyle}
     >
       <LogHeader log={selectedLog} onClose={handleClose} />
diff --git a/apps/dashboard/components/logs/details/log-details/components/log-header.tsx b/apps/dashboard/components/logs/details/log-details/components/log-header.tsx
index 8aa4785804..6645b9ce0e 100644
--- a/apps/dashboard/components/logs/details/log-details/components/log-header.tsx
+++ b/apps/dashboard/components/logs/details/log-details/components/log-header.tsx
@@ -10,30 +10,30 @@ type Props = {
 
 export const LogHeader = ({ onClose, log }: Props) => {
   return (
-    <div className="border-b-[1px] flex justify-between items-center border-gray-4 pb-3">
-      <div className="flex gap-2 items-center flex-1 min-w-0">
+    <div className="border-b-[1px] flex justify-between items-center border-gray-4 h-[50px] px-4 py-2">
+      <div className="flex gap-2 items-center min-w-0">
         <Badge className="uppercase px-[6px] rounded-md font-mono bg-accent-3 text-accent-11 hover:bg-accent-4">
           {log.method}
         </Badge>
-        <p className="text-xs text-accent-12 truncate flex-1 mr-4">{log.path} </p>
+        <p className="text-xs text-accent-12 truncate flex-1">{log.path} </p>
+
+        <Badge
+          className={cn("px-[6px] rounded-md font-mono text-xs", {
+            "bg-success-3 text-success-11 hover:bg-success-4":
+              log.response_status >= 200 && log.response_status < 300,
+            "bg-warning-3 text-warning-11 hover:bg-warning-4":
+              log.response_status >= 400 && log.response_status < 500,
+            "bg-error-3 text-error-11 hover:bg-error-4": log.response_status >= 500,
+          })}
+        >
+          {log.response_status}
+        </Badge>
       </div>
 
       <div className="flex gap-1 items-center shrink-0">
         <div className="flex gap-3">
-          <Badge
-            className={cn("px-[6px] rounded-md font-mono text-xs", {
-              "bg-success-3 text-success-11 hover:bg-success-4":
-                log.response_status >= 200 && log.response_status < 300,
-              "bg-warning-3 text-warning-11 hover:bg-warning-4":
-                log.response_status >= 400 && log.response_status < 500,
-              "bg-error-3 text-error-11 hover:bg-error-4": log.response_status >= 500,
-            })}
-          >
-            {log.response_status}
-          </Badge>
-          <span className="text-gray-5">|</span>
           <Button size="icon" variant="ghost" onClick={onClose} className="[&_svg]:size-3">
-            <XMark className="text-gray-12 stroke-2" />
+            <XMark className="text-grayA-9 stroke-2" size="sm-regular" />
           </Button>
         </div>
       </div>
diff --git a/apps/dashboard/components/logs/details/log-details/components/log-meta.tsx b/apps/dashboard/components/logs/details/log-details/components/log-meta.tsx
index 3361a1e0a3..a0811af463 100644
--- a/apps/dashboard/components/logs/details/log-details/components/log-meta.tsx
+++ b/apps/dashboard/components/logs/details/log-details/components/log-meta.tsx
@@ -1,22 +1,23 @@
-import { Card, CardContent, CopyButton } from "@unkey/ui";
+import { CopyButton } from "@unkey/ui";
 
-export const LogMetaSection = ({ content }: { content: string }) => {
+export const LogMetaSection = ({ content }: { content: React.ReactNode }) => {
   return (
-    <div className="flex justify-between pt-2.5 flex-col gap-1">
-      <div className="text-[13px] text-accent-11 font-sans">Meta</div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group min-w-[300px]">
-          <pre className="text-accent-12">{content ?? "<EMPTY>"} </pre>
-          <CopyButton
-            value={content}
-            shape="square"
-            variant="primary"
-            size="2xlg"
-            className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
-            aria-label="Copy content"
-          />
-        </CardContent>
-      </Card>
+    <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative group">
+        <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">Meta</div>
+        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+          <pre className="whitespace-pre-wrap leading-relaxed text-xs text-accent-12">
+            {content}
+          </pre>
+        </div>
+        <CopyButton
+          value={typeof content === "string" ? content : ""}
+          shape="square"
+          variant="outline"
+          className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
+          aria-label="Copy content"
+        />
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/components/logs/details/log-details/components/log-section.tsx b/apps/dashboard/components/logs/details/log-details/components/log-section.tsx
index 71a89eb7a8..c2be0a50c7 100644
--- a/apps/dashboard/components/logs/details/log-details/components/log-section.tsx
+++ b/apps/dashboard/components/logs/details/log-details/components/log-section.tsx
@@ -1,48 +1,47 @@
-import { Card, CardContent, CopyButton } from "@unkey/ui";
+import { CopyButton } from "@unkey/ui";
+
+type LogSectionDetails = string | string[] | React.ReactNode;
 
 export const LogSection = ({
   details,
   title,
 }: {
-  details: string | string[];
+  details: LogSectionDetails;
   title: string;
 }) => {
   return (
-    <div className="flex flex-col gap-1 mt-[16px]">
-      <div className="flex justify-between items-center">
-        <span className="text-[13px] text-accent-11 font-sans">{title}</span>
-      </div>
-      <Card className="bg-gray-2 border-gray-4 rounded-lg">
-        <CardContent className="py-2 px-3 text-xs relative group ">
-          <pre className="flex flex-col gap-1 whitespace-pre-wrap leading-relaxed">
+    <div className="flex flex-col gap-1 mt-[16px] px-4">
+      <div className="border bg-gray-2 border-gray-4 rounded-[10px] relative group">
+        <div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">{title}</div>
+        <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
+          <pre className="whitespace-pre-wrap break-words leading-relaxed text-xs text-accent-12">
             {Array.isArray(details)
               ? details.map((header) => {
                   const [key, ...valueParts] = header.split(":");
                   const value = valueParts.join(":").trim();
                   return (
-                    <div className="group flex items-center w-full p-[3px]" key={key}>
-                      <span className="text-left text-accent-9 whitespace-nowrap">{key}:</span>
-                      <span className="ml-2 text-xs text-accent-12 truncate">{value}</span>
+                    <div className="flex items-center w-full px-[3px] leading-7" key={key}>
+                      <span className="text-left text-gray-11 whitespace-nowrap">{key}:</span>
+                      <span className="ml-2 text-accent-12 truncate">{value}</span>
                     </div>
                   );
                 })
               : details}
           </pre>
-          <CopyButton
-            value={getFormattedContent(details)}
-            shape="square"
-            variant="primary"
-            size="2xlg"
-            className="absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4"
-            aria-label="Copy content"
-          />
-        </CardContent>
-      </Card>
+        </div>
+        <CopyButton
+          value={getFormattedContent(details)}
+          shape="square"
+          variant="outline"
+          className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-md p-4 bg-gray-2 hover:bg-gray-2 size-2"
+          aria-label="Copy content"
+        />
+      </div>
     </div>
   );
 };
 
-const getFormattedContent = (details: string | string[]) => {
+const getFormattedContent = (details: LogSectionDetails): string => {
   if (Array.isArray(details)) {
     return details
       .map((header) => {
@@ -52,5 +51,10 @@ const getFormattedContent = (details: string | string[]) => {
       })
       .join("\n");
   }
-  return details;
+
+  if (typeof details === "string") {
+    return details;
+  }
+
+  return "";
 };
diff --git a/apps/dashboard/components/logs/details/log-details/index.tsx b/apps/dashboard/components/logs/details/log-details/index.tsx
index 269ba67107..2397077464 100644
--- a/apps/dashboard/components/logs/details/log-details/index.tsx
+++ b/apps/dashboard/components/logs/details/log-details/index.tsx
@@ -46,9 +46,11 @@ const createLogSections = (log: Log | RatelimitLog) => [
   {
     title: "Request Body",
     content:
-      JSON.stringify(safeParseJson(log.request_body), null, 2) === "null"
-        ? EMPTY_TEXT
-        : JSON.stringify(safeParseJson(log.request_body), null, 2),
+      JSON.stringify(safeParseJson(log.request_body), null, 2) === "null" ? (
+        <span className="text-xs text-accent-12 truncate">{EMPTY_TEXT}</span>
+      ) : (
+        JSON.stringify(safeParseJson(log.request_body), null, 2)
+      ),
   },
   {
     title: "Response Header",
@@ -57,9 +59,11 @@ const createLogSections = (log: Log | RatelimitLog) => [
   {
     title: "Response Body",
     content:
-      JSON.stringify(safeParseJson(log.response_body), null, 2) === "null"
-        ? EMPTY_TEXT
-        : JSON.stringify(safeParseJson(log.response_body), null, 2),
+      JSON.stringify(safeParseJson(log.response_body), null, 2) === "null" ? (
+        <span className="text-xs text-accent-12 truncate">{EMPTY_TEXT}</span>
+      ) : (
+        JSON.stringify(safeParseJson(log.response_body), null, 2)
+      ),
   },
 ];
 
@@ -70,17 +74,21 @@ const createMetaContent = (log: SupportedLogTypes) => {
       const parsedMeta = JSON.parse((log.key_details as { meta: string })?.meta);
       return JSON.stringify(parsedMeta, null, 2);
     } catch {
-      return EMPTY_TEXT;
+      return <span className="text-xs text-accent-12 truncate">{EMPTY_TEXT}</span>;
     }
   }
 
   // Standard log meta handling
   if ("request_body" in log || "response_body" in log) {
     const meta = extractResponseField(log as Log | RatelimitLog, "meta");
-    return JSON.stringify(meta, null, 2) === "null" ? EMPTY_TEXT : JSON.stringify(meta, null, 2);
+    return JSON.stringify(meta, null, 2) === "null" ? (
+      <span className="text-xs text-accent-12 truncate">{EMPTY_TEXT}</span>
+    ) : (
+      JSON.stringify(meta, null, 2)
+    );
   }
 
-  return EMPTY_TEXT;
+  return <span className="text-xs text-accent-12 truncate">{EMPTY_TEXT}</span>;
 };
 
 // Type guards
@@ -146,7 +154,7 @@ export const LogDetails = ({
         isOpen ? "translate-x-0 opacity-100" : "translate-x-full opacity-0",
       )
     : "";
-  const staticClasses = animated ? "" : "absolute right-0 overflow-y-auto p-4";
+  const staticClasses = animated ? "" : "absolute right-0 overflow-y-auto";
 
   return (
     <ResizablePanel
@@ -314,7 +322,12 @@ const Footer = ({
 
   return (
     <Section delay={delay}>
-      {children || (isStandardLog(log) ? <LogFooter log={log} /> : null)}
+      {children ||
+        (isStandardLog(log) ? (
+          <div className="px-4">
+            <LogFooter log={log} />{" "}
+          </div>
+        ) : null)}
     </Section>
   );
 };