diff --git a/index.html b/index.html
index e251856..2804302 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SeedPGP v1.4.2</title>
+  <title>SeedPGP v__APP_VERSION__</title>
 </head>
 
 <body>
diff --git a/src/App.tsx b/src/App.tsx
index 5dae2e6..5724b89 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -333,6 +333,7 @@ function App() {
         setActiveTab={setActiveTab}
         encryptedMnemonicCache={encryptedMnemonicCache}
         handleLockAndClear={handleLockAndClear}
+        appVersion={__APP_VERSION__}
       />
       <main className="max-w-7xl mx-auto px-6 py-4">
         <div className="p-6 md:p-8 space-y-6">
@@ -358,7 +359,7 @@ function App() {
              )}
  
              {/* Main Content Grid */}
-             <div className="grid gap-6 md:grid-cols-3">
+             <div className="grid gap-6 md:grid-cols-3 md:items-start">
                <div className="md:col-span-2 space-y-6">
                  {activeTab === 'backup' ? (
                    <>
@@ -441,11 +442,13 @@ function App() {
                </div>
  
                {/* Security Panel */}
-               <div className="space-y-6">
+               <div className="space-y-2"> {/* Added space-y-2 wrapper */}
+                 <label className="text-sm font-semibold text-slate-700 flex items-center gap-2">
+                   <Lock size={14} /> SECURITY OPTIONS
+                 </label>
+                 
                  <div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4">
-                   <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
-                     <Lock size={14} /> Security Options
-                   </h3>
+                   {/* Removed h3 */}
  
                    <div className="space-y-2">
                      <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e9814af..361114d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -28,6 +28,7 @@ interface HeaderProps {
   setActiveTab: (tab: 'backup' | 'restore') => void;
   encryptedMnemonicCache: any;
   handleLockAndClear: () => void;
+  appVersion: string;
 }
 
 const Header: React.FC<HeaderProps> = ({ 
@@ -40,7 +41,8 @@ const Header: React.FC<HeaderProps> = ({
     activeTab,
     setActiveTab,
     encryptedMnemonicCache,
-    handleLockAndClear 
+    handleLockAndClear,
+    appVersion
 }) => {
   return (
     <header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm">
@@ -53,7 +55,7 @@ const Header: React.FC<HeaderProps> = ({
             </div>
             <div>
               <h1 className="text-lg font-semibold text-white">
-                SeedPGP <span className="text-blue-400">v1.4.2</span>
+                SeedPGP <span className="text-blue-400">v{appVersion}</span>
               </h1>
               <p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p>
             </div>
diff --git a/vite.config.ts b/vite.config.ts
index 80d1747..65e28d4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,15 @@ const appVersion = packageJson.version
 const gitHash = execSync('git rev-parse --short HEAD').toString().trim()
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        return html.replace(/__APP_VERSION__/g, appVersion);
+      }
+    }
+  ],
   base: '/',  // Always use root, since we're Cloudflare Pages only
   publicDir: 'public',  // ← Explicitly set (should be default)
   build: {
