diff --git a/package-lock.json b/package-lock.json
index 4f4598a..d70aa12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,9 @@
         "tailwindcss": "^3.4.1",
         "typescript": "^5.2.2",
         "vite": "^5.0.8"
+      },
+      "engines": {
+        "node": ">=22.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..ad37e2c
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/src/App.tsx b/src/App.tsx
index 8306762..fa9b8bb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,73 +1,76 @@
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import './App.css';
-import { Key, ShieldCheck } from 'lucide-react';
-import { ThemeProvider } from './hooks/use-theme'
+import { Key, ShieldCheck, FileText, ExternalLink } from 'lucide-react';
+import { ThemeProvider } from './hooks/use-theme';
+import { ToastProvider } from './hooks/use-toast';
 import { ThemeToggle } from './components/ui/theme-toggle';
 
 // Import page components
 import Keys from './components/pages/Keys';
+import Templates from './components/pages/Templates';
 import ActivationKeyEditor from './components/pages/ActivationKeyEditor';
 
 function App() {
   const menuItems = [
-    { title: "Activation Key Editor", icon: ShieldCheck, path: "/" },
+    { title: "Editor", icon: ShieldCheck, path: "/" },
+    { title: "Templates", icon: FileText, path: "/templates" },
     { title: "Keys", icon: Key, path: "/keys" },
   ];
 
   return (
     <ThemeProvider defaultTheme="system" storageKey="ak-tools-theme">
+      <ToastProvider>
       <Router>
-        <div className="min-h-screen">
-          <nav className="border-b">
+        <div className="min-h-screen page-pattern flex flex-col">
+          <nav className="border-b bg-card/80 backdrop-blur-sm sticky top-0 z-50">
             <div className="container mx-auto px-4">
-              <div className="flex items-center justify-between h-20">
-                <div className="flex items-center gap-4">
-                  <svg
-                    viewBox="0 0 24 24"
-                    className="h-10 w-10 text-primary"
-                    fill="none"
-                    stroke="currentColor"
-                  >
-                    {/* Main tuna can body - outline */}
-                    <path 
-                      d="M3 7c0-1.657 4.03-3 9-3s9 1.343 9 3v10c0 1.657-4.03 3-9 3s-9-1.343-9-3V7z" 
-                      strokeWidth="1.5"
-                    />
-                    
-                    {/* Top rim */}
-                    <path 
-                      d="M12 4c4.97 0 9 1.343 9 3 0 1.657-4.03 3-9 3s-9-1.343-9-3c0-1.657 4.03-3 9-3z" 
-                      strokeWidth="1.5"
-                    />
-                    
-                    {/* Decorative rings */}
-                    <path 
-                      d="M3.5 11c4.5 2 12.5 2 17 0M3.5 15c4.5 2 12.5 2 17 0" 
-                      strokeWidth="1"
-                    />
-                    
-                    {/* Pull tab */}
-                    <path 
-                      d="M14 5l2-2 1 1" 
-                      strokeWidth="1.5" 
-                      strokeLinecap="round"
-                    />
-                  </svg>
-                  <span className="text-2xl font-bold text-primary">AK TOOLS</span>
-                </div>
-                
-                <div className="flex items-center space-x-6">
+              <div className="flex items-center justify-between h-16">
+                <Link to="/" className="flex items-center gap-3 group">
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-primary/20 rounded-lg blur-md group-hover:bg-primary/30 transition-colors" />
+                    <svg
+                      viewBox="0 0 24 24"
+                      className="h-9 w-9 text-primary relative"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <path
+                        d="M3 7c0-1.657 4.03-3 9-3s9 1.343 9 3v10c0 1.657-4.03 3-9 3s-9-1.343-9-3V7z"
+                        strokeWidth="1.5"
+                      />
+                      <path
+                        d="M12 4c4.97 0 9 1.343 9 3 0 1.657-4.03 3-9 3s-9-1.343-9-3c0-1.657 4.03-3 9-3z"
+                        strokeWidth="1.5"
+                      />
+                      <path
+                        d="M3.5 11c4.5 2 12.5 2 17 0M3.5 15c4.5 2 12.5 2 17 0"
+                        strokeWidth="1"
+                      />
+                      <path
+                        d="M14 5l2-2 1 1"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <span className="text-xl font-bold tracking-tight">
+                    <span className="text-primary">AK</span>
+                    <span className="text-muted-foreground font-medium ml-1">Tools</span>
+                  </span>
+                </Link>
+
+                <div className="flex items-center space-x-1">
                   {menuItems.map((item) => (
                     <Link
                       key={item.title}
                       to={item.path}
-                      className="flex items-center space-x-2 px-4 py-2 rounded-md text-base font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
+                      className="nav-link flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
                     >
-                      <item.icon className="h-5 w-5" />
+                      <item.icon className="h-4 w-4" />
                       <span>{item.title}</span>
                     </Link>
                   ))}
-                  <div className="ml-4">
+                  <div className="ml-2 pl-2 border-l">
                     <ThemeToggle />
                   </div>
                 </div>
@@ -75,14 +78,65 @@ function App() {
             </div>
           </nav>
 
-          <main className="container mx-auto px-4 py-6">
+          <main className="container mx-auto px-4 py-8 flex-1">
             <Routes>
               <Route path="/" element={<ActivationKeyEditor />} />
+              <Route path="/templates" element={<Templates />} />
               <Route path="/keys" element={<Keys />} />
             </Routes>
           </main>
+
+          <footer className="border-t bg-card/60 backdrop-blur-sm mt-auto">
+            <div className="container mx-auto px-4 py-6">
+              <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <span>© {new Date().getFullYear()}</span>
+                  <a
+                    href="https://beshu.tech/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-semibold text-foreground hover:text-primary transition-colors"
+                  >
+                    Beshu Tech
+                  </a>
+                  <span>— All rights reserved</span>
+                </div>
+
+                <div className="flex items-center gap-6">
+                  <a
+                    href="https://readonlyrest.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors group"
+                  >
+                    <span>ReadonlyREST</span>
+                    <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </a>
+                  <a
+                    href="https://anaphora.it/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors group"
+                  >
+                    <span>Anaphora</span>
+                    <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </a>
+                  <a
+                    href="https://beshu.tech/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors group"
+                  >
+                    <span>Beshu</span>
+                    <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </footer>
         </div>
       </Router>
+      </ToastProvider>
     </ThemeProvider>
   );
 }
diff --git a/src/components/activationkey/ActivationKeyMetadata.tsx b/src/components/activationkey/ActivationKeyMetadata.tsx
index acfc9c3..7a77712 100644
--- a/src/components/activationkey/ActivationKeyMetadata.tsx
+++ b/src/components/activationkey/ActivationKeyMetadata.tsx
@@ -11,12 +11,16 @@ interface ActivationKeyMetadataDisplayProps {
   metadata: ActivationKeyMetadata;
   expiryDate?: Date;
   onExpiryChange?: (date: Date | undefined) => void;
+  issuedDate?: Date;
+  onIssuedChange?: (date: Date | undefined) => void;
 }
 
-export const ActivationKeyMetadataDisplay: React.FC<ActivationKeyMetadataDisplayProps> = ({ 
-  metadata, 
+export const ActivationKeyMetadataDisplay: React.FC<ActivationKeyMetadataDisplayProps> = ({
+  metadata,
   expiryDate,
-  onExpiryChange 
+  onExpiryChange,
+  issuedDate,
+  onIssuedChange,
 }) => {
   return (
     <div className="grid grid-cols-3 gap-4 p-4 bg-muted rounded-lg">
@@ -34,9 +38,27 @@ export const ActivationKeyMetadataDisplay: React.FC<ActivationKeyMetadataDisplay
         <KeyRound className="h-5 w-5 text-muted-foreground" />
         <div className="text-center">
           <div className="text-sm font-medium">Issued</div>
-          <div className="text-sm text-muted-foreground">
-            {formatRelativeTime(metadata.issuedAt)}
-          </div>
+          {onIssuedChange ? (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="link" className="h-auto p-0 text-sm text-muted-foreground hover:no-underline">
+                  {issuedDate ? format(issuedDate, 'd MMM yyyy') : formatRelativeTime(metadata.issuedAt)}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="center">
+                <Calendar
+                  mode="single"
+                  selected={issuedDate}
+                  onSelect={onIssuedChange}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <div className="text-sm text-muted-foreground">
+              {formatRelativeTime(metadata.issuedAt)}
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/src/components/pages/ActivationKeyEditor.tsx b/src/components/pages/ActivationKeyEditor.tsx
index 3e54e0e..f22f66b 100644
--- a/src/components/pages/ActivationKeyEditor.tsx
+++ b/src/components/pages/ActivationKeyEditor.tsx
@@ -1,155 +1,473 @@
-import { useState, useEffect } from 'react';
+import { useReducer, useEffect, useCallback, useState, useRef, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 import { Card, CardContent } from '../ui/card';
 import { Textarea } from '../ui/textarea';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 import Editor from "@monaco-editor/react";
 import { Button } from '../ui/button';
-import { X, Check, Copy } from 'lucide-react';
-import { Algorithm, SUPPORTED_ALGORITHMS, KeyPair } from '../../types/activationKey';
+import { X, Check, Copy, FileText, Plus, Save, AlertTriangle, Key, ChevronDown, Circle } from 'lucide-react';
+import { Algorithm, SUPPORTED_ALGORITHMS } from '../../types/activationKey';
 import { decodeJWT, getJwtMetadata, signJWT, validateJWTSignature, ValidationResult } from '../../utils/activationKey';
 import { ActivationKeyMetadataDisplay } from '../activationkey/ActivationKeyMetadata';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { PageHeader } from '../ui/page-header';
-import { ValidationStatus } from '../activationkey/validation-status';
-import './ActivationKeyEditor.css';
 import { useTheme } from '../../hooks/use-theme';
+import { useKeyPairs } from '../../hooks/use-key-pairs';
+import { useTemplates } from '../../hooks/use-templates';
+import { useToast } from '../../hooks/use-toast';
+import { PENDING_TEMPLATE_KEY } from './Templates';
+import './ActivationKeyEditor.css';
+
+// State type for the editor
+interface EditorState {
+  inputValue: string;
+  jwt: string;
+  editorValue: string;
+  algorithm: Algorithm;
+  expiryDate: Date | undefined;
+  issuedDate: Date | undefined;
+  selectedKeyId: string;
+  validation: ValidationResult | null;
+  showCopied: boolean;
+}
+
+// Action types for the reducer
+type EditorAction =
+  | { type: 'SET_INPUT'; payload: string }
+  | { type: 'SET_JWT'; payload: { jwt: string; editorValue: string; algorithm?: Algorithm; expiryDate?: Date; issuedDate?: Date } }
+  | { type: 'SET_EDITOR_VALUE'; payload: string }
+  | { type: 'SET_ALGORITHM'; payload: Algorithm }
+  | { type: 'SET_EXPIRY_DATE'; payload: Date | undefined }
+  | { type: 'SET_ISSUED_DATE'; payload: Date | undefined }
+  | { type: 'SET_SELECTED_KEY'; payload: string }
+  | { type: 'SET_VALIDATION'; payload: ValidationResult | null }
+  | { type: 'SHOW_COPIED' }
+  | { type: 'HIDE_COPIED' }
+  | { type: 'CLEAR' };
+
+const initialState: EditorState = {
+  inputValue: '',
+  jwt: '',
+  editorValue: '{}',
+  algorithm: 'ES512',
+  expiryDate: undefined,
+  issuedDate: undefined,
+  selectedKeyId: '',
+  validation: null,
+  showCopied: false,
+};
+
+function editorReducer(state: EditorState, action: EditorAction): EditorState {
+  switch (action.type) {
+    case 'SET_INPUT':
+      return { ...state, inputValue: action.payload };
+    case 'SET_JWT':
+      return {
+        ...state,
+        jwt: action.payload.jwt,
+        editorValue: action.payload.editorValue,
+        algorithm: action.payload.algorithm ?? state.algorithm,
+        expiryDate: action.payload.expiryDate ?? state.expiryDate,
+        issuedDate: action.payload.issuedDate ?? state.issuedDate,
+      };
+    case 'SET_EDITOR_VALUE':
+      return { ...state, editorValue: action.payload };
+    case 'SET_ALGORITHM':
+      return { ...state, algorithm: action.payload };
+    case 'SET_EXPIRY_DATE':
+      return { ...state, expiryDate: action.payload };
+    case 'SET_ISSUED_DATE':
+      return { ...state, issuedDate: action.payload };
+    case 'SET_SELECTED_KEY':
+      return { ...state, selectedKeyId: action.payload };
+    case 'SET_VALIDATION':
+      return { ...state, validation: action.payload };
+    case 'SHOW_COPIED':
+      return { ...state, showCopied: true };
+    case 'HIDE_COPIED':
+      return { ...state, showCopied: false };
+    case 'CLEAR':
+      return { ...initialState, selectedKeyId: state.selectedKeyId };
+    default:
+      return state;
+  }
+}
 
 const ActivationKeyEditor = () => {
   const { theme } = useTheme();
-  const [inputValue, setInputValue] = useState('');
-  const [jwt, setJwt] = useState('');
-  const [keyPairs, setKeyPairs] = useState<KeyPair[]>([]);
-  const [selectedKeyId, setSelectedKeyId] = useState<string>('');
-  const [expiryDate, setExpiryDate] = useState<Date | undefined>(undefined);
-  const [showCopied, setShowCopied] = useState(false);
-  const [algorithm, setAlgorithm] = useState<Algorithm>('ES512');
-  const [editorValue, setEditorValue] = useState('{}');
-  const [signatureValidation, setSignatureValidation] = useState<ValidationResult | null>(null);
-
-  const exampleJwt = "eyJhbGciOiJFUzUxMiIsInR5cCI6IkpXVCJ9.eyJleHAiOjg4MDYxMjEyODAwLCJpc3MiOiJodHRwczovL2FwaS5iZXNodS50ZWNoIiwiaWF0IjoxNjYxMzU2MTAxLCJqdGkiOiJhbmFwaG9yYV9saWNfMjViMmFhYTgtMTQwMS00YjhmLThkMGYtNmMzMTdmOWJhNjcwIiwiYXVkIjoiQW5hcGhvcmEiLCJzdWIiOiIxMTExMTExMS0xMTExLTExMTEtMTExMS0xMTExMTExMSIsImxpY2Vuc29yIjp7Im5hbWUiOiJBbmFwaG9yYSIsImNvbnRhY3QiOlsic3VwcG9ydEByZWFkb25seXJlc3QuY29tIiwiZmluYW5jZUByZWFkb25seXJlc3QuY29tIl0sImlzc3VlciI6InN1cHBvcnRAcmVhZG9ubHlyZXN0LmNvbSJ9LCJsaWNlbnNlZSI6eyJuYW1lIjoiQW5vbnltb3VzIEZyZWUgVXNlciIsImJ1eWluZ19mb3IiOm51bGwsImJpbGxpbmdfZW1haWwiOiJ1bmtub3duQGFuYXBob3JhLmNvbSIsImFsdF9lbWFpbHMiOltdLCJhZGRyZXNzIjpbIlVua25vd24iXX0sImxpY2Vuc2UiOnsiY2x1c3Rlcl91dWlkIjoiKiIsImVkaXRpb24iOiJmcmVlIiwiZWRpdGlvbl9uYW1lIjoiRnJlZSIsImlzVHJpYWwiOmZhbHNlfX0.ATAB81zkWRxTdpSD_23tcFxba81OCrjdtcGlx_yXwa2VSvJAx7rWQYO2VM2N8zeknA01SzYpPP2o_FXzP3TCEo4iABRof2G1u0iD1AFf5Y0m_TYPs89acR5Fztb46wSBwsj4L1ONal0y8xHYfJC54SKwdXJV4XTJwIP2tBVcTl9QNAfn"
+  const { keyPairs, getKeyPairById } = useKeyPairs();
+  const { templates, addTemplate, updateTemplate, getTemplateById } = useTemplates();
+  const { error: showError, success: showSuccess, confirm } = useToast();
+  const [state, dispatch] = useReducer(editorReducer, initialState);
+
+  // Track source template (when loaded from a template)
+  const [sourceTemplateId, setSourceTemplateId] = useState<string | null>(null);
+
+  // Track original editor value for dirty detection
+  const originalEditorValueRef = useRef<string>('{}');
+
+  // Ref to store handleInputChange to avoid effect dependency issues
+  const handleInputChangeRef = useRef<(value: string) => Promise<void>>();
+
+  // Template switcher state
+  const [templateSwitcherOpen, setTemplateSwitcherOpen] = useState(false);
+
+  // Save as template state
+  const [saveTemplateOpen, setSaveTemplateOpen] = useState(false);
+  const [templateName, setTemplateName] = useState('');
+  const [templateDescription, setTemplateDescription] = useState('');
+  const [showExpiryWarning, setShowExpiryWarning] = useState(false);
+  const [saveAsExpired, setSaveAsExpired] = useState(false);
+
+  const { inputValue, jwt, editorValue, algorithm, expiryDate, issuedDate, selectedKeyId, validation, showCopied } = state;
+
+  // Compute dirty state with useMemo to avoid unnecessary recalculations
+  const isDirty = useMemo(() => {
+    return editorValue !== originalEditorValueRef.current && jwt !== '';
+  }, [editorValue, jwt]);
+
+  // Check if current JWT is expired
+  const isJwtExpired = useCallback(() => {
+    if (!jwt) return false;
+    const metadata = getJwtMetadata(jwt);
+    if (!metadata?.expiresAt) return false;
+    return metadata.expiresAt < new Date();
+  }, [jwt]);
+
+  // Set initial selected key when keyPairs load
   useEffect(() => {
-    const savedKeys = localStorage.getItem('keyPairs');
-    if (savedKeys) {
-      const keys = JSON.parse(savedKeys);
-      setKeyPairs(keys);
-      if (keys.length > 0 && !selectedKeyId) {
-        setSelectedKeyId(keys[0].id);
-      }
+    if (keyPairs.length > 0 && !selectedKeyId) {
+      dispatch({ type: 'SET_SELECTED_KEY', payload: keyPairs[0].id });
     }
-  }, [selectedKeyId]);
+  }, [keyPairs, selectedKeyId]);
 
-  const handleInputChange = async (value: string) => {
-    setInputValue(value);
+  // Validate JWT when selected key changes
+  useEffect(() => {
+    if (!jwt) {
+      dispatch({ type: 'SET_VALIDATION', payload: null });
+      return;
+    }
 
-    if (!value) {
-      clearJwt();
+    if (!selectedKeyId) {
+      dispatch({ type: 'SET_VALIDATION', payload: {
+        isValid: false,
+        error: 'No signing key selected',
+        errors: { signature: true, message: 'Please select a signing key' }
+      }});
+      return;
+    }
+
+    const selectedKey = getKeyPairById(selectedKeyId);
+    if (!selectedKey) {
+      dispatch({ type: 'SET_VALIDATION', payload: {
+        isValid: false,
+        error: 'Selected key not found',
+        errors: { signature: true, message: 'The selected key no longer exists' }
+      }});
       return;
     }
 
-    if (!selectedKeyId && keyPairs.length > 0) {
-      setSelectedKeyId(keyPairs[0].id);
+    validateJWTSignature(jwt, selectedKey).then(result => {
+      dispatch({ type: 'SET_VALIDATION', payload: result });
+    });
+  }, [selectedKeyId, jwt, getKeyPairById]);
+
+  const handleInputChange = useCallback(async (value: string) => {
+    dispatch({ type: 'SET_INPUT', payload: value });
+
+    if (!value) {
+      dispatch({ type: 'CLEAR' });
+      return;
     }
 
     // Try to parse as JWT
     const metadata = getJwtMetadata(value);
+    let newAlgorithm: Algorithm | undefined;
+    let newExpiryDate: Date | undefined;
+    let newIssuedDate: Date | undefined;
+
     if (metadata) {
       if (metadata.algorithm && SUPPORTED_ALGORITHMS.includes(metadata.algorithm as Algorithm)) {
-        setAlgorithm(metadata.algorithm as Algorithm);
+        newAlgorithm = metadata.algorithm as Algorithm;
       }
       if (metadata.expiresAt) {
-        setExpiryDate(new Date(metadata.expiresAt));
+        newExpiryDate = new Date(metadata.expiresAt);
+      }
+      if (metadata.issuedAt) {
+        newIssuedDate = new Date(metadata.issuedAt);
       }
     }
 
     const decoded = await decodeJWT(value);
+    let payloadOnly = '{}';
     try {
       const parsedDecoded = JSON.parse(decoded);
-      const payloadOnly = JSON.stringify(parsedDecoded.payload || {}, null, 2);
-      setEditorValue(payloadOnly);
-    } catch (e) {
-      setEditorValue('{}');
+      payloadOnly = JSON.stringify(parsedDecoded.payload || {}, null, 2);
+    } catch {
+      // Keep default empty object
     }
-    setJwt(value);
 
+    dispatch({
+      type: 'SET_JWT',
+      payload: {
+        jwt: value,
+        editorValue: payloadOnly,
+        algorithm: newAlgorithm,
+        expiryDate: newExpiryDate,
+        issuedDate: newIssuedDate,
+      },
+    });
+
+    // Track original value for dirty detection
+    originalEditorValueRef.current = payloadOnly;
+
+    // Validate signature
+    const selectedKey = getKeyPairById(selectedKeyId);
     try {
-      // Only validate against the selected key pair
-      const selectedKey = keyPairs.find(k => k.id === selectedKeyId);
-      const validation = await validateJWTSignature(value, selectedKey);
-      setSignatureValidation(validation);
-    } catch (error) {
-      setSignatureValidation({
-        isValid: false,
-        error: "Invalid signature",
+      const validationResult = await validateJWTSignature(value, selectedKey);
+      dispatch({ type: 'SET_VALIDATION', payload: validationResult });
+    } catch {
+      dispatch({
+        type: 'SET_VALIDATION',
+        payload: { isValid: false, error: 'Invalid signature' },
       });
     }
-  };
+  }, [selectedKeyId, getKeyPairById]);
 
-  // Also update validation when the selected key changes
+  // Keep ref in sync with callback
+  handleInputChangeRef.current = handleInputChange;
+
+  // Check for pending template to load when templates are available
   useEffect(() => {
-    if (jwt && selectedKeyId) {
-      const selectedKey = keyPairs.find(k => k.id === selectedKeyId);
-      validateJWTSignature(jwt, selectedKey).then(setSignatureValidation);
+    const pendingTemplateId = localStorage.getItem(PENDING_TEMPLATE_KEY);
+    if (pendingTemplateId && templates.length > 0) {
+      const template = getTemplateById(pendingTemplateId);
+      if (template) {
+        localStorage.removeItem(PENDING_TEMPLATE_KEY);
+        setSourceTemplateId(template.id);
+        handleInputChangeRef.current?.(template.activationKey);
+      }
     }
-  }, [selectedKeyId, jwt]);
+  }, [templates, getTemplateById]);
 
-  const clearJwt = () => {
-    setInputValue('');
-    setJwt('');
-    setSignatureValidation(null);
-    if (keyPairs.length > 0) {
-      setSelectedKeyId(keyPairs[0].id);
-    } else {
-      setSelectedKeyId('');
-    }
-  };
+  const handleSign = useCallback(async () => {
+    const selectedKey = getKeyPairById(selectedKeyId);
+    if (!selectedKey) return;
 
-  const handleSign = async () => {
+    let payload;
     try {
-      const selectedKey = keyPairs.find(k => k.id === selectedKeyId);
-      if (!selectedKey) return;
+      payload = JSON.parse(editorValue);
+    } catch {
+      showError('Invalid JSON payload');
+      return;
+    }
 
-      let payload;
-      try {
-        // Parse the editor value directly as the payload
-        payload = JSON.parse(editorValue);
-      } catch (e) {
-        alert('Invalid JSON payload');
-        return;
-      }
+    // Only override exp if a new expiry date is selected
+    if (expiryDate) {
+      payload.exp = Math.floor(expiryDate.getTime() / 1000);
+    }
 
-      // Only override exp if a new expiry date is selected
-      if (expiryDate) {
-        payload.exp = Math.floor(expiryDate.getTime() / 1000);
-      }
+    // Only override iat if a new issued date is selected
+    if (issuedDate) {
+      payload.iat = Math.floor(issuedDate.getTime() / 1000);
+    }
 
+    try {
       const newToken = await signJWT(
         payload,
         algorithm,
         selectedKey,
-        // Use the expiry date from the payload if no new date is selected
         expiryDate || (payload.exp ? new Date(payload.exp * 1000) : new Date())
       );
 
-      setJwt(newToken);
       const newDecoded = await decodeJWT(newToken);
-      // Extract just the payload object for the editor
+      let payloadOnly = '{}';
       try {
         const parsedDecoded = JSON.parse(newDecoded);
-        const payloadOnly = JSON.stringify(parsedDecoded.payload || {}, null, 2);
-        setEditorValue(payloadOnly);
-      } catch (e) {
-        setEditorValue('{}');
+        payloadOnly = JSON.stringify(parsedDecoded.payload || {}, null, 2);
+      } catch {
+        // Keep default
       }
+
+      dispatch({
+        type: 'SET_JWT',
+        payload: { jwt: newToken, editorValue: payloadOnly },
+      });
     } catch (error) {
       console.error('Signing error:', error);
-      alert('Failed to sign JWT');
+      showError('Failed to sign activation key');
     }
-  };
+  }, [selectedKeyId, editorValue, expiryDate, issuedDate, algorithm, getKeyPairById, showError]);
 
-  const copyToClipboard = async (text: string) => {
+  const copyToClipboard = useCallback(async (text: string) => {
     await navigator.clipboard.writeText(text);
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 2000);
-  };
+    dispatch({ type: 'SHOW_COPIED' });
+    setTimeout(() => dispatch({ type: 'HIDE_COPIED' }), 2000);
+  }, []);
+
+  const clearJwt = useCallback(() => {
+    dispatch({ type: 'CLEAR' });
+    setSourceTemplateId(null);
+    originalEditorValueRef.current = '{}';
+    if (keyPairs.length > 0) {
+      dispatch({ type: 'SET_SELECTED_KEY', payload: keyPairs[0].id });
+    }
+  }, [keyPairs]);
+
+  // Handle template switching with dirty check
+  const handleSwitchTemplate = useCallback(async (templateId: string) => {
+    const template = getTemplateById(templateId);
+    if (!template) return;
+
+    // Check for unsaved changes
+    if (isDirty) {
+      const confirmed = await confirm(
+        'You have unsaved changes. Switch template anyway?'
+      );
+      if (!confirmed) return;
+    }
+
+    setTemplateSwitcherOpen(false);
+    setSourceTemplateId(template.id);
+    handleInputChange(template.activationKey);
+  }, [isDirty, confirm, getTemplateById, handleInputChange]);
+
+  // Get current template name
+  const currentTemplateName = sourceTemplateId
+    ? getTemplateById(sourceTemplateId)?.name
+    : null;
+
+  // Handle opening save template popover
+  const handleSaveTemplateClick = useCallback(() => {
+    const notExpired = !isJwtExpired();
+    setShowExpiryWarning(notExpired);
+    setSaveAsExpired(notExpired); // Default to save as expired if not already expired
+    setSaveTemplateOpen(true);
+
+    // Pre-fill with source template info if loaded from a template
+    if (sourceTemplateId) {
+      const sourceTemplate = getTemplateById(sourceTemplateId);
+      if (sourceTemplate) {
+        setTemplateName(sourceTemplate.name);
+        setTemplateDescription(sourceTemplate.description || '');
+        return;
+      }
+    }
+
+    setTemplateName('');
+    setTemplateDescription('');
+  }, [isJwtExpired, sourceTemplateId, getTemplateById]);
+
+  // Find existing template by name
+  const findTemplateByName = useCallback((name: string) => {
+    return templates.find(t => t.name.toLowerCase() === name.toLowerCase());
+  }, [templates]);
+
+  // Generate activation key with modified expiry for template saving
+  const getActivationKeyForTemplate = useCallback(async (): Promise<string | null> => {
+    if (!saveAsExpired || isJwtExpired()) {
+      return jwt; // Return current AK as-is
+    }
+
+    // Need to sign a new AK with expiry 24h before now
+    const selectedKey = getKeyPairById(selectedKeyId);
+    if (!selectedKey) {
+      showError('No signing key selected');
+      return null;
+    }
+
+    let payload;
+    try {
+      payload = JSON.parse(editorValue);
+    } catch {
+      showError('Invalid JSON payload');
+      return null;
+    }
+
+    // Set expiry to 24 hours ago
+    const expiredDate = new Date(Date.now() - 24 * 60 * 60 * 1000);
+
+    // Ensure exp is not before iat (issued at) if present
+    const iatTimestamp = payload.iat;
+    if (iatTimestamp && expiredDate.getTime() / 1000 < iatTimestamp) {
+      // Set exp to 1 second after iat to maintain valid temporal order
+      payload.exp = iatTimestamp + 1;
+    } else {
+      payload.exp = Math.floor(expiredDate.getTime() / 1000);
+    }
+
+    try {
+      const expiredToken = await signJWT(payload, algorithm, selectedKey, new Date(payload.exp * 1000));
+      return expiredToken;
+    } catch (error) {
+      console.error('Error generating expired AK:', error);
+      showError('Failed to generate expired activation key');
+      return null;
+    }
+  }, [saveAsExpired, isJwtExpired, jwt, selectedKeyId, editorValue, algorithm, getKeyPairById, showError]);
+
+  // Handle saving template
+  const handleSaveTemplate = useCallback(async () => {
+    if (!templateName.trim()) {
+      showError('Please enter a template name');
+      return;
+    }
+
+    if (!jwt) {
+      showError('No activation key to save');
+      return;
+    }
+
+    const trimmedName = templateName.trim();
+    const existingTemplate = findTemplateByName(trimmedName);
+    const isOverwrite = existingTemplate && existingTemplate.id === sourceTemplateId;
+    const isNameConflict = existingTemplate && existingTemplate.id !== sourceTemplateId;
+
+    // If name conflicts with a different template, warn and ask
+    if (isNameConflict) {
+      const confirmed = await confirm(
+        `A template named "${trimmedName}" already exists. Do you want to overwrite it?`
+      );
+      if (!confirmed) return;
+    }
+
+    // If overwriting source template, ask for confirmation
+    if (isOverwrite) {
+      const confirmed = await confirm(
+        `Do you want to update the existing template "${trimmedName}"?`
+      );
+      if (!confirmed) return;
+    }
+
+    // Get the activation key (possibly with modified expiry)
+    const activationKeyToSave = await getActivationKeyForTemplate();
+    if (!activationKeyToSave) return;
+
+    // Save or update
+    if (existingTemplate) {
+      updateTemplate(existingTemplate.id, {
+        name: trimmedName,
+        description: templateDescription.trim() || undefined,
+        activationKey: activationKeyToSave,
+      });
+      showSuccess('Template updated successfully');
+    } else {
+      addTemplate({
+        name: trimmedName,
+        description: templateDescription.trim() || undefined,
+        activationKey: activationKeyToSave,
+      });
+      showSuccess('Template saved successfully');
+    }
+
+    setSaveTemplateOpen(false);
+    setTemplateName('');
+    setTemplateDescription('');
+    setShowExpiryWarning(false);
+    setSaveAsExpired(false);
+  }, [templateName, templateDescription, jwt, sourceTemplateId, findTemplateByName, getActivationKeyForTemplate, updateTemplate, addTemplate, showError, showSuccess, confirm]);
 
   return (
     <div className="ak-editor-container">
@@ -159,19 +477,61 @@ const ActivationKeyEditor = () => {
       />
 
       {!jwt ? (
-        <div className="space-y-2">
+        <div className="space-y-3">
           <Textarea
             placeholder="Paste your Activation Key here"
             value={inputValue}
             onChange={(e) => handleInputChange(e.target.value)}
             className="ak-input"
           />
-          <button
-            onClick={() => handleInputChange(exampleJwt)}
-            className="ak-example-link"
-          >
-            Use example
-          </button>
+          <div className="flex items-center gap-2">
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2">
+                  <FileText className="h-4 w-4" />
+                  Use template
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-72 p-0" align="start">
+                <div className="p-2 border-b">
+                  <p className="text-sm font-medium">Select a template</p>
+                </div>
+                <div className="max-h-64 overflow-y-auto">
+                  {templates.length > 0 ? (
+                    templates.map((template) => (
+                      <button
+                        key={template.id}
+                        onClick={() => {
+                          setSourceTemplateId(template.id);
+                          handleInputChange(template.activationKey);
+                        }}
+                        className="w-full px-3 py-2 text-left hover:bg-secondary/50 transition-colors"
+                      >
+                        <div className="text-sm font-medium">{template.name}</div>
+                        {template.description && (
+                          <div className="text-xs text-muted-foreground truncate">
+                            {template.description}
+                          </div>
+                        )}
+                      </button>
+                    ))
+                  ) : (
+                    <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+                      No templates yet
+                    </div>
+                  )}
+                </div>
+                <div className="p-2 border-t">
+                  <Link to="/templates">
+                    <Button variant="ghost" size="sm" className="w-full gap-2">
+                      <Plus className="h-4 w-4" />
+                      Manage templates
+                    </Button>
+                  </Link>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
         </div>
       ) : (
         <Card className="relative">
@@ -187,10 +547,9 @@ const ActivationKeyEditor = () => {
             <div className="ak-content-wrapper">
               <div className="ak-editor-monaco">
                 <Editor
-                  key={`monaco-${jwt}`}
                   defaultLanguage="json"
                   value={editorValue}
-                  onChange={(value) => setEditorValue(value || '{}')}
+                  onChange={(value) => dispatch({ type: 'SET_EDITOR_VALUE', payload: value || '{}' })}
                   options={{
                     minimap: { enabled: false },
                     formatOnPaste: true,
@@ -220,11 +579,117 @@ const ActivationKeyEditor = () => {
               </div>
 
               <div className="ak-right-column">
-                <div className="ak-header-row">
-                  <ValidationStatus validation={signatureValidation} />
-                  
-                  <Select value={selectedKeyId} onValueChange={setSelectedKeyId}>
-                    <SelectTrigger className="ak-key-select">
+                {/* Template Switcher with Validation Status */}
+                <div className="space-y-2 pb-4 border-b mb-4">
+                  <Label className="text-xs text-muted-foreground flex items-center gap-1.5">
+                    <FileText className="h-3 w-3" />
+                    Template
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    {/* Validation indicator */}
+                    {validation && (
+                      <div className={`flex items-center justify-center w-8 h-8 rounded-full ${
+                        validation.isValid
+                          ? 'bg-green-500/10 text-green-500'
+                          : 'bg-destructive/10 text-destructive'
+                      }`}>
+                        {validation.isValid ? (
+                          <Check className="h-4 w-4" />
+                        ) : (
+                          <X className="h-4 w-4" />
+                        )}
+                      </div>
+                    )}
+                    <Popover open={templateSwitcherOpen} onOpenChange={setTemplateSwitcherOpen}>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          className="flex-1 justify-between h-10"
+                        >
+                          <span className="truncate">
+                            {currentTemplateName || 'No template'}
+                          </span>
+                          <div className="flex items-center gap-1.5">
+                            {isDirty && (
+                              <Circle className="h-2 w-2 fill-orange-500 text-orange-500" />
+                            )}
+                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                          </div>
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-72 p-0" align="start">
+                        <div className="p-2 border-b">
+                          <p className="text-sm font-medium">Switch Template</p>
+                          {isDirty && (
+                            <p className="text-xs text-orange-600 dark:text-orange-400 mt-1">
+                              Unsaved changes will be lost
+                            </p>
+                          )}
+                        </div>
+                        <div className="max-h-64 overflow-y-auto">
+                          {templates.length > 0 ? (
+                            templates.map((template) => (
+                              <button
+                                key={template.id}
+                                onClick={() => handleSwitchTemplate(template.id)}
+                                className={`w-full px-3 py-2 text-left hover:bg-secondary/50 transition-colors ${
+                                  template.id === sourceTemplateId ? 'bg-secondary/30' : ''
+                                }`}
+                              >
+                                <div className="text-sm font-medium flex items-center gap-2">
+                                  {template.name}
+                                  {template.id === sourceTemplateId && (
+                                    <Check className="h-3 w-3 text-primary" />
+                                  )}
+                                </div>
+                                {template.description && (
+                                  <div className="text-xs text-muted-foreground truncate">
+                                    {template.description}
+                                  </div>
+                                )}
+                              </button>
+                            ))
+                          ) : (
+                            <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+                              No templates yet
+                            </div>
+                          )}
+                        </div>
+                        <div className="p-2 border-t">
+                          <Link to="/templates">
+                            <Button variant="ghost" size="sm" className="w-full gap-2">
+                              <Plus className="h-4 w-4" />
+                              Manage templates
+                            </Button>
+                          </Link>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                </div>
+
+                {/* Metadata Display */}
+                {getJwtMetadata(jwt) && (
+                  <ActivationKeyMetadataDisplay
+                    metadata={getJwtMetadata(jwt)!}
+                    expiryDate={expiryDate}
+                    onExpiryChange={(date) => dispatch({ type: 'SET_EXPIRY_DATE', payload: date })}
+                    issuedDate={issuedDate}
+                    onIssuedChange={(date) => dispatch({ type: 'SET_ISSUED_DATE', payload: date })}
+                  />
+                )}
+
+                {/* Signing Key Selection */}
+                <div className="space-y-2 mt-4 pt-4 border-t">
+                  <Label className="text-xs text-muted-foreground flex items-center gap-1.5">
+                    <Key className="h-3 w-3" />
+                    Signing Key
+                  </Label>
+                  <Select
+                    value={selectedKeyId}
+                    onValueChange={(value) => dispatch({ type: 'SET_SELECTED_KEY', payload: value })}
+                  >
+                    <SelectTrigger className="w-full">
                       <SelectValue placeholder="Select a key for signing" />
                     </SelectTrigger>
                     <SelectContent>
@@ -237,15 +702,8 @@ const ActivationKeyEditor = () => {
                   </Select>
                 </div>
 
-                {getJwtMetadata(jwt) && (
-                  <ActivationKeyMetadataDisplay 
-                    metadata={getJwtMetadata(jwt)!} 
-                    expiryDate={expiryDate}
-                    onExpiryChange={setExpiryDate}
-                  />
-                )}
-
-                <div className="ak-controls">
+                {/* Action Buttons */}
+                <div className="ak-controls mt-4">
                   <Button
                     onClick={handleSign}
                     disabled={!selectedKeyId || !editorValue}
@@ -253,6 +711,93 @@ const ActivationKeyEditor = () => {
                   >
                     Generate Activation Key
                   </Button>
+
+                  <Popover open={saveTemplateOpen} onOpenChange={setSaveTemplateOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="gap-2"
+                        onClick={handleSaveTemplateClick}
+                      >
+                        <Save className="h-4 w-4" />
+                        Save as template
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-80" align="start">
+                      <div className="space-y-4">
+                        <div className="space-y-2">
+                          <h4 className="font-medium text-sm">Save as Template</h4>
+                          <p className="text-xs text-muted-foreground">
+                            Save this activation key as a reusable template.
+                          </p>
+                        </div>
+
+                        {showExpiryWarning && (
+                          <div className="p-3 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded-md space-y-3">
+                            <div className="flex items-start gap-2">
+                              <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
+                              <div className="text-xs text-yellow-800 dark:text-yellow-200">
+                                <strong>Notice:</strong> This activation key is not expired.
+                                For safety reasons, templates should contain expired keys only.
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-2 pl-6">
+                              <input
+                                type="checkbox"
+                                id="save-as-expired"
+                                checked={saveAsExpired}
+                                onChange={(e) => setSaveAsExpired(e.target.checked)}
+                                className="h-4 w-4 rounded border-yellow-600 text-yellow-600 focus:ring-yellow-500"
+                              />
+                              <label htmlFor="save-as-expired" className="text-xs text-yellow-800 dark:text-yellow-200 cursor-pointer">
+                                Save as expired (set expiry to 24h ago)
+                              </label>
+                            </div>
+                          </div>
+                        )}
+
+                        <div className="space-y-2">
+                          <Label htmlFor="template-name" className="text-sm">Name *</Label>
+                          <Input
+                            id="template-name"
+                            value={templateName}
+                            onChange={(e) => setTemplateName(e.target.value)}
+                            placeholder="e.g., ReadonlyREST Enterprise"
+                            autoFocus
+                          />
+                        </div>
+
+                        <div className="space-y-2">
+                          <Label htmlFor="template-description" className="text-sm">Description (optional)</Label>
+                          <Input
+                            id="template-description"
+                            value={templateDescription}
+                            onChange={(e) => setTemplateDescription(e.target.value)}
+                            placeholder="e.g., Template for enterprise licenses"
+                          />
+                        </div>
+
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setSaveTemplateOpen(false)}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            size="sm"
+                            onClick={handleSaveTemplate}
+                          >
+                            {sourceTemplateId && findTemplateByName(templateName)?.id === sourceTemplateId
+                              ? 'Update Template'
+                              : 'Save Template'}
+                          </Button>
+                        </div>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
                 </div>
 
                 {jwt && (
@@ -283,4 +828,4 @@ const ActivationKeyEditor = () => {
   );
 };
 
-export default ActivationKeyEditor; 
+export default ActivationKeyEditor;
diff --git a/src/components/pages/Keys.tsx b/src/components/pages/Keys.tsx
index 40094b1..82bac0f 100644
--- a/src/components/pages/Keys.tsx
+++ b/src/components/pages/Keys.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
 import { Button } from '../ui/button';
 import { Plus, ChevronDown, ChevronUp, Pencil, Trash2, Download, Upload, ChevronRight } from 'lucide-react';
@@ -8,85 +8,74 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../ui/tooltip";
-
 import { Label } from '../ui/label';
 import { PageHeader } from '../ui/page-header';
 import { KeyPair } from '../../types/activationKey';
 import { KeyPairForm } from '../keys/key-pair-form';
-import { validatePublicKey } from '../../utils/key-validation';
-import { validatePrivateKey } from '../../utils/key-validation';
+import { validateKeyPair, hasValidationErrors, getFirstError } from '../../utils/validation';
 import { generateEC512KeyPair } from '../../utils/activationKey';
 import { exportKeyPairToZip, importKeyPairFromZip } from '../../utils/file-utils';
+import { useKeyPairs } from '../../hooks/use-key-pairs';
+import { useToast } from '../../hooks/use-toast';
+import { useCrudState } from '../../hooks/use-crud-state';
 import './Keys.css';
 
+const EMPTY_KEY_PAIR: Omit<KeyPair, 'id'> = {
+  name: '',
+  publicKey: '',
+  privateKey: '',
+  createdAt: '',
+};
+
 const Keys = () => {
-  const [keyPairs, setKeyPairs] = useState<KeyPair[]>([]);
-  const [isAddingNew, setIsAddingNew] = useState(false);
-  const [newKeyPair, setNewKeyPair] = useState<Omit<KeyPair, 'id'>>({
-    name: '',
-    publicKey: '',
-    privateKey: '',
-    createdAt: '',
+  const { keyPairs, addKeyPair, updateKeyPair, deleteKeyPair } = useKeyPairs();
+  const { success, error: showError, confirm } = useToast();
+
+  const {
+    isAddingNew,
+    newItem: newKeyPair,
+    setNewItem: setNewKeyPair,
+    startAdding,
+    resetNew: resetNewKeyPair,
+    editingId,
+    editingItem: editingKeyPair,
+    setEditingItem: setEditingKeyPair,
+    toggleEdit,
+    cancelEditing,
+  } = useCrudState<KeyPair, Omit<KeyPair, 'id'>>({
+    emptyItem: EMPTY_KEY_PAIR,
   });
+
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editingKeyPair, setEditingKeyPair] = useState<KeyPair | null>(null);
   const [showSec1Info, setShowSec1Info] = useState(false);
 
-  useEffect(() => {
-    const savedKeys = localStorage.getItem('keyPairs');
-    if (savedKeys) {
-      setKeyPairs(JSON.parse(savedKeys));
-    }
-  }, []);
-
   const handleSave = async () => {
-    try {
-      const trimmedKeyPair = {
-        name: newKeyPair.name.trim(),
-        publicKey: newKeyPair.publicKey.trim(),
-        privateKey: newKeyPair.privateKey.trim(),
-      };
-
-      if (!trimmedKeyPair.name || !trimmedKeyPair.publicKey || !trimmedKeyPair.privateKey) {
-        alert('Please fill in all fields');
-        return;
-      }
-
-      const privateKeyError = validatePrivateKey(trimmedKeyPair.privateKey);
-      if (privateKeyError) {
-        alert(privateKeyError);
-        return;
-      }
-
-      const publicKeyError = validatePublicKey(trimmedKeyPair.publicKey);
-      if (publicKeyError) {
-        alert(publicKeyError);
-        return;
-      }
+    const trimmedKeyPair = {
+      name: newKeyPair.name.trim(),
+      publicKey: newKeyPair.publicKey.trim(),
+      privateKey: newKeyPair.privateKey.trim(),
+    };
 
-      const newPair: KeyPair = {
-        ...trimmedKeyPair,
-        id: crypto.randomUUID(),
-        createdAt: new Date().toISOString(),
-      };
+    const errors = validateKeyPair(trimmedKeyPair);
+    if (hasValidationErrors(errors)) {
+      showError(getFirstError(errors) ?? 'Validation failed');
+      return;
+    }
 
-      const updatedPairs = [...keyPairs, newPair];
-      setKeyPairs(updatedPairs);
-      localStorage.setItem('keyPairs', JSON.stringify(updatedPairs));
-      
-      setIsAddingNew(false);
-      setNewKeyPair({ name: '', publicKey: '', privateKey: '', createdAt: '' });
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Error saving key pair');
+    try {
+      addKeyPair(trimmedKeyPair);
+      success('Key pair created successfully');
+      resetNewKeyPair();
+    } catch (err) {
+      showError(err instanceof Error ? err.message : 'Error saving key pair');
     }
   };
 
-  const handleDelete = (id: string) => {
-    if (window.confirm('Are you sure you want to delete this key pair?')) {
-      const updatedPairs = keyPairs.filter(pair => pair.id !== id);
-      setKeyPairs(updatedPairs);
-      localStorage.setItem('keyPairs', JSON.stringify(updatedPairs));
+  const handleDelete = async (id: string) => {
+    const confirmed = await confirm('Are you sure you want to delete this key pair?');
+    if (confirmed) {
+      deleteKeyPair(id);
+      success('Key pair deleted');
     }
   };
 
@@ -94,48 +83,24 @@ const Keys = () => {
     setExpandedId(expandedId === id ? null : id);
   };
 
-  const handleEdit = (pair: KeyPair) => {
-    if (editingId === pair.id) {
-      setEditingId(null);
-      setEditingKeyPair(null);
-    } else {
-      setEditingId(pair.id);
-      setEditingKeyPair(pair);
-    }
-  };
-
   const handleUpdateKey = () => {
-    if (!editingKeyPair?.name || !editingKeyPair?.publicKey || !editingKeyPair?.privateKey) {
-      alert('Please fill in all fields');
-      return;
-    }
+    if (!editingKeyPair) return;
 
     const trimmedKeyPair = {
-      ...editingKeyPair,
       name: editingKeyPair.name.trim(),
       publicKey: editingKeyPair.publicKey.trim(),
       privateKey: editingKeyPair.privateKey.trim(),
     };
 
-    const privateKeyError = validatePrivateKey(trimmedKeyPair.privateKey);
-    if (privateKeyError) {
-      alert(privateKeyError);
+    const errors = validateKeyPair(trimmedKeyPair);
+    if (hasValidationErrors(errors)) {
+      showError(getFirstError(errors) ?? 'Validation failed');
       return;
     }
 
-    const publicKeyError = validatePublicKey(trimmedKeyPair.publicKey);
-    if (publicKeyError) {
-      alert(publicKeyError);
-      return;
-    }
-
-    const updatedPairs = keyPairs.map(pair => 
-      pair.id === trimmedKeyPair.id ? trimmedKeyPair : pair
-    );
-    setKeyPairs(updatedPairs);
-    localStorage.setItem('keyPairs', JSON.stringify(updatedPairs));
-    setEditingId(null);
-    setEditingKeyPair(null);
+    updateKeyPair(editingKeyPair.id, trimmedKeyPair);
+    success('Key pair updated');
+    cancelEditing();
   };
 
   const handleGenerateKeys = async () => {
@@ -147,16 +112,18 @@ const Keys = () => {
         privateKey: generatedPair.privateKey,
         createdAt: generatedPair.createdAt
       });
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Error generating key pair');
+      success('Keys generated successfully');
+    } catch (err) {
+      showError(err instanceof Error ? err.message : 'Error generating key pair');
     }
   };
 
   const handleExport = async (pair: KeyPair) => {
     try {
       await exportKeyPairToZip(pair);
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Error exporting key pair');
+      success(`Exported ${pair.name}.zip`);
+    } catch (err) {
+      showError(err instanceof Error ? err.message : 'Error exporting key pair');
     }
   };
 
@@ -170,37 +137,38 @@ const Keys = () => {
         ...importedPair,
         createdAt: new Date().toISOString(),
       });
-      setIsAddingNew(true);
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Error importing key pair');
+      startAdding();
+      success('Key pair imported - review and save');
+    } catch (err) {
+      showError(err instanceof Error ? err.message : 'Error importing key pair');
     }
-    
+
     // Reset the input
     event.target.value = '';
   };
 
   return (
     <div className="p-6">
-      <PageHeader 
+      <PageHeader
         title="Keys Management"
         description="Manage your key pairs. All keys should be in PKCS#8 PEM format."
       />
-      
+
       <div className="mt-2 mb-6 text-left">
-        <button 
+        <button
           onClick={() => setShowSec1Info(prev => !prev)}
           className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
-          <ChevronRight 
+          <ChevronRight
             className={`h-4 w-4 transition-transform ${showSec1Info ? 'rotate-90' : ''}`}
           />
           <p className="font-medium">Converting SEC1 PEM to PKCS#8</p>
         </button>
-        
+
         {showSec1Info && (
           <div className="mt-2 p-4 bg-secondary/10 rounded-lg text-sm">
             <p className="mb-2">
-              If you have a SEC1 PEM key (starting with "BEGIN EC PRIVATE KEY"), 
+              If you have a SEC1 PEM key (starting with "BEGIN EC PRIVATE KEY"),
               you can convert it to PKCS#8 format using this command:
             </p>
             <pre className=" p-3 pr-12 bg-muted border rounded-md font-mono text-sm break-all">
@@ -245,8 +213,8 @@ const Keys = () => {
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
-          <Button 
-            onClick={() => setIsAddingNew(true)} 
+          <Button
+            onClick={startAdding}
             disabled={isAddingNew}
             size="icon"
           >
@@ -262,10 +230,7 @@ const Keys = () => {
                 keyPair={newKeyPair}
                 onChange={(e) => setNewKeyPair(e as KeyPair)}
                 onSave={handleSave}
-                onCancel={() => {
-                  setIsAddingNew(false);
-                  setNewKeyPair({ name: '', publicKey: '', privateKey: '', createdAt: '' });
-                }}
+                onCancel={resetNewKeyPair}
                 onGenerateKeys={handleGenerateKeys}
               />
             </CardContent>
@@ -275,7 +240,7 @@ const Keys = () => {
         <div className="space-y-4">
           {keyPairs.map((pair) => (
             <Card key={pair.id}>
-              <CardHeader 
+              <CardHeader
                 className="relative cursor-pointer hover:bg-secondary/10 transition-colors px-6 py-4"
                 onClick={() => toggleExpand(pair.id)}
               >
@@ -294,13 +259,13 @@ const Keys = () => {
                     </Button>
                     <CardTitle className="text-xl font-semibold">{pair.name}</CardTitle>
                   </div>
-                  
+
                   <div className="flex gap-2">
                     <TooltipProvider>
                       <Tooltip delayDuration={0}>
                         <TooltipTrigger asChild>
-                          <Button 
-                            variant="ghost" 
+                          <Button
+                            variant="ghost"
                             size="sm"
                             onClick={(e) => {
                               e.stopPropagation();
@@ -325,8 +290,8 @@ const Keys = () => {
                       </Tooltip>
                     </TooltipProvider>
                     {editingId === pair.id && (
-                      <Button 
-                        variant="ghost" 
+                      <Button
+                        variant="ghost"
                         size="sm"
                         onClick={(e) => {
                           e.stopPropagation();
@@ -336,12 +301,12 @@ const Keys = () => {
                         <Trash2 className="h-5 w-5" />
                       </Button>
                     )}
-                    <Button 
-                      variant="ghost" 
+                    <Button
+                      variant="ghost"
                       size="sm"
                       onClick={(e) => {
                         e.stopPropagation();
-                        handleEdit(pair);
+                        toggleEdit(pair);
                       }}
                     >
                       <Pencil className={`h-5 w-5 ${editingId === pair.id ? "text-primary" : ""}`} />
@@ -352,18 +317,13 @@ const Keys = () => {
               {(expandedId === pair.id || editingId === pair.id) && (
                 <CardContent className="space-y-4 px-6 py-4">
                   {editingId === pair.id ? (
-                    <>
-                      <KeyPairForm
-                        mode="edit"
-                        keyPair={editingKeyPair || {}}
-                        onChange={(e) => setEditingKeyPair((prev) => prev ? { ...prev, ...e } : null)}
-                        onSave={handleUpdateKey}
-                        onCancel={() => {
-                          setEditingId(null);
-                          setEditingKeyPair(null);
-                        }}
-                      />
-                    </>
+                    <KeyPairForm
+                      mode="edit"
+                      keyPair={editingKeyPair || {}}
+                      onChange={(e) => setEditingKeyPair((prev) => prev ? { ...prev, ...e } : null)}
+                      onSave={handleUpdateKey}
+                      onCancel={cancelEditing}
+                    />
                   ) : (
                     <>
                       <div className="space-y-2 mb-12">
@@ -390,4 +350,4 @@ const Keys = () => {
   );
 };
 
-export default Keys; 
+export default Keys;
diff --git a/src/components/pages/Templates.tsx b/src/components/pages/Templates.tsx
new file mode 100644
index 0000000..67f5375
--- /dev/null
+++ b/src/components/pages/Templates.tsx
@@ -0,0 +1,442 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '../ui/card';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { Label } from '../ui/label';
+import { Plus, Pencil, Trash2, Copy, Check, AlertCircle, ExternalLink, FileText, Info } from 'lucide-react';
+import { useTemplates, AkTemplate } from '../../hooks/use-templates';
+import { useToast } from '../../hooks/use-toast';
+import { useCrudState } from '../../hooks/use-crud-state';
+import { getJwtMetadata, validateActivationKeyFormat, AkValidationResult } from '../../utils/activationKey';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+
+// Key for storing template to load in editor
+export const PENDING_TEMPLATE_KEY = 'pendingTemplateId';
+
+const EMPTY_TEMPLATE: Omit<AkTemplate, 'id' | 'createdAt'> = {
+  name: '',
+  description: '',
+  activationKey: '',
+};
+
+interface ValidationState {
+  error: AkValidationResult | null;
+  touched: boolean;
+}
+
+const Templates = () => {
+  const navigate = useNavigate();
+  const { templates, addTemplate, updateTemplate, deleteTemplate } = useTemplates();
+  const { success, error: showError, confirm } = useToast();
+
+  const {
+    isAddingNew,
+    newItem: newTemplate,
+    setNewItem: setNewTemplate,
+    startAdding,
+    resetNew,
+    editingId,
+    editingItem: editingTemplate,
+    setEditingItem: setEditingTemplate,
+    toggleEdit,
+    cancelEditing,
+  } = useCrudState<AkTemplate, Omit<AkTemplate, 'id' | 'createdAt'>>({
+    emptyItem: EMPTY_TEMPLATE,
+  });
+
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [newAkValidation, setNewAkValidation] = useState<ValidationState>({ error: null, touched: false });
+  const [editAkValidation, setEditAkValidation] = useState<ValidationState>({ error: null, touched: false });
+
+  const resetNewTemplate = () => {
+    resetNew();
+    setNewAkValidation({ error: null, touched: false });
+  };
+
+  const validateTemplate = (template: Omit<AkTemplate, 'id' | 'createdAt'>): { nameError: string | null; akValidation: AkValidationResult | null } => {
+    const nameError = !template.name.trim() ? 'Name is required' : null;
+    const akValidation = validateActivationKeyFormat(template.activationKey);
+    return { nameError, akValidation };
+  };
+
+  const handleSave = () => {
+    const { nameError, akValidation } = validateTemplate(newTemplate);
+
+    if (nameError) {
+      showError(nameError);
+      return;
+    }
+
+    if (!akValidation || !akValidation.isValid) {
+      setNewAkValidation({ error: akValidation, touched: true });
+      if (akValidation && !akValidation.isValid) {
+        showError(`${akValidation.message}${akValidation.details ? `: ${akValidation.details}` : ''}`);
+      }
+      return;
+    }
+
+    try {
+      addTemplate({
+        name: newTemplate.name.trim(),
+        description: newTemplate.description?.trim(),
+        activationKey: newTemplate.activationKey.trim(),
+      });
+      success('Template created');
+      resetNewTemplate();
+    } catch (err) {
+      showError(err instanceof Error ? err.message : 'Error saving template');
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    const confirmed = await confirm('Delete this template?');
+    if (confirmed) {
+      deleteTemplate(id);
+      success('Template deleted');
+    }
+  };
+
+  const handleToggleEdit = (template: AkTemplate) => {
+    toggleEdit(template);
+    setEditAkValidation({ error: null, touched: false });
+  };
+
+  const handleCancelEditing = () => {
+    cancelEditing();
+    setEditAkValidation({ error: null, touched: false });
+  };
+
+  const handleUpdateTemplate = () => {
+    if (!editingTemplate) return;
+
+    const { nameError, akValidation } = validateTemplate(editingTemplate);
+
+    if (nameError) {
+      showError(nameError);
+      return;
+    }
+
+    if (!akValidation || !akValidation.isValid) {
+      setEditAkValidation({ error: akValidation, touched: true });
+      if (akValidation && !akValidation.isValid) {
+        showError(`${akValidation.message}${akValidation.details ? `: ${akValidation.details}` : ''}`);
+      }
+      return;
+    }
+
+    updateTemplate(editingTemplate.id, {
+      name: editingTemplate.name.trim(),
+      description: editingTemplate.description?.trim(),
+      activationKey: editingTemplate.activationKey.trim(),
+    });
+    success('Template updated');
+    handleCancelEditing();
+  };
+
+  const copyToClipboard = async (activationKey: string, id: string) => {
+    await navigator.clipboard.writeText(activationKey);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  const getTemplateMetadata = (activationKey: string) => {
+    const metadata = getJwtMetadata(activationKey);
+    if (!metadata) return { algorithm: 'Invalid', expiryText: '', isExpired: false };
+
+    const isExpired = metadata.expiresAt ? metadata.expiresAt < new Date() : false;
+    const expiryText = metadata.expiresAt
+      ? metadata.expiresAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+      : 'No expiry';
+
+    return {
+      algorithm: metadata.algorithm || 'Unknown',
+      expiryText,
+      isExpired,
+    };
+  };
+
+  const loadInEditor = (templateId: string) => {
+    localStorage.setItem(PENDING_TEMPLATE_KEY, templateId);
+    navigate('/');
+  };
+
+  const renderValidationError = (validation: ValidationState) => {
+    if (!validation.touched || !validation.error || validation.error.isValid) return null;
+    return (
+      <div className="flex items-start gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+        <AlertCircle className="h-4 w-4 text-destructive mt-0.5 flex-shrink-0" />
+        <div className="text-sm">
+          <p className="font-medium text-destructive">{validation.error.message}</p>
+          {validation.error.details && (
+            <p className="text-destructive/70 mt-0.5 text-xs">{validation.error.details}</p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <TooltipProvider>
+      <div className="p-6 max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-8">
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight">Templates</h1>
+            <p className="text-muted-foreground mt-1">
+              Reusable activation key configurations
+            </p>
+          </div>
+          <Button
+            onClick={startAdding}
+            disabled={isAddingNew}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            New Template
+          </Button>
+        </div>
+
+        {/* Add New Template Form */}
+        {isAddingNew && (
+          <Card className="mb-6 border-primary/20">
+            <CardContent className="pt-6 space-y-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    value={newTemplate.name}
+                    onChange={(e) => setNewTemplate({ ...newTemplate, name: e.target.value })}
+                    placeholder="Enterprise License"
+                    autoFocus
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="description">Description <span className="text-muted-foreground font-normal">(optional)</span></Label>
+                  <Input
+                    id="description"
+                    value={newTemplate.description || ''}
+                    onChange={(e) => setNewTemplate({ ...newTemplate, description: e.target.value })}
+                    placeholder="Standard enterprise template"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="activationKey">Activation Key</Label>
+                <Textarea
+                  id="activationKey"
+                  value={newTemplate.activationKey}
+                  onChange={(e) => {
+                    setNewTemplate({ ...newTemplate, activationKey: e.target.value });
+                    if (newAkValidation.touched) {
+                      setNewAkValidation({ error: validateActivationKeyFormat(e.target.value), touched: true });
+                    }
+                  }}
+                  onBlur={() => {
+                    if (newTemplate.activationKey.trim()) {
+                      setNewAkValidation({ error: validateActivationKeyFormat(newTemplate.activationKey), touched: true });
+                    }
+                  }}
+                  placeholder="Paste activation key..."
+                  className={`font-mono text-xs h-24 resize-none ${newAkValidation.touched && newAkValidation.error && !newAkValidation.error.isValid ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+                />
+                {renderValidationError(newAkValidation)}
+              </div>
+
+              <div className="flex justify-end gap-2 pt-2">
+                <Button variant="ghost" onClick={resetNewTemplate}>
+                  Cancel
+                </Button>
+                <Button onClick={handleSave}>
+                  Create Template
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Templates List */}
+        {templates.length > 0 ? (
+          <div className="space-y-3">
+            {templates.map((template) => {
+              const meta = getTemplateMetadata(template.activationKey);
+              const isEditing = editingId === template.id;
+
+              return (
+                <Card key={template.id} className={isEditing ? 'ring-1 ring-primary/30' : ''}>
+                  <CardContent className="p-4">
+                    {isEditing ? (
+                      // Edit Mode
+                      <div className="space-y-4">
+                        <div className="grid gap-4 sm:grid-cols-2">
+                          <div className="space-y-2">
+                            <Label htmlFor={`edit-name-${template.id}`}>Name</Label>
+                            <Input
+                              id={`edit-name-${template.id}`}
+                              value={editingTemplate?.name || ''}
+                              onChange={(e) => setEditingTemplate(prev => prev ? { ...prev, name: e.target.value } : null)}
+                              autoFocus
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor={`edit-description-${template.id}`}>Description</Label>
+                            <Input
+                              id={`edit-description-${template.id}`}
+                              value={editingTemplate?.description || ''}
+                              onChange={(e) => setEditingTemplate(prev => prev ? { ...prev, description: e.target.value } : null)}
+                            />
+                          </div>
+                        </div>
+
+                        <div className="space-y-2">
+                          <Label htmlFor={`edit-ak-${template.id}`}>Activation Key</Label>
+                          <Textarea
+                            id={`edit-ak-${template.id}`}
+                            value={editingTemplate?.activationKey || ''}
+                            onChange={(e) => {
+                              setEditingTemplate(prev => prev ? { ...prev, activationKey: e.target.value } : null);
+                              if (editAkValidation.touched) {
+                                setEditAkValidation({ error: validateActivationKeyFormat(e.target.value), touched: true });
+                              }
+                            }}
+                            onBlur={() => {
+                              if (editingTemplate?.activationKey.trim()) {
+                                setEditAkValidation({ error: validateActivationKeyFormat(editingTemplate.activationKey), touched: true });
+                              }
+                            }}
+                            className={`font-mono text-xs h-24 resize-none ${editAkValidation.touched && editAkValidation.error && !editAkValidation.error.isValid ? 'border-destructive' : ''}`}
+                          />
+                          {renderValidationError(editAkValidation)}
+                        </div>
+
+                        <div className="flex items-center justify-between pt-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                            onClick={() => handleDelete(template.id)}
+                          >
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Delete
+                          </Button>
+                          <div className="flex gap-2">
+                            <Button
+                              variant="ghost"
+                              onClick={handleCancelEditing}
+                            >
+                              Cancel
+                            </Button>
+                            <Button onClick={handleUpdateTemplate}>
+                              Save Changes
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      // View Mode
+                      <div className="flex items-center gap-4">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <h3 className="font-medium truncate">{template.name}</h3>
+                            {!meta.isExpired && (
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium bg-amber-500/10 text-amber-600 dark:text-amber-400 rounded">
+                                    <Info className="h-3 w-3" />
+                                    Active
+                                  </span>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p className="text-xs max-w-[200px]">This template contains a non-expired key. Consider using expired keys for safety.</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            )}
+                          </div>
+                          <p className="text-sm text-muted-foreground truncate mt-0.5">
+                            {template.description || (
+                              <span className="font-mono text-xs">
+                                {meta.algorithm} · {meta.isExpired ? 'Expired' : 'Expires'} {meta.expiryText}
+                              </span>
+                            )}
+                          </p>
+                        </div>
+
+                        <div className="flex items-center gap-1">
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8"
+                                onClick={() => loadInEditor(template.id)}
+                              >
+                                <ExternalLink className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Open in Editor</TooltipContent>
+                          </Tooltip>
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8"
+                                onClick={() => copyToClipboard(template.activationKey, template.id)}
+                              >
+                                {copiedId === template.id ? (
+                                  <Check className="h-4 w-4 text-green-500" />
+                                ) : (
+                                  <Copy className="h-4 w-4" />
+                                )}
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Copy to Clipboard</TooltipContent>
+                          </Tooltip>
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8"
+                                onClick={() => handleToggleEdit(template)}
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Edit</TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        ) : (
+          // Empty State
+          <div className="text-center py-16">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-4">
+              <FileText className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <h3 className="font-medium mb-1">No templates yet</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Create templates for quick access to your activation key configurations.
+            </p>
+            <Button onClick={startAdding} variant="outline" className="gap-2">
+              <Plus className="h-4 w-4" />
+              Create your first template
+            </Button>
+          </div>
+        )}
+      </div>
+    </TooltipProvider>
+  );
+};
+
+export default Templates;
diff --git a/src/hooks/use-crud-state.ts b/src/hooks/use-crud-state.ts
new file mode 100644
index 0000000..4e8174f
--- /dev/null
+++ b/src/hooks/use-crud-state.ts
@@ -0,0 +1,118 @@
+import { useState, useCallback, Dispatch, SetStateAction } from 'react';
+
+/**
+ * State and handlers for CRUD form operations.
+ * Manages the pattern of adding new items and editing existing items
+ * that's common across list-based UI components.
+ */
+export interface UseCrudStateReturn<T extends { id: string }, TNew = Omit<T, 'id' | 'createdAt'>> {
+  // Adding new item state
+  isAddingNew: boolean;
+  newItem: TNew;
+  setNewItem: Dispatch<SetStateAction<TNew>>;
+  startAdding: () => void;
+  cancelAdding: () => void;
+  resetNew: () => void;
+
+  // Editing existing item state
+  editingId: string | null;
+  editingItem: T | null;
+  setEditingItem: Dispatch<SetStateAction<T | null>>;
+  startEditing: (item: T) => void;
+  cancelEditing: () => void;
+
+  // Toggle edit (starts if not editing, cancels if editing same item)
+  toggleEdit: (item: T) => void;
+}
+
+export interface UseCrudStateOptions<TNew> {
+  /** Initial/empty state for new items */
+  emptyItem: TNew;
+}
+
+/**
+ * Hook for managing CRUD form state patterns.
+ *
+ * @example
+ * ```typescript
+ * const {
+ *   isAddingNew,
+ *   newItem,
+ *   setNewItem,
+ *   startAdding,
+ *   cancelAdding,
+ *   editingId,
+ *   editingItem,
+ *   toggleEdit,
+ * } = useCrudState<Template>({
+ *   emptyItem: { name: '', description: '', content: '' },
+ * });
+ * ```
+ */
+export function useCrudState<T extends { id: string }, TNew = Omit<T, 'id' | 'createdAt'>>(
+  options: UseCrudStateOptions<TNew>
+): UseCrudStateReturn<T, TNew> {
+  const { emptyItem } = options;
+
+  // Adding new item state
+  const [isAddingNew, setIsAddingNew] = useState(false);
+  const [newItem, setNewItem] = useState<TNew>(emptyItem);
+
+  // Editing existing item state
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingItem, setEditingItem] = useState<T | null>(null);
+
+  const startAdding = useCallback(() => {
+    setIsAddingNew(true);
+    // Cancel any ongoing edit
+    setEditingId(null);
+    setEditingItem(null);
+  }, []);
+
+  const cancelAdding = useCallback(() => {
+    setIsAddingNew(false);
+    setNewItem(emptyItem);
+  }, [emptyItem]);
+
+  const resetNew = useCallback(() => {
+    setNewItem(emptyItem);
+    setIsAddingNew(false);
+  }, [emptyItem]);
+
+  const startEditing = useCallback((item: T) => {
+    setEditingId(item.id);
+    setEditingItem(item);
+    // Cancel any ongoing add
+    setIsAddingNew(false);
+  }, []);
+
+  const cancelEditing = useCallback(() => {
+    setEditingId(null);
+    setEditingItem(null);
+  }, []);
+
+  const toggleEdit = useCallback((item: T) => {
+    if (editingId === item.id) {
+      setEditingId(null);
+      setEditingItem(null);
+    } else {
+      setEditingId(item.id);
+      setEditingItem(item);
+    }
+  }, [editingId]);
+
+  return {
+    isAddingNew,
+    newItem,
+    setNewItem,
+    startAdding,
+    cancelAdding,
+    resetNew,
+    editingId,
+    editingItem,
+    setEditingItem,
+    startEditing,
+    cancelEditing,
+    toggleEdit,
+  };
+}
diff --git a/src/hooks/use-key-pairs.ts b/src/hooks/use-key-pairs.ts
new file mode 100644
index 0000000..271f7f1
--- /dev/null
+++ b/src/hooks/use-key-pairs.ts
@@ -0,0 +1,31 @@
+import { useLocalStorageCollection } from './use-local-storage-collection';
+import { KeyPair } from '../types/activationKey';
+
+const STORAGE_KEY = 'keyPairs';
+
+interface UseKeyPairsReturn {
+  keyPairs: KeyPair[];
+  isLoading: boolean;
+  error: Error | null;
+  addKeyPair: (pair: Omit<KeyPair, 'id' | 'createdAt'>) => KeyPair;
+  updateKeyPair: (id: string, updates: Partial<Omit<KeyPair, 'id' | 'createdAt'>>) => void;
+  deleteKeyPair: (id: string) => void;
+  getKeyPairById: (id: string) => KeyPair | undefined;
+}
+
+export function useKeyPairs(): UseKeyPairsReturn {
+  const { items, isLoading, error, add, update, remove, getById } = useLocalStorageCollection<KeyPair>({
+    storageKey: STORAGE_KEY,
+    entityName: 'key pairs',
+  });
+
+  return {
+    keyPairs: items,
+    isLoading,
+    error,
+    addKeyPair: add,
+    updateKeyPair: update,
+    deleteKeyPair: remove,
+    getKeyPairById: getById,
+  };
+}
diff --git a/src/hooks/use-local-storage-collection.ts b/src/hooks/use-local-storage-collection.ts
new file mode 100644
index 0000000..1695785
--- /dev/null
+++ b/src/hooks/use-local-storage-collection.ts
@@ -0,0 +1,142 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+/**
+ * Base interface for items stored in localStorage collections.
+ * All items must have an id and createdAt timestamp.
+ */
+export interface StorableItem {
+  id: string;
+  createdAt: string;
+}
+
+export interface UseLocalStorageCollectionOptions<T extends StorableItem> {
+  /** localStorage key for persistence */
+  storageKey: string;
+  /** Human-readable name for error messages (e.g., "templates", "key pairs") */
+  entityName: string;
+  /** Default items to initialize with if storage is empty */
+  defaultItems?: T[];
+}
+
+export interface UseLocalStorageCollectionReturn<T extends StorableItem> {
+  items: T[];
+  isLoading: boolean;
+  error: Error | null;
+  add: (item: Omit<T, 'id' | 'createdAt'>) => T;
+  update: (id: string, updates: Partial<Omit<T, 'id' | 'createdAt'>>) => void;
+  remove: (id: string) => void;
+  getById: (id: string) => T | undefined;
+}
+
+/**
+ * Generic hook for managing a collection of items persisted to localStorage.
+ * Provides CRUD operations with automatic persistence.
+ *
+ * @example
+ * ```typescript
+ * interface Template extends StorableItem {
+ *   name: string;
+ *   content: string;
+ * }
+ *
+ * const { items, add, update, remove } = useLocalStorageCollection<Template>({
+ *   storageKey: 'templates',
+ *   entityName: 'templates',
+ * });
+ * ```
+ */
+export function useLocalStorageCollection<T extends StorableItem>(
+  options: UseLocalStorageCollectionOptions<T>
+): UseLocalStorageCollectionReturn<T> {
+  const { storageKey, entityName, defaultItems = [] } = options;
+
+  const [items, setItems] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Store defaultItems in a ref to avoid effect re-runs when caller doesn't memoize
+  const defaultItemsRef = useRef(defaultItems);
+
+  // Load from localStorage on mount only
+  useEffect(() => {
+    const defaults = defaultItemsRef.current;
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          setItems(parsed);
+        } else if (defaults.length > 0) {
+          setItems(defaults);
+          localStorage.setItem(storageKey, JSON.stringify(defaults));
+        }
+      } else if (defaults.length > 0) {
+        setItems(defaults);
+        localStorage.setItem(storageKey, JSON.stringify(defaults));
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(`Failed to load ${entityName} from storage`));
+      if (defaults.length > 0) {
+        setItems(defaults);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [storageKey, entityName]);
+
+  const persist = useCallback((newItems: T[]) => {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(newItems));
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(`Failed to save ${entityName} to storage`));
+    }
+  }, [storageKey, entityName]);
+
+  const add = useCallback((item: Omit<T, 'id' | 'createdAt'>): T => {
+    const newItem = {
+      ...item,
+      id: crypto.randomUUID(),
+      createdAt: new Date().toISOString(),
+    } as T;
+
+    setItems(prev => {
+      const updated = [...prev, newItem];
+      persist(updated);
+      return updated;
+    });
+
+    return newItem;
+  }, [persist]);
+
+  const update = useCallback((id: string, updates: Partial<Omit<T, 'id' | 'createdAt'>>) => {
+    setItems(prev => {
+      const updated = prev.map(item =>
+        item.id === id ? { ...item, ...updates } : item
+      );
+      persist(updated);
+      return updated;
+    });
+  }, [persist]);
+
+  const remove = useCallback((id: string) => {
+    setItems(prev => {
+      const updated = prev.filter(item => item.id !== id);
+      persist(updated);
+      return updated;
+    });
+  }, [persist]);
+
+  const getById = useCallback((id: string): T | undefined => {
+    return items.find(item => item.id === id);
+  }, [items]);
+
+  return {
+    items,
+    isLoading,
+    error,
+    add,
+    update,
+    remove,
+    getById,
+  };
+}
diff --git a/src/hooks/use-templates.ts b/src/hooks/use-templates.ts
new file mode 100644
index 0000000..09e1d22
--- /dev/null
+++ b/src/hooks/use-templates.ts
@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { useLocalStorageCollection } from './use-local-storage-collection';
+
+export interface AkTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  activationKey: string;
+  createdAt: string;
+}
+
+/** @deprecated Use AkTemplate instead */
+export type JwtTemplate = AkTemplate;
+
+const STORAGE_KEY = 'akTemplates';
+
+// Default example template
+const DEFAULT_TEMPLATES: AkTemplate[] = [
+  {
+    id: 'default-anaphora-free',
+    name: 'Anaphora Free Edition',
+    description: 'Example activation key for Anaphora Free edition',
+    activationKey: 'eyJhbGciOiJFUzUxMiIsInR5cCI6IkpXVCJ9.eyJleHAiOjg4MDYxMjEyODAwLCJpc3MiOiJodHRwczovL2FwaS5iZXNodS50ZWNoIiwiaWF0IjoxNjYxMzU2MTAxLCJqdGkiOiJhbmFwaG9yYV9saWNfMjViMmFhYTgtMTQwMS00YjhmLThkMGYtNmMzMTdmOWJhNjcwIiwiYXVkIjoiQW5hcGhvcmEiLCJzdWIiOiIxMTExMTExMS0xMTExLTExMTEtMTExMS0xMTExMTExMSIsImxpY2Vuc29yIjp7Im5hbWUiOiJBbmFwaG9yYSIsImNvbnRhY3QiOlsic3VwcG9ydEByZWFkb25seXJlc3QuY29tIiwiZmluYW5jZUByZWFkb25seXJlc3QuY29tIl0sImlzc3VlciI6InN1cHBvcnRAcmVhZG9ubHlyZXN0LmNvbSJ9LCJsaWNlbnNlZSI6eyJuYW1lIjoiQW5vbnltb3VzIEZyZWUgVXNlciIsImJ1eWluZ19mb3IiOm51bGwsImJpbGxpbmdfZW1haWwiOiJ1bmtub3duQGFuYXBob3JhLmNvbSIsImFsdF9lbWFpbHMiOltdLCJhZGRyZXNzIjpbIlVua25vd24iXX0sImxpY2Vuc2UiOnsiY2x1c3Rlcl91dWlkIjoiKiIsImVkaXRpb24iOiJmcmVlIiwiZWRpdGlvbl9uYW1lIjoiRnJlZSIsImlzVHJpYWwiOmZhbHNlfX0.ATAB81zkWRxTdpSD_23tcFxba81OCrjdtcGlx_yXwa2VSvJAx7rWQYO2VM2N8zeknA01SzYpPP2o_FXzP3TCEo4iABRof2G1u0iD1AFf5Y0m_TYPs89acR5Fztb46wSBwsj4L1ONal0y8xHYfJC54SKwdXJV4XTJwIP2tBVcTl9QNAfn',
+    createdAt: new Date().toISOString(),
+  },
+];
+
+interface UseTemplatesReturn {
+  templates: AkTemplate[];
+  isLoading: boolean;
+  error: Error | null;
+  addTemplate: (template: Omit<AkTemplate, 'id' | 'createdAt'>) => AkTemplate;
+  updateTemplate: (id: string, updates: Partial<Omit<AkTemplate, 'id' | 'createdAt'>>) => void;
+  deleteTemplate: (id: string) => void;
+  getTemplateById: (id: string) => AkTemplate | undefined;
+}
+
+export function useTemplates(): UseTemplatesReturn {
+  // Memoize default templates to prevent useEffect re-runs
+  const defaultTemplates = useMemo(() => DEFAULT_TEMPLATES, []);
+
+  const { items, isLoading, error, add, update, remove, getById } = useLocalStorageCollection<AkTemplate>({
+    storageKey: STORAGE_KEY,
+    entityName: 'templates',
+    defaultItems: defaultTemplates,
+  });
+
+  return {
+    templates: items,
+    isLoading,
+    error,
+    addTemplate: add,
+    updateTemplate: update,
+    deleteTemplate: remove,
+    getTemplateById: getById,
+  };
+}
diff --git a/src/hooks/use-toast.tsx b/src/hooks/use-toast.tsx
new file mode 100644
index 0000000..d08a5db
--- /dev/null
+++ b/src/hooks/use-toast.tsx
@@ -0,0 +1,173 @@
+import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from 'lucide-react';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  toast: (type: ToastType, message: string, duration?: number) => void;
+  success: (message: string) => void;
+  error: (message: string) => void;
+  warning: (message: string) => void;
+  info: (message: string) => void;
+  dismiss: (id: string) => void;
+  confirm: (message: string) => Promise<boolean>;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const DEFAULT_DURATION = 4000;
+
+const toastStyles: Record<ToastType, { bg: string; border: string; icon: React.ReactNode }> = {
+  success: {
+    bg: 'bg-green-50 dark:bg-green-950',
+    border: 'border-green-200 dark:border-green-800',
+    icon: <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />,
+  },
+  error: {
+    bg: 'bg-red-50 dark:bg-red-950',
+    border: 'border-red-200 dark:border-red-800',
+    icon: <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400" />,
+  },
+  warning: {
+    bg: 'bg-yellow-50 dark:bg-yellow-950',
+    border: 'border-yellow-200 dark:border-yellow-800',
+    icon: <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
+  },
+  info: {
+    bg: 'bg-blue-50 dark:bg-blue-950',
+    border: 'border-blue-200 dark:border-blue-800',
+    icon: <Info className="h-5 w-5 text-blue-600 dark:text-blue-400" />,
+  },
+};
+
+interface ConfirmState {
+  message: string;
+  resolve: (value: boolean) => void;
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
+  const timeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  // Cleanup all timeouts on unmount to prevent memory leaks
+  useEffect(() => {
+    const timeouts = timeoutsRef.current;
+    return () => {
+      timeouts.forEach((timeout) => clearTimeout(timeout));
+      timeouts.clear();
+    };
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(id);
+    }
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const toast = useCallback((type: ToastType, message: string, duration = DEFAULT_DURATION) => {
+    const id = crypto.randomUUID();
+    const newToast: Toast = { id, type, message, duration };
+
+    setToasts(prev => [...prev, newToast]);
+
+    if (duration > 0) {
+      const timeout = setTimeout(() => {
+        dismiss(id);
+      }, duration);
+      timeoutsRef.current.set(id, timeout);
+    }
+  }, [dismiss]);
+
+  const success = useCallback((message: string) => toast('success', message), [toast]);
+  const error = useCallback((message: string) => toast('error', message, 6000), [toast]);
+  const warning = useCallback((message: string) => toast('warning', message), [toast]);
+  const info = useCallback((message: string) => toast('info', message), [toast]);
+
+  const confirm = useCallback((message: string): Promise<boolean> => {
+    return new Promise(resolve => {
+      setConfirmState({ message, resolve });
+    });
+  }, []);
+
+  const handleConfirm = useCallback((value: boolean) => {
+    if (confirmState) {
+      confirmState.resolve(value);
+      setConfirmState(null);
+    }
+  }, [confirmState]);
+
+  return (
+    <ToastContext.Provider value={{ toasts, toast, success, error, warning, info, dismiss, confirm }}>
+      {children}
+
+      {/* Toast Container */}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-md">
+        {toasts.map(t => {
+          const style = toastStyles[t.type];
+          return (
+            <div
+              key={t.id}
+              className={`${style.bg} ${style.border} border rounded-lg shadow-lg p-4 flex items-start gap-3 animate-in slide-in-from-right-full duration-300`}
+            >
+              {style.icon}
+              <p className="flex-1 text-sm text-foreground whitespace-pre-wrap">{t.message}</p>
+              <button
+                onClick={() => dismiss(t.id)}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Confirm Dialog */}
+      {confirmState && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <div
+            className="absolute inset-0 bg-black/50"
+            onClick={() => handleConfirm(false)}
+          />
+          <div className="relative bg-background border rounded-lg shadow-xl p-6 max-w-md mx-4 animate-in zoom-in-95 duration-200">
+            <p className="text-foreground mb-6">{confirmState.message}</p>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => handleConfirm(false)}
+                className="px-4 py-2 text-sm border rounded-md hover:bg-secondary transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleConfirm(true)}
+                className="px-4 py-2 text-sm bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
diff --git a/src/index.css b/src/index.css
index c2dbc83..d9e68e5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* Change Theme Color: https://ui.shadcn.com/themes */
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 210 20% 98%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
@@ -13,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 221 83% 53%;
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
@@ -22,47 +22,52 @@
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 221 83% 96%;
+    --accent-foreground: 221 83% 40%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 221 83% 53%;
 
     --radius: 0.5rem;
+
+    /* Custom accent for subtle highlights */
+    --highlight: 221 83% 53%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 224 71% 6%;
+    --card-foreground: 213 31% 91%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 224 71% 6%;
+    --popover-foreground: 213 31% 91%;
 
-    --primary: 210 40% 98%;
+    --primary: 217 91% 60%;
     --primary-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 222 47% 11%;
+    --secondary-foreground: 213 31% 91%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 216 50% 16%;
+    --accent-foreground: 217 91% 70%;
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --ring: 217 91% 60%;
+
+    --highlight: 217 91% 60%;
   }
 }
 
@@ -70,7 +75,75 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer components {
+  /* Subtle page background pattern */
+  .page-pattern {
+    background-image:
+      radial-gradient(circle at 25% 0%, hsl(var(--primary) / 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 75% 100%, hsl(var(--primary) / 0.03) 0%, transparent 50%);
+  }
+
+  /* Card with subtle accent border on hover */
+  .card-interactive {
+    @apply transition-all duration-200;
+  }
+
+  .card-interactive:hover {
+    @apply shadow-md;
+    border-color: hsl(var(--primary) / 0.2);
+  }
+
+  /* Accent line for headers */
+  .accent-line::before {
+    content: '';
+    @apply absolute left-0 top-0 bottom-0 w-1 rounded-full;
+    background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary) / 0.3));
+  }
+
+  /* Nav link with accent underline */
+  .nav-link {
+    @apply relative;
+  }
+
+  .nav-link::after {
+    content: '';
+    @apply absolute bottom-0 left-1/2 w-0 h-0.5 rounded-full transition-all duration-200;
+    background: hsl(var(--primary));
+    transform: translateX(-50%);
+  }
+
+  .nav-link:hover::after,
+  .nav-link.active::after {
+    @apply w-full;
+  }
+
+  /* Status indicator glow */
+  .status-valid {
+    box-shadow: 0 0 0 3px hsl(142 76% 36% / 0.15);
+  }
+
+  .status-invalid {
+    box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15);
+  }
+
+  /* Subtle gradient text */
+  .text-gradient {
+    @apply bg-clip-text text-transparent;
+    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.7));
+  }
+}
+
+@layer utilities {
+  /* Focus ring with brand color */
+  .focus-brand:focus-visible {
+    @apply outline-none ring-2 ring-offset-2;
+    ring-color: hsl(var(--primary));
   }
 }
diff --git a/src/utils/activationKey.ts b/src/utils/activationKey.ts
index bdb4f8f..0f551cb 100644
--- a/src/utils/activationKey.ts
+++ b/src/utils/activationKey.ts
@@ -25,6 +25,128 @@ export const getJwtMetadata = (token: string): ActivationKeyMetadata | null => {
   }
 };
 
+export interface AkValidationError {
+  isValid: false;
+  errorType: 'empty' | 'format' | 'header' | 'payload' | 'structure';
+  message: string;
+  details?: string;
+}
+
+export interface AkValidationSuccess {
+  isValid: true;
+  metadata: ActivationKeyMetadata;
+}
+
+export type AkValidationResult = AkValidationError | AkValidationSuccess;
+
+/**
+ * Validates an activation key format with verbose error messages
+ */
+export const validateActivationKeyFormat = (token: string): AkValidationResult => {
+  const trimmedToken = token.trim();
+
+  // Check if empty
+  if (!trimmedToken) {
+    return {
+      isValid: false,
+      errorType: 'empty',
+      message: 'Activation key is required',
+      details: 'Please paste a valid activation key in the input field.'
+    };
+  }
+
+  // Check basic structure (should have 3 parts separated by dots)
+  const parts = trimmedToken.split('.');
+  if (parts.length !== 3) {
+    return {
+      isValid: false,
+      errorType: 'structure',
+      message: 'Invalid activation key structure',
+      details: `Expected 3 parts separated by dots (header.payload.signature), but found ${parts.length} part${parts.length === 1 ? '' : 's'}. Make sure you copied the complete activation key.`
+    };
+  }
+
+  // Check if parts are valid base64url
+  const [headerPart, payloadPart, signaturePart] = parts;
+
+  // Validate header
+  try {
+    const headerJson = atob(headerPart.replace(/-/g, '+').replace(/_/g, '/'));
+    const header = JSON.parse(headerJson);
+
+    if (!header.alg) {
+      return {
+        isValid: false,
+        errorType: 'header',
+        message: 'Missing algorithm in header',
+        details: 'The activation key header is missing the "alg" (algorithm) field. This is required for signature verification.'
+      };
+    }
+
+    // Validate typ if present - it should be 'JWT' or absent
+    if (header.typ !== undefined && header.typ !== 'JWT') {
+      return {
+        isValid: false,
+        errorType: 'header',
+        message: 'Invalid token type in header',
+        details: `Expected type "JWT" but found "${header.typ}".`
+      };
+    }
+  } catch (e) {
+    return {
+      isValid: false,
+      errorType: 'header',
+      message: 'Invalid activation key header',
+      details: 'The header section could not be decoded. It should be valid base64url-encoded JSON. The activation key may be corrupted or truncated.'
+    };
+  }
+
+  // Validate payload
+  try {
+    const payloadJson = atob(payloadPart.replace(/-/g, '+').replace(/_/g, '/'));
+    JSON.parse(payloadJson);
+  } catch (e) {
+    return {
+      isValid: false,
+      errorType: 'payload',
+      message: 'Invalid activation key payload',
+      details: 'The payload section could not be decoded. It should be valid base64url-encoded JSON. The activation key may be corrupted or truncated.'
+    };
+  }
+
+  // Validate signature exists (jose library handles detailed validation)
+  if (!signaturePart) {
+    return {
+      isValid: false,
+      errorType: 'structure',
+      message: 'Missing signature',
+      details: 'The signature section is missing. Make sure you copied the complete activation key.'
+    };
+  }
+
+  // If we get here, try to extract full metadata
+  try {
+    const decoded = jose.decodeJwt(trimmedToken);
+    const header = jose.decodeProtectedHeader(trimmedToken);
+
+    return {
+      isValid: true,
+      metadata: {
+        algorithm: header.alg ?? null,
+        issuedAt: decoded.iat ? new Date(decoded.iat * 1000) : null,
+        expiresAt: decoded.exp ? new Date(decoded.exp * 1000) : null,
+      }
+    };
+  } catch (e) {
+    return {
+      isValid: false,
+      errorType: 'format',
+      message: 'Failed to parse activation key',
+      details: e instanceof Error ? e.message : 'An unexpected error occurred while parsing the activation key.'
+    };
+  }
+};
+
 export const formatRelativeTime = (date: Date | null, isExpiry = false): string => {
   if (!date) return 'Not specified';
 
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
new file mode 100644
index 0000000..7dcaa9d
--- /dev/null
+++ b/src/utils/validation.ts
@@ -0,0 +1,113 @@
+import { KeyPair } from '../types/activationKey';
+
+// Validation constants
+const MIN_NAME_LENGTH = 2;
+const MAX_NAME_LENGTH = 100;
+
+export interface KeyPairValidationErrors {
+  name?: string;
+  publicKey?: string;
+  privateKey?: string;
+}
+
+/**
+ * Validates private key format
+ * Returns error message if invalid, null if valid
+ */
+export function validatePrivateKeyFormat(key: string): string | null {
+  const trimmed = key.trim();
+
+  if (!trimmed) {
+    return 'Private key is required';
+  }
+
+  if (trimmed.includes('-----BEGIN EC PRIVATE KEY-----')) {
+    return 'SEC1 private key format detected. Please convert to PKCS#8 format using:\nopenssl pkcs8 -topk8 -nocrypt -in sec1-key.pem -out pkcs8-key.pem';
+  }
+
+  if (!trimmed.includes('-----BEGIN PRIVATE KEY-----')) {
+    return "Invalid private key format. Key must be in PKCS#8 PEM format (starting with '-----BEGIN PRIVATE KEY-----')";
+  }
+
+  return null;
+}
+
+/**
+ * Validates public key format
+ * Returns error message if invalid, null if valid
+ */
+export function validatePublicKeyFormat(key: string): string | null {
+  const trimmed = key.trim();
+
+  if (!trimmed) {
+    return 'Public key is required';
+  }
+
+  if (!trimmed.includes('-----BEGIN PUBLIC KEY-----')) {
+    return "Invalid public key format. Key must start with '-----BEGIN PUBLIC KEY-----'";
+  }
+
+  return null;
+}
+
+/**
+ * Validates a key pair name
+ * Returns error message if invalid, null if valid
+ */
+export function validateKeyPairName(name: string): string | null {
+  const trimmed = name.trim();
+
+  if (!trimmed) {
+    return 'Name is required';
+  }
+
+  if (trimmed.length < MIN_NAME_LENGTH) {
+    return `Name must be at least ${MIN_NAME_LENGTH} characters`;
+  }
+
+  if (trimmed.length > MAX_NAME_LENGTH) {
+    return `Name must be less than ${MAX_NAME_LENGTH} characters`;
+  }
+
+  return null;
+}
+
+/**
+ * Validates an entire key pair object
+ * Returns an object with field-specific errors, empty object if all valid
+ */
+export function validateKeyPair(keyPair: Partial<KeyPair>): KeyPairValidationErrors {
+  const errors: KeyPairValidationErrors = {};
+
+  const nameError = validateKeyPairName(keyPair.name ?? '');
+  if (nameError) {
+    errors.name = nameError;
+  }
+
+  const publicKeyError = validatePublicKeyFormat(keyPair.publicKey ?? '');
+  if (publicKeyError) {
+    errors.publicKey = publicKeyError;
+  }
+
+  const privateKeyError = validatePrivateKeyFormat(keyPair.privateKey ?? '');
+  if (privateKeyError) {
+    errors.privateKey = privateKeyError;
+  }
+
+  return errors;
+}
+
+/**
+ * Check if validation errors object has any errors
+ */
+export function hasValidationErrors(errors: KeyPairValidationErrors): boolean {
+  return Object.keys(errors).length > 0;
+}
+
+/**
+ * Get first error message from validation errors (useful for simple alert display)
+ */
+export function getFirstError(errors: KeyPairValidationErrors): string | null {
+  const firstKey = Object.keys(errors)[0] as keyof KeyPairValidationErrors | undefined;
+  return firstKey ? errors[firstKey] ?? null : null;
+}
diff --git a/vite.config.ts b/vite.config.ts
index be139b4..0dc6b4a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,8 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react()],
+  // Use VITE_BASE_PATH for PR previews, default to '/' for local dev
+  base: process.env.VITE_BASE_PATH || '/',
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),