From c3db08fef836a4f13876fcc001e4693e7631eec3 Mon Sep 17 00:00:00 2001
From: Roshan Kumar <theroshansingh89@gmail.com>
Date: Tue, 3 Feb 2026 23:07:31 +0530
Subject: [PATCH 1/3] Align collection settings modal with Penpot design

---
 .../shared/settings/SettingsModal.tsx         | 94 ++++++++++---------
 src/renderer/components/ui/table.tsx          |  2 +-
 2 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/renderer/components/shared/settings/SettingsModal.tsx b/src/renderer/components/shared/settings/SettingsModal.tsx
index 0afcf410..56429d38 100644
--- a/src/renderer/components/shared/settings/SettingsModal.tsx
+++ b/src/renderer/components/shared/settings/SettingsModal.tsx
@@ -67,39 +67,55 @@ export const SettingsModal = () => {
         <FiSettings className="ml-2 text-xl" />
       </DialogTrigger>
 
-      <DialogContent className="flex h-[80vh] max-w-4xl flex-col p-0 lg:max-w-5xl">
-        <div className="flex h-full flex-col">
+      <DialogContent className="bg-muted flex h-[80vh] max-w-4xl flex-col overflow-hidden p-0 lg:max-w-5xl">
+        <Tabs defaultValue="variables" className="flex min-h-0 flex-1 flex-col">
           {/* Header - Fixed */}
-          <div className="shrink-0 px-4 pt-4">
+          <div className="bg-muted shrink-0 px-6 pt-4 pb-3">
             <DialogHeader>
-              <DialogTitle className="font-bold">Collection Settings</DialogTitle>
+              <DialogTitle className="px-2 leading-tight font-bold">
+                Collection Settings
+              </DialogTitle>
             </DialogHeader>
+            <TabsList className="mt-4 gap-2 bg-transparent">
+              <TabsTrigger
+                value="variables"
+                className="text-text-secondary data-[state=active]:bg-background data-[state=active]:text-foreground rounded-full px-4 py-2"
+              >
+                Variables
+              </TabsTrigger>
+              <TabsTrigger
+                value="environments"
+                className="text-text-secondary data-[state=active]:bg-background data-[state=active]:text-foreground rounded-full px-4 py-2"
+              >
+                Environments
+              </TabsTrigger>
+            </TabsList>
           </div>
 
           {/* Tabs - Takes remaining space */}
-          <Tabs defaultValue="variables" className="flex min-h-0 flex-1 flex-col">
-            <div className="shrink-0 px-4 py-4">
-              <TabsList className="bg-background">
-                <TabsTrigger value="variables" className="font-light!">
-                  Variables
-                </TabsTrigger>
-                <TabsTrigger value="environments" className="font-light!">
-                  Environments
-                </TabsTrigger>
-              </TabsList>
-            </div>
 
-            <TabsContent value="variables" className="m-0 min-h-0 flex-1 p-0">
-              <div className="h-full overflow-y-auto p-4">
-                <VariableEditor
-                  variables={editorVariables}
-                  onValidChange={setValid}
-                  onVariablesChange={setEditorVariables}
-                />
+          <TabsContent value="variables" className="m-0 min-h-0 flex-1 border-0 p-0">
+            <div className="bg-background h-full overflow-y-auto px-6 py-4">
+              <VariableEditor
+                variables={editorVariables}
+                onValidChange={setValid}
+                onVariablesChange={setEditorVariables}
+              />
+              <div className="mt-4 flex justify-end">
+                <Button
+                  onClick={save}
+                  disabled={!isOverallValid}
+                  variant={isOverallValid ? 'default' : 'defaultDisable'}
+                  className="px-5 py-[13px]"
+                >
+                  Save
+                </Button>
               </div>
-            </TabsContent>
+            </div>
+          </TabsContent>
 
-            <TabsContent value="environments" className="m-0 min-h-0 flex-1 p-0">
+          <TabsContent value="environments" className="m-0 min-h-0 flex-1 border-0 p-0">
+            <div className="bg-background h-full overflow-y-auto px-6 py-4">
               <EnvironmentEditor
                 environments={editorEnvironments}
                 selectedEnvironment={editorSelectedEnvironment}
@@ -107,25 +123,19 @@ export const SettingsModal = () => {
                 onEnvironmentSelect={setEditorSelectedEnvironment}
                 onValidChange={setEnvironmentValid}
               />
-            </TabsContent>
-          </Tabs>
-
-          {/* Footer - Fixed */}
-          <DialogFooter className="shrink-0 p-4">
-            <div className="flex gap-2">
-              <Button onClick={() => setOpen(false)} variant="outline">
-                <span className="leading-4 font-bold">Cancel</span>
-              </Button>
-              <Button
-                onClick={save}
-                disabled={!isOverallValid}
-                variant={isOverallValid ? 'default' : 'defaultDisable'}
-              >
-                <span className="leading-4 font-bold">Save</span>
-              </Button>
+              <div className="mt-4 flex justify-end">
+                <Button
+                  onClick={save}
+                  disabled={!isOverallValid}
+                  variant={isOverallValid ? 'default' : 'defaultDisable'}
+                  className="px-5 py-[13px]"
+                >
+                  Save
+                </Button>
+              </div>
             </div>
-          </DialogFooter>
-        </div>
+          </TabsContent>
+        </Tabs>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/renderer/components/ui/table.tsx b/src/renderer/components/ui/table.tsx
index b8b8e824..26a6fd2a 100644
--- a/src/renderer/components/ui/table.tsx
+++ b/src/renderer/components/ui/table.tsx
@@ -60,7 +60,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'border-border text-muted-foreground h-12 px-4 text-left align-middle font-medium not-last:border-r [&:has([role=checkbox])]:pr-0',
+      'border-border text-muted-foreground h-12 px-4 text-left align-middle font-semibold not-last:border-r [&:has([role=checkbox])]:pr-0',
       className
     )}
     {...props}

From 15351c63797255a181720b7660bf709c4da528f4 Mon Sep 17 00:00:00 2001
From: Roshan Kumar <theroshansingh89@gmail.com>
Date: Fri, 6 Feb 2026 00:00:50 +0530
Subject: [PATCH 2/3] Refine collection settings modal styling and fix design
 token inconsistencies

---
 .../shared/settings/SettingsModal.tsx         | 48 ++++++++-----------
 .../settings/VariableTab/VariableEditor.tsx   | 16 ++++---
 src/renderer/components/ui/table.tsx          |  4 +-
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/renderer/components/shared/settings/SettingsModal.tsx b/src/renderer/components/shared/settings/SettingsModal.tsx
index 56429d38..6f97b2f9 100644
--- a/src/renderer/components/shared/settings/SettingsModal.tsx
+++ b/src/renderer/components/shared/settings/SettingsModal.tsx
@@ -1,7 +1,6 @@
 import {
   Dialog,
   DialogContent,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -67,25 +66,26 @@ export const SettingsModal = () => {
         <FiSettings className="ml-2 text-xl" />
       </DialogTrigger>
 
-      <DialogContent className="bg-muted flex h-[80vh] max-w-4xl flex-col overflow-hidden p-0 lg:max-w-5xl">
+      <DialogContent className="flex h-[80vh] max-w-4xl flex-col overflow-hidden p-0 lg:max-w-5xl">
         <Tabs defaultValue="variables" className="flex min-h-0 flex-1 flex-col">
           {/* Header - Fixed */}
-          <div className="bg-muted shrink-0 px-6 pt-4 pb-3">
+          <div className="shrink-0 bg-[#1F1F1F] px-6 pt-4 pb-3">
             <DialogHeader>
-              <DialogTitle className="px-2 leading-tight font-bold">
+              <DialogTitle className="px-1 text-xl leading-tight font-bold">
                 Collection Settings
               </DialogTitle>
             </DialogHeader>
-            <TabsList className="mt-4 gap-2 bg-transparent">
+            <TabsList className="mt-4 gap-1 bg-transparent p-1">
               <TabsTrigger
                 value="variables"
-                className="text-text-secondary data-[state=active]:bg-background data-[state=active]:text-foreground rounded-full px-4 py-2"
+                className="text-text-secondary rounded-full border border-transparent px-5 py-[10px] text-[15px] transition-colors hover:text-[#2F6F83] data-[state=active]:bg-[#193641] data-[state=active]:text-[#2F6F83]"
               >
                 Variables
               </TabsTrigger>
+
               <TabsTrigger
                 value="environments"
-                className="text-text-secondary data-[state=active]:bg-background data-[state=active]:text-foreground rounded-full px-4 py-2"
+                className="text-text-secondary rounded-full border border-transparent px-5 py-[10px] text-[15px] transition-colors hover:text-[#2F6F83] data-[state=active]:bg-[#193641] data-[state=active]:text-[#2F6F83]"
               >
                 Environments
               </TabsTrigger>
@@ -95,27 +95,17 @@ export const SettingsModal = () => {
           {/* Tabs - Takes remaining space */}
 
           <TabsContent value="variables" className="m-0 min-h-0 flex-1 border-0 p-0">
-            <div className="bg-background h-full overflow-y-auto px-6 py-4">
+            <div className="h-full overflow-y-auto bg-[#111111] px-6 py-4">
               <VariableEditor
                 variables={editorVariables}
                 onValidChange={setValid}
                 onVariablesChange={setEditorVariables}
               />
-              <div className="mt-4 flex justify-end">
-                <Button
-                  onClick={save}
-                  disabled={!isOverallValid}
-                  variant={isOverallValid ? 'default' : 'defaultDisable'}
-                  className="px-5 py-[13px]"
-                >
-                  Save
-                </Button>
-              </div>
             </div>
           </TabsContent>
 
           <TabsContent value="environments" className="m-0 min-h-0 flex-1 border-0 p-0">
-            <div className="bg-background h-full overflow-y-auto px-6 py-4">
+            <div className="h-full overflow-y-auto bg-[#111111] px-6 py-4">
               <EnvironmentEditor
                 environments={editorEnvironments}
                 selectedEnvironment={editorSelectedEnvironment}
@@ -123,18 +113,18 @@ export const SettingsModal = () => {
                 onEnvironmentSelect={setEditorSelectedEnvironment}
                 onValidChange={setEnvironmentValid}
               />
-              <div className="mt-4 flex justify-end">
-                <Button
-                  onClick={save}
-                  disabled={!isOverallValid}
-                  variant={isOverallValid ? 'default' : 'defaultDisable'}
-                  className="px-5 py-[13px]"
-                >
-                  Save
-                </Button>
-              </div>
             </div>
           </TabsContent>
+          <div className="flex shrink-0 justify-end bg-[#111111] px-6 py-4">
+            <Button
+              onClick={save}
+              disabled={!isOverallValid}
+              variant={isOverallValid ? 'default' : 'defaultDisable'}
+              className="px-5 py-[13px]"
+            >
+              Save
+            </Button>
+          </div>
         </Tabs>
       </DialogContent>
     </Dialog>
diff --git a/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx b/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx
index a35abf69..57623adb 100644
--- a/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx
+++ b/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx
@@ -105,7 +105,7 @@ export const VariableEditor = memo<VariableEditorProps>(
                   <input
                     type="text"
                     value={variable.key}
-                    className={cn('w-full bg-transparent outline-hidden', {
+                    className={cn('text-text-secondary w-full bg-transparent outline-hidden', {
                       'text-danger': invalidVariableKeys.has(variable.key),
                     })}
                     placeholder="Enter variable key"
@@ -116,9 +116,12 @@ export const VariableEditor = memo<VariableEditorProps>(
                   <SecretInput
                     secret={variable.secret}
                     value={variable.value}
-                    className={cn('w-full border-none bg-transparent outline-hidden', {
-                      'text-danger': invalidVariableKeys.has(variable.key),
-                    })}
+                    className={cn(
+                      'text-text-secondary w-full border-none bg-transparent outline-hidden',
+                      {
+                        'text-danger': invalidVariableKeys.has(variable.key),
+                      }
+                    )}
                     placeholder="Enter variable value"
                     onChange={(e) => update(index, { value: e.target.value })}
                   />
@@ -127,13 +130,14 @@ export const VariableEditor = memo<VariableEditorProps>(
                   <input
                     type="text"
                     value={variable.description}
-                    className="w-full bg-transparent outline-hidden"
+                    className="text-text-secondary w-full bg-transparent outline-hidden"
                     placeholder="Enter variable description"
                     onChange={(e) => update(index, { description: e.target.value })}
                   />
                 </TableCell>
                 <TableCell className="text-center">
                   <Checkbox
+                    className="data-[state=checked]:border-text-secondary data-[state=checked]:bg-text-secondary cursor-pointer"
                     checked={variable.secret}
                     onCheckedChange={(checked) => update(index, { secret: Boolean(checked) })}
                   />
@@ -142,7 +146,7 @@ export const VariableEditor = memo<VariableEditorProps>(
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="hover:text-accent-primary active:text-accent-secondary w-5 hover:bg-transparent"
+                    className="text-text-secondary hover:text-foreground w-5 hover:bg-transparent"
                     onClick={() => remove(index)}
                   >
                     <Trash2 />
diff --git a/src/renderer/components/ui/table.tsx b/src/renderer/components/ui/table.tsx
index 26a6fd2a..343f57f9 100644
--- a/src/renderer/components/ui/table.tsx
+++ b/src/renderer/components/ui/table.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils';
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className={`relative rounded-(--radius) border`}>
+    <div className="relative border">
       <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
     </div>
   )
@@ -75,7 +75,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'overflow-wrap break-word border-border p-4 align-middle break-all not-last:border-r',
+      'overflow-wrap break-word border-border text-text-secondary p-4 align-middle break-all not-last:border-r',
       className
     )}
     {...props}

From e5a7515299fdf29f711e72e178cbb972986d1bfb Mon Sep 17 00:00:00 2001
From: Roshan Kumar <theroshansingh89@gmail.com>
Date: Sat, 21 Feb 2026 13:15:53 +0530
Subject: [PATCH 3/3] Align collection settings modal closer to Penpot design,
 fix table, checkbox, and color hierarchy

---
 .../shared/settings/SettingsModal.tsx         |  26 ++-
 .../settings/VariableTab/VariableEditor.tsx   | 152 ++++++++++--------
 src/renderer/components/ui/table.tsx          |  24 ++-
 3 files changed, 110 insertions(+), 92 deletions(-)

diff --git a/src/renderer/components/shared/settings/SettingsModal.tsx b/src/renderer/components/shared/settings/SettingsModal.tsx
index 6f97b2f9..53730d6f 100644
--- a/src/renderer/components/shared/settings/SettingsModal.tsx
+++ b/src/renderer/components/shared/settings/SettingsModal.tsx
@@ -66,26 +66,25 @@ export const SettingsModal = () => {
         <FiSettings className="ml-2 text-xl" />
       </DialogTrigger>
 
-      <DialogContent className="flex h-[80vh] max-w-4xl flex-col overflow-hidden p-0 lg:max-w-5xl">
+      <DialogContent className="flex h-[82vh] max-w-5xl flex-col overflow-hidden rounded-2xl border border-[#2a2a2a] bg-[#1a1a1a] p-0 text-white shadow-[0_20px_80px_rgba(0,0,0,0.65)]">
         <Tabs defaultValue="variables" className="flex min-h-0 flex-1 flex-col">
           {/* Header - Fixed */}
-          <div className="shrink-0 bg-[#1F1F1F] px-6 pt-4 pb-3">
+          <div className="shrink-0 border-b border-[#2a2a2a] bg-[#222222] px-6 pt-5 pb-3">
             <DialogHeader>
-              <DialogTitle className="px-1 text-xl leading-tight font-bold">
+              <DialogTitle className="text-[20px] font-bold text-white">
                 Collection Settings
               </DialogTitle>
             </DialogHeader>
-            <TabsList className="mt-4 gap-1 bg-transparent p-1">
+            <TabsList className="mt-5 flex gap-3 bg-transparent p-0">
               <TabsTrigger
                 value="variables"
-                className="text-text-secondary rounded-full border border-transparent px-5 py-[10px] text-[15px] transition-colors hover:text-[#2F6F83] data-[state=active]:bg-[#193641] data-[state=active]:text-[#2F6F83]"
+                className="rounded-full px-5 py-[8px] text-[14px] font-medium text-[#999999] transition-all data-[state=active]:bg-[#163840] data-[state=active]:text-[#50daf0] data-[state=active]:shadow-none"
               >
                 Variables
               </TabsTrigger>
-
               <TabsTrigger
                 value="environments"
-                className="text-text-secondary rounded-full border border-transparent px-5 py-[10px] text-[15px] transition-colors hover:text-[#2F6F83] data-[state=active]:bg-[#193641] data-[state=active]:text-[#2F6F83]"
+                className="rounded-full px-5 py-[8px] text-[14px] font-medium text-[#999999] transition-all data-[state=active]:bg-[#163840] data-[state=active]:text-[#50daf0] data-[state=active]:shadow-none"
               >
                 Environments
               </TabsTrigger>
@@ -94,8 +93,8 @@ export const SettingsModal = () => {
 
           {/* Tabs - Takes remaining space */}
 
-          <TabsContent value="variables" className="m-0 min-h-0 flex-1 border-0 p-0">
-            <div className="h-full overflow-y-auto bg-[#111111] px-6 py-4">
+          <TabsContent value="variables" className="m-0 min-h-0 flex-1 p-0">
+            <div className="h-full overflow-y-auto bg-[#111111] pt-4 pb-6">
               <VariableEditor
                 variables={editorVariables}
                 onValidChange={setValid}
@@ -104,8 +103,8 @@ export const SettingsModal = () => {
             </div>
           </TabsContent>
 
-          <TabsContent value="environments" className="m-0 min-h-0 flex-1 border-0 p-0">
-            <div className="h-full overflow-y-auto bg-[#111111] px-6 py-4">
+          <TabsContent value="environments" className="m-0 min-h-0 flex-1 p-0">
+            <div className="h-full overflow-y-auto bg-[#111111] pt-4 pb-6">
               <EnvironmentEditor
                 environments={editorEnvironments}
                 selectedEnvironment={editorSelectedEnvironment}
@@ -115,12 +114,11 @@ export const SettingsModal = () => {
               />
             </div>
           </TabsContent>
-          <div className="flex shrink-0 justify-end bg-[#111111] px-6 py-4">
+          <div className="flex shrink-0 justify-end bg-[#111111] px-6 pt-4 pb-6">
             <Button
               onClick={save}
               disabled={!isOverallValid}
-              variant={isOverallValid ? 'default' : 'defaultDisable'}
-              className="px-5 py-[13px]"
+              className="h-[50px] rounded-full bg-[#7cc8df] px-5 text-[14px] font-semibold text-black shadow-sm transition-all hover:bg-[#8fd5ea] active:scale-[0.98] disabled:bg-[#2a2a2a] disabled:text-[#666]"
             >
               Save
             </Button>
diff --git a/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx b/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx
index 57623adb..5691de85 100644
--- a/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx
+++ b/src/renderer/components/shared/settings/VariableTab/VariableEditor.tsx
@@ -78,84 +78,96 @@ export const VariableEditor = memo<VariableEditorProps>(
     return (
       <>
         <Button
-          className="h-fit gap-1 pl-0 hover:bg-transparent"
+          className="mx-6 flex h-9 items-center gap-2 text-[#e8e8e8] hover:bg-transparent hover:text-white"
           size="sm"
           variant="ghost"
           onClick={add}
         >
-          <AddIcon /> Add Variable
+          <AddIcon className="h-4 w-4" />
+          <span className="text-[15px] font-medium">Add Variable</span>
         </Button>
 
-        <Divider className="mb-4" />
+        <div className="mx-6 mt-1 border-b border-[#2a2a2a]" />
 
-        <Table className="w-full table-auto">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-1/5">Key</TableHead>
-              <TableHead className="w-1/4">Value</TableHead>
-              <TableHead className="w-auto">Description</TableHead>
-              <TableHead className="w-20">Secret</TableHead>
-              <TableHead className="w-16">{/* Action Column */}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {variables.map((variable, index) => (
-              <TableRow key={index}>
-                <TableCell className="break-all">
-                  <input
-                    type="text"
-                    value={variable.key}
-                    className={cn('text-text-secondary w-full bg-transparent outline-hidden', {
-                      'text-danger': invalidVariableKeys.has(variable.key),
-                    })}
-                    placeholder="Enter variable key"
-                    onChange={(e) => update(index, { key: e.target.value })}
-                  />
-                </TableCell>
-                <TableCell className="break-all">
-                  <SecretInput
-                    secret={variable.secret}
-                    value={variable.value}
-                    className={cn(
-                      'text-text-secondary w-full border-none bg-transparent outline-hidden',
-                      {
-                        'text-danger': invalidVariableKeys.has(variable.key),
-                      }
-                    )}
-                    placeholder="Enter variable value"
-                    onChange={(e) => update(index, { value: e.target.value })}
-                  />
-                </TableCell>
-                <TableCell className="break-all">
-                  <input
-                    type="text"
-                    value={variable.description}
-                    className="text-text-secondary w-full bg-transparent outline-hidden"
-                    placeholder="Enter variable description"
-                    onChange={(e) => update(index, { description: e.target.value })}
-                  />
-                </TableCell>
-                <TableCell className="text-center">
-                  <Checkbox
-                    className="data-[state=checked]:border-text-secondary data-[state=checked]:bg-text-secondary cursor-pointer"
-                    checked={variable.secret}
-                    onCheckedChange={(checked) => update(index, { secret: Boolean(checked) })}
-                  />
-                </TableCell>
-                <TableCell className="py-2 text-center">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-text-secondary hover:text-foreground w-5 hover:bg-transparent"
-                    onClick={() => remove(index)}
-                  >
-                    <Trash2 />
-                  </Button>
-                </TableCell>
+        <div className="mx-6 mt-4 overflow-hidden rounded-xl border border-[#2a2a2a] bg-[#111111]">
+          <Table className="w-full table-auto border-separate border-spacing-0 border-none">
+            <TableHeader className="bg-[#161616] [&_tr]:border-0">
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="w-1/5 rounded-tl-xl border-r border-b border-[#2a2a2a] py-3 text-[14px] font-medium text-[#ffffff]">
+                  Key
+                </TableHead>
+                <TableHead className="w-1/4 border-r border-b border-[#2a2a2a] text-[14px] font-medium text-[#ffffff]">
+                  Value
+                </TableHead>
+                <TableHead className="w-auto border-r border-b border-[#2a2a2a] text-[14px] font-medium text-[#ffffff]">
+                  Description
+                </TableHead>
+                <TableHead className="w-24 border-r border-b border-[#2a2a2a] text-center text-[14px] font-medium text-[#ffffff]">
+                  Secret
+                </TableHead>
+                <TableHead className="w-14 rounded-tr-xl border-b border-[#2a2a2a]">
+                  {/* Action Column */}
+                </TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {variables.map((variable, index) => (
+                <TableRow
+                  key={index}
+                  className="border-b border-[#2a2a2a] transition-colors last:border-0 hover:bg-[#1a1a1a]"
+                >
+                  <TableCell className="border-r border-[#2a2a2a] px-4 py-3">
+                    <input
+                      type="text"
+                      value={variable.key}
+                      className={cn(
+                        'w-full bg-transparent text-[14px] text-[#e8e8e8] outline-none placeholder:text-[#9a9a9a]',
+                        invalidVariableKeys.has(variable.key) && 'text-red-500'
+                      )}
+                      placeholder="Enter variable key"
+                      onChange={(e) => update(index, { key: e.target.value })}
+                    />
+                  </TableCell>
+                  <TableCell className="border-r border-[#2a2a2a] px-4">
+                    <SecretInput
+                      secret={variable.secret}
+                      value={variable.value}
+                      className="w-full border-none bg-transparent text-[14px] text-[#e8e8e8] outline-none placeholder:text-[#9a9a9a]"
+                      placeholder="Enter variable value"
+                      onChange={(e) => update(index, { value: e.target.value })}
+                    />
+                  </TableCell>
+                  <TableCell className="border-r border-[#2a2a2a] px-4">
+                    <input
+                      type="text"
+                      value={variable.description}
+                      className="w-full bg-transparent text-[14px] text-[#a8a8a8] outline-none placeholder:text-[#9a9a9a]"
+                      placeholder="Enter variable description"
+                      onChange={(e) => update(index, { description: e.target.value })}
+                    />
+                  </TableCell>
+                  <TableCell className="border-r border-[#2a2a2a] text-center">
+                    <Checkbox
+                      className="cursor-pointer border-[#6a6a6a] transition-colors hover:border-white data-[state=checked]:border-white data-[state=checked]:bg-white"
+                      checked={variable.secret}
+                      onCheckedChange={(checked) => update(index, { secret: Boolean(checked) })}
+                    />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-[#cfcfcf] transition-colors hover:bg-transparent hover:text-[#ff6b6b]"
+                      onClick={() => remove(index)}
+                    >
+                      <Trash2 size={18} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       </>
     );
   }
diff --git a/src/renderer/components/ui/table.tsx b/src/renderer/components/ui/table.tsx
index 343f57f9..a39c82e8 100644
--- a/src/renderer/components/ui/table.tsx
+++ b/src/renderer/components/ui/table.tsx
@@ -4,8 +4,12 @@ import { cn } from '@/lib/utils';
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative border">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    <div className="relative w-full overflow-auto">
+      <table
+        ref={ref}
+        className={cn('w-full caption-bottom border-collapse text-sm', className)}
+        {...props}
+      />
     </div>
   )
 );
@@ -15,7 +19,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead ref={ref} className={cn('[&_tr]:border-none', className)} {...props} />
 ));
 TableHeader.displayName = 'TableHeader';
 
@@ -23,7 +27,11 @@ const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  <tbody
+    ref={ref}
+    className={cn('bg-[#111111] [&_tr:last-child]:border-0', className)}
+    {...props}
+  />
 ));
 TableBody.displayName = 'TableBody';
 
@@ -33,7 +41,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn('bg-muted/50 border-t font-medium last:[&>tr]:border-b-0', className)}
+    className={cn('border-t bg-[#111111] font-medium last:[&>tr]:border-b-0', className)}
     {...props}
   />
 ));
@@ -44,7 +52,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
     <tr
       ref={ref}
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        'bg-[#111111] transition-colors duration-100 hover:bg-[#151515] data-[state=selected]:bg-[#191919]',
         className
       )}
       {...props}
@@ -60,7 +68,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'border-border text-muted-foreground h-12 px-4 text-left align-middle font-semibold not-last:border-r [&:has([role=checkbox])]:pr-0',
+      'h-11 border-b bg-[#111111] px-4 text-left align-middle font-semibold text-[#e6e6e6]',
       className
     )}
     {...props}
@@ -75,7 +83,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'overflow-wrap break-word border-border text-text-secondary p-4 align-middle break-all not-last:border-r',
+      'border-b border-[#2a2a2a] bg-[#111111] px-4 py-3 align-middle break-all text-[#e8e8e8] [&:not(:last-child)]:border-r',
       className
     )}
     {...props}