diff --git a/frontend/src/components/PanicListener.tsx b/frontend/src/components/PanicListener.tsx
index 80564ea..c080394 100644
--- a/frontend/src/components/PanicListener.tsx
+++ b/frontend/src/components/PanicListener.tsx
@@ -143,8 +143,8 @@ const PanicListener: React.FC<PanicListenerProps> = ({ onPanic }) => {
         if (currentKeys.length !== shortcut.length) return;
 
         // Sort and compare
-        const normalizedPressed = currentKeys.map(k => k.toLowerCase()).sort();
-        const normalizedShortcut = shortcut.map(k => k.toLowerCase()).sort();
+        const normalizedPressed = (currentKeys ?? []).map(k => k.toLowerCase()).sort((a, b) => a - b);
+        const normalizedShortcut = shortcut.map(k => k.toLowerCase()).sort((a, b) => a - b);
 
         const matches = normalizedPressed.every((key, index) => key === normalizedShortcut[index]);
         
diff --git a/frontend/src/features/docs/components/DocViewer.tsx b/frontend/src/features/docs/components/DocViewer.tsx
index bc4cef4..a325ad7 100644
--- a/frontend/src/features/docs/components/DocViewer.tsx
+++ b/frontend/src/features/docs/components/DocViewer.tsx
@@ -315,262 +315,4 @@ let mermaidPromise: Promise<typeof import('mermaid').default> | null = null;
 const loadMermaid = () => {
   if (!mermaidPromise) {
     mermaidPromise = import('mermaid').then(({ default: mermaid }) => {
-      mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'strict' });
-      return mermaid;
-    });
-  }
-  return mermaidPromise;
-};
-
-let mermaidIdCounter = 0;
-
-const MermaidDiagram = React.memo(({ chart }: { chart: string }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const idRef = useRef<string>(`mermaid-diagram-${++mermaidIdCounter}`);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const render = async () => {
-      if (!ref.current) return;
-
-      // Clean up orphaned mermaid SVG from a previous render with the same ID
-      const old = document.getElementById(idRef.current);
-      if (old) old.remove();
-
-      try {
-        const mermaid = await loadMermaid();
-        if (cancelled || !ref.current) return;
-        const { svg, bindFunctions } = await mermaid.render(idRef.current, chart);
-        if (!cancelled && ref.current) {
-          ref.current.innerHTML = svg;
-          bindFunctions?.(ref.current);
-        }
-      } catch (err) {
-        console.error('Mermaid render error:', err);
-        if (!cancelled && ref.current) {
-          // XSS-safe error rendering - use textContent, never innerHTML with user input
-          ref.current.innerHTML = '';
-          const pre = document.createElement('pre');
-          pre.style.cssText = 'color:#f87171;font-size:12px;padding:8px;border:1px solid #f87171;border-radius:4px;white-space:pre-wrap;';
-          pre.textContent = `Diagram parse error: ${err}`;
-          ref.current.appendChild(pre);
-        }
-      }
-    };
-    render();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [chart]);
-
-  return <div ref={ref} className="my-6 overflow-x-auto" />;
-});
-
-MermaidDiagram.displayName = 'MermaidDiagram';
-
-// ============================================================================
-// Main DocViewer Component
-// ============================================================================
-
-const DocViewer: React.FC<DocViewerProps> = ({ filename, onContentLoad }) => {
-  const [content, setContent] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-  const [notFound, setNotFound] = useState<boolean>(false);
-
-  const fetchDocument = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    setNotFound(false);
-
-    try {
-      const response = await fetch(`/docs/${filename}`);
-      
-      if (!response.ok) {
-        if (response.status === 404) {
-          setNotFound(true);
-          return;
-        }
-        throw new Error(`Failed to fetch document (${response.status})`);
-      }
-
-      const text = await response.text();
-      setContent(text);
-      onContentLoad?.(text);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An unexpected error occurred');
-    } finally {
-      setLoading(false);
-    }
-  }, [filename, onContentLoad]);
-
-  useEffect(() => {
-    fetchDocument();
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }, [fetchDocument]);
-
-  if (loading) return <DocSkeleton />;
-  if (notFound) return <DocNotFound filename={filename} />;
-  if (error) return <DocError error={error} onRetry={fetchDocument} />;
-
-  return (
-    <article className="doc-content">
-      <ReactMarkdown 
-        remarkPlugins={[remarkGfm]}
-        components={{
-          // Headings with IDs for ToC linking
-          h1: ({ children }) => {
-            const id = String(children).toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
-            return (
-              <h1 id={id} className="text-3xl lg:text-4xl font-bold text-slate-900 dark:text-white tracking-tight border-b border-slate-200 dark:border-zinc-800 pb-4 mb-8">
-                {children}
-              </h1>
-            );
-          },
-          h2: ({ children }) => {
-            const id = String(children).toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
-            return (
-              <h2 id={id} className="text-2xl lg:text-3xl font-bold text-slate-900 dark:text-white tracking-tight mt-12 mb-6 scroll-mt-24">
-                {children}
-              </h2>
-            );
-          },
-          h3: ({ children }) => {
-            const id = String(children).toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
-            return (
-              <h3 id={id} className="text-xl lg:text-2xl font-semibold text-slate-900 dark:text-white tracking-tight mt-8 mb-4 scroll-mt-24">
-                {children}
-              </h3>
-            );
-          },
-          h4: ({ children }) => (
-            <h4 className="text-lg font-semibold text-slate-900 dark:text-white mt-6 mb-3">
-              {children}
-            </h4>
-          ),
-          
-          // Paragraphs
-          p: ({ children }) => (
-            <p className="text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-              {children}
-            </p>
-          ),
-          
-          // Code blocks with syntax highlighting
-          code: ({ node, className, children, ...props }) => {
-            const match = /language-(\w+)/.exec(className || '');
-            const language = match?.[1];
-            const isInline = !match && !className;
-
-            // Intercept mermaid code blocks and render as diagrams
-            if (language === 'mermaid') {
-              return <MermaidDiagram chart={String(children)} />;
-            }
-
-            if (isInline) {
-              return (
-                <code className="px-1.5 py-0.5 text-sm font-mono bg-slate-100 dark:bg-zinc-800 text-pink-600 dark:text-pink-400 rounded" {...props}>
-                  {children}
-                </code>
-              );
-            }
-
-            return (
-              <CodeBlock language={language || ''}>
-                {String(children).replace(/\n$/, '')}
-              </CodeBlock>
-            );
-          },
-          
-          // Pre wrapper (handled by code block)
-          pre: ({ children }) => <>{children}</>,
-          
-          // Links
-          a: ({ href, children }) => <DocLink href={href}>{children}</DocLink>,
-          
-          // Lists
-          ul: ({ children }) => (
-            <ul className="list-disc list-outside ml-6 mb-4 space-y-2 text-slate-600 dark:text-slate-400">
-              {children}
-            </ul>
-          ),
-          ol: ({ children }) => (
-            <ol className="list-decimal list-outside ml-6 mb-4 space-y-2 text-slate-600 dark:text-slate-400">
-              {children}
-            </ol>
-          ),
-          li: ({ children }) => (
-            <li className="leading-relaxed">{children}</li>
-          ),
-          
-          // Blockquotes (with callout detection)
-          blockquote: ({ children }) => {
-            // Check if it's a callout syntax
-            const text = String(children);
-            const calloutMatch = text.match(/\[!(NOTE|TIP|WARNING|DANGER|INFO)\]/i);
-            
-            if (calloutMatch) {
-              const type = calloutMatch[1].toLowerCase() as CalloutType;
-              const content = text.replace(/\[!(NOTE|TIP|WARNING|DANGER|INFO)\]/i, '').trim();
-              return <Callout type={type}>{content}</Callout>;
-            }
-            
-            return (
-              <blockquote className="border-l-4 border-indigo-500 bg-indigo-50 dark:bg-indigo-500/10 rounded-r-lg pl-4 pr-4 py-3 my-6 text-slate-700 dark:text-slate-300 italic">
-                {children}
-              </blockquote>
-            );
-          },
-          
-          // Tables
-          table: ({ children }) => (
-            <div className="overflow-x-auto my-6 rounded-xl border border-slate-200 dark:border-zinc-800">
-              <table className="min-w-full divide-y divide-slate-200 dark:divide-zinc-800">
-                {children}
-              </table>
-            </div>
-          ),
-          thead: ({ children }) => (
-            <thead className="bg-slate-50 dark:bg-zinc-800/50">{children}</thead>
-          ),
-          th: ({ children }) => (
-            <th className="px-4 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">
-              {children}
-            </th>
-          ),
-          td: ({ children }) => (
-            <td className="px-4 py-3 text-sm text-slate-600 dark:text-slate-400 border-t border-slate-200 dark:border-zinc-800">
-              {children}
-            </td>
-          ),
-          
-          // Horizontal rule
-          hr: () => <hr className="my-8 border-slate-200 dark:border-zinc-800" />,
-          
-          // Images
-          img: ({ src, alt }) => (
-            <img
-              src={src}
-              alt={alt}
-              className="rounded-xl shadow-lg my-6 max-w-full"
-            />
-          ),
-          
-          // Strong & Em
-          strong: ({ children }) => (
-            <strong className="font-semibold text-slate-900 dark:text-white">{children}</strong>
-          ),
-          em: ({ children }) => (
-            <em className="italic">{children}</em>
-          ),
-        }}
-      >
-        {content}
-      </ReactMarkdown>
-    </article>
-  );
-};
-
-export default DocViewer;
+    .catch(err => console.error(err))
\ No newline at end of file
diff --git a/frontend/src/pages/OrganizationPage.tsx b/frontend/src/pages/OrganizationPage.tsx
index 9f72d30..660710e 100644
--- a/frontend/src/pages/OrganizationPage.tsx
+++ b/frontend/src/pages/OrganizationPage.tsx
@@ -14,7 +14,7 @@ const OrganizationPage: React.FC = () => {
   // Create a placeholder organization object
   // ProfileManager will fetch actual data
   const organization: Organization = {
-    id: parseInt(id || '0'),
+    id: parseInt(id || '0', 10),
     category: categoryId,
     name: '', // Will be loaded by ProfileManager
     logo_url: null,
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 36c4427..d5eea07 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -131,283 +131,4 @@ const RegisterPage: React.FC = () => {
         setIsCheckingUsername(true);
         const timerId = setTimeout(() => {
             checkUsername(username).then(data => {
-                setIsUsernameAvailable(!data.exists);
-                setIsCheckingUsername(false);
-            });
-        }, 500);
-        return () => clearTimeout(timerId);
-    }, [username]);
-
-    useEffect(() => {
-        const errors: string[] = [];
-        if (password.length < 8) errors.push("At least 8 characters");
-        if (!/[a-z]/.test(password)) errors.push("At least one lowercase letter");
-        if (!/[A-Z]/.test(password)) errors.push("At least one uppercase letter");
-        if (!/[0-9]/.test(password)) errors.push("At least one number");
-        if (!/[\W_]/.test(password)) errors.push("At least one special character");
-        setPasswordErrors(errors);
-    }, [password]);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError(null);
-        setSuccess(null);
-
-        if (!turnstileToken) {
-            setError('Please complete the verification challenge.');
-            return;
-        }
-
-        if (password !== password2) {
-            setError('Passwords do not match');
-            return;
-        }
-        if (passwordErrors.length > 0) {
-            setError('Please fix the errors in your password.');
-            return;
-        }
-        if (isUsernameAvailable === false) {
-            setError('This username is already taken.');
-            return;
-        }
-
-        setIsLoading(true);
-        try {
-            // Generate recovery key (for backup purposes)
-            const { recoveryKey: generatedRecoveryKey } = await initializeUserEncryption();
-            
-            // Register account (generates salt internally and returns it)
-            const registerResponse = await register(username, email, password, password2, turnstileToken);
-            const salt = registerResponse.salt;
-            setSuccess('Account created successfully!');
-            
-            // Store recovery key
-            storeKeyData(salt, generatedRecoveryKey);
-            
-            // Set auth token (already done by register function)
-            const authToken = registerResponse.key || registerResponse.token;
-            if (authToken) {
-                setToken(authToken);
-                
-                // Show recovery key modal
-                setRecoveryKey(generatedRecoveryKey);
-                setShowRecoveryModal(true);
-            } else {
-                setError('Registration succeeded but auto-login failed. Please log in manually.');
-            }
-        } catch (err: unknown) {
-            const axiosError = err as { response?: { data?: { username?: string[]; email?: string[]; password?: string[]; error?: string } }; message?: string };
-            if (axiosError.response?.data) {
-                const errors = axiosError.response.data;
-                const errorMessage = errors.username?.[0] || errors.email?.[0] || errors.password?.[0] || errors.error || 'Registration failed.';
-                setError(errorMessage);
-            } else {
-                setError(axiosError.message || 'An unexpected error occurred.');
-            }
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleRecoveryKeyConfirm = () => {
-        setShowRecoveryModal(false);
-        navigate('/', { replace: true });
-    };
-
-    const renderUsernameFeedback = () => {
-        if (!username) return null;
-        if (isCheckingUsername) {
-            return (
-                <p className="text-xs text-zinc-500 mt-1.5 flex items-center">
-                    <svg className="animate-spin h-3 w-3 mr-1.5" fill="none" viewBox="0 0 24 24">
-                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    Checking availability...
-                </p>
-            );
-        }
-        if (isUsernameAvailable === true) return <p className="text-xs text-green-400 mt-1.5 flex items-center"><CheckIcon /><span className="ml-1">Username is available</span></p>;
-        if (isUsernameAvailable === false) return <p className="text-xs text-red-400 mt-1.5 flex items-center"><XIcon /><span className="ml-1">Username is already taken</span></p>;
-        return null;
-    };
-    
-    const renderPasswordFeedback = () => {
-        if (!password) return null;
-        const requirements = [
-            { text: "8+ characters", valid: password.length >= 8 },
-            { text: "Lowercase", valid: /[a-z]/.test(password) },
-            { text: "Uppercase", valid: /[A-Z]/.test(password) },
-            { text: "Number", valid: /[0-9]/.test(password) },
-            { text: "Special char", valid: /[\W_]/.test(password) },
-        ];
-
-        return (
-            <div className="mt-2 flex flex-wrap gap-1.5 sm:gap-2">
-                {requirements.map(req => (
-                    <span 
-                        key={req.text} 
-                        className={`inline-flex items-center text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full ${
-                            req.valid 
-                                ? 'bg-green-500/10 text-green-400 border border-green-500/30' 
-                                : 'bg-zinc-800 text-zinc-500 border border-zinc-700'
-                        }`}
-                    >
-                        {req.valid ? <CheckIcon /> : <XIcon />}
-                        <span className="ml-0.5 sm:ml-1 whitespace-nowrap">{req.text}</span>
-                    </span>
-                ))}
-            </div>
-        );
-    };
-
-    return (
-        <div className="min-h-screen flex items-start sm:items-center justify-center px-4 py-8 sm:py-12 bg-white dark:bg-[#09090b] pt-8 sm:pt-0">
-            <div className="w-full max-w-md">
-                {/* Logo and Title */}
-                <div className="text-center mb-6 sm:mb-8">
-                    <div className="flex justify-center mb-4 sm:mb-5">
-                        <ShieldIcon />
-                    </div>
-                    <h1 className="text-xl sm:text-2xl font-bold text-zinc-900 dark:text-white">Create an account</h1>
-                    <p className="mt-1.5 sm:mt-2 text-xs sm:text-sm text-zinc-600 dark:text-zinc-400">Start securing your credentials today</p>
-                </div>
-
-                {/* Card */}
-                <div className="w-full bg-transparent p-0 md:bg-white md:dark:bg-zinc-900/40 md:backdrop-blur-md md:border md:border-zinc-200 md:dark:border-zinc-800/50 md:rounded-2xl md:shadow-xl md:dark:shadow-2xl md:dark:shadow-black/20 md:p-8">
-                    {success && (
-                        <div className="as-alert-success mb-6">
-                            <CheckIcon />
-                            <span className="ml-2">{success}</span>
-                        </div>
-                    )}
-                    
-                    {error && (
-                        <div className="as-alert-danger mb-6">
-                            <XIcon />
-                            <span className="ml-2">{error}</span>
-                        </div>
-                    )}
-
-                    <form onSubmit={handleSubmit} noValidate className="space-y-4">
-                        <div>
-                            <label htmlFor="username" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Username</label>
-                            <div className="relative">
-                                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                    <UserIcon />
-                                </div>
-                                <input
-                                    type="text"
-                                    id="username"
-                                    value={username}
-                                    onChange={(e) => setUsername(e.target.value)}
-                                    className="as-input pl-10 h-11 md:h-12"
-                                    placeholder="Choose a username"
-                                    required
-                                />
-                            </div>
-                            {renderUsernameFeedback()}
-                        </div>
-
-                        <div>
-                            <label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Email</label>
-                            <div className="relative">
-                                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                    <EmailIcon />
-                                </div>
-                                <input
-                                    type="email"
-                                    id="email"
-                                    value={email}
-                                    onChange={(e) => setEmail(e.target.value)}
-                                    className="as-input pl-10 h-11 md:h-12"
-                                    placeholder="Enter your email"
-                                    required
-                                />
-                            </div>
-                        </div>
-
-                        <div>
-                            <label htmlFor="password" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Password</label>
-                            <PasswordInput
-                                id="password"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="h-11 md:h-12"
-                                placeholder="Create a password"
-                                autoComplete="new-password"
-                                showLeftIcon
-                                required
-                            />
-                            {renderPasswordFeedback()}
-                        </div>
-
-                        <div>
-                            <label htmlFor="password2" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Confirm Password</label>
-                            <PasswordInput
-                                id="password2"
-                                value={password2}
-                                onChange={(e) => setPassword2(e.target.value)}
-                                className="h-11 md:h-12"
-                                placeholder="Confirm your password"
-                                autoComplete="new-password"
-                                showLeftIcon
-                                required
-                            />
-                            {password2 && password !== password2 && (
-                                <p className="text-xs text-red-500 mt-1.5 flex items-center"><XIcon /><span className="ml-1">Passwords do not match</span></p>
-                            )}
-                        </div>
-
-                        {/* Cloudflare Turnstile */}
-                        <div className="flex justify-center py-2">
-                            <div ref={turnstileRef} className="transform scale-90 sm:scale-100"></div>
-                        </div>
-
-                        <button 
-                            type="submit" 
-                            disabled={isLoading || !turnstileToken}
-                            className="w-full as-btn-primary py-3 mt-2 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                        >
-                            {isLoading ? (
-                                <>
-                                    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
-                                    <span>Creating account...</span>
-                                </>
-                            ) : (
-                                <span>Create account</span>
-                            )}
-                        </button>
-                    </form>
-
-                    <div className="mt-6 pt-6 border-t border-zinc-800 text-center">
-                        <p className="text-sm text-zinc-400">
-                            Already have an account?{' '}
-                            <Link to="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
-                                Sign in
-                            </Link>
-                        </p>
-                    </div>
-                </div>
-                
-                {/* Footer */}
-                <p className="mt-6 text-center text-xs text-zinc-600">
-                    Protected by end-to-end encryption
-                </p>
-            </div>
-
-            {/* Recovery Key Modal */}
-            <RecoveryKeyModal
-                isOpen={showRecoveryModal}
-                recoveryKey={recoveryKey}
-                username={username}
-                onConfirm={handleRecoveryKeyConfirm}
-            />
-        </div>
-    );
-};
-
-export default RegisterPage;
+            .catch(err => console.error(err))
\ No newline at end of file
diff --git a/frontend/src/services/securityService.ts b/frontend/src/services/securityService.ts
index 3cd05a8..fd5b621 100644
--- a/frontend/src/services/securityService.ts
+++ b/frontend/src/services/securityService.ts
@@ -87,7 +87,7 @@ export const updatePasswordHash = async (
   const msgBuffer = new TextEncoder().encode(password);
   const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+  const hashHex = (hashArray ?? []).map(b => b.toString(16).padStart(2, '0')).join('');
   
   await apiClient.post(`/security/profiles/${profileId}/hash/`, {
     password_hash: hashHex
@@ -161,7 +161,7 @@ export const checkPasswordBreach = async (
       if (hashSuffix.trim() === suffix) {
         return {
           isBreached: true,
-          breachCount: parseInt(count.trim(), 10)
+          breachCount: parseInt(count.trim(, 10), 10)
         };
       }
     }