diff --git a/apps/dashboard/src/components/env-keys.tsx b/apps/dashboard/src/components/env-keys.tsx
index 20488d943..62d4dbffc 100644
--- a/apps/dashboard/src/components/env-keys.tsx
+++ b/apps/dashboard/src/components/env-keys.tsx
@@ -1,5 +1,116 @@
+"use client";
+
 import { getPublicEnvVar } from '@/lib/env';
 import { Button, CopyField, Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui";
+import React, { useState } from "react";
+import { EyeIcon, EyeSlashIcon, CopyIcon, CheckIcon, FileTextIcon } from "@phosphor-icons/react";
+import { cn } from "@/lib/utils";
+import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
+
+type EnvFileViewerProps = {
+  filename: string;
+  value: string;
+}
+
+export function EnvFileViewer({ filename, value }: EnvFileViewerProps) {
+  const [revealAll, setRevealAll] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const lines = value.split("\n").map((line, idx) => {
+    const eqIndex = line.indexOf("=");
+    if (eqIndex === -1) return { key: `comment_${idx}`, val: line, isComment: true };
+    const key = line.substring(0, eqIndex);
+    const val = line.substring(eqIndex + 1);
+    return { key, val, isComment: false };
+  });
+
+  const handleCopyAll = () => {
+    runAsynchronously(async () => {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="overflow-hidden transition-all duration-150 hover:transition-none rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1] border border-black/[0.06] dark:border-white/[0.06] shadow-none w-full flex flex-col">
+      {/* Tab/Header Bar */}
+      <div className="text-muted-foreground font-medium pl-4 pr-3 text-sm flex justify-between items-center py-2.5 bg-black/[0.015] dark:bg-white/[0.015] border-b border-black/[0.06] dark:border-white/[0.06]">
+        <div className="flex items-center gap-2">
+          <FileTextIcon className="w-4 h-4 text-muted-foreground/80" />
+          <span className="font-mono text-xs font-semibold text-foreground/80">{filename}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => setRevealAll(!revealAll)}
+            className="h-8 w-8 flex items-center justify-center rounded-lg text-muted-foreground/75 hover:text-foreground hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-all"
+            title={revealAll ? "Mask values" : "Reveal values"}
+            aria-label={revealAll ? "Mask values" : "Reveal values"}
+          >
+            {revealAll ? (
+              <EyeSlashIcon className="h-3.5 w-3.5" />
+            ) : (
+              <EyeIcon className="h-3.5 w-3.5" />
+            )}
+          </button>
+
+          <button
+            type="button"
+            onClick={handleCopyAll}
+            title={copied ? "Copied" : "Copy file"}
+            aria-label={copied ? "Copied" : "Copy file"}
+            className={cn(
+              "h-8 w-8 flex items-center justify-center rounded-lg border transition-all",
+              copied
+                ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400"
+                : "bg-white/50 dark:bg-background/40 border-black/[0.08] dark:border-white/[0.06] text-muted-foreground hover:text-foreground hover:bg-white dark:hover:bg-background/80"
+            )}
+          >
+            {copied ? (
+              <CheckIcon className="h-3.5 w-3.5 text-emerald-500 dark:text-emerald-400" weight="bold" />
+            ) : (
+              <CopyIcon className="h-3.5 w-3.5" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Editor Body */}
+      <div className="overflow-x-auto px-3 py-2.5 font-mono text-xs bg-black/[0.01] dark:bg-white/[0.005] select-text">
+        <table className="w-full border-collapse">
+          <tbody>
+            {lines.map((line, idx) => {
+              return (
+                <tr key={idx} className="group hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors leading-relaxed">
+                  <td className="py-0.5 w-full">
+                    <div className="flex items-center justify-between gap-4 w-full">
+                      <div className="flex items-center flex-wrap whitespace-pre">
+                        {line.isComment ? (
+                          <span className="text-muted-foreground/50 italic">{line.val}</span>
+                        ) : (
+                          <>
+                            <span className="text-indigo-600 dark:text-indigo-400 font-medium select-all">{line.key}</span>
+                            <span className="text-muted-foreground/50 mx-1">=</span>
+                            {revealAll ? (
+                              <span className="text-teal-600 dark:text-teal-400 font-medium break-all select-all">{line.val}</span>
+                            ) : (
+                              <span className="text-muted-foreground/45 tracking-[0.25em] font-sans text-xs select-none">••••••••••••••••••••</span>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
 
 function getEnvFileContent(props: {
   projectId: string,
@@ -90,6 +201,7 @@ export function APIEnvKeys(props: {
         <CopyField
           type="input"
           monospace
+          isSecret
           value={props.secretServerKey}
           label="Secret Server Key"
           helper="This key is used on the server-side and can be used to perform actions on behalf of your users. Keep it safe."
@@ -99,6 +211,7 @@ export function APIEnvKeys(props: {
         <CopyField
           type="input"
           monospace
+          isSecret
           value={props.superSecretAdminKey}
           label="Super Secret Admin Key"
           helper="This key is for administrative use only. Anyone owning this key will be able to create unlimited new keys and revoke any other keys. Be careful!"
@@ -117,13 +230,7 @@ export function NextJsEnvKeys(props: {
   const envFileContent = getEnvFileContent(props);
 
   return (
-    <CopyField
-      type="textarea"
-      monospace
-      height={envFileContent.split("\n").length * 26}
-      value={envFileContent}
-      fixedSize
-    />
+    <EnvFileViewer filename=".env.local" value={envFileContent} />
   );
 }
 
@@ -141,12 +248,6 @@ export function ViteEnvKeys(props: {
     .join("\n");
 
   return (
-    <CopyField
-      type="textarea"
-      monospace
-      height={envFileContent.split("\n").length * 26}
-      value={envFileContent}
-      fixedSize
-    />
+    <EnvFileViewer filename=".env" value={envFileContent} />
   );
 }