diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 16aec3f..92d7daf 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -1,7 +1,6 @@
 {
   "env": {
     "browser": true,
-    "es2021": true,
     "jest": true
   },
   "extends": [
diff --git a/frontend/prettier b/frontend/.prettierrc
similarity index 100%
rename from frontend/prettier
rename to frontend/.prettierrc
diff --git a/frontend/package.json b/frontend/package.json
index e1beaca..82b4af4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,8 +51,8 @@
     "start": "WDS_SOCKET_HOST=backstory-beta.ketrenos.com WDS_SOCKET_PORT=443 craco start",
     "build": "craco build",
     "test": "craco test",
-    "lint": "eslint src/**/*.{ts,tsx}",
-    "lint:fix": "eslint src/**/*.{ts,tsx} --fix",
+    "lint": "eslint src/**/*.{ts,tsx} --no-color",
+    "lint:fix": "eslint src/**/*.{ts,tsx} --fix --no-color",
     "format": "prettier --write src/**/*.{ts,tsx}"
   },
   "eslintConfig": {
diff --git a/frontend/src/BackstoryApp.tsx b/frontend/src/BackstoryApp.tsx
index fc42cfd..2206826 100644
--- a/frontend/src/BackstoryApp.tsx
+++ b/frontend/src/BackstoryApp.tsx
@@ -1,67 +1,53 @@
-import React, { useEffect, useState, useRef, JSX } from "react";
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
-import { ThemeProvider } from "@mui/material/styles";
-import { backstoryTheme } from "./BackstoryTheme";
+import React, { useEffect, useState, useRef, JSX } from 'react';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { ThemeProvider } from '@mui/material/styles';
+import { backstoryTheme } from './BackstoryTheme';
 
-import { ConversationHandle } from "components/Conversation";
-import { CandidateRoute } from "routes/CandidateRoute";
-import { BackstoryLayout } from "components/layout/BackstoryLayout";
-import { ChatQuery } from "types/types";
-import { AuthProvider } from "hooks/AuthContext";
-import { AppStateProvider } from "hooks/GlobalContext";
+import { ConversationHandle } from 'components/Conversation';
+import { CandidateRoute } from 'routes/CandidateRoute';
+import { BackstoryLayout } from 'components/layout/BackstoryLayout';
+import { ChatQuery } from 'types/types';
+import { AuthProvider } from 'hooks/AuthContext';
+import { AppStateProvider } from 'hooks/GlobalContext';
 
-import "./BackstoryApp.css";
-import "@fontsource/roboto/300.css";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/500.css";
-import "@fontsource/roboto/700.css";
+import './BackstoryApp.css';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 
 const BackstoryApp = (): JSX.Element => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const chatRef = useRef<ConversationHandle>(null);
-    const submitQuery = (query: ChatQuery): void => {
-        console.log(
-            `handleSubmitChatQuery:`,
-            query,
-            chatRef.current ? " sending" : "no handler"
-        );
-        chatRef.current?.submitQuery(query);
-        navigate("/chat");
-    };
-    const [page, setPage] = useState<string>("");
+  const navigate = useNavigate();
+  const location = useLocation();
+  const chatRef = useRef<ConversationHandle>(null);
+  const submitQuery = (query: ChatQuery): void => {
+    console.log(`handleSubmitChatQuery:`, query, chatRef.current ? ' sending' : 'no handler');
+    chatRef.current?.submitQuery(query);
+    navigate('/chat');
+  };
+  const [page, setPage] = useState<string>('');
 
-    useEffect(() => {
-        const currentRoute = location.pathname.split("/")[1]
-            ? `/${location.pathname.split("/")[1]}`
-            : "/";
-        setPage(currentRoute);
-    }, [location.pathname]);
+  useEffect(() => {
+    const currentRoute = location.pathname.split('/')[1]
+      ? `/${location.pathname.split('/')[1]}`
+      : '/';
+    setPage(currentRoute);
+  }, [location.pathname]);
 
-    // Render appropriate routes based on user type
-    return (
-        <ThemeProvider theme={backstoryTheme}>
-            <AuthProvider>
-                <AppStateProvider>
-                    <Routes>
-                        <Route
-                            path="/u/:username"
-                            element={<CandidateRoute />}
-                        />
-                        {/* Static/shared routes */}
-                        <Route
-                            path="/*"
-                            element={
-                                <BackstoryLayout
-                                    {...{ page, chatRef, submitQuery }}
-                                />
-                            }
-                        />
-                    </Routes>
-                </AppStateProvider>
-            </AuthProvider>
-        </ThemeProvider>
-    );
+  // Render appropriate routes based on user type
+  return (
+    <ThemeProvider theme={backstoryTheme}>
+      <AuthProvider>
+        <AppStateProvider>
+          <Routes>
+            <Route path="/u/:username" element={<CandidateRoute />} />
+            {/* Static/shared routes */}
+            <Route path="/*" element={<BackstoryLayout {...{ page, chatRef, submitQuery }} />} />
+          </Routes>
+        </AppStateProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  );
 };
 
 export { BackstoryApp };
diff --git a/frontend/src/BackstoryTheme.tsx b/frontend/src/BackstoryTheme.tsx
index cc80def..08a09b8 100644
--- a/frontend/src/BackstoryTheme.tsx
+++ b/frontend/src/BackstoryTheme.tsx
@@ -1,76 +1,76 @@
-import { createTheme } from "@mui/material/styles";
+import { createTheme } from '@mui/material/styles';
 
 const backstoryTheme = createTheme({
   palette: {
     primary: {
-      main: "#1A2536", // Midnight Blue
-      contrastText: "#D3CDBF", // Warm Gray
+      main: '#1A2536', // Midnight Blue
+      contrastText: '#D3CDBF', // Warm Gray
     },
     secondary: {
-      main: "#4A7A7D", // Dusty Teal
-      contrastText: "#FFFFFF", // White
+      main: '#4A7A7D', // Dusty Teal
+      contrastText: '#FFFFFF', // White
     },
     text: {
-      primary: "#2E2E2E", // Charcoal Black
-      secondary: "#1A2536", // Midnight Blue
+      primary: '#2E2E2E', // Charcoal Black
+      secondary: '#1A2536', // Midnight Blue
     },
     background: {
-      default: "#D3CDBF", // Warm Gray
-      paper: "#FFFFFF", // White
+      default: '#D3CDBF', // Warm Gray
+      paper: '#FFFFFF', // White
     },
     action: {
-      active: "#D4A017", // Golden Ochre
-      hover: "rgba(212, 160, 23, 0.1)", // Golden Ochre with opacity
+      active: '#D4A017', // Golden Ochre
+      hover: 'rgba(212, 160, 23, 0.1)', // Golden Ochre with opacity
     },
     custom: {
-      highlight: "#D4A017", // Golden Ochre
-      contrast: "#2E2E2E", // Charcoal Black
+      highlight: '#D4A017', // Golden Ochre
+      contrast: '#2E2E2E', // Charcoal Black
     },
   },
   typography: {
     fontFamily: "'Roboto', sans-serif",
     h1: {
-      fontSize: "2rem",
+      fontSize: '2rem',
       fontWeight: 500,
-      color: "#2E2E2E", // Charcoal Black
+      color: '#2E2E2E', // Charcoal Black
     },
     h2: {
-      fontSize: "1.75rem",
+      fontSize: '1.75rem',
       fontWeight: 500,
-      color: "#2E2E2E", // Charcoal Black
-      marginBottom: "1rem",
+      color: '#2E2E2E', // Charcoal Black
+      marginBottom: '1rem',
     },
     h3: {
-      fontSize: "1.5rem",
+      fontSize: '1.5rem',
       fontWeight: 500,
-      color: "#2E2E2E", // Charcoal Black
-      marginBottom: "0.75rem",
+      color: '#2E2E2E', // Charcoal Black
+      marginBottom: '0.75rem',
     },
     h4: {
-      fontSize: "1.25rem",
+      fontSize: '1.25rem',
       fontWeight: 500,
-      color: "#2E2E2E", // Charcoal Black
-      marginBottom: "0.5rem",
+      color: '#2E2E2E', // Charcoal Black
+      marginBottom: '0.5rem',
     },
     body1: {
-      fontSize: "1rem",
-      color: "#2E2E2E", // Charcoal Black
-      marginBottom: "0.5rem",
+      fontSize: '1rem',
+      color: '#2E2E2E', // Charcoal Black
+      marginBottom: '0.5rem',
     },
     body2: {
-      fontSize: "0.875rem",
-      color: "#2E2E2E", // Charcoal Black
+      fontSize: '0.875rem',
+      color: '#2E2E2E', // Charcoal Black
     },
   },
   components: {
     MuiLink: {
       styleOverrides: {
         root: {
-          color: "#4A7A7D", // Dusty Teal (your secondary color)
-          textDecoration: "none",
-          "&:hover": {
-            color: "#D4A017", // Golden Ochre on hover
-            textDecoration: "underline",
+          color: '#4A7A7D', // Dusty Teal (your secondary color)
+          textDecoration: 'none',
+          '&:hover': {
+            color: '#D4A017', // Golden Ochre on hover
+            textDecoration: 'underline',
           },
         },
       },
@@ -78,9 +78,9 @@ const backstoryTheme = createTheme({
     MuiButton: {
       styleOverrides: {
         root: {
-          textTransform: "none",
-          "&:hover": {
-            backgroundColor: "rgba(212, 160, 23, 0.2)", // Golden Ochre hover
+          textTransform: 'none',
+          '&:hover': {
+            backgroundColor: 'rgba(212, 160, 23, 0.2)', // Golden Ochre hover
           },
         },
       },
@@ -88,7 +88,7 @@ const backstoryTheme = createTheme({
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: "#1A2536", // Midnight Blue
+          backgroundColor: '#1A2536', // Midnight Blue
         },
       },
     },
@@ -96,23 +96,23 @@ const backstoryTheme = createTheme({
       styleOverrides: {
         root: {
           // padding: '0.5rem',
-          borderRadius: "4px",
+          borderRadius: '4px',
         },
       },
     },
     MuiList: {
       styleOverrides: {
         root: {
-          padding: "0.5rem",
+          padding: '0.5rem',
         },
       },
     },
     MuiListItem: {
       styleOverrides: {
         root: {
-          borderRadius: "4px",
-          "&:hover": {
-            backgroundColor: "rgba(212, 160, 23, 0.1)", // Golden Ochre with opacity
+          borderRadius: '4px',
+          '&:hover': {
+            backgroundColor: 'rgba(212, 160, 23, 0.1)', // Golden Ochre with opacity
           },
         },
       },
diff --git a/frontend/src/components/BackstoryQuery.tsx b/frontend/src/components/BackstoryQuery.tsx
index d70453c..b58b65a 100644
--- a/frontend/src/components/BackstoryQuery.tsx
+++ b/frontend/src/components/BackstoryQuery.tsx
@@ -1,7 +1,7 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 
-import { CandidateQuestion } from "types/types";
+import { CandidateQuestion } from 'types/types';
 
 type ChatSubmitQueryInterface = (query: CandidateQuestion) => void;
 
@@ -20,8 +20,8 @@ const BackstoryQuery = (props: BackstoryQueryInterface) => {
     <Button
       variant="outlined"
       sx={{
-        color: (theme) => theme.palette.custom.highlight, // Golden Ochre (#D4A017)
-        borderColor: (theme) => theme.palette.custom.highlight,
+        color: theme => theme.palette.custom.highlight, // Golden Ochre (#D4A017)
+        borderColor: theme => theme.palette.custom.highlight,
         m: 1,
       }}
       size="small"
diff --git a/frontend/src/components/BackstoryTab.tsx b/frontend/src/components/BackstoryTab.tsx
index 503e93b..9d39460 100644
--- a/frontend/src/components/BackstoryTab.tsx
+++ b/frontend/src/components/BackstoryTab.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement, JSXElementConstructor } from "react";
-import Box from "@mui/material/Box";
-import { SxProps, Theme } from "@mui/material";
-import { ChatSubmitQueryInterface } from "./BackstoryQuery";
-import { SetSnackType } from "./Snack";
+import React, { ReactElement, JSXElementConstructor } from 'react';
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material';
+import { ChatSubmitQueryInterface } from './BackstoryQuery';
+import { SetSnackType } from './Snack';
 
 interface BackstoryElementProps {
   // setSnack: SetSnackType,
@@ -24,11 +24,8 @@ interface BackstoryTabProps {
   tabProps?: {
     label?: string;
     sx?: SxProps;
-    icon?:
-      | string
-      | ReactElement<unknown, string | JSXElementConstructor<any>>
-      | undefined;
-    iconPosition?: "bottom" | "top" | "start" | "end" | undefined;
+    icon?: string | ReactElement<unknown, string | JSXElementConstructor<any>> | undefined;
+    iconPosition?: 'bottom' | 'top' | 'start' | 'end' | undefined;
   };
 }
 
@@ -37,8 +34,8 @@ function BackstoryPage(props: BackstoryTabProps) {
 
   return (
     <Box
-      className={className || "BackstoryTab"}
-      sx={{ display: active ? "flex" : "none", p: 0, m: 0, borders: "none" }}
+      className={className || 'BackstoryTab'}
+      sx={{ display: active ? 'flex' : 'none', p: 0, m: 0, borders: 'none' }}
     >
       {children}
     </Box>
diff --git a/frontend/src/components/BackstoryTextField.tsx b/frontend/src/components/BackstoryTextField.tsx
index f674add..2fefb57 100644
--- a/frontend/src/components/BackstoryTextField.tsx
+++ b/frontend/src/components/BackstoryTextField.tsx
@@ -5,9 +5,9 @@ import React, {
   KeyboardEvent,
   useState,
   useImperativeHandle,
-} from "react";
-import { useTheme } from "@mui/material/styles";
-import "./BackstoryTextField.css";
+} from 'react';
+import { useTheme } from '@mui/material/styles';
+import './BackstoryTextField.css';
 
 // Define ref interface for exposed methods
 interface BackstoryTextFieldRef {
@@ -25,141 +25,133 @@ interface BackstoryTextFieldProps {
   style?: CSSProperties;
 }
 
-const BackstoryTextField = React.forwardRef<
-  BackstoryTextFieldRef,
-  BackstoryTextFieldProps
->((props, ref) => {
-  const {
-    value = "",
-    disabled = false,
-    placeholder,
-    onEnter,
-    onChange,
-    style,
-  } = props;
-  const theme = useTheme();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const shadowRef = useRef<HTMLTextAreaElement>(null);
-  const [editValue, setEditValue] = useState<string>(value);
+const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryTextFieldProps>(
+  (props, ref) => {
+    const { value = '', disabled = false, placeholder, onEnter, onChange, style } = props;
+    const theme = useTheme();
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const shadowRef = useRef<HTMLTextAreaElement>(null);
+    const [editValue, setEditValue] = useState<string>(value);
 
-  // Sync editValue with prop value if it changes externally
-  useEffect(() => {
-    setEditValue(value || "");
-  }, [value]);
+    // Sync editValue with prop value if it changes externally
+    useEffect(() => {
+      setEditValue(value || '');
+    }, [value]);
 
-  // Adjust textarea height based on content
-  useEffect(() => {
-    if (!textareaRef.current || !shadowRef.current) {
-      return;
-    }
-    const textarea = textareaRef.current;
-    const shadow = shadowRef.current;
+    // Adjust textarea height based on content
+    useEffect(() => {
+      if (!textareaRef.current || !shadowRef.current) {
+        return;
+      }
+      const textarea = textareaRef.current;
+      const shadow = shadowRef.current;
 
-    // Set shadow value to editValue or placeholder if editValue is empty
-    shadow.value = editValue || placeholder;
+      // Set shadow value to editValue or placeholder if editValue is empty
+      shadow.value = editValue || placeholder;
 
-    // Ensure shadow textarea has same content-relevant styles
-    const computed = getComputedStyle(textarea);
-    shadow.style.width = computed.width; // Match width for accurate wrapping
-    shadow.style.fontSize = computed.fontSize;
-    shadow.style.lineHeight = computed.lineHeight;
-    shadow.style.fontFamily = computed.fontFamily;
-    shadow.style.letterSpacing = computed.letterSpacing;
-    shadow.style.wordSpacing = computed.wordSpacing;
+      // Ensure shadow textarea has same content-relevant styles
+      const computed = getComputedStyle(textarea);
+      shadow.style.width = computed.width; // Match width for accurate wrapping
+      shadow.style.fontSize = computed.fontSize;
+      shadow.style.lineHeight = computed.lineHeight;
+      shadow.style.fontFamily = computed.fontFamily;
+      shadow.style.letterSpacing = computed.letterSpacing;
+      shadow.style.wordSpacing = computed.wordSpacing;
 
-    // Use requestAnimationFrame to ensure DOM is settled
-    const raf = requestAnimationFrame(() => {
-      const paddingTop = parseFloat(computed.paddingTop || "0");
-      const paddingBottom = parseFloat(computed.paddingBottom || "0");
-      const totalPadding = paddingTop + paddingBottom;
+      // Use requestAnimationFrame to ensure DOM is settled
+      const raf = requestAnimationFrame(() => {
+        const paddingTop = parseFloat(computed.paddingTop || '0');
+        const paddingBottom = parseFloat(computed.paddingBottom || '0');
+        const totalPadding = paddingTop + paddingBottom;
 
-      // Reset height to auto to allow shrinking
-      textarea.style.height = "auto";
-      const newHeight = shadow.scrollHeight + totalPadding;
+        // Reset height to auto to allow shrinking
+        textarea.style.height = 'auto';
+        const newHeight = shadow.scrollHeight + totalPadding;
 
-      textarea.style.height = `${newHeight}px`;
-    });
+        textarea.style.height = `${newHeight}px`;
+      });
 
-    // Cleanup RAF to prevent memory leaks
-    return () => cancelAnimationFrame(raf);
-  }, [editValue, placeholder]);
+      // Cleanup RAF to prevent memory leaks
+      return () => cancelAnimationFrame(raf);
+    }, [editValue, placeholder]);
 
-  // Expose getValue method via ref
-  useImperativeHandle(ref, () => ({
-    getValue: () => editValue,
-    setValue: (value: string) => setEditValue(value),
-    getAndResetValue: () => {
-      const _ev = editValue;
-      setEditValue("");
-      return _ev;
-    },
-  }));
+    // Expose getValue method via ref
+    useImperativeHandle(ref, () => ({
+      getValue: () => editValue,
+      setValue: (value: string) => setEditValue(value),
+      getAndResetValue: () => {
+        const _ev = editValue;
+        setEditValue('');
+        return _ev;
+      },
+    }));
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (!onEnter) {
-      return;
-    }
-    if (event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault(); // Prevent newline
-      onEnter(editValue);
-      setEditValue(""); // Clear textarea
-    }
-  };
+    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (!onEnter) {
+        return;
+      }
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault(); // Prevent newline
+        onEnter(editValue);
+        setEditValue(''); // Clear textarea
+      }
+    };
 
-  const fullStyle: CSSProperties = {
-    display: "flex",
-    flexGrow: 1,
-    width: "100%",
-    padding: "16.5px 14px",
-    resize: "none",
-    overflow: "hidden",
-    boxSizing: "border-box",
-    // minHeight: 'calc(1.5rem + 28px)', // lineHeight + padding
-    lineHeight: "1.5",
-    borderRadius: "4px",
-    fontSize: "16px",
-    backgroundColor: "rgba(0, 0, 0, 0)",
-    fontFamily: theme.typography.fontFamily,
-    ...style,
-  };
+    const fullStyle: CSSProperties = {
+      display: 'flex',
+      flexGrow: 1,
+      width: '100%',
+      padding: '16.5px 14px',
+      resize: 'none',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      // minHeight: 'calc(1.5rem + 28px)', // lineHeight + padding
+      lineHeight: '1.5',
+      borderRadius: '4px',
+      fontSize: '16px',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+      fontFamily: theme.typography.fontFamily,
+      ...style,
+    };
 
-  return (
-    <>
-      <textarea
-        className="BackstoryTextField"
-        ref={textareaRef}
-        value={editValue}
-        disabled={disabled}
-        placeholder={placeholder}
-        onChange={(e) => {
-          setEditValue(e.target.value);
-          onChange && onChange(e.target.value);
-        }}
-        onKeyDown={handleKeyDown}
-        style={fullStyle}
-      />
-      <textarea
-        className="BackgroundTextField"
-        ref={shadowRef}
-        aria-hidden="true"
-        style={{
-          ...fullStyle,
-          position: "absolute",
-          top: "-9999px",
-          left: "-9999px",
-          visibility: "hidden",
-          padding: "0px", // No padding to match content height
-          margin: "0px",
-          border: "0px", // Remove border to avoid extra height
-          height: "auto", // Allow natural height
-          minHeight: "0px",
-        }}
-        readOnly
-        tabIndex={-1}
-      />
-    </>
-  );
-});
+    return (
+      <>
+        <textarea
+          className="BackstoryTextField"
+          ref={textareaRef}
+          value={editValue}
+          disabled={disabled}
+          placeholder={placeholder}
+          onChange={e => {
+            setEditValue(e.target.value);
+            onChange && onChange(e.target.value);
+          }}
+          onKeyDown={handleKeyDown}
+          style={fullStyle}
+        />
+        <textarea
+          className="BackgroundTextField"
+          ref={shadowRef}
+          aria-hidden="true"
+          style={{
+            ...fullStyle,
+            position: 'absolute',
+            top: '-9999px',
+            left: '-9999px',
+            visibility: 'hidden',
+            padding: '0px', // No padding to match content height
+            margin: '0px',
+            border: '0px', // Remove border to avoid extra height
+            height: 'auto', // Allow natural height
+            minHeight: '0px',
+          }}
+          readOnly
+          tabIndex={-1}
+        />
+      </>
+    );
+  }
+);
 
 export type { BackstoryTextFieldRef };
 
diff --git a/frontend/src/components/Conversation.tsx b/frontend/src/components/Conversation.tsx
index cb4a991..e52644c 100644
--- a/frontend/src/components/Conversation.tsx
+++ b/frontend/src/components/Conversation.tsx
@@ -5,25 +5,22 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-} from "react";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
-import SendIcon from "@mui/icons-material/Send";
-import CancelIcon from "@mui/icons-material/Cancel";
-import { SxProps, Theme } from "@mui/material";
-import PropagateLoader from "react-spinners/PropagateLoader";
+} from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import SendIcon from '@mui/icons-material/Send';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { SxProps, Theme } from '@mui/material';
+import PropagateLoader from 'react-spinners/PropagateLoader';
 
-import { Message } from "./Message";
-import { DeleteConfirmation } from "components/DeleteConfirmation";
-import {
-  BackstoryTextField,
-  BackstoryTextFieldRef,
-} from "components/BackstoryTextField";
-import { BackstoryElementProps } from "./BackstoryTab";
-import { useAuth } from "hooks/AuthContext";
-import { StreamingResponse } from "services/api-client";
+import { Message } from './Message';
+import { DeleteConfirmation } from 'components/DeleteConfirmation';
+import { BackstoryTextField, BackstoryTextFieldRef } from 'components/BackstoryTextField';
+import { BackstoryElementProps } from './BackstoryTab';
+import { useAuth } from 'hooks/AuthContext';
+import { StreamingResponse } from 'services/api-client';
 import {
   ChatMessage,
   ChatContext,
@@ -33,33 +30,28 @@ import {
   ChatMessageError,
   ChatMessageStreaming,
   ChatMessageStatus,
-} from "types/types";
-import { PaginatedResponse } from "types/conversion";
+} from 'types/types';
+import { PaginatedResponse } from 'types/conversion';
 
-import "./Conversation.css";
-import { useAppState } from "hooks/GlobalContext";
+import './Conversation.css';
+import { useAppState } from 'hooks/GlobalContext';
 
 const defaultMessage: ChatMessage = {
-  status: "done",
-  type: "text",
-  sessionId: "",
+  status: 'done',
+  type: 'text',
+  sessionId: '',
   timestamp: new Date(),
-  content: "",
-  role: "assistant",
+  content: '',
+  role: 'assistant',
   metadata: null as any,
 };
 
 const loadingMessage: ChatMessage = {
   ...defaultMessage,
-  content: "Establishing connection with server...",
+  content: 'Establishing connection with server...',
 };
 
-type ConversationMode =
-  | "chat"
-  | "job_description"
-  | "resume"
-  | "fact_check"
-  | "persona";
+type ConversationMode = 'chat' | 'job_description' | 'resume' | 'fact_check' | 'persona';
 
 interface ConversationHandle {
   submitQuery: (query: ChatQuery) => void;
@@ -106,15 +98,9 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
     const [countdown, setCountdown] = useState<number>(0);
     const [conversation, setConversation] = useState<ChatMessage[]>([]);
     const conversationRef = useRef<ChatMessage[]>([]);
-    const [filteredConversation, setFilteredConversation] = useState<
-      ChatMessage[]
-    >([]);
-    const [processingMessage, setProcessingMessage] = useState<
-      ChatMessage | undefined
-    >(undefined);
-    const [streamingMessage, setStreamingMessage] = useState<
-      ChatMessage | undefined
-    >(undefined);
+    const [filteredConversation, setFilteredConversation] = useState<ChatMessage[]>([]);
+    const [processingMessage, setProcessingMessage] = useState<ChatMessage | undefined>(undefined);
+    const [streamingMessage, setStreamingMessage] = useState<ChatMessage | undefined>(undefined);
     const [noInteractions, setNoInteractions] = useState<boolean>(true);
     const viewableElementRef = useRef<HTMLDivElement>(null);
     const backstoryTextRef = useRef<BackstoryTextFieldRef>(null);
@@ -140,9 +126,7 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
       } else {
         //console.log('Filtering conversation...')
         filtered =
-          messageFilter(
-            conversation
-          ); /* Do not copy conversation or useEffect will loop forever */
+          messageFilter(conversation); /* Do not copy conversation or useEffect will loop forever */
         //console.log(`${conversation.length - filtered.length} messages filtered out.`);
       }
       if (filtered.length === 0) {
@@ -154,14 +138,7 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           ...filtered,
         ]);
       }
-    }, [
-      conversation,
-      setFilteredConversation,
-      messageFilter,
-      preamble,
-      messages,
-      hidePreamble,
-    ]);
+    }, [conversation, setFilteredConversation, messageFilter, preamble, messages, hidePreamble]);
 
     useEffect(() => {
       if (chatSession) {
@@ -169,14 +146,12 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
       }
       const createChatSession = async () => {
         try {
-          const chatContext: ChatContext = { type: "general" };
-          const response: ChatSession = await apiClient.createChatSession(
-            chatContext
-          );
+          const chatContext: ChatContext = { type: 'general' };
+          const response: ChatSession = await apiClient.createChatSession(chatContext);
           setChatSession(response);
         } catch (e) {
           console.error(e);
-          setSnack("Unable to create chat session.", "error");
+          setSnack('Unable to create chat session.', 'error');
         }
       };
 
@@ -188,8 +163,9 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
         return;
       }
       try {
-        const response: PaginatedResponse<ChatMessage> =
-          await apiClient.getChatMessages(chatSession.id);
+        const response: PaginatedResponse<ChatMessage> = await apiClient.getChatMessages(
+          chatSession.id
+        );
         const messages: ChatMessage[] = response.data;
 
         setProcessingMessage(undefined);
@@ -200,25 +176,22 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           setConversation([]);
           setNoInteractions(true);
         } else {
-          console.log(
-            `History returned with ${messages.length} entries:`,
-            messages
-          );
+          console.log(`History returned with ${messages.length} entries:`, messages);
           setConversation(messages);
           setNoInteractions(false);
         }
       } catch (error) {
-        console.error("Unable to obtain chat history", error);
+        console.error('Unable to obtain chat history', error);
         setProcessingMessage({
           ...defaultMessage,
-          status: "error",
+          status: 'error',
           content: `Unable to obtain history from server.`,
         });
         setTimeout(() => {
           setProcessingMessage(undefined);
           setNoInteractions(true);
         }, 3000);
-        setSnack("Unable to obtain chat history.", "error");
+        setSnack('Unable to obtain chat history.', 'error');
       }
     }, [chatSession]);
 
@@ -284,7 +257,7 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
     // };
 
     const cancelQuery = () => {
-      console.log("Stop query");
+      console.log('Stop query');
       if (controllerRef.current) {
         controllerRef.current.cancel();
       }
@@ -302,29 +275,29 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
         ...conversationRef.current,
         {
           ...defaultMessage,
-          type: "text",
+          type: 'text',
           content: query.prompt,
         },
       ]);
       setProcessing(true);
       setProcessingMessage({
         ...defaultMessage,
-        content: "Submitting request...",
+        content: 'Submitting request...',
       });
 
       const chatMessage: ChatMessageUser = {
-        role: "user",
+        role: 'user',
         sessionId: chatSession.id,
         content: query.prompt,
         tunables: query.tunables,
-        status: "done",
-        type: "text",
+        status: 'done',
+        type: 'text',
         timestamp: new Date(),
       };
 
       controllerRef.current = apiClient.sendMessageStream(chatMessage, {
         onMessage: (msg: ChatMessage) => {
-          console.log("onMessage:", msg);
+          console.log('onMessage:', msg);
           setConversation([...conversationRef.current, msg]);
           setStreamingMessage(undefined);
           setProcessingMessage(undefined);
@@ -334,13 +307,9 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           }
         },
         onError: (error: string | ChatMessageError) => {
-          console.log("onError:", error);
+          console.log('onError:', error);
           // Type-guard to determine if this is a ChatMessageBase or a string
-          if (
-            typeof error === "object" &&
-            error !== null &&
-            "content" in error
-          ) {
+          if (typeof error === 'object' && error !== null && 'content' in error) {
             setProcessingMessage(error as ChatMessage);
             setProcessing(false);
             controllerRef.current = null;
@@ -352,14 +321,14 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           }
         },
         onStreaming: (chunk: ChatMessageStreaming) => {
-          console.log("onStreaming:", chunk);
+          console.log('onStreaming:', chunk);
           setStreamingMessage({ ...defaultMessage, ...chunk });
         },
         onStatus: (status: ChatMessageStatus) => {
-          console.log("onStatus:", status);
+          console.log('onStatus:', status);
         },
         onComplete: () => {
-          console.log("onComplete");
+          console.log('onComplete');
           controllerRef.current = null;
         },
       });
@@ -384,18 +353,15 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
         className="Conversation"
         sx={{
           flexGrow: 1,
-          minHeight: "max-content",
-          height: "max-content",
-          maxHeight: "max-content",
-          overflow: "hidden",
+          minHeight: 'max-content',
+          height: 'max-content',
+          maxHeight: 'max-content',
+          overflow: 'hidden',
         }}
       >
         <Box sx={{ p: 1, mt: 0, ...sx }}>
           {filteredConversation.map((message, index) => (
-            <Message
-              key={index}
-              {...{ chatSession, sendQuery: processQuery, message }}
-            />
+            <Message key={index} {...{ chatSession, sendQuery: processQuery, message }} />
           ))}
           {processingMessage !== undefined && (
             <Message
@@ -417,10 +383,10 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           )}
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               m: 1,
             }}
           >
@@ -434,8 +400,8 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
               <Box
                 sx={{
                   pt: 1,
-                  fontSize: "0.7rem",
-                  color: "darkgrey",
+                  fontSize: '0.7rem',
+                  color: 'darkgrey',
                 }}
               >
                 Response will be stopped in: {countdown}s
@@ -444,16 +410,16 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           </Box>
           <Box
             className="Query"
-            sx={{ display: "flex", flexDirection: "column", p: 1, flexGrow: 1 }}
+            sx={{ display: 'flex', flexDirection: 'column', p: 1, flexGrow: 1 }}
           >
             {placeholder && (
               <Box
                 sx={{
-                  display: "flex",
+                  display: 'flex',
                   flexGrow: 1,
                   p: 0,
                   m: 0,
-                  flexDirection: "column",
+                  flexDirection: 'column',
                 }}
                 ref={viewableElementRef}
               >
@@ -469,24 +435,20 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
             <Box
               key="jobActions"
               sx={{
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "row",
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'row',
               }}
             >
               <DeleteConfirmation
-                label={resetLabel || "all data"}
-                disabled={
-                  !chatSession ||
-                  processingMessage !== undefined ||
-                  noInteractions
-                }
+                label={resetLabel || 'all data'}
+                disabled={!chatSession || processingMessage !== undefined || noInteractions}
                 onDelete={() => {
                   /*reset(); resetAction && resetAction(); */
                 }}
               />
-              <Tooltip title={actionLabel || "Send"}>
-                <span style={{ display: "flex", flexGrow: 1 }}>
+              <Tooltip title={actionLabel || 'Send'}>
+                <span style={{ display: 'flex', flexGrow: 1 }}>
                   <Button
                     sx={{ m: 1, gap: 1, flexGrow: 1 }}
                     variant="contained"
@@ -496,7 +458,7 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
                         prompt:
                           (backstoryTextRef.current &&
                             backstoryTextRef.current.getAndResetValue()) ||
-                          "",
+                          '',
                       });
                     }}
                   >
@@ -506,20 +468,18 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
                 </span>
               </Tooltip>
               <Tooltip title="Cancel">
-                <span style={{ display: "flex" }}>
-                  {" "}
+                <span style={{ display: 'flex' }}>
+                  {' '}
                   {/* This span is used to wrap the IconButton to ensure Tooltip works even when disabled */}
                   <IconButton
                     aria-label="cancel"
                     onClick={() => {
                       cancelQuery();
                     }}
-                    sx={{ display: "flex", margin: "auto 0px" }}
+                    sx={{ display: 'flex', margin: 'auto 0px' }}
                     size="large"
                     edge="start"
-                    disabled={
-                      stopRef.current || !chatSession || processing === false
-                    }
+                    disabled={stopRef.current || !chatSession || processing === false}
                   >
                     <CancelIcon />
                   </IconButton>
@@ -530,13 +490,13 @@ const Conversation = forwardRef<ConversationHandle, ConversationProps>(
           {(noInteractions || !hideDefaultPrompts) &&
             defaultPrompts !== undefined &&
             defaultPrompts.length !== 0 && (
-              <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 {defaultPrompts.map((element, index) => {
                   return <Box key={index}>{element}</Box>;
                 })}
               </Box>
             )}
-          <Box sx={{ display: "flex", flexGrow: 1 }}></Box>
+          <Box sx={{ display: 'flex', flexGrow: 1 }}></Box>
         </Box>
       </Box>
     );
diff --git a/frontend/src/components/CopyBubble.tsx b/frontend/src/components/CopyBubble.tsx
index d09f55d..887faaf 100644
--- a/frontend/src/components/CopyBubble.tsx
+++ b/frontend/src/components/CopyBubble.tsx
@@ -1,9 +1,9 @@
-import { useState } from "react";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import CheckIcon from "@mui/icons-material/Check";
-import IconButton, { IconButtonProps } from "@mui/material/IconButton";
-import { Tooltip } from "@mui/material";
-import { SxProps, Theme } from "@mui/material";
+import { useState } from 'react';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import { Tooltip } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 
 interface CopyBubbleProps extends IconButtonProps {
   content: string | undefined;
@@ -14,7 +14,7 @@ interface CopyBubbleProps extends IconButtonProps {
 const CopyBubble = ({
   content,
   sx,
-  tooltip = "Copy to clipboard",
+  tooltip = 'Copy to clipboard',
   onClick,
   ...rest
 }: CopyBubbleProps) => {
@@ -38,19 +38,19 @@ const CopyBubble = ({
   return (
     <Tooltip title={tooltip} placement="top" arrow>
       <IconButton
-        onClick={(e) => {
+        onClick={e => {
           handleCopy(e);
         }}
         sx={{
           width: 24,
           height: 24,
           opacity: 0.75,
-          bgcolor: "background.paper",
-          "&:hover": { bgcolor: "action.hover", opacity: 1 },
+          bgcolor: 'background.paper',
+          '&:hover': { bgcolor: 'action.hover', opacity: 1 },
           ...sx,
         }}
         size="small"
-        color={copied ? "success" : "default"}
+        color={copied ? 'success' : 'default'}
         {...rest}
       >
         {copied ? (
diff --git a/frontend/src/components/DeleteConfirmation.tsx b/frontend/src/components/DeleteConfirmation.tsx
index 1a56438..9984d19 100644
--- a/frontend/src/components/DeleteConfirmation.tsx
+++ b/frontend/src/components/DeleteConfirmation.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import {
   IconButton,
   Dialog,
@@ -10,25 +10,25 @@ import {
   useMediaQuery,
   Tooltip,
   SxProps,
-} from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import ResetIcon from "@mui/icons-material/History";
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import ResetIcon from '@mui/icons-material/History';
 
 interface DeleteConfirmationProps {
   // Legacy props for backward compatibility (uncontrolled mode)
   onDelete?: () => void;
   disabled?: boolean;
   label?: string;
-  action?: "delete" | "reset";
+  action?: 'delete' | 'reset';
   color?:
-    | "inherit"
-    | "default"
-    | "primary"
-    | "secondary"
-    | "error"
-    | "info"
-    | "success"
-    | "warning"
+    | 'inherit'
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning'
     | undefined;
   sx?: SxProps;
   // New props for controlled mode
@@ -56,7 +56,7 @@ const DeleteConfirmation = (props: DeleteConfirmationProps) => {
     disabled,
     label,
     color,
-    action = "delete",
+    action = 'delete',
     // New props
     open: controlledOpen,
     onClose: controlledOnClose,
@@ -65,7 +65,7 @@ const DeleteConfirmation = (props: DeleteConfirmationProps) => {
     message,
     hideButton = false,
     confirmButtonText,
-    cancelButtonText = "Cancel",
+    cancelButtonText = 'Cancel',
     sx,
     icon = <ResetIcon />,
   } = props;
@@ -73,7 +73,7 @@ const DeleteConfirmation = (props: DeleteConfirmationProps) => {
   // Internal state for uncontrolled mode
   const [internalOpen, setInternalOpen] = useState(false);
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   // Determine if we're in controlled or uncontrolled mode
   const isControlled = controlledOpen !== undefined;
@@ -103,35 +103,32 @@ const DeleteConfirmation = (props: DeleteConfirmationProps) => {
   };
 
   // Determine dialog content based on mode
-  const dialogTitle = title || "Confirm Reset";
+  const dialogTitle = title || 'Confirm Reset';
   const dialogMessage =
     message ||
     `This action will permanently ${capitalizeFirstLetter(action)} ${
-      label ? label.toLowerCase() : "all data"
+      label ? label.toLowerCase() : 'all data'
     } without the ability to recover it. Are you sure you want to continue?`;
   const confirmText =
-    confirmButtonText ||
-    `${capitalizeFirstLetter(action)} ${label || "Everything"}`;
+    confirmButtonText || `${capitalizeFirstLetter(action)} ${label || 'Everything'}`;
 
   return (
     <>
       {/* Only show button if not hidden (for controlled mode) */}
       {!hideButton && (
-        <Tooltip
-          title={label ? `${capitalizeFirstLetter(action)} ${label}` : "Reset"}
-        >
-          <span style={{ display: "flex" }}>
-            {" "}
+        <Tooltip title={label ? `${capitalizeFirstLetter(action)} ${label}` : 'Reset'}>
+          <span style={{ display: 'flex' }}>
+            {' '}
             {/* This span is used to wrap the IconButton to ensure Tooltip works even when disabled */}
             <IconButton
               aria-label={action}
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 e.preventDefault();
                 handleClickOpen();
               }}
-              color={color || "inherit"}
-              sx={{ display: "flex", margin: "auto 0px", ...sx }}
+              color={color || 'inherit'}
+              sx={{ display: 'flex', margin: 'auto 0px', ...sx }}
               size="large"
               edge="start"
               disabled={disabled}
diff --git a/frontend/src/components/Document.tsx b/frontend/src/components/Document.tsx
index e4cd433..1904fd8 100644
--- a/frontend/src/components/Document.tsx
+++ b/frontend/src/components/Document.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
-import { BackstoryElementProps } from "./BackstoryTab";
-import { StyledMarkdown } from "./StyledMarkdown";
+import React, { useState, useEffect } from 'react';
+import { BackstoryElementProps } from './BackstoryTab';
+import { StyledMarkdown } from './StyledMarkdown';
 
 interface DocumentProps extends BackstoryElementProps {
   filepath?: string;
@@ -9,7 +9,7 @@ interface DocumentProps extends BackstoryElementProps {
 const Document = (props: DocumentProps) => {
   const { filepath } = props;
 
-  const [document, setDocument] = useState<string>("");
+  const [document, setDocument] = useState<string>('');
 
   // Get the markdown
   useEffect(() => {
@@ -19,9 +19,9 @@ const Document = (props: DocumentProps) => {
     const fetchDocument = async () => {
       try {
         const response = await fetch(filepath, {
-          method: "GET",
+          method: 'GET',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
         });
         if (!response.ok) {
@@ -30,7 +30,7 @@ const Document = (props: DocumentProps) => {
         const data = await response.text();
         setDocument(data);
       } catch (error: any) {
-        console.error("Error obtaining Docs content information:", error);
+        console.error('Error obtaining Docs content information:', error);
         setDocument(`${filepath} not found.`);
       }
     };
diff --git a/frontend/src/components/DocumentManager.tsx b/frontend/src/components/DocumentManager.tsx
index d3b8a51..7fed159 100644
--- a/frontend/src/components/DocumentManager.tsx
+++ b/frontend/src/components/DocumentManager.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Button,
@@ -22,54 +22,44 @@ import {
   Chip,
   Divider,
   Paper,
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
-import {
-  CloudUpload,
-  Edit,
-  Delete,
-  Visibility,
-  Close,
-} from "@mui/icons-material";
-import { useTheme } from "@mui/material/styles";
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { CloudUpload, Edit, Delete, Visibility, Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 
-import { useAuth } from "hooks/AuthContext";
-import * as Types from "types/types";
-import { BackstoryElementProps } from "./BackstoryTab";
-import { useAppState } from "hooks/GlobalContext";
+import { useAuth } from 'hooks/AuthContext';
+import * as Types from 'types/types';
+import { BackstoryElementProps } from './BackstoryTab';
+import { useAppState } from 'hooks/GlobalContext';
 
-const VisuallyHiddenInput = styled("input")({
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
   height: 1,
-  overflow: "hidden",
-  position: "absolute",
+  overflow: 'hidden',
+  position: 'absolute',
   bottom: 0,
   left: 0,
-  whiteSpace: "nowrap",
+  whiteSpace: 'nowrap',
   width: 1,
 });
 
 const DocumentManager = (props: BackstoryElementProps) => {
   const theme = useTheme();
   const { setSnack } = useAppState();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const { user, apiClient } = useAuth();
 
   const [documents, setDocuments] = useState<Types.Document[]>([]);
-  const [selectedDocument, setSelectedDocument] =
-    useState<Types.Document | null>(null);
-  const [documentContent, setDocumentContent] = useState<string>("");
+  const [selectedDocument, setSelectedDocument] = useState<Types.Document | null>(null);
+  const [documentContent, setDocumentContent] = useState<string>('');
   const [isViewingContent, setIsViewingContent] = useState(false);
-  const [editingDocument, setEditingDocument] = useState<Types.Document | null>(
-    null
-  );
-  const [editingName, setEditingName] = useState("");
+  const [editingDocument, setEditingDocument] = useState<Types.Document | null>(null);
+  const [editingName, setEditingName] = useState('');
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
 
   // Check if user is a candidate
-  const candidate =
-    user?.userType === "candidate" ? (user as Types.Candidate) : null;
+  const candidate = user?.userType === 'candidate' ? (user as Types.Candidate) : null;
 
   // Load documents on component mount
   useEffect(() => {
@@ -84,38 +74,33 @@ const DocumentManager = (props: BackstoryElementProps) => {
       setDocuments(results.documents);
     } catch (error) {
       console.error(error);
-      setSnack("Failed to load documents", "error");
+      setSnack('Failed to load documents', 'error');
     }
   };
 
   // Handle document upload
-  const handleDocumentUpload = async (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleDocumentUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
-      const fileExtension = "." + file.name.split(".").pop()?.toLowerCase();
+      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
       let docType: Types.DocumentType | null = null;
       switch (fileExtension.substring(1)) {
-        case "pdf":
-          docType = "pdf";
+        case 'pdf':
+          docType = 'pdf';
           break;
-        case "docx":
-          docType = "docx";
+        case 'docx':
+          docType = 'docx';
           break;
-        case "md":
-          docType = "markdown";
+        case 'md':
+          docType = 'markdown';
           break;
-        case "txt":
-          docType = "txt";
+        case 'txt':
+          docType = 'txt';
           break;
       }
 
       if (!docType) {
-        setSnack(
-          "Invalid file type. Please upload .txt, .md, .docx, or .pdf files only.",
-          "error"
-        );
+        setSnack('Invalid file type. Please upload .txt, .md, .docx, or .pdf files only.', 'error');
         return;
       }
 
@@ -125,23 +110,23 @@ const DocumentManager = (props: BackstoryElementProps) => {
           file,
           { includeInRag: true, isJobDocument: false },
           {
-            onError: (error) => {
+            onError: error => {
               console.error(error);
-              setSnack(error.content, "error");
+              setSnack(error.content, 'error');
             },
           }
         );
         const result = await controller.promise;
         if (result && result.document) {
-          setDocuments((prev) => [...prev, result.document]);
-          setSnack(`Document uploaded: ${file.name}`, "success");
+          setDocuments(prev => [...prev, result.document]);
+          setSnack(`Document uploaded: ${file.name}`, 'success');
         }
 
         // Reset file input
-        e.target.value = "";
+        e.target.value = '';
       } catch (error) {
         console.error(error);
-        setSnack("Failed to upload document", "error");
+        setSnack('Failed to upload document', 'error');
       }
     }
   };
@@ -152,51 +137,40 @@ const DocumentManager = (props: BackstoryElementProps) => {
       // Call API to delete document
       await apiClient.deleteCandidateDocument(document);
 
-      setDocuments((prev) => prev.filter((doc) => doc.id !== document.id));
-      setSnack("Document deleted successfully", "success");
+      setDocuments(prev => prev.filter(doc => doc.id !== document.id));
+      setSnack('Document deleted successfully', 'success');
 
       // Close content view if this document was being viewed
       if (selectedDocument?.id === document.id) {
         setIsViewingContent(false);
         setSelectedDocument(null);
-        setDocumentContent("");
+        setDocumentContent('');
       }
     } catch (error) {
-      setSnack("Failed to delete document", "error");
+      setSnack('Failed to delete document', 'error');
     }
   };
 
   // Handle RAG flag toggle
-  const handleRAGToggle = async (
-    document: Types.Document,
-    includeInRag: boolean
-  ) => {
+  const handleRAGToggle = async (document: Types.Document, includeInRag: boolean) => {
     try {
       document.options = { includeInRag };
       // Call API to update RAG flag
       await apiClient.updateCandidateDocument(document);
 
-      setDocuments((prev) =>
-        prev.map((doc) =>
-          doc.id === document.id ? { ...doc, includeInRag } : doc
-        )
-      );
-      setSnack(
-        `Document ${includeInRag ? "included in" : "excluded from"} RAG`,
-        "success"
+      setDocuments(prev =>
+        prev.map(doc => (doc.id === document.id ? { ...doc, includeInRag } : doc))
       );
+      setSnack(`Document ${includeInRag ? 'included in' : 'excluded from'} RAG`, 'success');
     } catch (error) {
-      setSnack("Failed to update RAG setting", "error");
+      setSnack('Failed to update RAG setting', 'error');
     }
   };
 
   // Handle document rename
-  const handleRenameDocument = async (
-    document: Types.Document,
-    newName: string
-  ) => {
+  const handleRenameDocument = async (document: Types.Document, newName: string) => {
     if (!newName.trim()) {
-      setSnack("Document name cannot be empty", "error");
+      setSnack('Document name cannot be empty', 'error');
       return;
     }
 
@@ -205,17 +179,15 @@ const DocumentManager = (props: BackstoryElementProps) => {
       document.filename = newName;
       await apiClient.updateCandidateDocument(document);
 
-      setDocuments((prev) =>
-        prev.map((doc) =>
-          doc.id === document.id ? { ...doc, filename: newName.trim() } : doc
-        )
+      setDocuments(prev =>
+        prev.map(doc => (doc.id === document.id ? { ...doc, filename: newName.trim() } : doc))
       );
-      setSnack("Document renamed successfully", "success");
+      setSnack('Document renamed successfully', 'success');
       setIsRenameDialogOpen(false);
       setEditingDocument(null);
-      setEditingName("");
+      setEditingName('');
     } catch (error) {
-      setSnack("Failed to rename document", "error");
+      setSnack('Failed to rename document', 'error');
     }
   };
 
@@ -229,7 +201,7 @@ const DocumentManager = (props: BackstoryElementProps) => {
       const result = await apiClient.getCandidateDocumentText(document);
       setDocumentContent(result.content);
     } catch (error) {
-      setSnack("Failed to load document content", "error");
+      setSnack('Failed to load document content', 'error');
       setIsViewingContent(false);
     }
   };
@@ -243,58 +215,52 @@ const DocumentManager = (props: BackstoryElementProps) => {
 
   // Format file size
   const formatFileSize = (bytes: number): string => {
-    if (bytes === 0) return "0 Bytes";
+    if (bytes === 0) return '0 Bytes';
     const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
 
   // Get file type color
-  const getFileTypeColor = (
-    type: string
-  ): "primary" | "secondary" | "success" | "warning" => {
+  const getFileTypeColor = (type: string): 'primary' | 'secondary' | 'success' | 'warning' => {
     switch (type) {
-      case "pdf":
-        return "primary";
-      case "docx":
-        return "secondary";
-      case "txt":
-        return "success";
-      case "md":
-        return "warning";
+      case 'pdf':
+        return 'primary';
+      case 'docx':
+        return 'secondary';
+      case 'txt':
+        return 'success';
+      case 'md':
+        return 'warning';
       default:
-        return "primary";
+        return 'primary';
     }
   };
 
   if (!candidate) {
-    return (
-      <Box>You must be logged in as a candidate to view this content.</Box>
-    );
+    return <Box>You must be logged in as a candidate to view this content.</Box>;
   }
 
   return (
     <>
-      <Grid container spacing={{ xs: 1, sm: 3 }} sx={{ maxWidth: "100%" }}>
+      <Grid container spacing={{ xs: 1, sm: 3 }} sx={{ maxWidth: '100%' }}>
         <Box
           sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
             mb: 2,
-            width: "100%",
-            verticalAlign: "center",
+            width: '100%',
+            verticalAlign: 'center',
           }}
         >
-          <Typography variant={isMobile ? "subtitle2" : "h6"}>
-            Documents
-          </Typography>
+          <Typography variant={isMobile ? 'subtitle2' : 'h6'}>Documents</Typography>
           <Button
             component="label"
             variant="contained"
             startIcon={<CloudUpload />}
-            size={isMobile ? "small" : "medium"}
+            size={isMobile ? 'small' : 'medium'}
           >
             Upload Document
             <VisuallyHiddenInput
@@ -313,15 +279,15 @@ const DocumentManager = (props: BackstoryElementProps) => {
                   variant="body2"
                   color="text.secondary"
                   sx={{
-                    fontSize: { xs: "0.8rem", sm: "0.875rem" },
-                    textAlign: "center",
+                    fontSize: { xs: '0.8rem', sm: '0.875rem' },
+                    textAlign: 'center',
                     py: 3,
                   }}
                 >
                   No additional documents uploaded
                 </Typography>
               ) : (
-                <List sx={{ width: "100%" }}>
+                <List sx={{ width: '100%' }}>
                   {documents.map((doc, index) => (
                     <React.Fragment key={doc.id}>
                       {index > 0 && <Divider />}
@@ -330,17 +296,17 @@ const DocumentManager = (props: BackstoryElementProps) => {
                           primary={
                             <Box
                               sx={{
-                                display: "flex",
-                                alignItems: "center",
+                                display: 'flex',
+                                alignItems: 'center',
                                 gap: 1,
-                                flexWrap: "wrap",
+                                flexWrap: 'wrap',
                               }}
                             >
                               <Typography
                                 variant="body1"
                                 sx={{
-                                  wordBreak: "break-word",
-                                  fontSize: { xs: "0.9rem", sm: "1rem" },
+                                  wordBreak: 'break-word',
+                                  fontSize: { xs: '0.9rem', sm: '1rem' },
                                 }}
                               >
                                 {doc.filename}
@@ -351,47 +317,32 @@ const DocumentManager = (props: BackstoryElementProps) => {
                                 color={getFileTypeColor(doc.type)}
                               />
                               {doc.options?.includeInRag && (
-                                <Chip
-                                  label="RAG"
-                                  size="small"
-                                  color="success"
-                                  variant="outlined"
-                                />
+                                <Chip label="RAG" size="small" color="success" variant="outlined" />
                               )}
                             </Box>
                           }
                           secondary={
                             <Box sx={{ mt: 0.5 }}>
-                              <Typography
-                                variant="caption"
-                                color="text.secondary"
-                              >
-                                {formatFileSize(doc.size)} •{" "}
-                                {doc?.uploadDate?.toLocaleDateString()}
+                              <Typography variant="caption" color="text.secondary">
+                                {formatFileSize(doc.size)} • {doc?.uploadDate?.toLocaleDateString()}
                               </Typography>
                               <Box sx={{ mt: 1 }}>
                                 <FormControlLabel
                                   control={
                                     <Switch
                                       checked={doc.options?.includeInRag}
-                                      onChange={(e) =>
-                                        handleRAGToggle(doc, e.target.checked)
-                                      }
+                                      onChange={e => handleRAGToggle(doc, e.target.checked)}
                                       size="small"
                                     />
                                   }
-                                  label={
-                                    <Typography variant="caption">
-                                      Include in RAG
-                                    </Typography>
-                                  }
+                                  label={<Typography variant="caption">Include in RAG</Typography>}
                                 />
                               </Box>
                             </Box>
                           }
                         />
                         <ListItemSecondaryAction>
-                          <Box sx={{ display: "flex", gap: 0.5 }}>
+                          <Box sx={{ display: 'flex', gap: 0.5 }}>
                             <IconButton
                               edge="end"
                               size="small"
@@ -435,21 +386,19 @@ const DocumentManager = (props: BackstoryElementProps) => {
               <CardContent sx={{ p: { xs: 1.5, sm: 3 } }}>
                 <Box
                   sx={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
                     mb: 2,
                   }}
                 >
-                  <Typography variant={isMobile ? "subtitle2" : "h6"}>
-                    Document Content
-                  </Typography>
+                  <Typography variant={isMobile ? 'subtitle2' : 'h6'}>Document Content</Typography>
                   <IconButton
                     size="small"
                     onClick={() => {
                       setIsViewingContent(false);
                       setSelectedDocument(null);
-                      setDocumentContent("");
+                      setDocumentContent('');
                     }}
                   >
                     <Close />
@@ -460,20 +409,20 @@ const DocumentManager = (props: BackstoryElementProps) => {
                   sx={{
                     p: 2,
                     maxHeight: 400,
-                    overflow: "auto",
-                    backgroundColor: "grey.50",
+                    overflow: 'auto',
+                    backgroundColor: 'grey.50',
                   }}
                 >
                   <pre
                     style={{
                       margin: 0,
-                      fontFamily: "monospace",
-                      fontSize: isMobile ? "0.75rem" : "0.875rem",
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word",
+                      fontFamily: 'monospace',
+                      fontSize: isMobile ? '0.75rem' : '0.875rem',
+                      whiteSpace: 'pre-wrap',
+                      wordBreak: 'break-word',
                     }}
                   >
-                    {documentContent || "Loading content..."}
+                    {documentContent || 'Loading content...'}
                   </pre>
                 </Paper>
               </CardContent>
@@ -497,9 +446,9 @@ const DocumentManager = (props: BackstoryElementProps) => {
               fullWidth
               variant="outlined"
               value={editingName}
-              onChange={(e) => setEditingName(e.target.value)}
-              onKeyPress={(e) => {
-                if (e.key === "Enter" && editingDocument) {
+              onChange={e => setEditingName(e.target.value)}
+              onKeyPress={e => {
+                if (e.key === 'Enter' && editingDocument) {
                   handleRenameDocument(editingDocument, editingName);
                 }
               }}
@@ -508,10 +457,7 @@ const DocumentManager = (props: BackstoryElementProps) => {
           <DialogActions>
             <Button onClick={() => setIsRenameDialogOpen(false)}>Cancel</Button>
             <Button
-              onClick={() =>
-                editingDocument &&
-                handleRenameDocument(editingDocument, editingName)
-              }
+              onClick={() => editingDocument && handleRenameDocument(editingDocument, editingName)}
               variant="contained"
               disabled={!editingName.trim()}
             >
diff --git a/frontend/src/components/EmailVerificationComponents.tsx b/frontend/src/components/EmailVerificationComponents.tsx
index c781900..94674e4 100644
--- a/frontend/src/components/EmailVerificationComponents.tsx
+++ b/frontend/src/components/EmailVerificationComponents.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Card,
@@ -19,7 +19,7 @@ import {
   FormControlLabel,
   Grid,
   IconButton,
-} from "@mui/material";
+} from '@mui/material';
 import {
   Email as EmailIcon,
   Security as SecurityIcon,
@@ -29,32 +29,25 @@ import {
   DevicesOther as DevicesIcon,
   VisibilityOff,
   Visibility,
-} from "@mui/icons-material";
-import { useAuth } from "hooks/AuthContext";
-import { BackstoryPageProps } from "./BackstoryTab";
-import { Navigate, useNavigate } from "react-router-dom";
+} from '@mui/icons-material';
+import { useAuth } from 'hooks/AuthContext';
+import { BackstoryPageProps } from './BackstoryTab';
+import { Navigate, useNavigate } from 'react-router-dom';
 
 // Email Verification Component
 const EmailVerificationPage = (props: BackstoryPageProps) => {
-  const {
-    verifyEmail,
-    resendEmailVerification,
-    getPendingVerificationEmail,
-    isLoading,
-    error,
-  } = useAuth();
+  const { verifyEmail, resendEmailVerification, getPendingVerificationEmail, isLoading, error } =
+    useAuth();
   const navigate = useNavigate();
-  const [verificationToken, setVerificationToken] = useState("");
-  const [status, setStatus] = useState<"pending" | "success" | "error">(
-    "pending"
-  );
-  const [message, setMessage] = useState("");
-  const [userType, setUserType] = useState<string>("");
+  const [verificationToken, setVerificationToken] = useState('');
+  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');
+  const [message, setMessage] = useState('');
+  const [userType, setUserType] = useState<string>('');
 
   useEffect(() => {
     // Get token from URL parameters
     const urlParams = new URLSearchParams(window.location.search);
-    const token = urlParams.get("token");
+    const token = urlParams.get('token');
 
     if (token) {
       setVerificationToken(token);
@@ -64,8 +57,8 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
 
   const handleVerifyEmail = async (token: string) => {
     if (!token) {
-      setStatus("error");
-      setMessage("Invalid verification link");
+      setStatus('error');
+      setMessage('Invalid verification link');
       return;
     }
 
@@ -73,60 +66,58 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
       const result = await verifyEmail({ token });
 
       if (result) {
-        setStatus("success");
+        setStatus('success');
         setMessage(result.message);
         setUserType(result.userType);
 
         // Redirect to login after 3 seconds
         setTimeout(() => {
-          navigate("/login");
+          navigate('/login');
         }, 3000);
       } else {
-        setStatus("error");
-        setMessage("Email verification failed");
+        setStatus('error');
+        setMessage('Email verification failed');
       }
     } catch (error) {
-      setStatus("error");
-      setMessage("Email verification failed");
+      setStatus('error');
+      setMessage('Email verification failed');
     }
   };
 
   const handleResendVerification = async () => {
     const email = getPendingVerificationEmail();
     if (!email) {
-      setMessage("No pending verification email found.");
+      setMessage('No pending verification email found.');
       return;
     }
 
     try {
       const success = await resendEmailVerification(email);
       if (success) {
-        setMessage("Verification email sent successfully!");
+        setMessage('Verification email sent successfully!');
       }
     } catch (error) {
-      setMessage("Failed to resend verification email.");
+      setMessage('Failed to resend verification email.');
     }
   };
 
   return (
     <Box
       sx={{
-        minHeight: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        bgcolor: "grey.50",
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'grey.50',
         p: 2,
       }}
     >
-      <Card sx={{ maxWidth: 500, width: "100%" }}>
+      <Card sx={{ maxWidth: 500, width: '100%' }}>
         <CardContent sx={{ p: 4 }}>
           <Box textAlign="center" mb={3}>
-            {status === "pending" && (
+            {status === 'pending' && (
               <>
-                <EmailIcon
-                  sx={{ fontSize: 64, color: "primary.main", mb: 2 }}
-                />
+                <EmailIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
                 <Typography variant="h4" gutterBottom>
                   Verifying Email
                 </Typography>
@@ -136,11 +127,9 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
               </>
             )}
 
-            {status === "success" && (
+            {status === 'success' && (
               <>
-                <CheckCircleIcon
-                  sx={{ fontSize: 64, color: "success.main", mb: 2 }}
-                />
+                <CheckCircleIcon sx={{ fontSize: 64, color: 'success.main', mb: 2 }} />
                 <Typography variant="h4" gutterBottom color="success.main">
                   Email Verified!
                 </Typography>
@@ -150,9 +139,9 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
               </>
             )}
 
-            {status === "error" && (
+            {status === 'error' && (
               <>
-                <ErrorIcon sx={{ fontSize: 64, color: "error.main", mb: 2 }} />
+                <ErrorIcon sx={{ fontSize: 64, color: 'error.main', mb: 2 }} />
                 <Typography variant="h4" gutterBottom color="error.main">
                   Verification Failed
                 </Typography>
@@ -171,35 +160,25 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
 
           {(message || error) && (
             <Alert
-              severity={
-                status === "success"
-                  ? "success"
-                  : status === "error"
-                  ? "error"
-                  : "info"
-              }
+              severity={status === 'success' ? 'success' : status === 'error' ? 'error' : 'info'}
               sx={{ mt: 2 }}
             >
               {message || error}
             </Alert>
           )}
 
-          {status === "success" && (
+          {status === 'success' && (
             <Box mt={3} textAlign="center">
               <Typography variant="body2" color="text.secondary" mb={2}>
                 You will be redirected to the login page in a few seconds...
               </Typography>
-              <Button
-                variant="contained"
-                onClick={() => navigate("/login")}
-                fullWidth
-              >
+              <Button variant="contained" onClick={() => navigate('/login')} fullWidth>
                 Go to Login
               </Button>
             </Box>
           )}
 
-          {status === "error" && (
+          {status === 'error' && (
             <Box mt={3}>
               <Button
                 variant="outlined"
@@ -211,11 +190,7 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
               >
                 Resend Verification Email
               </Button>
-              <Button
-                variant="contained"
-                onClick={() => navigate("/login")}
-                fullWidth
-              >
+              <Button variant="contained" onClick={() => navigate('/login')} fullWidth>
                 Back to Login
               </Button>
             </Box>
@@ -234,11 +209,10 @@ interface MFAVerificationDialogProps {
 }
 const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
   const { open, onClose, onVerificationSuccess } = props;
-  const { verifyMFA, resendMFACode, clearMFA, mfaResponse, isLoading, error } =
-    useAuth();
-  const [code, setCode] = useState("");
+  const { verifyMFA, resendMFACode, clearMFA, mfaResponse, isLoading, error } = useAuth();
+  const [code, setCode] = useState('');
   const [rememberDevice, setRememberDevice] = useState(false);
-  const [localError, setLocalError] = useState("");
+  const [localError, setLocalError] = useState('');
   const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
@@ -247,7 +221,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
       return;
     }
     /* Remove 'HTTP .*: ' from error string */
-    const jsonStr = error.replace(/^[^{]*/, "");
+    const jsonStr = error.replace(/^[^{]*/, '');
     const data = JSON.parse(jsonStr);
     setErrorMessage(data.error.message);
   }, [error]);
@@ -256,10 +230,10 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
     if (!open) return;
 
     const timer = setInterval(() => {
-      setTimeLeft((prev) => {
+      setTimeLeft(prev => {
         if (prev <= 1) {
           clearInterval(timer);
-          setLocalError("MFA code has expired. Please try logging in again.");
+          setLocalError('MFA code has expired. Please try logging in again.');
           return 0;
         }
         return prev - 1;
@@ -272,21 +246,21 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
   };
 
   const handleVerifyMFA = async () => {
     if (!code || code.length !== 6) {
-      setLocalError("Please enter a valid 6-digit code");
+      setLocalError('Please enter a valid 6-digit code');
       return;
     }
 
     if (!mfaResponse || !mfaResponse.mfaData) {
-      setLocalError("MFA data not available");
+      setLocalError('MFA data not available');
       return;
     }
 
-    setLocalError("");
+    setLocalError('');
 
     try {
       const success = await verifyMFA({
@@ -301,13 +275,13 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
         onClose();
       }
     } catch (error) {
-      setLocalError("Verification failed. Please try again.");
+      setLocalError('Verification failed. Please try again.');
     }
   };
 
   const handleResendCode = async () => {
     if (!mfaResponse || !mfaResponse.mfaData) {
-      setLocalError("MFA data not available");
+      setLocalError('MFA data not available');
       return;
     }
 
@@ -319,11 +293,11 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
       );
       if (success) {
         setTimeLeft(600); // Reset timer
-        setLocalError("");
-        alert("New verification code sent to your email");
+        setLocalError('');
+        alert('New verification code sent to your email');
       }
     } catch (error) {
-      setLocalError("Failed to resend code");
+      setLocalError('Failed to resend code');
     }
   };
 
@@ -345,7 +319,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
 
       <DialogContent>
         <Alert severity="info" sx={{ mb: 3 }}>
-          We've detected a login from a new device:{" "}
+          We've detected a login from a new device:{' '}
           <strong>{mfaResponse.mfaData.deviceName}</strong>
         </Alert>
 
@@ -360,17 +334,17 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
           fullWidth
           label="Enter 6-digit code"
           value={code}
-          onChange={(e) => {
-            const value = e.target.value.replace(/\D/g, "").slice(0, 6);
+          onChange={e => {
+            const value = e.target.value.replace(/\D/g, '').slice(0, 6);
             setCode(value);
-            setLocalError("");
+            setLocalError('');
           }}
           placeholder="000000"
           inputProps={{
             maxLength: 6,
             style: {
               fontSize: 24,
-              textAlign: "center",
+              textAlign: 'center',
               letterSpacing: 8,
             },
           }}
@@ -379,12 +353,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
           helperText={localError || errorMessage}
         />
 
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={2}
-        >
+        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
           <Typography variant="body2" color="text.secondary">
             Code expires in: {formatTime(timeLeft)}
           </Typography>
@@ -401,7 +370,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
           control={
             <Checkbox
               checked={rememberDevice}
-              onChange={(e) => setRememberDevice(e.target.checked)}
+              onChange={e => setRememberDevice(e.target.checked)}
             />
           }
           label="Remember this device for 90 days"
@@ -409,8 +378,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
 
         <Alert severity="warning" sx={{ mt: 2 }}>
           <Typography variant="body2">
-            If you didn't attempt to log in, please change your password
-            immediately.
+            If you didn't attempt to log in, please change your password immediately.
           </Typography>
         </Alert>
       </DialogContent>
@@ -424,7 +392,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
           onClick={handleVerifyMFA}
           disabled={isLoading || !code || code.length !== 6 || timeLeft === 0}
         >
-          {isLoading ? <CircularProgress size={20} /> : "Verify"}
+          {isLoading ? <CircularProgress size={20} /> : 'Verify'}
         </Button>
       </DialogActions>
     </Dialog>
@@ -444,23 +412,23 @@ const RegistrationSuccessDialog = ({
   userType: string;
 }) => {
   const { resendEmailVerification, isLoading } = useAuth();
-  const [resendMessage, setResendMessage] = useState("");
+  const [resendMessage, setResendMessage] = useState('');
 
   const handleResendVerification = async () => {
     try {
       const success = await resendEmailVerification(email);
       if (success) {
-        setResendMessage("Verification email sent!");
+        setResendMessage('Verification email sent!');
       }
     } catch (error: any) {
-      setResendMessage(error?.message || "Network error. Please try again.");
+      setResendMessage(error?.message || 'Network error. Please try again.');
     }
   };
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogContent sx={{ textAlign: "center", p: 4 }}>
-        <EmailIcon sx={{ fontSize: 64, color: "primary.main", mb: 2 }} />
+      <DialogContent sx={{ textAlign: 'center', p: 4 }}>
+        <EmailIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
 
         <Typography variant="h5" gutterBottom>
           Check Your Email
@@ -474,7 +442,7 @@ const RegistrationSuccessDialog = ({
           {email}
         </Typography>
 
-        <Alert severity="info" sx={{ mt: 2, mb: 3, textAlign: "left" }}>
+        <Alert severity="info" sx={{ mt: 2, mb: 3, textAlign: 'left' }}>
           <Typography variant="body2">
             <strong>Next steps:</strong>
             <br />
@@ -487,22 +455,17 @@ const RegistrationSuccessDialog = ({
         </Alert>
 
         {resendMessage && (
-          <Alert
-            severity={resendMessage.includes("sent") ? "success" : "error"}
-            sx={{ mb: 2 }}
-          >
+          <Alert severity={resendMessage.includes('sent') ? 'success' : 'error'} sx={{ mb: 2 }}>
             {resendMessage}
           </Alert>
         )}
       </DialogContent>
 
-      <DialogActions sx={{ p: 3, justifyContent: "space-between" }}>
+      <DialogActions sx={{ p: 3, justifyContent: 'space-between' }}>
         <Button
           onClick={handleResendVerification}
           disabled={isLoading}
-          startIcon={
-            isLoading ? <CircularProgress size={16} /> : <RefreshIcon />
-          }
+          startIcon={isLoading ? <CircularProgress size={16} /> : <RefreshIcon />}
         >
           Resend Email
         </Button>
@@ -517,8 +480,8 @@ const RegistrationSuccessDialog = ({
 // Enhanced Login Component with MFA Support
 const LoginForm = () => {
   const { login, mfaResponse, isLoading, error, user } = useAuth();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
@@ -528,7 +491,7 @@ const LoginForm = () => {
       return;
     }
     /* Remove 'HTTP .*: ' from error string */
-    const jsonStr = error.replace(/^[^{]*/, "");
+    const jsonStr = error.replace(/^[^{]*/, '');
     const data = JSON.parse(jsonStr);
     setErrorMessage(data.error.message);
   }, [error]);
@@ -555,11 +518,11 @@ const LoginForm = () => {
 
   const handleLoginSuccess = () => {
     if (!user) {
-      navigate("/");
+      navigate('/');
     } else {
       navigate(`/${user.userType}/dashboard`);
     }
-    console.log("Login successful - redirect to dashboard");
+    console.log('Login successful - redirect to dashboard');
   };
 
   return (
@@ -570,16 +533,16 @@ const LoginForm = () => {
         fullWidth
         label="Email or Username"
         value={email}
-        onChange={(e) => setEmail(e.target.value)}
+        onChange={e => setEmail(e.target.value)}
         autoComplete="email"
         autoFocus
       />
       <TextField
         fullWidth
         label="Password"
-        type={showPassword ? "text" : "password"}
+        type={showPassword ? 'text' : 'password'}
         value={password}
-        onChange={(e) => setPassword(e.target.value)}
+        onChange={e => setPassword(e.target.value)}
         autoComplete="current-password"
         placeholder="Create a strong password"
         required
@@ -589,7 +552,7 @@ const LoginForm = () => {
               <IconButton
                 aria-label="toggle password visibility"
                 onClick={() => setShowPassword(!showPassword)}
-                onMouseDown={(e) => e.preventDefault()}
+                onMouseDown={e => e.preventDefault()}
                 edge="end"
               >
                 {showPassword ? <VisibilityOff /> : <Visibility />}
@@ -612,7 +575,7 @@ const LoginForm = () => {
         disabled={isLoading}
         sx={{ mt: 3, mb: 2 }}
       >
-        {isLoading ? <CircularProgress size={20} /> : "Sign In"}
+        {isLoading ? <CircularProgress size={20} /> : 'Sign In'}
       </Button>
 
       {/* MFA Dialog */}
@@ -640,19 +603,19 @@ const TrustedDevicesManager = () => {
     <Card>
       <CardContent>
         <Typography variant="h6" gutterBottom>
-          <DevicesIcon sx={{ mr: 1, verticalAlign: "middle" }} />
+          <DevicesIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
           Trusted Devices
         </Typography>
 
         <Typography variant="body2" color="text.secondary" paragraph>
-          Manage devices that you've marked as trusted. You won't need to verify
-          your identity when signing in from these devices.
+          Manage devices that you've marked as trusted. You won't need to verify your identity when
+          signing in from these devices.
         </Typography>
 
         {devices.length === 0 ? (
           <Alert severity="info">
-            No trusted devices yet. When you log in from a new device and choose
-            to remember it, it will appear here.
+            No trusted devices yet. When you log in from a new device and choose to remember it, it
+            will appear here.
           </Alert>
         ) : (
           <Grid container spacing={2}>
@@ -660,15 +623,12 @@ const TrustedDevicesManager = () => {
               <Grid key={index} size={{ xs: 12, md: 6 }}>
                 <Card variant="outlined">
                   <CardContent>
-                    <Typography variant="subtitle1">
-                      {device.deviceName}
-                    </Typography>
+                    <Typography variant="subtitle1">{device.deviceName}</Typography>
                     <Typography variant="body2" color="text.secondary">
                       Added: {new Date(device.addedAt).toLocaleDateString()}
                     </Typography>
                     <Typography variant="body2" color="text.secondary">
-                      Last used:{" "}
-                      {new Date(device.lastUsed).toLocaleDateString()}
+                      Last used: {new Date(device.lastUsed).toLocaleDateString()}
                     </Typography>
                     <Button
                       size="small"
diff --git a/frontend/src/components/ExpandMore.tsx b/frontend/src/components/ExpandMore.tsx
index ec192ab..e24bd2c 100644
--- a/frontend/src/components/ExpandMore.tsx
+++ b/frontend/src/components/ExpandMore.tsx
@@ -1,5 +1,5 @@
-import { styled } from "@mui/material/styles";
-import IconButton, { IconButtonProps } from "@mui/material/IconButton";
+import { styled } from '@mui/material/styles';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 interface ExpandMoreProps extends IconButtonProps {
   expand: boolean;
@@ -9,21 +9,21 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
   const { expand, ...other } = props;
   return <IconButton {...other} />;
 })(({ theme }) => ({
-  marginLeft: "auto",
-  transition: theme.transitions.create("transform", {
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest,
   }),
   variants: [
     {
       props: ({ expand }) => !expand,
       style: {
-        transform: "rotate(0deg)",
+        transform: 'rotate(0deg)',
       },
     },
     {
       props: ({ expand }) => !!expand,
       style: {
-        transform: "rotate(180deg)",
+        transform: 'rotate(180deg)',
       },
     },
   ],
diff --git a/frontend/src/components/GenerateImage.tsx b/frontend/src/components/GenerateImage.tsx
index fcb13f5..fb07c53 100644
--- a/frontend/src/components/GenerateImage.tsx
+++ b/frontend/src/components/GenerateImage.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState, useRef } from "react";
-import Box from "@mui/material/Box";
-import PropagateLoader from "react-spinners/PropagateLoader";
-import { Quote } from "components/Quote";
-import { BackstoryElementProps } from "components/BackstoryTab";
-import { Candidate, ChatSession } from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState } from "hooks/GlobalContext";
+import React, { useEffect, useState, useRef } from 'react';
+import Box from '@mui/material/Box';
+import PropagateLoader from 'react-spinners/PropagateLoader';
+import { Quote } from 'components/Quote';
+import { BackstoryElementProps } from 'components/BackstoryTab';
+import { Candidate, ChatSession } from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState } from 'hooks/GlobalContext';
 
 interface GenerateImageProps extends BackstoryElementProps {
   prompt: string;
@@ -17,26 +17,23 @@ const GenerateImage = (props: GenerateImageProps) => {
   const { chatSession, prompt } = props;
   const { setSnack } = useAppState();
   const [processing, setProcessing] = useState<boolean>(false);
-  const [status, setStatus] = useState<string>("");
-  const [image, setImage] = useState<string>("");
+  const [status, setStatus] = useState<string>('');
+  const [image, setImage] = useState<string>('');
 
-  const name =
-    (user?.userType === "candidate"
-      ? (user as Candidate).username
-      : user?.email) || "";
+  const name = (user?.userType === 'candidate' ? (user as Candidate).username : user?.email) || '';
   // Only keep refs that are truly necessary
   const controllerRef = useRef<string>(null);
 
   // Effect to trigger profile generation when user data is ready
   useEffect(() => {
     if (controllerRef.current) {
-      console.log("Controller already active, skipping profile generation");
+      console.log('Controller already active, skipping profile generation');
       return;
     }
     if (!prompt) {
       return;
     }
-    setStatus("Starting image generation...");
+    setStatus('Starting image generation...');
     setProcessing(true);
     const start = Date.now();
 
@@ -95,39 +92,39 @@ const GenerateImage = (props: GenerateImageProps) => {
     <Box
       className="GenerateImage"
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         flexGrow: 1,
         gap: 1,
-        maxWidth: { xs: "100%", md: "700px", lg: "1024px" },
-        minHeight: "max-content",
+        maxWidth: { xs: '100%', md: '700px', lg: '1024px' },
+        minHeight: 'max-content',
       }}
     >
-      {image !== "" && <img alt={prompt} src={`${image}/${chatSession.id}`} />}
+      {image !== '' && <img alt={prompt} src={`${image}/${chatSession.id}`} />}
       {prompt && (
         <Quote
-          size={processing ? "normal" : "small"}
+          size={processing ? 'normal' : 'small'}
           quote={prompt}
-          sx={{ "& *": { color: "#2E2E2E !important" } }}
+          sx={{ '& *': { color: '#2E2E2E !important' } }}
         />
       )}
       {processing && (
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
             m: 0,
             gap: 1,
-            minHeight: "min-content",
+            minHeight: 'min-content',
             mb: 2,
           }}
         >
           {status && (
-            <Box sx={{ display: "flex", flexDirection: "column" }}>
-              <Box sx={{ fontSize: "0.5rem" }}>Generation status</Box>
-              <Box sx={{ fontWeight: "bold" }}>{status}</Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+              <Box sx={{ fontSize: '0.5rem' }}>Generation status</Box>
+              <Box sx={{ fontWeight: 'bold' }}>{status}</Box>
             </Box>
           )}
           <PropagateLoader
diff --git a/frontend/src/components/JobCreator.tsx b/frontend/src/components/JobCreator.tsx
index 4fe031a..cd4547d 100644
--- a/frontend/src/components/JobCreator.tsx
+++ b/frontend/src/components/JobCreator.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, JSX } from "react";
+import React, { useState, useRef, JSX } from 'react';
 import {
   Box,
   Button,
@@ -14,7 +14,7 @@ import {
   LinearProgress,
   Stack,
   Paper,
-} from "@mui/material";
+} from '@mui/material';
 import {
   SyncAlt,
   Favorite,
@@ -31,30 +31,30 @@ import {
   Work,
   CheckCircle,
   Star,
-} from "@mui/icons-material";
-import { styled } from "@mui/material/styles";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
+} from '@mui/icons-material';
+import { styled } from '@mui/material/styles';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
 
-import { useAuth } from "hooks/AuthContext";
-import { useAppState, useSelectedJob } from "hooks/GlobalContext";
-import { BackstoryElementProps } from "./BackstoryTab";
-import { LoginRequired } from "components/ui/LoginRequired";
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedJob } from 'hooks/GlobalContext';
+import { BackstoryElementProps } from './BackstoryTab';
+import { LoginRequired } from 'components/ui/LoginRequired';
 
-import * as Types from "types/types";
-import { StyledMarkdown } from "./StyledMarkdown";
-import { JobInfo } from "./ui/JobInfo";
-import { Scrollable } from "./Scrollable";
-import { StatusIcon, StatusBox } from "components/ui/StatusIcon";
+import * as Types from 'types/types';
+import { StyledMarkdown } from './StyledMarkdown';
+import { JobInfo } from './ui/JobInfo';
+import { Scrollable } from './Scrollable';
+import { StatusIcon, StatusBox } from 'components/ui/StatusIcon';
 
-const VisuallyHiddenInput = styled("input")({
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
   height: 1,
-  overflow: "hidden",
-  position: "absolute",
+  overflow: 'hidden',
+  position: 'absolute',
   bottom: 0,
   left: 0,
-  whiteSpace: "nowrap",
+  whiteSpace: 'nowrap',
   width: 1,
 });
 
@@ -62,11 +62,11 @@ const UploadBox = styled(Box)(({ theme }) => ({
   border: `2px dashed ${theme.palette.primary.main}`,
   borderRadius: theme.shape.borderRadius * 2,
   padding: theme.spacing(4),
-  textAlign: "center",
+  textAlign: 'center',
   backgroundColor: theme.palette.action.hover,
-  transition: "all 0.3s ease",
-  cursor: "pointer",
-  "&:hover": {
+  transition: 'all 0.3s ease',
+  cursor: 'pointer',
+  '&:hover': {
     backgroundColor: theme.palette.action.selected,
     borderColor: theme.palette.primary.dark,
   },
@@ -81,48 +81,46 @@ const JobCreator = (props: JobCreatorProps) => {
   const { selectedJob, setSelectedJob } = useSelectedJob();
   const { setSnack } = useAppState();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const [jobDescription, setJobDescription] = useState<string>("");
-  const [jobRequirements, setJobRequirements] =
-    useState<Types.JobRequirements | null>(null);
-  const [jobTitle, setJobTitle] = useState<string>("");
-  const [company, setCompany] = useState<string>("");
-  const [summary, setSummary] = useState<string>("");
+  const [jobDescription, setJobDescription] = useState<string>('');
+  const [jobRequirements, setJobRequirements] = useState<Types.JobRequirements | null>(null);
+  const [jobTitle, setJobTitle] = useState<string>('');
+  const [company, setCompany] = useState<string>('');
+  const [summary, setSummary] = useState<string>('');
   const [job, setJob] = useState<Types.Job | null>(null);
-  const [jobStatus, setJobStatus] = useState<string>("");
-  const [jobStatusType, setJobStatusType] =
-    useState<Types.ApiActivityType | null>(null);
+  const [jobStatus, setJobStatus] = useState<string>('');
+  const [jobStatusType, setJobStatusType] = useState<Types.ApiActivityType | null>(null);
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const jobStatusHandlers = {
     onStatus: (status: Types.ChatMessageStatus) => {
-      console.log("status:", status.content);
+      console.log('status:', status.content);
       setJobStatusType(status.activity);
       setJobStatus(status.content);
     },
     onMessage: (jobMessage: Types.JobRequirementsMessage) => {
       const job: Types.Job = jobMessage.job;
-      console.log("onMessage - job", job);
+      console.log('onMessage - job', job);
       setJob(job);
-      setCompany(job.company || "");
+      setCompany(job.company || '');
       setJobDescription(job.description);
-      setSummary(job.summary || "");
-      setJobTitle(job.title || "");
+      setSummary(job.summary || '');
+      setJobTitle(job.title || '');
       setJobRequirements(job.requirements || null);
       setJobStatusType(null);
-      setJobStatus("");
+      setJobStatus('');
     },
     onError: (error: Types.ChatMessageError) => {
-      console.log("onError", error);
-      setSnack(error.content, "error");
+      console.log('onError', error);
+      setSnack(error.content, 'error');
       setIsProcessing(false);
     },
     onComplete: () => {
       setJobStatusType(null);
-      setJobStatus("");
+      setJobStatus('');
       setIsProcessing(false);
     },
   };
@@ -130,47 +128,44 @@ const JobCreator = (props: JobCreatorProps) => {
   const handleJobUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
-      const fileExtension = "." + file.name.split(".").pop()?.toLowerCase();
+      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
       let docType: Types.DocumentType | null = null;
       switch (fileExtension.substring(1)) {
-        case "pdf":
-          docType = "pdf";
+        case 'pdf':
+          docType = 'pdf';
           break;
-        case "docx":
-          docType = "docx";
+        case 'docx':
+          docType = 'docx';
           break;
-        case "md":
-          docType = "markdown";
+        case 'md':
+          docType = 'markdown';
           break;
-        case "txt":
-          docType = "txt";
+        case 'txt':
+          docType = 'txt';
           break;
       }
 
       if (!docType) {
-        setSnack(
-          "Invalid file type. Please upload .txt, .md, .docx, or .pdf files only.",
-          "error"
-        );
+        setSnack('Invalid file type. Please upload .txt, .md, .docx, or .pdf files only.', 'error');
         return;
       }
 
       try {
         setIsProcessing(true);
-        setJobDescription("");
-        setJobTitle("");
+        setJobDescription('');
+        setJobTitle('');
         setJobRequirements(null);
-        setSummary("");
+        setSummary('');
         const controller = apiClient.createJobFromFile(file, jobStatusHandlers);
         const job = await controller.promise;
         if (!job) {
           return;
         }
         console.log(`Job id: ${job.id}`);
-        e.target.value = "";
+        e.target.value = '';
       } catch (error) {
         console.error(error);
-        setSnack("Failed to upload document", "error");
+        setSnack('Failed to upload document', 'error');
         setIsProcessing(false);
       }
     }
@@ -190,24 +185,16 @@ const JobCreator = (props: JobCreatorProps) => {
 
     return (
       <Box sx={{ mb: 3 }}>
-        <Box sx={{ display: "flex", alignItems: "center", mb: 1.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
           {icon}
           <Typography variant="subtitle1" sx={{ ml: 1, fontWeight: 600 }}>
             {title}
           </Typography>
-          {required && (
-            <Chip label="Required" size="small" color="error" sx={{ ml: 1 }} />
-          )}
+          {required && <Chip label="Required" size="small" color="error" sx={{ ml: 1 }} />}
         </Box>
         <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
           {items.map((item, index) => (
-            <Chip
-              key={index}
-              label={item}
-              variant="outlined"
-              size="small"
-              sx={{ mb: 1 }}
-            />
+            <Chip key={index} label={item} variant="outlined" size="small" sx={{ mb: 1 }} />
           ))}
         </Stack>
       </Box>
@@ -226,49 +213,49 @@ const JobCreator = (props: JobCreatorProps) => {
         />
         <CardContent sx={{ pt: 0 }}>
           {renderRequirementSection(
-            "Technical Skills (Required)",
+            'Technical Skills (Required)',
             jobRequirements.technicalSkills.required,
             <Build color="primary" />,
             true
           )}
           {renderRequirementSection(
-            "Technical Skills (Preferred)",
+            'Technical Skills (Preferred)',
             jobRequirements.technicalSkills.preferred,
             <Build color="action" />
           )}
           {renderRequirementSection(
-            "Experience Requirements (Required)",
+            'Experience Requirements (Required)',
             jobRequirements.experienceRequirements.required,
             <Work color="primary" />,
             true
           )}
           {renderRequirementSection(
-            "Experience Requirements (Preferred)",
+            'Experience Requirements (Preferred)',
             jobRequirements.experienceRequirements.preferred,
             <Work color="action" />
           )}
           {renderRequirementSection(
-            "Soft Skills",
+            'Soft Skills',
             jobRequirements.softSkills,
             <Psychology color="secondary" />
           )}
           {renderRequirementSection(
-            "Experience",
+            'Experience',
             jobRequirements.experience,
             <Star color="warning" />
           )}
           {renderRequirementSection(
-            "Education",
+            'Education',
             jobRequirements.education,
             <Description color="info" />
           )}
           {renderRequirementSection(
-            "Certifications",
+            'Certifications',
             jobRequirements.certifications,
             <CheckCircle color="success" />
           )}
           {renderRequirementSection(
-            "Preferred Attributes",
+            'Preferred Attributes',
             jobRequirements.preferredAttributes,
             <Star color="secondary" />
           )}
@@ -279,8 +266,8 @@ const JobCreator = (props: JobCreatorProps) => {
 
   const handleSave = async () => {
     const newJob: Types.Job = {
-      ownerId: user?.id || "",
-      ownerType: "candidate",
+      ownerId: user?.id || '',
+      ownerType: 'candidate',
       description: jobDescription,
       company: company,
       summary: summary,
@@ -293,7 +280,7 @@ const JobCreator = (props: JobCreatorProps) => {
     const job = await apiClient.createJob(newJob);
     setIsProcessing(false);
     if (!job) {
-      setSnack("Failed to save job", "error");
+      setSnack('Failed to save job', 'error');
       return;
     }
     onSave && onSave(job);
@@ -302,10 +289,7 @@ const JobCreator = (props: JobCreatorProps) => {
   const handleExtractRequirements = async () => {
     try {
       setIsProcessing(true);
-      const controller = apiClient.createJobFromDescription(
-        jobDescription,
-        jobStatusHandlers
-      );
+      const controller = apiClient.createJobFromDescription(jobDescription, jobStatusHandlers);
       const job = await controller.promise;
       if (!job) {
         setIsProcessing(false);
@@ -314,7 +298,7 @@ const JobCreator = (props: JobCreatorProps) => {
       console.log(`Job id: ${job.id}`);
     } catch (error) {
       console.error(error);
-      setSnack("Failed to upload document", "error");
+      setSnack('Failed to upload document', 'error');
       setIsProcessing(false);
     }
     setIsProcessing(false);
@@ -324,7 +308,7 @@ const JobCreator = (props: JobCreatorProps) => {
     return (
       <Box
         sx={{
-          width: "100%",
+          width: '100%',
           p: 1,
         }}
       >
@@ -341,23 +325,17 @@ const JobCreator = (props: JobCreatorProps) => {
                 <Typography
                   variant="h6"
                   gutterBottom
-                  sx={{ display: "flex", alignItems: "center" }}
+                  sx={{ display: 'flex', alignItems: 'center' }}
                 >
                   <CloudUpload sx={{ mr: 1 }} />
                   Upload Job Description
                 </Typography>
                 <UploadBox onClick={handleUploadClick}>
-                  <CloudUpload
-                    sx={{ fontSize: 48, color: "primary.main", mb: 2 }}
-                  />
+                  <CloudUpload sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
                   <Typography variant="h6" gutterBottom>
                     Drop your job description here
                   </Typography>
-                  <Typography
-                    variant="body2"
-                    color="text.secondary"
-                    sx={{ mb: 2 }}
-                  >
+                  <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                     Supported formats: PDF, DOCX, TXT, MD
                   </Typography>
                   <Button
@@ -381,7 +359,7 @@ const JobCreator = (props: JobCreatorProps) => {
                 <Typography
                   variant="h6"
                   gutterBottom
-                  sx={{ display: "flex", alignItems: "center" }}
+                  sx={{ display: 'flex', alignItems: 'center' }}
                 >
                   <Description sx={{ mr: 1 }} />
                   Or Enter Manually
@@ -393,7 +371,7 @@ const JobCreator = (props: JobCreatorProps) => {
                   placeholder="Paste or type the job description here..."
                   variant="outlined"
                   value={jobDescription}
-                  onChange={(e) => setJobDescription(e.target.value)}
+                  onChange={e => setJobDescription(e.target.value)}
                   disabled={isProcessing}
                   sx={{ mb: 2 }}
                 />
@@ -416,7 +394,7 @@ const JobCreator = (props: JobCreatorProps) => {
                 <StatusBox>
                   {jobStatusType && <StatusIcon type={jobStatusType} />}
                   <Typography variant="body2" sx={{ ml: 1 }}>
-                    {jobStatus || "Processing..."}
+                    {jobStatus || 'Processing...'}
                   </Typography>
                 </StatusBox>
                 {isProcessing && <LinearProgress sx={{ mt: 1 }} />}
@@ -440,13 +418,11 @@ const JobCreator = (props: JobCreatorProps) => {
                   label="Job Title"
                   variant="outlined"
                   value={jobTitle}
-                  onChange={(e) => setJobTitle(e.target.value)}
+                  onChange={e => setJobTitle(e.target.value)}
                   required
                   disabled={isProcessing}
                   InputProps={{
-                    startAdornment: (
-                      <Work sx={{ mr: 1, color: "text.secondary" }} />
-                    ),
+                    startAdornment: <Work sx={{ mr: 1, color: 'text.secondary' }} />,
                   }}
                 />
               </Grid>
@@ -457,13 +433,11 @@ const JobCreator = (props: JobCreatorProps) => {
                   label="Company"
                   variant="outlined"
                   value={company}
-                  onChange={(e) => setCompany(e.target.value)}
+                  onChange={e => setCompany(e.target.value)}
                   required
                   disabled={isProcessing}
                   InputProps={{
-                    startAdornment: (
-                      <Business sx={{ mr: 1, color: "text.secondary" }} />
-                    ),
+                    startAdornment: <Business sx={{ mr: 1, color: 'text.secondary' }} />,
                   }}
                 />
               </Grid>
@@ -486,7 +460,7 @@ const JobCreator = (props: JobCreatorProps) => {
         </Card>
 
         {/* Job Summary */}
-        {summary !== "" && (
+        {summary !== '' && (
           <Card elevation={2} sx={{ mt: 3 }}>
             <CardHeader
               title="Job Summary"
@@ -507,70 +481,68 @@ const JobCreator = (props: JobCreatorProps) => {
     <Box
       className="JobManagement"
       sx={{
-        background: "white",
+        background: 'white',
         p: 0,
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       {job === null && renderJobCreation()}
       {job && (
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            height: "100%" /* Restrict to main-container's height */,
-            width: "100%",
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%' /* Restrict to main-container's height */,
+            width: '100%',
             minHeight: 0 /* Prevent flex overflow */,
-            maxHeight: "min-content",
-            position: "relative",
+            maxHeight: 'min-content',
+            position: 'relative',
           }}
         >
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row',
               flexGrow: 1,
               gap: 1,
-              height: "100%" /* Restrict to main-container's height */,
-              width: "100%",
+              height: '100%' /* Restrict to main-container's height */,
+              width: '100%',
               minHeight: 0 /* Prevent flex overflow */,
-              maxHeight: "min-content",
-              "& > *:not(.Scrollable)": {
+              maxHeight: 'min-content',
+              '& > *:not(.Scrollable)': {
                 flexShrink: 0 /* Prevent shrinking */,
               },
-              position: "relative",
+              position: 'relative',
             }}
           >
             <Scrollable
               sx={{
-                display: "flex",
+                display: 'flex',
                 flexGrow: 1,
-                position: "relative",
-                maxHeight: "30rem",
+                position: 'relative',
+                maxHeight: '30rem',
               }}
             >
               <JobInfo job={job} />
             </Scrollable>
             <Scrollable
               sx={{
-                display: "flex",
+                display: 'flex',
                 flexGrow: 1,
-                position: "relative",
-                maxHeight: "30rem",
+                position: 'relative',
+                maxHeight: '30rem',
               }}
             >
               <StyledMarkdown content={job.description} />
             </Scrollable>
           </Box>
-          <Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
+          <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-end' }}>
             <Button
               variant="contained"
               onClick={handleSave}
-              disabled={
-                !jobTitle || !company || !jobDescription || isProcessing
-              }
+              disabled={!jobTitle || !company || !jobDescription || isProcessing}
               fullWidth={isMobile}
               size="large"
               startIcon={<CheckCircle />}
diff --git a/frontend/src/components/JobMatchAnalysis.tsx b/frontend/src/components/JobMatchAnalysis.tsx
index e503c93..1e442b8 100644
--- a/frontend/src/components/JobMatchAnalysis.tsx
+++ b/frontend/src/components/JobMatchAnalysis.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Typography,
@@ -16,12 +16,12 @@ import {
   LinearProgress,
   useMediaQuery,
   Button,
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
-import PendingIcon from "@mui/icons-material/Pending";
-import WarningIcon from "@mui/icons-material/Warning";
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import PendingIcon from '@mui/icons-material/Pending';
+import WarningIcon from '@mui/icons-material/Warning';
 import {
   Candidate,
   ChatMessage,
@@ -34,32 +34,32 @@ import {
   JobRequirements,
   SkillAssessment,
   SkillStatus,
-} from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { BackstoryPageProps } from "./BackstoryTab";
-import { Job } from "types/types";
-import { StyledMarkdown } from "./StyledMarkdown";
-import { Scrollable } from "./Scrollable";
-import { useAppState } from "hooks/GlobalContext";
-import * as Types from "types/types";
-import JsonView from "@uiw/react-json-view";
-import { VectorVisualizer } from "./VectorVisualizer";
-import { JobInfo } from "./ui/JobInfo";
+} from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { BackstoryPageProps } from './BackstoryTab';
+import { Job } from 'types/types';
+import { StyledMarkdown } from './StyledMarkdown';
+import { Scrollable } from './Scrollable';
+import { useAppState } from 'hooks/GlobalContext';
+import * as Types from 'types/types';
+import JsonView from '@uiw/react-json-view';
+import { VectorVisualizer } from './VectorVisualizer';
+import { JobInfo } from './ui/JobInfo';
 
 interface JobAnalysisProps extends BackstoryPageProps {
   job: Job;
   candidate: Candidate;
-  variant?: "small" | "normal";
+  variant?: 'small' | 'normal';
   onAnalysisComplete: (skills: SkillAssessment[]) => void;
 }
 
 const defaultMessage: ChatMessage = {
-  status: "done",
-  type: "text",
-  sessionId: "",
+  status: 'done',
+  type: 'text',
+  sessionId: '',
   timestamp: new Date(),
-  content: "",
-  role: "assistant",
+  content: '',
+  role: 'assistant',
   metadata: null as any,
 };
 
@@ -69,32 +69,25 @@ interface SkillMatch extends SkillAssessment {
   matchScore: number;
 }
 
-const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
-  props: JobAnalysisProps
-) => {
-  const { job, candidate, onAnalysisComplete, variant = "normal" } = props;
+const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) => {
+  const { job, candidate, onAnalysisComplete, variant = 'normal' } = props;
   const { apiClient } = useAuth();
   const { setSnack } = useAppState();
   const theme = useTheme();
-  const [requirements, setRequirements] = useState<
-    { requirement: string; domain: string }[]
-  >([]);
+  const [requirements, setRequirements] = useState<{ requirement: string; domain: string }[]>([]);
   const [skillMatches, setSkillMatches] = useState<SkillMatch[]>([]);
   const [creatingSession, setCreatingSession] = useState<boolean>(false);
-  const [loadingRequirements, setLoadingRequirements] =
-    useState<boolean>(false);
+  const [loadingRequirements, setLoadingRequirements] = useState<boolean>(false);
   const [expanded, setExpanded] = useState<string | false>(false);
   const [overallScore, setOverallScore] = useState<number>(0);
-  const [requirementsSession, setRequirementsSession] =
-    useState<ChatSession | null>(null);
+  const [requirementsSession, setRequirementsSession] = useState<ChatSession | null>(null);
   const [statusMessage, setStatusMessage] = useState<ChatMessage | null>(null);
   const [startAnalysis, setStartAnalysis] = useState<boolean>(false);
   const [analyzing, setAnalyzing] = useState<boolean>(false);
-  const [matchStatus, setMatchStatus] = useState<string>("");
-  const [matchStatusType, setMatchStatusType] =
-    useState<Types.ApiActivityType | null>(null);
+  const [matchStatus, setMatchStatus] = useState<string>('');
+  const [matchStatusType, setMatchStatusType] = useState<Types.ApiActivityType | null>(null);
 
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   // Handle accordion expansion
   const handleAccordionChange =
@@ -108,66 +101,66 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
     }
     const requirements: { requirement: string; domain: string }[] = [];
     if (job.requirements?.technicalSkills) {
-      job.requirements.technicalSkills.required?.forEach((req) =>
+      job.requirements.technicalSkills.required?.forEach(req =>
         requirements.push({
           requirement: req,
-          domain: "Technical Skills (required)",
+          domain: 'Technical Skills (required)',
         })
       );
-      job.requirements.technicalSkills.preferred?.forEach((req) =>
+      job.requirements.technicalSkills.preferred?.forEach(req =>
         requirements.push({
           requirement: req,
-          domain: "Technical Skills (preferred)",
+          domain: 'Technical Skills (preferred)',
         })
       );
     }
     if (job.requirements?.experienceRequirements) {
-      job.requirements.experienceRequirements.required?.forEach((req) =>
-        requirements.push({ requirement: req, domain: "Experience (required)" })
+      job.requirements.experienceRequirements.required?.forEach(req =>
+        requirements.push({ requirement: req, domain: 'Experience (required)' })
       );
-      job.requirements.experienceRequirements.preferred?.forEach((req) =>
+      job.requirements.experienceRequirements.preferred?.forEach(req =>
         requirements.push({
           requirement: req,
-          domain: "Experience (preferred)",
+          domain: 'Experience (preferred)',
         })
       );
     }
     if (job.requirements?.softSkills) {
-      job.requirements.softSkills.forEach((req) =>
-        requirements.push({ requirement: req, domain: "Soft Skills" })
+      job.requirements.softSkills.forEach(req =>
+        requirements.push({ requirement: req, domain: 'Soft Skills' })
       );
     }
     if (job.requirements?.experience) {
-      job.requirements.experience.forEach((req) =>
-        requirements.push({ requirement: req, domain: "Experience" })
+      job.requirements.experience.forEach(req =>
+        requirements.push({ requirement: req, domain: 'Experience' })
       );
     }
     if (job.requirements?.education) {
-      job.requirements.education.forEach((req) =>
-        requirements.push({ requirement: req, domain: "Education" })
+      job.requirements.education.forEach(req =>
+        requirements.push({ requirement: req, domain: 'Education' })
       );
     }
     if (job.requirements?.certifications) {
-      job.requirements.certifications.forEach((req) =>
-        requirements.push({ requirement: req, domain: "Certifications" })
+      job.requirements.certifications.forEach(req =>
+        requirements.push({ requirement: req, domain: 'Certifications' })
       );
     }
     if (job.requirements?.preferredAttributes) {
-      job.requirements.preferredAttributes.forEach((req) =>
-        requirements.push({ requirement: req, domain: "Preferred Attributes" })
+      job.requirements.preferredAttributes.forEach(req =>
+        requirements.push({ requirement: req, domain: 'Preferred Attributes' })
       );
     }
 
-    const initialSkillMatches: SkillMatch[] = requirements.map((req) => ({
+    const initialSkillMatches: SkillMatch[] = requirements.map(req => ({
       skill: req.requirement,
       skillModified: req.requirement,
-      candidateId: candidate.id || "",
+      candidateId: candidate.id || '',
       domain: req.domain,
-      status: "waiting" as const,
-      assessment: "",
-      description: "",
+      status: 'waiting' as const,
+      assessment: '',
+      description: '',
       evidenceFound: false,
-      evidenceStrength: "none",
+      evidenceStrength: 'none',
       evidenceDetails: [],
       matchScore: 0,
     }));
@@ -202,38 +195,38 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
       // Process requirements one by one
       for (let i = 0; i < requirements.length; i++) {
         try {
-          setSkillMatches((prev) => {
+          setSkillMatches(prev => {
             const updated = [...prev];
-            updated[i] = { ...updated[i], status: "pending" };
+            updated[i] = { ...updated[i], status: 'pending' };
             return updated;
           });
 
           const request: any = await apiClient.candidateMatchForRequirement(
-            candidate.id || "",
+            candidate.id || '',
             requirements[i].requirement,
             skillMatchHandlers
           );
           const result = await request.promise;
           const skillMatch = result.skillAssessment;
           skills.push(skillMatch);
-          setMatchStatus("");
+          setMatchStatus('');
           let matchScore = 0;
           switch (skillMatch.evidenceStrength.toUpperCase()) {
-            case "STRONG":
+            case 'STRONG':
               matchScore = 100;
               break;
-            case "MODERATE":
+            case 'MODERATE':
               matchScore = 75;
               break;
-            case "WEAK":
+            case 'WEAK':
               matchScore = 50;
               break;
-            case "NONE":
+            case 'NONE':
               matchScore = 0;
               break;
           }
           if (
-            skillMatch.evidenceStrength == "NONE" &&
+            skillMatch.evidenceStrength == 'NONE' &&
             skillMatch.citations &&
             skillMatch.citations.length > 3
           ) {
@@ -241,42 +234,35 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
           }
           const match: SkillMatch = {
             ...skillMatch,
-            status: "complete",
+            status: 'complete',
             matchScore,
             domain: requirements[i].domain,
           };
-          setSkillMatches((prev) => {
+          setSkillMatches(prev => {
             const updated = [...prev];
             updated[i] = match;
             return updated;
           });
 
           // Update overall score
-          setSkillMatches((current) => {
-            const completedMatches = current.filter(
-              (match) => match.status === "complete"
-            );
+          setSkillMatches(current => {
+            const completedMatches = current.filter(match => match.status === 'complete');
             if (completedMatches.length > 0) {
               const newOverallScore =
-                completedMatches.reduce(
-                  (sum, match) => sum + match.matchScore,
-                  0
-                ) / completedMatches.length;
+                completedMatches.reduce((sum, match) => sum + match.matchScore, 0) /
+                completedMatches.length;
               setOverallScore(newOverallScore);
             }
             return current;
           });
         } catch (error) {
-          console.error(
-            `Error fetching match for requirement ${requirements[i]}:`,
-            error
-          );
-          setSkillMatches((prev) => {
+          console.error(`Error fetching match for requirement ${requirements[i]}:`, error);
+          setSkillMatches(prev => {
             const updated = [...prev];
             updated[i] = {
               ...updated[i],
-              status: "error",
-              assessment: "Failed to analyze this requirement.",
+              status: 'error',
+              assessment: 'Failed to analyze this requirement.',
             };
             return updated;
           });
@@ -291,14 +277,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
       setStartAnalysis(false);
       onAnalysisComplete && onAnalysisComplete(skills);
     });
-  }, [
-    job,
-    onAnalysisComplete,
-    startAnalysis,
-    analyzing,
-    requirements,
-    loadingRequirements,
-  ]);
+  }, [job, onAnalysisComplete, startAnalysis, analyzing, requirements, loadingRequirements]);
 
   // Get color based on match score
   const getMatchColor = (score: number): string => {
@@ -310,8 +289,8 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
 
   // Get icon based on status
   const getStatusIcon = (status: string, score: number) => {
-    if (status === "pending" || status === "waiting") return <PendingIcon />;
-    if (status === "error") return <ErrorIcon color="error" />;
+    if (status === 'pending' || status === 'waiting') return <PendingIcon />;
+    if (status === 'error') return <ErrorIcon color="error" />;
     if (score >= 70) return <CheckCircleIcon color="success" />;
     if (score >= 40) return <WarningIcon color="warning" />;
     return <ErrorIcon color="error" />;
@@ -323,23 +302,23 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
   };
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", m: 0, p: 0 }}>
-      {variant !== "small" && <JobInfo job={job} variant="normal" />}
+    <Box sx={{ display: 'flex', flexDirection: 'column', m: 0, p: 0 }}>
+      {variant !== 'small' && <JobInfo job={job} variant="normal" />}
 
       <Box
         sx={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
           mb: isMobile ? 1 : 2,
           gap: 1,
-          justifyContent: "space-between",
+          justifyContent: 'space-between',
         }}
       >
         <Box
           sx={{
-            display: "flex",
-            flexDirection: isMobile ? "column" : "row",
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
             flexGrow: 1,
             gap: 1,
           }}
@@ -351,8 +330,8 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
               </Typography>
               <Box
                 sx={{
-                  position: "relative",
-                  display: "inline-flex",
+                  position: 'relative',
+                  display: 'inline-flex',
                   mr: 2,
                 }}
               >
@@ -371,17 +350,13 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
                     left: 0,
                     bottom: 0,
                     right: 0,
-                    position: "absolute",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
+                    position: 'absolute',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                   }}
                 >
-                  <Typography
-                    variant="caption"
-                    component="div"
-                    sx={{ fontWeight: "bold" }}
-                  >
+                  <Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
                     {`${Math.round(overallScore)}%`}
                   </Typography>
                 </Box>
@@ -389,34 +364,34 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
               <Chip
                 label={
                   overallScore >= 80
-                    ? "Excellent Match"
+                    ? 'Excellent Match'
                     : overallScore >= 60
-                    ? "Good Match"
+                    ? 'Good Match'
                     : overallScore >= 40
-                    ? "Partial Match"
-                    : "Low Match"
+                    ? 'Partial Match'
+                    : 'Low Match'
                 }
                 sx={{
                   bgcolor: getMatchColor(overallScore),
-                  color: "white",
-                  fontWeight: "bold",
+                  color: 'white',
+                  fontWeight: 'bold',
                 }}
               />
             </>
           )}
         </Box>
         <Button
-          sx={{ marginLeft: "auto" }}
+          sx={{ marginLeft: 'auto' }}
           disabled={analyzing || startAnalysis}
           onClick={beginAnalysis}
           variant="contained"
         >
-          {analyzing ? "Assessment in Progress" : "Start Skill Assessment"}
+          {analyzing ? 'Assessment in Progress' : 'Start Skill Assessment'}
         </Button>
       </Box>
 
       {loadingRequirements ? (
-        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
           <CircularProgress />
           <Typography variant="h6" sx={{ ml: 2 }}>
             Analyzing job requirements...
@@ -435,9 +410,9 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
               onChange={handleAccordionChange(`panel${index}`)}
               sx={{
                 mb: 2,
-                border: "1px solid",
+                border: '1px solid',
                 borderColor:
-                  match.status === "complete"
+                  match.status === 'complete'
                     ? getMatchColor(match.matchScore)
                     : theme.palette.divider,
               }}
@@ -448,25 +423,25 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
                 id={`panel${index}bh-header`}
                 sx={{
                   bgcolor:
-                    match.status === "complete"
+                    match.status === 'complete'
                       ? `${getMatchColor(match.matchScore)}22` // Add transparency
-                      : "inherit",
+                      : 'inherit',
                 }}
               >
                 <Box
                   sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    width: "100%",
-                    justifyContent: "space-between",
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between',
                   }}
                 >
-                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     {getStatusIcon(match.status, match.matchScore)}
                     <Box
                       sx={{
-                        display: "flex",
-                        flexDirection: "column",
+                        display: 'flex',
+                        flexDirection: 'column',
                         gap: 0,
                         p: 0,
                         m: 0,
@@ -476,48 +451,45 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
                         sx={{
                           ml: 1,
                           mb: 0,
-                          fontWeight: "medium",
-                          marginBottom: "0px !important",
+                          fontWeight: 'medium',
+                          marginBottom: '0px !important',
                         }}
                       >
                         {match.skill}
                       </Typography>
-                      <Typography
-                        variant="caption"
-                        sx={{ ml: 1, fontWeight: "light" }}
-                      >
+                      <Typography variant="caption" sx={{ ml: 1, fontWeight: 'light' }}>
                         {match.domain}
                       </Typography>
                     </Box>
                   </Box>
 
-                  {match.status === "complete" ? (
+                  {match.status === 'complete' ? (
                     <Chip
                       label={`${match.matchScore}% Match`}
                       size="small"
                       sx={{
                         bgcolor: getMatchColor(match.matchScore),
-                        color: "white",
+                        color: 'white',
                         minWidth: 90,
                       }}
                     />
-                  ) : match.status === "waiting" ? (
+                  ) : match.status === 'waiting' ? (
                     <Chip
                       label="Waiting..."
                       size="small"
                       sx={{
-                        bgcolor: "rgb(189, 173, 85)",
-                        color: "white",
+                        bgcolor: 'rgb(189, 173, 85)',
+                        color: 'white',
                         minWidth: 90,
                       }}
                     />
-                  ) : match.status === "pending" ? (
+                  ) : match.status === 'pending' ? (
                     <Chip
                       label="Analyzing..."
                       size="small"
                       sx={{
                         bgcolor: theme.palette.grey[400],
-                        color: "white",
+                        color: 'white',
                         minWidth: 90,
                       }}
                     />
@@ -527,7 +499,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
                       size="small"
                       sx={{
                         bgcolor: theme.palette.error.main,
-                        color: "white",
+                        color: 'white',
                         minWidth: 90,
                       }}
                     />
@@ -536,18 +508,16 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
               </AccordionSummary>
 
               <AccordionDetails>
-                {match.status === "pending" ? (
-                  <Box sx={{ width: "100%", p: 2 }}>
+                {match.status === 'pending' ? (
+                  <Box sx={{ width: '100%', p: 2 }}>
                     <LinearProgress />
                     <Typography sx={{ mt: 2 }}>
-                      Analyzing candidate's match for this requirement...{" "}
-                      {matchStatus}
+                      Analyzing candidate's match for this requirement... {matchStatus}
                     </Typography>
                   </Box>
-                ) : match.status === "error" ? (
+                ) : match.status === 'error' ? (
                   <Typography color="error">
-                    {match.assessment ||
-                      "An error occurred while analyzing this requirement."}
+                    {match.assessment || 'An error occurred while analyzing this requirement.'}
                   </Typography>
                 ) : (
                   <Box>
@@ -562,15 +532,14 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
                     <Typography variant="h6" gutterBottom>
                       Supporting Evidence
                     </Typography>
-                    {match.evidenceDetails &&
-                    match.evidenceDetails.length > 0 ? (
+                    {match.evidenceDetails && match.evidenceDetails.length > 0 ? (
                       match.evidenceDetails.map((evidence, evndex) => (
                         <Card
                           key={evndex}
                           variant="outlined"
                           sx={{
                             mb: 2,
-                            borderLeft: "4px solid",
+                            borderLeft: '4px solid',
                             borderColor: theme.palette.primary.main,
                           }}
                         >
@@ -578,28 +547,22 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (
                             <Typography
                               variant="body1"
                               component="div"
-                              sx={{ mb: 1, fontStyle: "italic" }}
+                              sx={{ mb: 1, fontStyle: 'italic' }}
                             >
                               "{evidence.quote}"
                             </Typography>
                             <Box
                               sx={{
-                                display: "flex",
-                                justifyContent: "space-between",
-                                alignItems: "flex-start",
-                                flexDirection: "column",
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                flexDirection: 'column',
                               }}
                             >
-                              <Typography
-                                variant="body2"
-                                color="text.secondary"
-                              >
+                              <Typography variant="body2" color="text.secondary">
                                 Relevance: {evidence.context}
                               </Typography>
-                              <Typography
-                                variant="caption"
-                                color="text.secondary"
-                              >
+                              <Typography variant="caption" color="text.secondary">
                                 Source: {evidence.source}
                               </Typography>
                               {/* <Chip
diff --git a/frontend/src/components/LoadingComponent.tsx b/frontend/src/components/LoadingComponent.tsx
index 93652ca..c7d34b6 100644
--- a/frontend/src/components/LoadingComponent.tsx
+++ b/frontend/src/components/LoadingComponent.tsx
@@ -1,20 +1,13 @@
-import React from "react";
-import {
-  Box,
-  CircularProgress,
-  Typography,
-  Grid,
-  LinearProgress,
-  Fade,
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
+import React from 'react';
+import { Box, CircularProgress, Typography, Grid, LinearProgress, Fade } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 // Types for props
 interface LoadingComponentProps {
   /** Text to display while loading */
   loadingText?: string;
   /** Type of loader to show */
-  loaderType?: "circular" | "linear";
+  loaderType?: 'circular' | 'linear';
   /** Whether to show with fade-in animation */
   withFade?: boolean;
   /** Duration of fade-in animation in ms */
@@ -23,37 +16,37 @@ interface LoadingComponentProps {
 
 // Styled components
 const LoadingContainer = styled(Box)(({ theme }) => ({
-  width: "100%",
+  width: '100%',
   padding: theme.spacing(3),
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
 }));
 
 /**
  * A loading component to display at the top of pages while content is loading
  */
 const LoadingComponent: React.FC<LoadingComponentProps> = ({
-  loadingText = "Loading content...",
-  loaderType = "circular",
+  loadingText = 'Loading content...',
+  loaderType = 'circular',
   withFade = true,
   fadeDuration = 800,
 }) => {
   const content = (
     <LoadingContainer>
       <Grid container spacing={2}>
-        <Grid size={{ xs: 12 }} sx={{ textAlign: "center", mb: 2 }}>
-          {loaderType === "circular" ? (
+        <Grid size={{ xs: 12 }} sx={{ textAlign: 'center', mb: 2 }}>
+          {loaderType === 'circular' ? (
             <CircularProgress color="primary" />
           ) : (
-            <Box sx={{ width: "100%", maxWidth: 400 }}>
+            <Box sx={{ width: '100%', maxWidth: 400 }}>
               <LinearProgress color="primary" />
             </Box>
           )}
         </Grid>
 
-        <Grid size={{ xs: 12 }} sx={{ textAlign: "center" }}>
+        <Grid size={{ xs: 12 }} sx={{ textAlign: 'center' }}>
           <Typography variant="body1" color="textSecondary">
             {loadingText}
           </Typography>
diff --git a/frontend/src/components/LocationInput.tsx b/frontend/src/components/LocationInput.tsx
index 9a233a8..70fe77d 100644
--- a/frontend/src/components/LocationInput.tsx
+++ b/frontend/src/components/LocationInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   TextField,
@@ -8,12 +8,12 @@ import {
   Chip,
   FormControlLabel,
   Checkbox,
-} from "@mui/material";
-import { LocationOn, Public, Home } from "@mui/icons-material";
-import { Country, State, City } from "country-state-city";
-import type { ICountry, IState, ICity } from "country-state-city";
+} from '@mui/material';
+import { LocationOn, Public, Home } from '@mui/icons-material';
+import { Country, State, City } from 'country-state-city';
+import type { ICountry, IState, ICity } from 'country-state-city';
 // Import from your types file - adjust path as needed
-import type { Location } from "types/types";
+import type { Location } from 'types/types';
 
 interface LocationInputProps {
   value?: Partial<Location>;
@@ -38,18 +38,14 @@ const LocationInput: React.FC<LocationInputProps> = ({
   const allCountries = Country.getAllCountries();
 
   const [selectedCountry, setSelectedCountry] = useState<ICountry | null>(
-    value.country
-      ? allCountries.find((c) => c.name === value.country) || null
-      : null
+    value.country ? allCountries.find(c => c.name === value.country) || null : null
   );
   const [selectedState, setSelectedState] = useState<IState | null>(null);
   const [selectedCity, setSelectedCity] = useState<ICity | null>(null);
   const [isRemote, setIsRemote] = useState<boolean>(value.remote || false);
 
   // Get states for selected country
-  const availableStates = selectedCountry
-    ? State.getStatesOfCountry(selectedCountry.isoCode)
-    : [];
+  const availableStates = selectedCountry ? State.getStatesOfCountry(selectedCountry.isoCode) : [];
 
   // Get cities for selected state
   const availableCities =
@@ -60,14 +56,14 @@ const LocationInput: React.FC<LocationInputProps> = ({
   // Initialize state and city from value prop
   useEffect(() => {
     if (selectedCountry && value.state) {
-      const stateMatch = availableStates.find((s) => s.name === value.state);
+      const stateMatch = availableStates.find(s => s.name === value.state);
       setSelectedState(stateMatch || null);
     }
   }, [selectedCountry, value.state, availableStates]);
 
   useEffect(() => {
     if (selectedCountry && selectedState && value.city && showCity) {
-      const cityMatch = availableCities.find((c) => c.name === value.city);
+      const cityMatch = availableCities.find(c => c.name === value.city);
       setSelectedCity(cityMatch || null);
     }
   }, [selectedCountry, selectedState, value.city, availableCities, showCity]);
@@ -93,12 +89,7 @@ const LocationInput: React.FC<LocationInputProps> = ({
     }
 
     // Only call onChange if there's actual data or if clearing
-    if (
-      Object.keys(newLocation).length > 0 ||
-      value.country ||
-      value.state ||
-      value.city
-    ) {
+    if (Object.keys(newLocation).length > 0 || value.country || value.state || value.city) {
       onChange(newLocation);
     }
   }, [
@@ -136,13 +127,9 @@ const LocationInput: React.FC<LocationInputProps> = ({
 
   return (
     <Box>
-      <Typography
-        variant="h6"
-        gutterBottom
-        sx={{ display: "flex", alignItems: "center", gap: 1 }}
-      >
+      <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <LocationOn color="primary" />
-        Location {required && <span style={{ color: "red" }}>*</span>}
+        Location {required && <span style={{ color: 'red' }}>*</span>}
       </Typography>
 
       <Grid container spacing={2}>
@@ -152,9 +139,9 @@ const LocationInput: React.FC<LocationInputProps> = ({
             value={selectedCountry}
             onChange={handleCountryChange}
             options={allCountries}
-            getOptionLabel={(option) => option.name}
+            getOptionLabel={option => option.name}
             disabled={disabled}
-            renderInput={(params) => (
+            renderInput={params => (
               <TextField
                 {...params}
                 label="Country"
@@ -162,15 +149,11 @@ const LocationInput: React.FC<LocationInputProps> = ({
                 required={required}
                 error={error && required && !selectedCountry}
                 helperText={
-                  error && required && !selectedCountry
-                    ? "Country is required"
-                    : helperText
+                  error && required && !selectedCountry ? 'Country is required' : helperText
                 }
                 InputProps={{
                   ...params.InputProps,
-                  startAdornment: (
-                    <Public sx={{ mr: 1, color: "text.secondary" }} />
-                  ),
+                  startAdornment: <Public sx={{ mr: 1, color: 'text.secondary' }} />,
                 }}
               />
             )}
@@ -197,17 +180,15 @@ const LocationInput: React.FC<LocationInputProps> = ({
               value={selectedState}
               onChange={handleStateChange}
               options={availableStates}
-              getOptionLabel={(option) => option.name}
+              getOptionLabel={option => option.name}
               disabled={disabled || availableStates.length === 0}
-              renderInput={(params) => (
+              renderInput={params => (
                 <TextField
                   {...params}
                   label="State/Region"
                   variant="outlined"
                   placeholder={
-                    availableStates.length > 0
-                      ? "Select state/region"
-                      : "No states available"
+                    availableStates.length > 0 ? 'Select state/region' : 'No states available'
                   }
                 />
               )}
@@ -222,23 +203,17 @@ const LocationInput: React.FC<LocationInputProps> = ({
               value={selectedCity}
               onChange={handleCityChange}
               options={availableCities}
-              getOptionLabel={(option) => option.name}
+              getOptionLabel={option => option.name}
               disabled={disabled || availableCities.length === 0}
-              renderInput={(params) => (
+              renderInput={params => (
                 <TextField
                   {...params}
                   label="City"
                   variant="outlined"
-                  placeholder={
-                    availableCities.length > 0
-                      ? "Select city"
-                      : "No cities available"
-                  }
+                  placeholder={availableCities.length > 0 ? 'Select city' : 'No cities available'}
                   InputProps={{
                     ...params.InputProps,
-                    startAdornment: (
-                      <Home sx={{ mr: 1, color: "text.secondary" }} />
-                    ),
+                    startAdornment: <Home sx={{ mr: 1, color: 'text.secondary' }} />,
                   }}
                 />
               )}
@@ -264,7 +239,7 @@ const LocationInput: React.FC<LocationInputProps> = ({
         {/* Location Summary Chips */}
         {(selectedCountry || selectedState || selectedCity || isRemote) && (
           <Grid size={{ xs: 12 }}>
-            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 1, mt: 1 }}>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
               {selectedCountry && (
                 <Chip
                   icon={<Public />}
@@ -291,14 +266,7 @@ const LocationInput: React.FC<LocationInputProps> = ({
                   size="small"
                 />
               )}
-              {isRemote && (
-                <Chip
-                  label="Remote"
-                  variant="filled"
-                  color="success"
-                  size="small"
-                />
-              )}
+              {isRemote && <Chip label="Remote" variant="filled" color="success" size="small" />}
             </Box>
           </Grid>
         )}
@@ -314,29 +282,23 @@ const LocationInputDemo: React.FC = () => {
 
   const handleLocationChange = (newLocation: Partial<Location>) => {
     setLocation(newLocation);
-    console.log("Location updated:", newLocation);
+    console.log('Location updated:', newLocation);
   };
 
   // Show some stats about the data
   const totalCountries = Country.getAllCountries().length;
-  const usStates = State.getStatesOfCountry("US").length;
-  const canadaProvinces = State.getStatesOfCountry("CA").length;
+  const usStates = State.getStatesOfCountry('US').length;
+  const canadaProvinces = State.getStatesOfCountry('CA').length;
 
   return (
-    <Box sx={{ p: 3, maxWidth: 800, mx: "auto" }}>
+    <Box sx={{ p: 3, maxWidth: 800, mx: 'auto' }}>
       <Typography variant="h4" gutterBottom align="center" color="primary">
         Location Input with Real Data
       </Typography>
 
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        align="center"
-        sx={{ mb: 3 }}
-      >
+      <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 3 }}>
         Using country-state-city library with {totalCountries} countries,
-        {usStates} US states, {canadaProvinces} Canadian provinces, and
-        thousands of cities
+        {usStates} US states, {canadaProvinces} Canadian provinces, and thousands of cities
       </Typography>
 
       <Grid container spacing={4}>
@@ -344,11 +306,7 @@ const LocationInputDemo: React.FC = () => {
           <Typography variant="h5" gutterBottom>
             Basic Location Input
           </Typography>
-          <LocationInput
-            value={location}
-            onChange={handleLocationChange}
-            required
-          />
+          <LocationInput value={location} onChange={handleLocationChange} required />
         </Grid>
 
         <Grid size={{ xs: 12 }}>
@@ -356,7 +314,7 @@ const LocationInputDemo: React.FC = () => {
             control={
               <Checkbox
                 checked={showAdvanced}
-                onChange={(e) => setShowAdvanced(e.target.checked)}
+                onChange={e => setShowAdvanced(e.target.checked)}
                 color="primary"
               />
             }
@@ -385,11 +343,11 @@ const LocationInputDemo: React.FC = () => {
           <Box
             component="pre"
             sx={{
-              bgcolor: "grey.100",
+              bgcolor: 'grey.100',
               p: 2,
               borderRadius: 1,
-              overflow: "auto",
-              fontSize: "0.875rem",
+              overflow: 'auto',
+              fontSize: '0.875rem',
             }}
           >
             {JSON.stringify(location, null, 2)}
@@ -398,9 +356,8 @@ const LocationInputDemo: React.FC = () => {
 
         <Grid size={{ xs: 12 }}>
           <Typography variant="body2" color="text.secondary">
-            💡 This component uses the country-state-city library which is
-            regularly updated and includes ISO codes, flags, and comprehensive
-            location data.
+            💡 This component uses the country-state-city library which is regularly updated and
+            includes ISO codes, flags, and comprehensive location data.
           </Typography>
         </Grid>
       </Grid>
diff --git a/frontend/src/components/Mermaid.tsx b/frontend/src/components/Mermaid.tsx
index cbe1ef6..0eeff68 100644
--- a/frontend/src/components/Mermaid.tsx
+++ b/frontend/src/components/Mermaid.tsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
-import mermaid, { MermaidConfig } from "mermaid";
-import { SxProps } from "@mui/material/styles";
-import { Box } from "@mui/material";
-import { useResizeObserverAndMutationObserver } from "../hooks/useAutoScrollToBottom";
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import mermaid, { MermaidConfig } from 'mermaid';
+import { SxProps } from '@mui/material/styles';
+import { Box } from '@mui/material';
+import { useResizeObserverAndMutationObserver } from '../hooks/useAutoScrollToBottom';
 
 const defaultMermaidConfig: MermaidConfig = {
   startOnLoad: true,
-  securityLevel: "loose",
-  fontFamily: "Fira Code",
+  securityLevel: 'loose',
+  fontFamily: 'Fira Code',
 };
 
 interface MermaidProps {
@@ -38,7 +38,7 @@ const Mermaid: React.FC<MermaidProps> = (props: MermaidProps) => {
           await mermaid.initialize(mermaidConfig || defaultMermaidConfig);
           await mermaid.run({ nodes: [containerRef.current] });
         } catch (e) {
-          console.error("Mermaid render error:", e, containerRef.current);
+          console.error('Mermaid render error:', e, containerRef.current);
         }
       }
     };
@@ -50,10 +50,10 @@ const Mermaid: React.FC<MermaidProps> = (props: MermaidProps) => {
 
   return (
     <Box
-      className={className || "Mermaid"}
+      className={className || 'Mermaid'}
       ref={containerRef}
       sx={{
-        display: "flex",
+        display: 'flex',
         flexGrow: 1,
         ...sx,
       }}
diff --git a/frontend/src/components/Message.tsx b/frontend/src/components/Message.tsx
index bc237f2..0bfbc56 100644
--- a/frontend/src/components/Message.tsx
+++ b/frontend/src/components/Message.tsx
@@ -1,42 +1,37 @@
-import { useState, useRef } from "react";
-import Divider from "@mui/material/Divider";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Button from "@mui/material/Button";
-import CardContent from "@mui/material/CardContent";
-import CardActions from "@mui/material/CardActions";
-import Collapse from "@mui/material/Collapse";
-import { ExpandMore } from "./ExpandMore";
-import JsonView from "@uiw/react-json-view";
-import React from "react";
-import { Box } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import { SxProps, Theme } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
+import { useState, useRef } from 'react';
+import Divider from '@mui/material/Divider';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Card from '@mui/material/Card';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Button from '@mui/material/Button';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Collapse from '@mui/material/Collapse';
+import { ExpandMore } from './ExpandMore';
+import JsonView from '@uiw/react-json-view';
+import React from 'react';
+import { Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { SxProps, Theme } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
 
-import {
-  ErrorOutline,
-  InfoOutline,
-  Memory,
-  Psychology /* Stream, */,
-} from "@mui/icons-material";
+import { ErrorOutline, InfoOutline, Memory, Psychology /* Stream, */ } from '@mui/icons-material';
 
-import { StyledMarkdown } from "./StyledMarkdown";
+import { StyledMarkdown } from './StyledMarkdown';
 
-import { VectorVisualizer } from "./VectorVisualizer";
-import { SetSnackType } from "./Snack";
-import { CopyBubble } from "./CopyBubble";
-import { Scrollable } from "./Scrollable";
-import { BackstoryElementProps } from "./BackstoryTab";
+import { VectorVisualizer } from './VectorVisualizer';
+import { SetSnackType } from './Snack';
+import { CopyBubble } from './CopyBubble';
+import { Scrollable } from './Scrollable';
+import { BackstoryElementProps } from './BackstoryTab';
 import {
   ChatMessage,
   ChatSession,
@@ -47,26 +42,23 @@ import {
   ChatMessageError,
   ChatMessageStatus,
   ChatSenderType,
-} from "types/types";
+} from 'types/types';
 
-const getStyle = (
-  theme: Theme,
-  type: ApiActivityType | ChatSenderType | "error"
-): any => {
-  const defaultRadius = "16px";
+const getStyle = (theme: Theme, type: ApiActivityType | ChatSenderType | 'error'): any => {
+  const defaultRadius = '16px';
   const defaultStyle = {
     padding: theme.spacing(1, 2),
-    fontSize: "0.875rem",
-    alignSelf: "flex-start",
-    maxWidth: "100%",
-    minWidth: "100%",
-    height: "fit-content",
-    "& > *": {
-      color: "inherit",
-      overflow: "hidden",
+    fontSize: '0.875rem',
+    alignSelf: 'flex-start',
+    maxWidth: '100%',
+    minWidth: '100%',
+    height: 'fit-content',
+    '& > *': {
+      color: 'inherit',
+      overflow: 'hidden',
       m: 0,
     },
-    "& > :last-child": {
+    '& > :last-child': {
       mb: 0,
       m: 0,
       p: 0,
@@ -83,45 +75,45 @@ const getStyle = (
     },
     content: {
       ...defaultStyle,
-      backgroundColor: "#F5F2EA",
+      backgroundColor: '#F5F2EA',
       border: `1px solid ${theme.palette.custom.highlight}`,
       borderRadius: 0,
-      alignSelf: "center",
+      alignSelf: 'center',
       color: theme.palette.text.primary,
-      padding: "8px 8px",
-      marginBottom: "0px",
-      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-      fontSize: "0.9rem",
-      lineHeight: "1.3",
+      padding: '8px 8px',
+      marginBottom: '0px',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
+      fontSize: '0.9rem',
+      lineHeight: '1.3',
       fontFamily: theme.typography.fontFamily,
     },
     error: {
       ...defaultStyle,
-      backgroundColor: "#F8E7E7",
+      backgroundColor: '#F8E7E7',
       border: `1px solid #D83A3A`,
       borderRadius: defaultRadius,
-      maxWidth: "90%",
-      minWidth: "90%",
-      alignSelf: "center",
-      color: "#8B2525",
-      padding: "10px 16px",
-      boxShadow: "0 1px 3px rgba(216, 58, 58, 0.15)",
+      maxWidth: '90%',
+      minWidth: '90%',
+      alignSelf: 'center',
+      color: '#8B2525',
+      padding: '10px 16px',
+      boxShadow: '0 1px 3px rgba(216, 58, 58, 0.15)',
     },
-    "fact-check": "qualifications",
-    generating: "status",
-    "job-description": "content",
-    "job-requirements": "qualifications",
+    'fact-check': 'qualifications',
+    generating: 'status',
+    'job-description': 'content',
+    'job-requirements': 'qualifications',
     information: {
       ...defaultStyle,
-      backgroundColor: "#BFD8D8",
+      backgroundColor: '#BFD8D8',
       border: `1px solid ${theme.palette.secondary.main}`,
       borderRadius: defaultRadius,
       color: theme.palette.text.primary,
       opacity: 0.95,
     },
-    info: "information",
-    preparing: "status",
-    processing: "status",
+    info: 'information',
+    preparing: 'status',
+    processing: 'status',
     qualifications: {
       ...defaultStyle,
       backgroundColor: theme.palette.primary.light,
@@ -129,49 +121,49 @@ const getStyle = (
       borderRadius: `${defaultRadius} ${defaultRadius} ${defaultRadius} 0`,
       color: theme.palette.primary.contrastText,
     },
-    resume: "content",
-    searching: "status",
+    resume: 'content',
+    searching: 'status',
     status: {
       ...defaultStyle,
-      backgroundColor: "rgba(74, 122, 125, 0.15)",
+      backgroundColor: 'rgba(74, 122, 125, 0.15)',
       border: `1px solid ${theme.palette.secondary.light}`,
-      borderRadius: "4px",
-      maxWidth: "75%",
-      minWidth: "75%",
-      alignSelf: "center",
+      borderRadius: '4px',
+      maxWidth: '75%',
+      minWidth: '75%',
+      alignSelf: 'center',
       color: theme.palette.secondary.dark,
       fontWeight: 500,
-      fontSize: "0.95rem",
-      padding: "8px 12px",
+      fontSize: '0.95rem',
+      padding: '8px 12px',
       opacity: 0.9,
-      transition: "opacity 0.3s ease-in-out",
+      transition: 'opacity 0.3s ease-in-out',
     },
-    streaming: "response",
+    streaming: 'response',
     system: {
       ...defaultStyle,
-      backgroundColor: "#EDEAE0",
+      backgroundColor: '#EDEAE0',
       border: `1px dashed ${theme.palette.custom.highlight}`,
       borderRadius: defaultRadius,
-      maxWidth: "90%",
-      minWidth: "90%",
-      alignSelf: "center",
+      maxWidth: '90%',
+      minWidth: '90%',
+      alignSelf: 'center',
       color: theme.palette.text.primary,
-      fontStyle: "italic",
+      fontStyle: 'italic',
     },
-    thinking: "status",
+    thinking: 'status',
     user: {
       ...defaultStyle,
       backgroundColor: theme.palette.background.default,
       border: `1px solid ${theme.palette.custom.highlight}`,
       borderRadius: `${defaultRadius} ${defaultRadius} 0 ${defaultRadius}`,
-      alignSelf: "flex-end",
+      alignSelf: 'flex-end',
       color: theme.palette.primary.main,
     },
   };
 
   // Resolve string references in styles
   for (const [key, value] of Object.entries(styles)) {
-    if (typeof value === "string") {
+    if (typeof value === 'string') {
       styles[key] = styles[value];
     }
   }
@@ -184,7 +176,7 @@ const getStyle = (
 };
 
 const getIcon = (
-  activityType: ApiActivityType | ChatSenderType | "error"
+  activityType: ApiActivityType | ChatSenderType | 'error'
 ): React.ReactNode | null => {
   const icons: any = {
     error: <ErrorOutline color="error" />,
@@ -227,19 +219,15 @@ const MessageMeta = (props: MessageMetaProps) => {
   } = props.metadata || {};
   const message: any = props.messageProps.message;
 
-  let llm_submission = "<|system|>\n";
-  llm_submission += message.system_prompt + "\n\n";
+  let llm_submission = '<|system|>\n';
+  llm_submission += message.system_prompt + '\n\n';
   llm_submission += message.context_prompt;
 
   return (
     <>
       {promptEvalDuration !== 0 && evalDuration !== 0 && (
         <>
-          <TableContainer
-            component={Card}
-            className="PromptStats"
-            sx={{ mb: 1 }}
-          >
+          <TableContainer component={Card} className="PromptStats" sx={{ mb: 1 }}>
             <Table aria-label="prompt stats" size="small">
               <TableHead>
                 <TableRow>
@@ -250,10 +238,7 @@ const MessageMeta = (props: MessageMetaProps) => {
                 </TableRow>
               </TableHead>
               <TableBody>
-                <TableRow
-                  key="prompt"
-                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                >
+                <TableRow key="prompt" sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                   <TableCell component="th" scope="row">
                     Prompt
                   </TableCell>
@@ -262,39 +247,26 @@ const MessageMeta = (props: MessageMetaProps) => {
                     {Math.round(promptEvalDuration / 10 ** 7) / 100}
                   </TableCell>
                   <TableCell align="right">
-                    {Math.round(
-                      (promptEvalCount * 10 ** 9) / promptEvalDuration
-                    )}
+                    {Math.round((promptEvalCount * 10 ** 9) / promptEvalDuration)}
                   </TableCell>
                 </TableRow>
-                <TableRow
-                  key="response"
-                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                >
+                <TableRow key="response" sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                   <TableCell component="th" scope="row">
                     Response
                   </TableCell>
                   <TableCell align="right">{evalCount}</TableCell>
-                  <TableCell align="right">
-                    {Math.round(evalDuration / 10 ** 7) / 100}
-                  </TableCell>
+                  <TableCell align="right">{Math.round(evalDuration / 10 ** 7) / 100}</TableCell>
                   <TableCell align="right">
                     {Math.round((evalCount * 10 ** 9) / evalDuration)}
                   </TableCell>
                 </TableRow>
-                <TableRow
-                  key="total"
-                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                >
+                <TableRow key="total" sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                   <TableCell component="th" scope="row">
                     Total
                   </TableCell>
+                  <TableCell align="right">{promptEvalCount + evalCount}</TableCell>
                   <TableCell align="right">
-                    {promptEvalCount + evalCount}
-                  </TableCell>
-                  <TableCell align="right">
-                    {Math.round((promptEvalDuration + evalDuration) / 10 ** 7) /
-                      100}
+                    {Math.round((promptEvalDuration + evalDuration) / 10 ** 7) / 100}
                   </TableCell>
                   <TableCell align="right">
                     {Math.round(
@@ -309,9 +281,9 @@ const MessageMeta = (props: MessageMetaProps) => {
         </>
       )}
       {tools && tools.tool_calls && tools.tool_calls.length !== 0 && (
-        <Accordion sx={{ boxSizing: "border-box" }}>
+        <Accordion sx={{ boxSizing: 'border-box' }}>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Box sx={{ fontSize: "0.8rem" }}>Tools queried</Box>
+            <Box sx={{ fontSize: '0.8rem' }}>Tools queried</Box>
           </AccordionSummary>
           <AccordionDetails>
             {tools.tool_calls.map((tool: any, index: number) => (
@@ -321,48 +293,45 @@ const MessageMeta = (props: MessageMetaProps) => {
                   m: 0,
                   p: 1,
                   pt: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                  border: "1px solid #e0e0e0",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  border: '1px solid #e0e0e0',
                 }}
               >
                 {index !== 0 && <Divider />}
                 <Box
                   sx={{
-                    fontSize: "0.75rem",
-                    display: "flex",
-                    flexDirection: "column",
+                    fontSize: '0.75rem',
+                    display: 'flex',
+                    flexDirection: 'column',
                     mt: 1,
                     mb: 1,
-                    fontWeight: "bold",
+                    fontWeight: 'bold',
                   }}
                 >
                   {tool.name}
                 </Box>
-                {tool.content !== "null" && (
+                {tool.content !== 'null' && (
                   <JsonView
                     displayDataTypes={false}
                     objectSortKeys={true}
                     collapsed={1}
                     value={JSON.parse(tool.content)}
                     style={{
-                      fontSize: "0.8rem",
-                      maxHeight: "20rem",
-                      overflow: "auto",
+                      fontSize: '0.8rem',
+                      maxHeight: '20rem',
+                      overflow: 'auto',
                     }}
                   >
                     <JsonView.String
                       render={({ children, ...reset }) => {
-                        if (
-                          typeof children === "string" &&
-                          children.match("\n")
-                        ) {
+                        if (typeof children === 'string' && children.match('\n')) {
                           return (
                             <pre
                               {...reset}
                               style={{
-                                display: "flex",
-                                border: "none",
+                                display: 'flex',
+                                border: 'none',
                                 ...reset.style,
                               }}
                             >
@@ -374,7 +343,7 @@ const MessageMeta = (props: MessageMetaProps) => {
                     />
                   </JsonView>
                 )}
-                {tool.content === "null" && "No response from tool call"}
+                {tool.content === 'null' && 'No response from tool call'}
               </Box>
             ))}
           </AccordionDetails>
@@ -383,19 +352,13 @@ const MessageMeta = (props: MessageMetaProps) => {
       {ragResults.map((collection: ChromaDBGetResponse) => (
         <Accordion key={collection.name}>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Box sx={{ fontSize: "0.8rem" }}>
-              Top {collection.ids?.length} RAG matches from {collection.size}{" "}
-              entries using an embedding vector of{" "}
-              {collection.queryEmbedding?.length} dimensions
+            <Box sx={{ fontSize: '0.8rem' }}>
+              Top {collection.ids?.length} RAG matches from {collection.size} entries using an
+              embedding vector of {collection.queryEmbedding?.length} dimensions
             </Box>
           </AccordionSummary>
           <AccordionDetails>
-            <VectorVisualizer
-              inline
-              {...props.messageProps}
-              {...props.metadata}
-              rag={collection}
-            />
+            <VectorVisualizer inline {...props.messageProps} {...props.metadata} rag={collection} />
             {/* { ...rag, query: message.prompt }} /> */}
           </AccordionDetails>
         </Accordion>
@@ -403,7 +366,7 @@ const MessageMeta = (props: MessageMetaProps) => {
 
       <Accordion>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Box sx={{ fontSize: "0.8rem" }}>Full Response Details</Box>
+          <Box sx={{ fontSize: '0.8rem' }}>Full Response Details</Box>
         </AccordionSummary>
         <AccordionDetails>
           <Box sx={{ pb: 1 }}>
@@ -414,17 +377,17 @@ const MessageMeta = (props: MessageMetaProps) => {
             objectSortKeys={true}
             collapsed={1}
             value={message}
-            style={{ fontSize: "0.8rem", maxHeight: "20rem", overflow: "auto" }}
+            style={{ fontSize: '0.8rem', maxHeight: '20rem', overflow: 'auto' }}
           >
             <JsonView.String
               render={({ children, ...reset }) => {
-                if (typeof children === "string" && children.match("\n")) {
+                if (typeof children === 'string' && children.match('\n')) {
                   return (
                     <pre
                       {...reset}
                       style={{
-                        display: "inline",
-                        border: "none",
+                        display: 'inline',
+                        border: 'none',
                         ...reset.style,
                       }}
                     >
@@ -442,7 +405,7 @@ const MessageMeta = (props: MessageMetaProps) => {
 };
 
 interface MessageContainerProps {
-  type: ApiActivityType | ChatSenderType | "error";
+  type: ApiActivityType | ChatSenderType | 'error';
   metadataView?: React.ReactNode | null;
   messageView?: React.ReactNode | null;
   sx?: SxProps<Theme>;
@@ -457,20 +420,20 @@ const MessageContainer = (props: MessageContainerProps) => {
     <Box
       className={`Message Message-${type}`}
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         m: 0,
         mt: 1,
-        marginBottom: "0px !important", // Remove whitespace from expanded Accordion
+        marginBottom: '0px !important', // Remove whitespace from expanded Accordion
         gap: 1,
         ...sx,
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
           gap: 1,
         }}
       >
@@ -479,18 +442,15 @@ const MessageContainer = (props: MessageContainerProps) => {
       </Box>
       <Box
         flex={{
-          display: "flex",
-          position: "relative",
-          flexDirection: "row",
-          justifyContent: "flex-end",
-          alignItems: "center",
+          display: 'flex',
+          position: 'relative',
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
         }}
       >
         {copyContent && (
-          <CopyBubble
-            content={copyContent}
-            sx={{ position: "absolute", top: "11px", left: 0 }}
-          />
+          <CopyBubble content={copyContent} sx={{ position: 'absolute', top: '11px', left: 0 }} />
         )}
         {metadataView}
       </Box>
@@ -499,23 +459,14 @@ const MessageContainer = (props: MessageContainerProps) => {
 };
 
 const Message = (props: MessageProps) => {
-  const {
-    message,
-    title,
-    sx,
-    className,
-    chatSession,
-    onExpand,
-    expanded,
-    expandable,
-  } = props;
+  const { message, title, sx, className, chatSession, onExpand, expanded, expandable } = props;
   const [metaExpanded, setMetaExpanded] = useState<boolean>(false);
   const theme = useTheme();
-  const type: ApiActivityType | ChatSenderType | "error" =
-    "activity" in message
+  const type: ApiActivityType | ChatSenderType | 'error' =
+    'activity' in message
       ? message.activity
-      : "error" in message
-      ? "error"
+      : 'error' in message
+      ? 'error'
       : (message as ChatMessage).role;
   const style: any = getStyle(theme, type);
 
@@ -524,12 +475,10 @@ const Message = (props: MessageProps) => {
   };
 
   let content;
-  if (typeof message.content === "string") {
+  if (typeof message.content === 'string') {
     content = message.content.trim();
   } else {
-    console.error(
-      `message content is not a string, it is a ${typeof message.content}`
-    );
+    console.error(`message content is not a string, it is a ${typeof message.content}`);
     return <></>;
   }
 
@@ -540,35 +489,33 @@ const Message = (props: MessageProps) => {
   const messageView = (
     <StyledMarkdown
       chatSession={chatSession}
-      streaming={message.status === "streaming"}
+      streaming={message.status === 'streaming'}
       content={content}
     />
   );
 
   let metadataView = <></>;
   let metadata: ChatMessageMetaData | null =
-    "metadata" in message
-      ? (message.metadata as ChatMessageMetaData) || null
-      : null;
-  if ("role" in message && message.role === "user") {
+    'metadata' in message ? (message.metadata as ChatMessageMetaData) || null : null;
+  if ('role' in message && message.role === 'user') {
     metadata = null;
   }
   if (metadata) {
     metadataView = (
-      <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
         <Box
           sx={{
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
             gap: 1,
-            flexDirection: "row",
+            flexDirection: 'row',
           }}
         >
-          <Box sx={{ display: "flex", flexGrow: 1 }} />
+          <Box sx={{ display: 'flex', flexGrow: 1 }} />
           <Button
             variant="text"
             onClick={handleMetaExpandClick}
-            sx={{ flexShrink: 1, color: "darkgrey", p: 0 }}
+            sx={{ flexShrink: 1, color: 'darkgrey', p: 0 }}
           >
             LLM information for this query
           </Button>
@@ -591,7 +538,7 @@ const Message = (props: MessageProps) => {
     );
   }
 
-  const copyContent = type === "assistant" ? message.content : undefined;
+  const copyContent = type === 'assistant' ? message.content : undefined;
 
   if (!expandable) {
     /* When not expandable, the styles are applied directly to MessageContainer */
@@ -610,8 +557,7 @@ const Message = (props: MessageProps) => {
   }
 
   // Determine if Accordion is controlled
-  const isControlled =
-    typeof expanded === "boolean" && typeof onExpand === "function";
+  const isControlled = typeof expanded === 'boolean' && typeof onExpand === 'function';
   return (
     <Accordion
       expanded={isControlled ? expanded : undefined} // Omit expanded prop for uncontrolled
@@ -627,17 +573,17 @@ const Message = (props: MessageProps) => {
         slotProps={{
           content: {
             sx: {
-              display: "flex",
-              justifyItems: "center",
+              display: 'flex',
+              justifyItems: 'center',
               m: 0,
               p: 0,
-              fontWeight: "bold",
-              fontSize: "1.1rem",
+              fontWeight: 'bold',
+              fontSize: '1.1rem',
             },
           },
         }}
       >
-        {title || ""}
+        {title || ''}
       </AccordionSummary>
       <AccordionDetails sx={{ mt: 0, mb: 0, p: 0, pl: 2, pr: 2 }}>
         <MessageContainer
diff --git a/frontend/src/components/Pulse.tsx b/frontend/src/components/Pulse.tsx
index 49de1d3..3a6760c 100644
--- a/frontend/src/components/Pulse.tsx
+++ b/frontend/src/components/Pulse.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useRef } from "react";
-import { SxProps } from "@mui/material";
-import Box from "@mui/material/Box";
+import React, { useEffect, useState, useRef } from 'react';
+import { SxProps } from '@mui/material';
+import Box from '@mui/material/Box';
 
 interface PulseProps {
   timestamp: number | string;
@@ -15,7 +15,7 @@ const Pulse: React.FC<PulseProps> = ({ timestamp, sx }) => {
   useEffect(() => {
     if (timestamp && timestamp !== previousTimestamp.current) {
       previousTimestamp.current = timestamp;
-      setAnimationKey((prev) => prev + 1);
+      setAnimationKey(prev => prev + 1);
       setIsAnimating(true);
 
       // Reset animation state after animation completes
@@ -28,68 +28,68 @@ const Pulse: React.FC<PulseProps> = ({ timestamp, sx }) => {
   }, [timestamp]);
 
   const containerStyle: React.CSSProperties = {
-    position: "relative",
+    position: 'relative',
     width: 80,
     height: 80,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   };
 
   const baseCoreStyle: React.CSSProperties = {
     width: 0,
     height: 0,
-    borderRadius: "50%",
-    backgroundColor: "#2196f3",
-    position: "relative",
+    borderRadius: '50%',
+    backgroundColor: '#2196f3',
+    position: 'relative',
     zIndex: 3,
   };
 
   const coreStyle: React.CSSProperties = {
     ...baseCoreStyle,
-    animation: isAnimating ? "pulse-glow 1s ease-out" : "none",
+    animation: isAnimating ? 'pulse-glow 1s ease-out' : 'none',
   };
 
   const pulseRing1Style: React.CSSProperties = {
-    position: "absolute",
+    position: 'absolute',
     width: 24,
     height: 24,
-    borderRadius: "50%",
-    backgroundColor: "#2196f3",
+    borderRadius: '50%',
+    backgroundColor: '#2196f3',
     zIndex: 2,
-    animation: "pulse-expand 1s ease-out forwards",
+    animation: 'pulse-expand 1s ease-out forwards',
   };
 
   const pulseRing2Style: React.CSSProperties = {
-    position: "absolute",
+    position: 'absolute',
     width: 24,
     height: 24,
-    borderRadius: "50%",
-    backgroundColor: "#64b5f6",
+    borderRadius: '50%',
+    backgroundColor: '#64b5f6',
     zIndex: 1,
-    animation: "pulse-expand 1s ease-out 0.2s forwards",
+    animation: 'pulse-expand 1s ease-out 0.2s forwards',
   };
 
   const rippleStyle: React.CSSProperties = {
-    position: "absolute",
+    position: 'absolute',
     width: 32,
     height: 32,
-    borderRadius: "50%",
-    border: "2px solid #2196f3",
-    backgroundColor: "transparent",
+    borderRadius: '50%',
+    border: '2px solid #2196f3',
+    backgroundColor: 'transparent',
     zIndex: 0,
-    animation: "ripple-expand 1s ease-out forwards",
+    animation: 'ripple-expand 1s ease-out forwards',
   };
 
   const outerRippleStyle: React.CSSProperties = {
-    position: "absolute",
+    position: 'absolute',
     width: 40,
     height: 40,
-    borderRadius: "50%",
-    border: "1px solid #90caf9",
-    backgroundColor: "transparent",
+    borderRadius: '50%',
+    border: '1px solid #90caf9',
+    backgroundColor: 'transparent',
     zIndex: 0,
-    animation: "ripple-expand 1s ease-out 0.3s forwards",
+    animation: 'ripple-expand 1s ease-out 0.3s forwards',
   };
 
   return (
@@ -153,10 +153,7 @@ const Pulse: React.FC<PulseProps> = ({ timestamp, sx }) => {
             <div key={`ripple-${animationKey}`} style={rippleStyle} />
 
             {/* Outer ripple */}
-            <div
-              key={`ripple-outer-${animationKey}`}
-              style={outerRippleStyle}
-            />
+            <div key={`ripple-outer-${animationKey}`} style={outerRippleStyle} />
           </>
         )}
       </Box>
diff --git a/frontend/src/components/Quote.tsx b/frontend/src/components/Quote.tsx
index 29a9fd5..8c5c1a8 100644
--- a/frontend/src/components/Quote.tsx
+++ b/frontend/src/components/Quote.tsx
@@ -1,115 +1,111 @@
-import React from "react";
-import { Box, Typography, Paper, SxProps } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import React from 'react';
+import { Box, Typography, Paper, SxProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 interface QuoteContainerProps {
-  size?: "normal" | "small";
+  size?: 'normal' | 'small';
 }
 
 const QuoteContainer = styled(Paper, {
-  shouldForwardProp: (prop) => prop !== "size",
-})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
-  position: "relative",
-  padding: size === "small" ? theme.spacing(1) : theme.spacing(4),
-  margin: size === "small" ? theme.spacing(0.5) : theme.spacing(2),
-  background: "linear-gradient(135deg, #FFFFFF 0%, #D3CDBF 100%)",
-  borderRadius: size === "small" ? theme.spacing(1) : theme.spacing(2),
-  boxShadow: "0 8px 32px rgba(26, 37, 54, 0.15)",
-  overflow: "hidden",
-  border: "1px solid rgba(74, 122, 125, 0.2)",
-  "&::before": {
+  shouldForwardProp: prop => prop !== 'size',
+})<QuoteContainerProps>(({ theme, size = 'normal' }) => ({
+  position: 'relative',
+  padding: size === 'small' ? theme.spacing(1) : theme.spacing(4),
+  margin: size === 'small' ? theme.spacing(0.5) : theme.spacing(2),
+  background: 'linear-gradient(135deg, #FFFFFF 0%, #D3CDBF 100%)',
+  borderRadius: size === 'small' ? theme.spacing(1) : theme.spacing(2),
+  boxShadow: '0 8px 32px rgba(26, 37, 54, 0.15)',
+  overflow: 'hidden',
+  border: '1px solid rgba(74, 122, 125, 0.2)',
+  '&::before': {
     content: '""',
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
-    height: size === "small" ? "2px" : "4px",
-    background: "linear-gradient(90deg, #4A7A7D 0%, #D4A017 100%)",
+    height: size === 'small' ? '2px' : '4px',
+    background: 'linear-gradient(90deg, #4A7A7D 0%, #D4A017 100%)',
   },
 }));
 
 const QuoteText = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== "size",
-})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
-  fontSize: size === "small" ? "0.9rem" : "1.2rem",
-  lineHeight: size === "small" ? 1.4 : 1.6,
-  fontStyle: "italic",
-  color: "#2E2E2E", // Charcoal Black
-  position: "relative",
+  shouldForwardProp: prop => prop !== 'size',
+})<QuoteContainerProps>(({ theme, size = 'normal' }) => ({
+  fontSize: size === 'small' ? '0.9rem' : '1.2rem',
+  lineHeight: size === 'small' ? 1.4 : 1.6,
+  fontStyle: 'italic',
+  color: '#2E2E2E', // Charcoal Black
+  position: 'relative',
   zIndex: 2,
-  textAlign: "center",
+  textAlign: 'center',
   fontFamily: '"Georgia", "Times New Roman", serif',
   fontWeight: 400,
 }));
 
 const QuoteMark = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== "size",
-})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
-  fontSize: size === "small" ? "2.5rem" : "4rem",
+  shouldForwardProp: prop => prop !== 'size',
+})<QuoteContainerProps>(({ theme, size = 'normal' }) => ({
+  fontSize: size === 'small' ? '2.5rem' : '4rem',
   fontFamily: '"Georgia", "Times New Roman", serif',
-  fontWeight: "bold",
+  fontWeight: 'bold',
   opacity: 0.15,
-  position: "absolute",
+  position: 'absolute',
   zIndex: 1,
-  color: "#4A7A7D", // Dusty Teal
-  userSelect: "none",
+  color: '#4A7A7D', // Dusty Teal
+  userSelect: 'none',
 }));
 
-const OpeningQuote = styled(QuoteMark)(
-  ({ size = "normal" }: QuoteContainerProps) => ({
-    top: size === "small" ? "5px" : "10px",
-    left: size === "small" ? "8px" : "15px",
-  })
-);
+const OpeningQuote = styled(QuoteMark)(({ size = 'normal' }: QuoteContainerProps) => ({
+  top: size === 'small' ? '5px' : '10px',
+  left: size === 'small' ? '8px' : '15px',
+}));
 
-const ClosingQuote = styled(QuoteMark)(
-  ({ size = "normal" }: QuoteContainerProps) => ({
-    bottom: size === "small" ? "5px" : "10px",
-    right: size === "small" ? "8px" : "15px",
-    transform: "rotate(180deg)",
-  })
-);
+const ClosingQuote = styled(QuoteMark)(({ size = 'normal' }: QuoteContainerProps) => ({
+  bottom: size === 'small' ? '5px' : '10px',
+  right: size === 'small' ? '8px' : '15px',
+  transform: 'rotate(180deg)',
+}));
 
 const AuthorText = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== "size",
-})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
-  marginTop: size === "small" ? theme.spacing(1) : theme.spacing(2),
-  textAlign: "right",
-  fontStyle: "normal",
+  shouldForwardProp: prop => prop !== 'size',
+})<QuoteContainerProps>(({ theme, size = 'normal' }) => ({
+  marginTop: size === 'small' ? theme.spacing(1) : theme.spacing(2),
+  textAlign: 'right',
+  fontStyle: 'normal',
   fontWeight: 500,
-  color: "#1A2536", // Midnight Blue
-  fontSize: size === "small" ? "0.8rem" : "0.95rem",
-  "&::before": {
+  color: '#1A2536', // Midnight Blue
+  fontSize: size === 'small' ? '0.8rem' : '0.95rem',
+  '&::before': {
     content: '"— "',
-    color: "#D4A017", // Golden Ochre dash
+    color: '#D4A017', // Golden Ochre dash
   },
 }));
 
 const AccentLine = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "size",
-})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
-  width: size === "small" ? "40px" : "60px",
-  height: size === "small" ? "1px" : "2px",
-  background: "linear-gradient(90deg, #D4A017 0%, #4A7A7D 100%)", // Golden Ochre to Dusty Teal
-  margin: size === "small" ? "0.5rem auto" : "1rem auto",
-  borderRadius: "1px",
+  shouldForwardProp: prop => prop !== 'size',
+})<QuoteContainerProps>(({ theme, size = 'normal' }) => ({
+  width: size === 'small' ? '40px' : '60px',
+  height: size === 'small' ? '1px' : '2px',
+  background: 'linear-gradient(90deg, #D4A017 0%, #4A7A7D 100%)', // Golden Ochre to Dusty Teal
+  margin: size === 'small' ? '0.5rem auto' : '1rem auto',
+  borderRadius: '1px',
 }));
 
 interface QuoteProps {
   quote?: string;
   author?: string;
-  size?: "small" | "normal";
+  size?: 'small' | 'normal';
   sx?: SxProps;
 }
 
 const Quote = (props: QuoteProps) => {
-  const { quote, author, size = "normal", sx } = props;
+  const { quote, author, size = 'normal', sx } = props;
   return (
     <QuoteContainer size={size} elevation={0} sx={sx}>
       <OpeningQuote size={size}>"</OpeningQuote>
       <ClosingQuote size={size}>"</ClosingQuote>
 
-      <Box sx={{ position: "relative", zIndex: 2 }}>
+      <Box sx={{ position: 'relative', zIndex: 2 }}>
         <QuoteText size={size} variant="body1">
           {quote}
         </QuoteText>
diff --git a/frontend/src/components/ResumeGenerator.tsx b/frontend/src/components/ResumeGenerator.tsx
index 922d4b2..4afb4b2 100644
--- a/frontend/src/components/ResumeGenerator.tsx
+++ b/frontend/src/components/ResumeGenerator.tsx
@@ -1,27 +1,19 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import {
-  Tabs,
-  Tab,
-  Box,
-  Button,
-  Paper,
-  Typography,
-  LinearProgress,
-} from "@mui/material";
-import { Job, Candidate, SkillAssessment } from "types/types";
-import { Scrollable } from "./Scrollable";
-import { useAuth } from "hooks/AuthContext";
-import * as Types from "types/types";
-import { StyledMarkdown } from "./StyledMarkdown";
-import { Message } from "./Message";
-import InputIcon from "@mui/icons-material/Input";
-import TuneIcon from "@mui/icons-material/Tune";
-import ArticleIcon from "@mui/icons-material/Article";
-import { StatusBox, StatusIcon } from "./ui/StatusIcon";
-import { CopyBubble } from "./CopyBubble";
-import { useAppState } from "hooks/GlobalContext";
-import { StreamingOptions } from "services/api-client";
-import { setDefaultResultOrder } from "dns";
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Tabs, Tab, Box, Button, Paper, Typography, LinearProgress } from '@mui/material';
+import { Job, Candidate, SkillAssessment } from 'types/types';
+import { Scrollable } from './Scrollable';
+import { useAuth } from 'hooks/AuthContext';
+import * as Types from 'types/types';
+import { StyledMarkdown } from './StyledMarkdown';
+import { Message } from './Message';
+import InputIcon from '@mui/icons-material/Input';
+import TuneIcon from '@mui/icons-material/Tune';
+import ArticleIcon from '@mui/icons-material/Article';
+import { StatusBox, StatusIcon } from './ui/StatusIcon';
+import { CopyBubble } from './CopyBubble';
+import { useAppState } from 'hooks/GlobalContext';
+import { StreamingOptions } from 'services/api-client';
+import { setDefaultResultOrder } from 'dns';
 
 interface ResumeGeneratorProps {
   job: Job;
@@ -31,29 +23,25 @@ interface ResumeGeneratorProps {
 }
 
 const defaultMessage: Types.ChatMessageStatus = {
-  status: "done",
-  type: "text",
-  sessionId: "",
+  status: 'done',
+  type: 'text',
+  sessionId: '',
   timestamp: new Date(),
-  content: "",
-  activity: "info",
+  content: '',
+  activity: 'info',
 };
 
-const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
-  props: ResumeGeneratorProps
-) => {
+const ResumeGenerator: React.FC<ResumeGeneratorProps> = (props: ResumeGeneratorProps) => {
   const { job, candidate, skills, onComplete } = props;
   const { setSnack } = useAppState();
   const { apiClient, user } = useAuth();
-  const [resume, setResume] = useState<string>("");
-  const [prompt, setPrompt] = useState<string>("");
-  const [systemPrompt, setSystemPrompt] = useState<string>("");
+  const [resume, setResume] = useState<string>('');
+  const [prompt, setPrompt] = useState<string>('');
+  const [systemPrompt, setSystemPrompt] = useState<string>('');
   const [generated, setGenerated] = useState<boolean>(false);
-  const [tabValue, setTabValue] = useState<string>("resume");
-  const [status, setStatus] = useState<string>("");
-  const [statusType, setStatusType] = useState<Types.ApiActivityType | null>(
-    null
-  );
+  const [tabValue, setTabValue] = useState<string>('resume');
+  const [status, setStatus] = useState<string>('');
+  const [statusType, setStatusType] = useState<Types.ApiActivityType | null>(null);
   const [error, setError] = useState<Types.ChatMessageError | null>(null);
 
   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
@@ -67,25 +55,25 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
 
     setGenerated(true);
 
-    setStatusType("thinking");
-    setStatus("Starting resume generation...");
+    setStatusType('thinking');
+    setStatus('Starting resume generation...');
 
     const generateResumeHandlers: StreamingOptions<Types.ChatMessageResume> = {
       onMessage: (message: Types.ChatMessageResume) => {
-        setSystemPrompt(message.systemPrompt || "");
-        setPrompt(message.prompt || "");
-        setResume(message.resume || "");
-        setStatus("");
+        setSystemPrompt(message.systemPrompt || '');
+        setPrompt(message.prompt || '');
+        setResume(message.resume || '');
+        setStatus('');
       },
       onStreaming: (chunk: Types.ChatMessageStreaming) => {
-        if (status === "") {
-          setStatus("Generating resume...");
-          setStatusType("generating");
+        if (status === '') {
+          setStatus('Generating resume...');
+          setStatusType('generating');
         }
         setResume(chunk.content);
       },
       onStatus: (status: Types.ChatMessageStatus) => {
-        console.log("status:", status.content);
+        console.log('status:', status.content);
         setStatusType(status.activity);
         setStatus(status.content);
       },
@@ -93,7 +81,7 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
         onComplete && onComplete(resume);
       },
       onError: (error: Types.ChatMessageError) => {
-        console.log("error:", error);
+        console.log('error:', error);
         setStatusType(null);
         setStatus(error.content);
         setError(error);
@@ -102,45 +90,35 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
 
     const generateResume = async () => {
       const request: any = await apiClient.generateResume(
-        candidate.id || "",
-        job.id || "",
+        candidate.id || '',
+        job.id || '',
         generateResumeHandlers
       );
       const result = await request.promise;
     };
 
     generateResume();
-  }, [
-    job,
-    candidate,
-    apiClient,
-    resume,
-    skills,
-    generated,
-    setSystemPrompt,
-    setPrompt,
-    setResume,
-  ]);
+  }, [job, candidate, apiClient, resume, skills, generated, setSystemPrompt, setPrompt, setResume]);
 
   const handleSave = useCallback(async () => {
     if (!resume) {
-      setSnack("No resume to save!");
+      setSnack('No resume to save!');
       return;
     }
 
     try {
       if (!candidate.id || !job.id) {
-        setSnack("Candidate or job ID is missing.");
+        setSnack('Candidate or job ID is missing.');
         return;
       }
       const controller = apiClient.saveResume(candidate.id, job.id, resume);
       const result = await controller.promise;
       if (result.resume.id) {
-        setSnack("Resume saved successfully!");
+        setSnack('Resume saved successfully!');
       }
     } catch (error) {
-      console.error("Error saving resume:", error);
-      setSnack("Error saving resume.");
+      console.error('Error saving resume:', error);
+      setSnack('Error saving resume.');
     }
   }, [apiClient, candidate.id, job.id, resume, setSnack]);
 
@@ -148,31 +126,16 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
     <Box
       className="ResumeGenerator"
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       {user?.isAdmin && (
-        <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 1 }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 1 }}>
           <Tabs value={tabValue} onChange={handleTabChange} centered>
-            <Tab
-              disabled={systemPrompt === ""}
-              value="system"
-              icon={<TuneIcon />}
-              label="System"
-            />
-            <Tab
-              disabled={prompt === ""}
-              value="prompt"
-              icon={<InputIcon />}
-              label="Prompt"
-            />
-            <Tab
-              disabled={resume === ""}
-              value="resume"
-              icon={<ArticleIcon />}
-              label="Resume"
-            />
+            <Tab disabled={systemPrompt === ''} value="system" icon={<TuneIcon />} label="System" />
+            <Tab disabled={prompt === ''} value="prompt" icon={<InputIcon />} label="Prompt" />
+            <Tab disabled={resume === ''} value="resume" icon={<ArticleIcon />} label="Resume" />
           </Tabs>
         </Box>
       )}
@@ -182,7 +145,7 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
           <StatusBox>
             {statusType && <StatusIcon type={statusType} />}
             <Typography variant="body2" sx={{ ml: 1 }}>
-              {status || "Processing..."}
+              {status || 'Processing...'}
             </Typography>
           </StatusBox>
           {status && !error && <LinearProgress sx={{ mt: 1 }} />}
@@ -190,19 +153,16 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
       )}
 
       <Paper elevation={3} sx={{ p: 3, m: 1, mt: 0 }}>
-        <Scrollable
-          autoscroll
-          sx={{ display: "flex", flexGrow: 1, position: "relative" }}
-        >
-          {tabValue === "system" && <pre>{systemPrompt}</pre>}
-          {tabValue === "prompt" && <pre>{prompt}</pre>}
-          {tabValue === "resume" && (
+        <Scrollable autoscroll sx={{ display: 'flex', flexGrow: 1, position: 'relative' }}>
+          {tabValue === 'system' && <pre>{systemPrompt}</pre>}
+          {tabValue === 'prompt' && <pre>{prompt}</pre>}
+          {tabValue === 'resume' && (
             <>
               <CopyBubble
                 onClick={() => {
-                  setSnack("Resume copied to clipboard!");
+                  setSnack('Resume copied to clipboard!');
                 }}
-                sx={{ position: "absolute", top: 0, right: 0 }}
+                sx={{ position: 'absolute', top: 0, right: 0 }}
                 content={resume}
               />
               <StyledMarkdown content={resume} />
@@ -212,12 +172,7 @@ const ResumeGenerator: React.FC<ResumeGeneratorProps> = (
       </Paper>
 
       {resume && !status && !error && (
-        <Button
-          onClick={handleSave}
-          variant="contained"
-          color="primary"
-          sx={{ mt: 2 }}
-        >
+        <Button onClick={handleSave} variant="contained" color="primary" sx={{ mt: 2 }}>
           Save Resume
         </Button>
       )}
diff --git a/frontend/src/components/Scrollable.tsx b/frontend/src/components/Scrollable.tsx
index 0870d8b..31607e1 100644
--- a/frontend/src/components/Scrollable.tsx
+++ b/frontend/src/components/Scrollable.tsx
@@ -1,7 +1,7 @@
-import Box from "@mui/material/Box";
-import { SxProps, Theme } from "@mui/material";
-import { RefObject, useRef, forwardRef, useImperativeHandle } from "react";
-import { useAutoScrollToBottom } from "../hooks/useAutoScrollToBottom";
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material';
+import { RefObject, useRef, forwardRef, useImperativeHandle } from 'react';
+import { useAutoScrollToBottom } from '../hooks/useAutoScrollToBottom';
 
 interface ScrollableProps {
   children?: React.ReactNode;
@@ -34,15 +34,15 @@ const Scrollable = forwardRef((props: ScrollableProps, ref) => {
 
   return (
     <Box
-      className={`Scrollable ${className || ""}`}
+      className={`Scrollable ${className || ''}`}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        margin: "0 auto",
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '0 auto',
         p: 0,
         flexGrow: 1,
-        overflow: "auto",
-        position: "relative",
+        overflow: 'auto',
+        position: 'relative',
         // backgroundColor: '#F5F5F5',
         ...sx,
       }}
diff --git a/frontend/src/components/Snack.tsx b/frontend/src/components/Snack.tsx
index c98c658..1bb9f61 100644
--- a/frontend/src/components/Snack.tsx
+++ b/frontend/src/components/Snack.tsx
@@ -1,16 +1,11 @@
-import React, {
-  useState,
-  useCallback,
-  useImperativeHandle,
-  forwardRef,
-} from "react";
-import { SxProps, Theme } from "@mui/material";
-import Snackbar, { SnackbarCloseReason } from "@mui/material/Snackbar";
-import Alert from "@mui/material/Alert";
+import React, { useState, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
 
-import "./Snack.css";
+import './Snack.css';
 
-type SeverityType = "error" | "info" | "success" | "warning" | undefined;
+type SeverityType = 'error' | 'info' | 'success' | 'warning' | undefined;
 type SetSnackType = (message: string, severity?: SeverityType) => void;
 
 interface SnackHandle {
@@ -22,63 +17,51 @@ interface SnackProps {
   className?: string;
 }
 
-const Snack = forwardRef<SnackHandle, SnackProps>(
-  ({ className, sx }: SnackProps, ref) => {
-    const [open, setOpen] = useState(false);
-    const [message, setMessage] = useState("");
-    const [severity, setSeverity] = useState<SeverityType>("success");
+const Snack = forwardRef<SnackHandle, SnackProps>(({ className, sx }: SnackProps, ref) => {
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const [severity, setSeverity] = useState<SeverityType>('success');
 
-    // Set the snack pop-up and open it
-    const setSnack: SetSnackType = useCallback<SetSnackType>(
-      (message: string, severity: SeverityType = "success") => {
-        setTimeout(() => {
-          setMessage(message);
-          setSeverity(severity);
-          setOpen(true);
-        });
-      },
-      [setMessage, setSeverity, setOpen]
-    );
+  // Set the snack pop-up and open it
+  const setSnack: SetSnackType = useCallback<SetSnackType>(
+    (message: string, severity: SeverityType = 'success') => {
+      setTimeout(() => {
+        setMessage(message);
+        setSeverity(severity);
+        setOpen(true);
+      });
+    },
+    [setMessage, setSeverity, setOpen]
+  );
 
-    useImperativeHandle(ref, () => ({
-      setSnack: (message: string, severity?: SeverityType) => {
-        setSnack(message, severity);
-      },
-    }));
+  useImperativeHandle(ref, () => ({
+    setSnack: (message: string, severity?: SeverityType) => {
+      setSnack(message, severity);
+    },
+  }));
 
-    const handleSnackClose = (
-      event: React.SyntheticEvent | Event,
-      reason?: SnackbarCloseReason
-    ) => {
-      if (reason === "clickaway") {
-        return;
-      }
+  const handleSnackClose = (event: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
 
-      setOpen(false);
-    };
+    setOpen(false);
+  };
 
-    return (
-      <Snackbar
-        className={className || "Snack"}
-        sx={{ ...sx }}
-        open={open}
-        autoHideDuration={
-          severity === "success" || severity === "info" ? 1500 : 6000
-        }
-        onClose={handleSnackClose}
-      >
-        <Alert
-          onClose={handleSnackClose}
-          severity={severity}
-          variant="filled"
-          sx={{ width: "100%" }}
-        >
-          {message}
-        </Alert>
-      </Snackbar>
-    );
-  }
-);
+  return (
+    <Snackbar
+      className={className || 'Snack'}
+      sx={{ ...sx }}
+      open={open}
+      autoHideDuration={severity === 'success' || severity === 'info' ? 1500 : 6000}
+      onClose={handleSnackClose}
+    >
+      <Alert onClose={handleSnackClose} severity={severity} variant="filled" sx={{ width: '100%' }}>
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+});
 
 export type { SeverityType, SetSnackType };
 
diff --git a/frontend/src/components/StyledMarkdown.tsx b/frontend/src/components/StyledMarkdown.tsx
index 6afba56..f1fee4f 100644
--- a/frontend/src/components/StyledMarkdown.tsx
+++ b/frontend/src/components/StyledMarkdown.tsx
@@ -1,23 +1,20 @@
-import React from "react";
-import { MuiMarkdown } from "mui-markdown";
-import { useTheme } from "@mui/material/styles";
-import { Link } from "@mui/material";
-import {
-  BackstoryQuery,
-  BackstoryQueryInterface,
-} from "components/BackstoryQuery";
-import Box from "@mui/material/Box";
-import JsonView from "@uiw/react-json-view";
-import { vscodeTheme } from "@uiw/react-json-view/vscode";
-import { Mermaid } from "components/Mermaid";
-import { Scrollable } from "components/Scrollable";
-import { jsonrepair } from "jsonrepair";
-import { GenerateImage } from "components/GenerateImage";
+import React from 'react';
+import { MuiMarkdown } from 'mui-markdown';
+import { useTheme } from '@mui/material/styles';
+import { Link } from '@mui/material';
+import { BackstoryQuery, BackstoryQueryInterface } from 'components/BackstoryQuery';
+import Box from '@mui/material/Box';
+import JsonView from '@uiw/react-json-view';
+import { vscodeTheme } from '@uiw/react-json-view/vscode';
+import { Mermaid } from 'components/Mermaid';
+import { Scrollable } from 'components/Scrollable';
+import { jsonrepair } from 'jsonrepair';
+import { GenerateImage } from 'components/GenerateImage';
 
-import "./StyledMarkdown.css";
-import { BackstoryElementProps } from "./BackstoryTab";
-import { CandidateQuestion, ChatQuery, ChatSession } from "types/types";
-import { ChatSubmitQueryInterface } from "components/BackstoryQuery";
+import './StyledMarkdown.css';
+import { BackstoryElementProps } from './BackstoryTab';
+import { CandidateQuestion, ChatQuery, ChatSession } from 'types/types';
+import { ChatSubmitQueryInterface } from 'components/BackstoryQuery';
 
 interface StyledMarkdownProps extends BackstoryElementProps {
   className?: string;
@@ -27,9 +24,7 @@ interface StyledMarkdownProps extends BackstoryElementProps {
   submitQuery?: ChatSubmitQueryInterface;
 }
 
-const StyledMarkdown: React.FC<StyledMarkdownProps> = (
-  props: StyledMarkdownProps
-) => {
+const StyledMarkdown: React.FC<StyledMarkdownProps> = (props: StyledMarkdownProps) => {
   const { className, content, chatSession, submitQuery, sx, streaming } = props;
   const theme = useTheme();
 
@@ -42,14 +37,14 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
     pre: {
       component: (element: any) => {
         const { className } = element.children.props;
-        const content = element.children?.props?.children || "";
-        if (className === "lang-mermaid" && !streaming) {
+        const content = element.children?.props?.children || '';
+        if (className === 'lang-mermaid' && !streaming) {
           return <Mermaid className="Mermaid" chart={content} />;
         }
-        if (className === "lang-markdown") {
+        if (className === 'lang-markdown') {
           return <MuiMarkdown children={content} />;
         }
-        if (className === "lang-json" && !streaming) {
+        if (className === 'lang-json' && !streaming) {
           try {
             const fixed = JSON.parse(jsonrepair(content));
             return (
@@ -58,13 +53,13 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
                   className="JsonView"
                   style={{
                     ...vscodeTheme,
-                    fontSize: "0.8rem",
-                    maxHeight: "10rem",
-                    padding: "14px 0",
-                    overflow: "hidden",
-                    width: "100%",
-                    minHeight: "max-content",
-                    backgroundColor: "transparent",
+                    fontSize: '0.8rem',
+                    maxHeight: '10rem',
+                    padding: '14px 0',
+                    overflow: 'hidden',
+                    width: '100%',
+                    minHeight: 'max-content',
+                    backgroundColor: 'transparent',
                   }}
                   displayDataTypes={false}
                   objectSortKeys={false}
@@ -74,16 +69,13 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
                 >
                   <JsonView.String
                     render={({ children, ...reset }) => {
-                      if (
-                        typeof children === "string" &&
-                        children.match("\n")
-                      ) {
+                      if (typeof children === 'string' && children.match('\n')) {
                         return (
                           <pre
                             {...reset}
                             style={{
-                              display: "flex",
-                              border: "none",
+                              display: 'flex',
+                              border: 'none',
                               ...reset.style,
                             }}
                           >
@@ -106,7 +98,7 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
         }
         return (
           <pre>
-            <code className={className || ""}>{element.children}</code>
+            <code className={className || ''}>{element.children}</code>
           </pre>
         );
       },
@@ -115,22 +107,22 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
       component: Link,
       props: {
         onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {
-          const href = event.currentTarget.getAttribute("href");
-          console.log("StyledMarkdown onClick:", href);
+          const href = event.currentTarget.getAttribute('href');
+          console.log('StyledMarkdown onClick:', href);
           if (href) {
             if (href.match(/^\//)) {
               event.preventDefault();
-              window.history.replaceState({}, "", `${href}`);
+              window.history.replaceState({}, '', `${href}`);
             }
           }
         },
         sx: {
-          wordBreak: "break-all",
+          wordBreak: 'break-all',
           color: theme.palette.secondary.main,
-          textDecoration: "none",
-          "&:hover": {
+          textDecoration: 'none',
+          '&:hover': {
             color: theme.palette.custom.highlight,
-            textDecoration: "underline",
+            textDecoration: 'underline',
           },
         },
       },
@@ -150,7 +142,7 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
             query.question
           );
         } catch (e) {
-          console.log("StyledMarkdown error:", queryString, e);
+          console.log('StyledMarkdown error:', queryString, e);
           return props.query;
         }
       },
@@ -164,7 +156,7 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
         try {
           return <GenerateImage {...{ chatSession, prompt }} />;
         } catch (e) {
-          console.log("StyledMarkdown error:", prompt, e);
+          console.log('StyledMarkdown error:', prompt, e);
           return props.prompt;
         }
       },
@@ -173,14 +165,14 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (
 
   return (
     <Box
-      className={`MuiMarkdown ${className || ""}`}
+      className={`MuiMarkdown ${className || ''}`}
       sx={{
-        display: "flex",
+        display: 'flex',
         m: 0,
         p: 0,
-        boxSizing: "border-box",
+        boxSizing: 'border-box',
         flexGrow: 1,
-        height: "auto",
+        height: 'auto',
         ...sx,
       }}
     >
diff --git a/frontend/src/components/VectorVisualizer.tsx b/frontend/src/components/VectorVisualizer.tsx
index c90cbed..29663b5 100644
--- a/frontend/src/components/VectorVisualizer.tsx
+++ b/frontend/src/components/VectorVisualizer.tsx
@@ -1,29 +1,29 @@
-import React, { useEffect, useState, useRef } from "react";
-import Box from "@mui/material/Box";
-import Paper from "@mui/material/Paper";
-import Plot from "react-plotly.js";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-import SendIcon from "@mui/icons-material/Send";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { SxProps, useTheme } from "@mui/material/styles";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableRow from "@mui/material/TableRow";
+import React, { useEffect, useState, useRef } from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Plot from 'react-plotly.js';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import SendIcon from '@mui/icons-material/Send';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { SxProps, useTheme } from '@mui/material/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
 
-import { Scrollable } from "./Scrollable";
+import { Scrollable } from './Scrollable';
 
-import "./VectorVisualizer.css";
-import { BackstoryPageProps } from "./BackstoryTab";
-import { useAuth } from "hooks/AuthContext";
-import * as Types from "types/types";
-import { useAppState, useSelectedCandidate } from "hooks/GlobalContext";
-import { useNavigate } from "react-router-dom";
+import './VectorVisualizer.css';
+import { BackstoryPageProps } from './BackstoryTab';
+import { useAuth } from 'hooks/AuthContext';
+import * as Types from 'types/types';
+import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
+import { useNavigate } from 'react-router-dom';
 
 interface VectorVisualizerProps extends BackstoryPageProps {
   inline?: boolean;
@@ -43,10 +43,10 @@ const emptyQuerySet: Types.ChromaDBGetResponse = {
   metadatas: [],
   embeddings: [],
   distances: [],
-  name: "Empty",
+  name: 'Empty',
   size: 0,
   dimensions: 2,
-  query: "",
+  query: '',
 };
 
 interface PlotData {
@@ -105,32 +105,32 @@ const config: Partial<Plotly.Config> = {
   //   | "hovercompare"
   //   | "hoverclosest"
   //   | "v1hovermode";
-  modeBarButtonsToRemove: ["lasso2d", "select2d"],
+  modeBarButtonsToRemove: ['lasso2d', 'select2d'],
 };
 
 const layout: Partial<Plotly.Layout> = {
   autosize: false,
-  clickmode: "event+select",
-  paper_bgcolor: "#FFFFFF", // white
-  plot_bgcolor: "#FFFFFF", // white plot background
+  clickmode: 'event+select',
+  paper_bgcolor: '#FFFFFF', // white
+  plot_bgcolor: '#FFFFFF', // white plot background
   font: {
-    family: "Roboto, sans-serif",
-    color: "#2E2E2E", // charcoal black
+    family: 'Roboto, sans-serif',
+    color: '#2E2E2E', // charcoal black
   },
-  hovermode: "closest",
+  hovermode: 'closest',
   scene: {
-    bgcolor: "#FFFFFF", // 3D plot background
-    zaxis: { title: "Z", gridcolor: "#cccccc", zerolinecolor: "#aaaaaa" },
+    bgcolor: '#FFFFFF', // 3D plot background
+    zaxis: { title: 'Z', gridcolor: '#cccccc', zerolinecolor: '#aaaaaa' },
   },
-  xaxis: { title: "X", gridcolor: "#cccccc", zerolinecolor: "#aaaaaa" },
-  yaxis: { title: "Y", gridcolor: "#cccccc", zerolinecolor: "#aaaaaa" },
+  xaxis: { title: 'X', gridcolor: '#cccccc', zerolinecolor: '#aaaaaa' },
+  yaxis: { title: 'Y', gridcolor: '#cccccc', zerolinecolor: '#aaaaaa' },
   margin: { r: 0, b: 0, l: 0, t: 0 },
   legend: {
     x: 0.8, // Horizontal position (0 to 1, 0 is left, 1 is right)
     y: 0, // Vertical position (0 to 1, 0 is bottom, 1 is top)
-    xanchor: "left",
-    yanchor: "top",
-    orientation: "h", // 'v' for horizontal legend
+    xanchor: 'left',
+    yanchor: 'top',
+    orientation: 'h', // 'v' for horizontal legend
   },
   showlegend: true, // Show the legend
 };
@@ -140,25 +140,25 @@ const normalizeDimension = (arr: number[]): number[] => {
   const max = Math.max(...arr);
   const range = max - min;
   if (range === 0) return arr.map(() => 0.5); // flat dimension
-  return arr.map((v) => (v - min) / range);
+  return arr.map(v => (v - min) / range);
 };
 
 const emojiMap: Record<string, string> = {
-  query: "🔍",
-  resume: "📄",
-  projects: "📁",
-  jobs: "📁",
-  "performance-reviews": "📄",
-  news: "📰",
+  query: '🔍',
+  resume: '📄',
+  projects: '📁',
+  jobs: '📁',
+  'performance-reviews': '📄',
+  news: '📰',
 };
 
 const colorMap: Record<string, string> = {
-  query: "#D4A017", // Golden Ochre — strong highlight
-  resume: "#4A7A7D", // Dusty Teal — secondary theme color
-  projects: "#1A2536", // Midnight Blue — rich and deep
-  news: "#D3CDBF", // Warm Gray — soft and neutral
-  "performance-reviews": "#8FD0D0", // Light red
-  jobs: "#F3aD8F", // Warm Gray — soft and neutral
+  query: '#D4A017', // Golden Ochre — strong highlight
+  resume: '#4A7A7D', // Dusty Teal — secondary theme color
+  projects: '#1A2536', // Midnight Blue — rich and deep
+  news: '#D3CDBF', // Warm Gray — soft and neutral
+  'performance-reviews': '#8FD0D0', // Light red
+  jobs: '#F3aD8F', // Warm Gray — soft and neutral
 };
 
 const DEFAULT_SIZE = 6;
@@ -180,29 +180,25 @@ type Node = {
   sx: SxProps;
 };
 
-const VectorVisualizer: React.FC<VectorVisualizerProps> = (
-  props: VectorVisualizerProps
-) => {
+const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualizerProps) => {
   const { user, apiClient } = useAuth();
   const { rag, inline, sx } = props;
   const { setSnack } = useAppState();
   const [plotData, setPlotData] = useState<PlotData | null>(null);
-  const [newQuery, setNewQuery] = useState<string>("");
-  const [querySet, setQuerySet] = useState<Types.ChromaDBGetResponse>(
-    rag || emptyQuerySet
-  );
+  const [newQuery, setNewQuery] = useState<string>('');
+  const [querySet, setQuerySet] = useState<Types.ChromaDBGetResponse>(rag || emptyQuerySet);
   const [result, setResult] = useState<Types.ChromaDBGetResponse | null>(null);
   const [view2D, setView2D] = useState<boolean>(true);
   const plotlyRef = useRef(null);
   const boxRef = useRef<HTMLElement>(null);
   const [node, setNode] = useState<Node | null>(null);
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [plotDimensions, setPlotDimensions] = useState({ width: 0, height: 0 });
   const navigate = useNavigate();
 
   const candidate: Types.Candidate | null =
-    user?.userType === "candidate" ? (user as Types.Candidate) : null;
+    user?.userType === 'candidate' ? (user as Types.Candidate) : null;
 
   /* Force resize of Plotly as it tends to not be the correct size if it is initially rendered
    * off screen (eg., the VectorVisualizer is not on the tab the app loads to) */
@@ -212,12 +208,8 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
     }
     const resize = () => {
       requestAnimationFrame(() => {
-        const plotContainer = document.querySelector(
-          ".plot-container"
-        ) as HTMLElement;
-        const svgContainer = document?.querySelector(
-          ".svg-container"
-        ) as HTMLElement;
+        const plotContainer = document.querySelector('.plot-container') as HTMLElement;
+        const svgContainer = document?.querySelector('.svg-container') as HTMLElement;
         if (plotContainer && svgContainer) {
           const plotContainerRect = plotContainer.getBoundingClientRect();
           svgContainer.style.width = `${plotContainerRect.width}px`;
@@ -250,8 +242,8 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
         const result = await apiClient.getCandidateVectors(view2D ? 2 : 3);
         setResult(result);
       } catch (error) {
-        console.error("Error obtaining collection information:", error);
-        setSnack("Unable to obtain collection information.", "error");
+        console.error('Error obtaining collection information:', error);
+        setSnack('Unable to obtain collection information.', 'error');
       }
     };
 
@@ -276,7 +268,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
     }
 
     if (!is2D && !is3D) {
-      console.warn("Modified vectors are neither 2D nor 3D");
+      console.warn('Modified vectors are neither 2D nor 3D');
       return;
     }
 
@@ -286,10 +278,10 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
       embeddings: [],
       metadatas: [],
       distances: [],
-      query: "",
+      query: '',
       size: 0,
       dimensions: 2,
-      name: "",
+      name: '',
     };
     const filtered: Types.ChromaDBGetResponse = {
       ids: [],
@@ -297,10 +289,10 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
       embeddings: [],
       metadatas: [],
       distances: [],
-      query: "",
+      query: '',
       size: 0,
       dimensions: 2,
-      name: "",
+      name: '',
     };
 
     /* Loop through all items and divide into two groups:
@@ -332,102 +324,83 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
     });
 
     if (view2D && querySet.umapEmbedding2D && querySet.umapEmbedding2D.length) {
-      query.ids.unshift("query");
+      query.ids.unshift('query');
       query.metadatas.unshift({
-        id: "query",
-        docType: "query",
-        content: querySet.query || "",
+        id: 'query',
+        docType: 'query',
+        content: querySet.query || '',
         distance: 0,
       });
       query.embeddings.unshift(querySet.umapEmbedding2D);
     }
 
-    if (
-      !view2D &&
-      querySet.umapEmbedding3D &&
-      querySet.umapEmbedding3D.length
-    ) {
-      query.ids.unshift("query");
+    if (!view2D && querySet.umapEmbedding3D && querySet.umapEmbedding3D.length) {
+      query.ids.unshift('query');
       query.metadatas.unshift({
-        id: "query",
-        docType: "query",
-        content: querySet.query || "",
+        id: 'query',
+        docType: 'query',
+        content: querySet.query || '',
         distance: 0,
       });
       query.embeddings.unshift(querySet.umapEmbedding3D);
     }
 
-    const filtered_docTypes = filtered.metadatas.map(
-      (m) => m.docType || "unknown"
-    );
-    const query_docTypes = query.metadatas.map((m) => m.docType || "unknown");
+    const filtered_docTypes = filtered.metadatas.map(m => m.docType || 'unknown');
+    const query_docTypes = query.metadatas.map(m => m.docType || 'unknown');
 
     const has_query = query.metadatas.length > 0;
-    const filtered_sizes = filtered.metadatas.map((m) =>
+    const filtered_sizes = filtered.metadatas.map(m =>
       has_query ? DEFAULT_UNFOCUS_SIZE : DEFAULT_SIZE
     );
-    const filtered_colors = filtered_docTypes.map(
-      (type) => colorMap[type] || "#4d4d4d"
-    );
-    const filtered_x = normalizeDimension(
-      filtered.embeddings.map((v: number[]) => v[0])
-    );
-    const filtered_y = normalizeDimension(
-      filtered.embeddings.map((v: number[]) => v[1])
-    );
+    const filtered_colors = filtered_docTypes.map(type => colorMap[type] || '#4d4d4d');
+    const filtered_x = normalizeDimension(filtered.embeddings.map((v: number[]) => v[0]));
+    const filtered_y = normalizeDimension(filtered.embeddings.map((v: number[]) => v[1]));
     const filtered_z = is3D
       ? normalizeDimension(filtered.embeddings.map((v: number[]) => v[2]))
       : undefined;
 
     const query_sizes = query.metadatas.map(
-      (m) =>
-        DEFAULT_SIZE + 2 * DEFAULT_SIZE * Math.pow(1 - (m.distance || 1), 3)
-    );
-    const query_colors = query_docTypes.map(
-      (type) => colorMap[type] || "#4d4d4d"
-    );
-    const query_x = normalizeDimension(
-      query.embeddings.map((v: number[]) => v[0])
-    );
-    const query_y = normalizeDimension(
-      query.embeddings.map((v: number[]) => v[1])
+      m => DEFAULT_SIZE + 2 * DEFAULT_SIZE * Math.pow(1 - (m.distance || 1), 3)
     );
+    const query_colors = query_docTypes.map(type => colorMap[type] || '#4d4d4d');
+    const query_x = normalizeDimension(query.embeddings.map((v: number[]) => v[0]));
+    const query_y = normalizeDimension(query.embeddings.map((v: number[]) => v[1]));
     const query_z = is3D
       ? normalizeDimension(query.embeddings.map((v: number[]) => v[2]))
       : undefined;
 
     const data: any = [
       {
-        name: "All data",
+        name: 'All data',
         x: filtered_x,
         y: filtered_y,
-        mode: "markers",
+        mode: 'markers',
         marker: {
           size: filtered_sizes,
-          symbol: "circle",
+          symbol: 'circle',
           color: filtered_colors,
           opacity: 1,
         },
         text: filtered.ids,
         customdata: filtered.metadatas,
-        type: is3D ? "scatter3d" : "scatter",
-        hovertemplate: "&nbsp;",
+        type: is3D ? 'scatter3d' : 'scatter',
+        hovertemplate: '&nbsp;',
       },
       {
-        name: "Query",
+        name: 'Query',
         x: query_x,
         y: query_y,
-        mode: "markers",
+        mode: 'markers',
         marker: {
           size: query_sizes,
-          symbol: "circle",
+          symbol: 'circle',
           color: query_colors,
           opacity: 1,
         },
         text: query.ids,
         customdata: query.metadatas,
-        type: is3D ? "scatter3d" : "scatter",
-        hovertemplate: "%{text}",
+        type: is3D ? 'scatter3d' : 'scatter',
+        hovertemplate: '%{text}',
       },
     ];
 
@@ -440,14 +413,14 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
   }, [result, querySet, view2D]);
 
   const handleKeyPress = (event: any) => {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       sendQuery(newQuery);
     }
   };
 
   const sendQuery = async (query: string) => {
     if (!query.trim()) return;
-    setNewQuery("");
+    setNewQuery('');
 
     try {
       const result = await apiClient.getCandidateSimilarContent(query);
@@ -455,7 +428,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
       setQuerySet(result);
     } catch (error) {
       const msg = `Error obtaining similar content to ${query}.`;
-      setSnack(msg, "error");
+      setSnack(msg, 'error');
     }
   };
 
@@ -463,10 +436,10 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
     return (
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           flexGrow: 1,
-          justifyContent: "center",
-          alignItems: "center",
+          justifyContent: 'center',
+          alignItems: 'center',
         }}
       >
         <div>Loading visualization...</div>
@@ -477,18 +450,15 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
     return (
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           flexGrow: 1,
-          justifyContent: "center",
-          alignItems: "center",
+          justifyContent: 'center',
+          alignItems: 'center',
         }}
       >
         <div>
-          No candidate selected. Please{" "}
-          <Button onClick={() => navigate("/find-a-candidate")}>
-            select a candidate
-          </Button>{" "}
-          first.
+          No candidate selected. Please{' '}
+          <Button onClick={() => navigate('/find-a-candidate')}>select a candidate</Button> first.
         </div>
       </Box>
     );
@@ -504,33 +474,33 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (
     } catch (error) {
       const msg = `Error obtaining content for ${node.id}.`;
       console.error(msg, error);
-      setSnack(msg, "error");
+      setSnack(msg, 'error');
     }
   };
 
   const onNodeSelected = (metadata: any) => {
     let node: Node;
     console.log(metadata);
-    if (metadata.docType === "query") {
+    if (metadata.docType === 'query') {
       node = {
         ...metadata,
-        content: `Similarity results for the query **${querySet.query || ""}**
+        content: `Similarity results for the query **${querySet.query || ''}**
 
 The scatter graph shows the query in N-dimensional space, mapped to ${
-          view2D ? "2" : "3"
+          view2D ? '2' : '3'
         }-dimensional space. Larger dots represent relative similarity in N-dimensional space.
 `,
         emoji: emojiMap[metadata.docType],
         sx: {
           m: 0.5,
           p: 2,
-          width: "3rem",
-          display: "flex",
-          alignContent: "center",
-          justifyContent: "center",
+          width: '3rem',
+          display: 'flex',
+          alignContent: 'center',
+          justifyContent: 'center',
           flexGrow: 0,
-          flexWrap: "wrap",
-          backgroundColor: colorMap[metadata.docType] || "#ff8080",
+          flexWrap: 'wrap',
+          backgroundColor: colorMap[metadata.docType] || '#ff8080',
         },
       };
       setNode(node);
@@ -540,7 +510,7 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
     node = {
       content: `Loading...`,
       ...metadata,
-      emoji: emojiMap[metadata.docType] || "❓",
+      emoji: emojiMap[metadata.docType] || '❓',
     };
 
     setNode(node);
@@ -561,22 +531,22 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
           sx={{
             p: 0.5,
             m: 0,
-            display: "flex",
+            display: 'flex',
             flexGrow: 0,
-            height: isMobile ? "auto" : "auto", //"320px",
-            minHeight: isMobile ? "auto" : "auto", //"320px",
-            maxHeight: isMobile ? "auto" : "auto", //"320px",
-            position: "relative",
-            flexDirection: "column",
+            height: isMobile ? 'auto' : 'auto', //"320px",
+            minHeight: isMobile ? 'auto' : 'auto', //"320px",
+            maxHeight: isMobile ? 'auto' : 'auto', //"320px",
+            position: 'relative',
+            flexDirection: 'column',
           }}
         >
           <FormControlLabel
             sx={{
-              display: "flex",
-              position: "relative",
-              width: "fit-content",
+              display: 'flex',
+              position: 'relative',
+              width: 'fit-content',
               ml: 1,
-              mb: "-2.5rem",
+              mb: '-2.5rem',
               zIndex: 100,
               flexBasis: 0,
               flexGrow: 0,
@@ -597,14 +567,14 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
             useResizeHandler={true}
             config={config}
             style={{
-              display: "flex",
+              display: 'flex',
               flexGrow: 1,
-              minHeight: "240px",
+              minHeight: '240px',
               padding: 0,
               margin: 0,
-              width: "100%",
-              height: "100%",
-              overflow: "hidden",
+              width: '100%',
+              height: '100%',
+              overflow: 'hidden',
             }}
             layout={{
               ...layout,
@@ -616,37 +586,34 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
 
         <Paper
           sx={{
-            display: "flex",
-            flexDirection: isMobile ? "column" : "row",
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
             mt: 0.5,
             p: 0.5,
             flexGrow: 1,
-            minHeight: "fit-content",
+            minHeight: 'fit-content',
           }}
         >
           {node !== null && (
             <Box
               sx={{
-                display: "flex",
-                fontSize: "0.75rem",
-                flexDirection: "column",
+                display: 'flex',
+                fontSize: '0.75rem',
+                flexDirection: 'column',
                 flexGrow: 1,
-                maxWidth: "100%",
+                maxWidth: '100%',
                 flexBasis: 1,
-                maxHeight: "min-content",
+                maxHeight: 'min-content',
               }}
             >
-              <TableContainer
-                component={Paper}
-                sx={{ mb: isMobile ? 1 : 0, mr: isMobile ? 0 : 1 }}
-              >
-                <Table size="small" sx={{ tableLayout: "fixed" }}>
+              <TableContainer component={Paper} sx={{ mb: isMobile ? 1 : 0, mr: isMobile ? 0 : 1 }}>
+                <Table size="small" sx={{ tableLayout: 'fixed' }}>
                   <TableBody
                     sx={{
-                      "& td": { verticalAlign: "top", fontSize: "0.75rem" },
-                      "& td:first-of-type": {
-                        whiteSpace: "nowrap",
-                        width: "1rem",
+                      '& td': { verticalAlign: 'top', fontSize: '0.75rem' },
+                      '& td:first-of-type': {
+                        whiteSpace: 'nowrap',
+                        width: '1rem',
                       },
                     }}
                   >
@@ -659,9 +626,7 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
                     {node.source_file !== undefined && (
                       <TableRow>
                         <TableCell>File</TableCell>
-                        <TableCell>
-                          {node.source_file.replace(/^.*\//, "")}
-                        </TableCell>
+                        <TableCell>{node.source_file.replace(/^.*\//, '')}</TableCell>
                       </TableRow>
                     )}
                     {node.path !== undefined && (
@@ -679,30 +644,28 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
                   </TableBody>
                 </Table>
               </TableContainer>
-              {node.content !== "" && node.content !== undefined && (
+              {node.content !== '' && node.content !== undefined && (
                 <Paper
                   elevation={6}
                   sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    border: "1px solid #808080",
-                    minHeight: "fit-content",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    border: '1px solid #808080',
+                    minHeight: 'fit-content',
                     mt: 1,
                   }}
                 >
                   <Box
                     sx={{
-                      display: "flex",
-                      background: "#404040",
+                      display: 'flex',
+                      background: '#404040',
                       p: 1,
-                      color: "white",
+                      color: 'white',
                     }}
                   >
                     Vector Embedded Content
                   </Box>
-                  <Box sx={{ display: "flex", p: 1, flexGrow: 1 }}>
-                    {node.content}
-                  </Box>
+                  <Box sx={{ display: 'flex', p: 1, flexGrow: 1 }}>{node.content}</Box>
                 </Paper>
               )}
             </Box>
@@ -710,8 +673,8 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
 
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
+              display: 'flex',
+              flexDirection: 'column',
               flexGrow: 2,
               flexBasis: 0,
               flexShrink: 1,
@@ -719,49 +682,46 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
           >
             {node === null && (
               <Paper sx={{ m: 0.5, p: 2, flexGrow: 1 }}>
-                Click a point in the scatter-graph to see information about that
-                node.
+                Click a point in the scatter-graph to see information about that node.
               </Paper>
             )}
             {node !== null && node.fullContent && (
               <Scrollable
                 autoscroll={false}
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
+                  display: 'flex',
+                  flexDirection: 'column',
                   m: 0,
                   p: 0.5,
                   pl: 1,
                   flexShrink: 1,
-                  position: "relative",
-                  maxWidth: "100%",
+                  position: 'relative',
+                  maxWidth: '100%',
                 }}
               >
-                {node.fullContent.split("\n").map((line, index) => {
+                {node.fullContent.split('\n').map((line, index) => {
                   index += 1 + node.chunkBegin;
                   const bgColor =
-                    index > node.lineBegin && index <= node.lineEnd
-                      ? "#f0f0f0"
-                      : "auto";
+                    index > node.lineBegin && index <= node.lineEnd ? '#f0f0f0' : 'auto';
                   return (
                     <Box
                       key={index}
                       sx={{
-                        display: "flex",
-                        flexDirection: "row",
-                        borderBottom: "1px solid #d0d0d0",
-                        ":first-of-type": { borderTop: "1px solid #d0d0d0" },
+                        display: 'flex',
+                        flexDirection: 'row',
+                        borderBottom: '1px solid #d0d0d0',
+                        ':first-of-type': { borderTop: '1px solid #d0d0d0' },
                         backgroundColor: bgColor,
                       }}
                     >
                       <Box
                         sx={{
-                          fontFamily: "courier",
-                          fontSize: "0.8rem",
-                          minWidth: "2rem",
-                          pt: "0.1rem",
-                          align: "left",
-                          verticalAlign: "top",
+                          fontFamily: 'courier',
+                          fontSize: '0.8rem',
+                          minWidth: '2rem',
+                          pt: '0.1rem',
+                          align: 'left',
+                          verticalAlign: 'top',
                         }}
                       >
                         {index}
@@ -770,60 +730,52 @@ The scatter graph shows the query in N-dimensional space, mapped to ${
                         style={{
                           margin: 0,
                           padding: 0,
-                          border: "none",
-                          minHeight: "1rem",
-                          overflow: "hidden",
+                          border: 'none',
+                          minHeight: '1rem',
+                          overflow: 'hidden',
                         }}
                       >
-                        {line || " "}
+                        {line || ' '}
                       </pre>
                     </Box>
                   );
                 })}
                 {!node.lineBegin && (
-                  <pre style={{ margin: 0, padding: 0, border: "none" }}>
-                    {node.content}
-                  </pre>
+                  <pre style={{ margin: 0, padding: 0, border: 'none' }}>{node.content}</pre>
                 )}
               </Scrollable>
             )}
           </Box>
         </Paper>
 
-        {!inline && querySet.query !== undefined && querySet.query !== "" && (
+        {!inline && querySet.query !== undefined && querySet.query !== '' && (
           <Paper
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
               flexGrow: 0,
-              minHeight: "2.5rem",
-              maxHeight: "2.5rem",
-              height: "2.5rem",
-              alignItems: "center",
+              minHeight: '2.5rem',
+              maxHeight: '2.5rem',
+              height: '2.5rem',
+              alignItems: 'center',
               mt: 1,
               pb: 0,
             }}
           >
-            {querySet.query !== undefined &&
-              querySet.query !== "" &&
-              `Query: ${querySet.query}`}
-            {querySet.ids.length === 0 &&
-              "Enter query below to perform a similarity search."}
+            {querySet.query !== undefined && querySet.query !== '' && `Query: ${querySet.query}`}
+            {querySet.ids.length === 0 && 'Enter query below to perform a similarity search.'}
           </Paper>
         )}
 
         {!inline && (
-          <Box
-            className="Query"
-            sx={{ display: "flex", flexDirection: "row", p: 1 }}
-          >
+          <Box className="Query" sx={{ display: 'flex', flexDirection: 'row', p: 1 }}>
             <TextField
               variant="outlined"
               fullWidth
               type="text"
               value={newQuery}
-              onChange={(e) => setNewQuery(e.target.value)}
+              onChange={e => setNewQuery(e.target.value)}
               onKeyDown={handleKeyPress}
               placeholder="Enter query to find related documents..."
               id="QueryInput"
diff --git a/frontend/src/components/layout/BackstoryLayout.tsx b/frontend/src/components/layout/BackstoryLayout.tsx
index 5726b7d..2930bed 100644
--- a/frontend/src/components/layout/BackstoryLayout.tsx
+++ b/frontend/src/components/layout/BackstoryLayout.tsx
@@ -1,20 +1,20 @@
 // components/layout/BackstoryLayout.tsx
-import React, { ReactElement, useEffect, useState } from "react";
-import { Outlet, useLocation, Routes, Route } from "react-router-dom";
-import { Box, Container, Paper } from "@mui/material";
-import { useNavigate } from "react-router-dom";
-import { SxProps, Theme } from "@mui/material";
-import { darken } from "@mui/material/styles";
-import { Header } from "components/layout/Header";
-import { Scrollable } from "components/Scrollable";
-import { Footer } from "components/layout/Footer";
-import { Snack, SetSnackType } from "components/Snack";
-import { User } from "types/types";
-import { LoadingComponent } from "components/LoadingComponent";
-import { AuthProvider, useAuth, ProtectedRoute } from "hooks/AuthContext";
-import { useAppState, useSelectedCandidate } from "hooks/GlobalContext";
-import { getMainNavigationItems, getAllRoutes } from "config/navigationConfig";
-import { NavigationItem } from "types/navigation";
+import React, { ReactElement, useEffect, useState } from 'react';
+import { Outlet, useLocation, Routes, Route } from 'react-router-dom';
+import { Box, Container, Paper } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { SxProps, Theme } from '@mui/material';
+import { darken } from '@mui/material/styles';
+import { Header } from 'components/layout/Header';
+import { Scrollable } from 'components/Scrollable';
+import { Footer } from 'components/layout/Footer';
+import { Snack, SetSnackType } from 'components/Snack';
+import { User } from 'types/types';
+import { LoadingComponent } from 'components/LoadingComponent';
+import { AuthProvider, useAuth, ProtectedRoute } from 'hooks/AuthContext';
+import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
+import { getMainNavigationItems, getAllRoutes } from 'config/navigationConfig';
+import { NavigationItem } from 'types/navigation';
 
 // Legacy type for backward compatibility
 export type NavigationLinkType = {
@@ -34,37 +34,37 @@ const BackstoryPageContainer = (props: BackstoryPageContainerProps) => {
     <Container
       className="BackstoryPageContainer"
       sx={{
-        display: "flex",
-        flexDirection: "row",
+        display: 'flex',
+        flexDirection: 'row',
         flexGrow: 1,
-        p: "0 !important",
-        m: "0 auto !important",
-        maxWidth: "1024px",
-        height: "100%",
+        p: '0 !important',
+        m: '0 auto !important',
+        maxWidth: '1024px',
+        height: '100%',
         minHeight: 0,
         ...sx,
       }}
     >
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           p: { xs: 0, sm: 0.5 },
           flexGrow: 1,
-          minHeight: "min-content",
+          minHeight: 'min-content',
         }}
       >
         <Paper
           elevation={2}
           sx={{
-            display: "flex",
+            display: 'flex',
             flexGrow: 1,
             m: 0,
             p: 0.5,
-            minHeight: "min-content",
-            backgroundColor: "background.paper",
+            minHeight: 'min-content',
+            backgroundColor: 'background.paper',
             borderRadius: 0.5,
-            maxWidth: "100%",
-            flexDirection: "column",
+            maxWidth: '100%',
+            flexDirection: 'column',
           }}
         >
           {children}
@@ -79,9 +79,7 @@ interface BackstoryLayoutProps {
   chatRef: React.Ref<any>;
 }
 
-const BackstoryLayout: React.FC<BackstoryLayoutProps> = (
-  props: BackstoryLayoutProps
-) => {
+const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutProps) => {
   const { page, chatRef } = props;
   const { setSnack } = useAppState();
   const navigate = useNavigate();
@@ -91,9 +89,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (
 
   useEffect(() => {
     const userType = user?.userType || null;
-    setNavigationItems(
-      getMainNavigationItems(userType, user?.isAdmin ? true : false)
-    );
+    setNavigationItems(getMainNavigationItems(userType, user?.isAdmin ? true : false));
   }, [user]);
 
   // Generate dynamic routes from navigation config
@@ -109,20 +105,13 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (
         if (!route.path || !route.component) return null;
 
         // Clone the component and pass necessary props if it's a page component
-        const componentWithProps = React.cloneElement(
-          route.component as ReactElement,
-          {
-            ...(route.id === "chat" && { ref: chatRef }),
-            ...(route.component.props || {}),
-          }
-        );
+        const componentWithProps = React.cloneElement(route.component as ReactElement, {
+          ...(route.id === 'chat' && { ref: chatRef }),
+          ...(route.component.props || {}),
+        });
 
         return (
-          <Route
-            key={`${route.id}-${index}`}
-            path={route.path}
-            element={componentWithProps}
-          />
+          <Route key={`${route.id}-${index}`} path={route.path} element={componentWithProps} />
         );
       })
       .filter(Boolean);
@@ -131,28 +120,24 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (
   return (
     <Box
       sx={{
-        height: "100%",
-        maxHeight: "100%",
-        minHeight: "100%",
-        flexDirection: "column",
+        height: '100%',
+        maxHeight: '100%',
+        minHeight: '100%',
+        flexDirection: 'column',
       }}
     >
-      <Header
-        currentPath={page}
-        navigate={navigate}
-        navigationItems={navigationItems}
-      />
+      <Header currentPath={page} navigate={navigate} navigationItems={navigationItems} />
       <Box
         sx={{
-          display: "flex",
-          width: "100%",
-          maxHeight: "100%",
-          minHeight: "100%",
+          display: 'flex',
+          width: '100%',
+          maxHeight: '100%',
+          minHeight: '100%',
           flex: 1,
           m: 0,
           p: 0,
-          flexDirection: "column",
-          backgroundColor: "#D3CDBF" /* Warm Gray */,
+          flexDirection: 'column',
+          backgroundColor: '#D3CDBF' /* Warm Gray */,
         }}
       >
         <Scrollable
@@ -160,15 +145,14 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (
           sx={{
             m: 0,
             p: 0,
-            mt: "72px" /* Needs to be kept in sync with the height of Header */,
-            display: "flex",
-            flexDirection: "column",
-            backgroundColor: (theme) =>
-              darken(theme.palette.background.default, 0.4),
-            height: "100%",
-            maxHeight: "100%",
-            minHeight: "100%",
-            minWidth: "min-content",
+            mt: '72px' /* Needs to be kept in sync with the height of Header */,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: theme => darken(theme.palette.background.default, 0.4),
+            height: '100%',
+            maxHeight: '100%',
+            minHeight: '100%',
+            minWidth: 'min-content',
           }}
         >
           <BackstoryPageContainer>
@@ -188,7 +172,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (
                 <Routes>{generateRoutes()}</Routes>
               </>
             )}
-            {location.pathname === "/" && <Footer />}
+            {location.pathname === '/' && <Footer />}
           </BackstoryPageContainer>
         </Scrollable>
       </Box>
diff --git a/frontend/src/components/layout/BackstoryRoutes.tsx b/frontend/src/components/layout/BackstoryRoutes.tsx
index fe07d6a..ac6a95a 100644
--- a/frontend/src/components/layout/BackstoryRoutes.tsx
+++ b/frontend/src/components/layout/BackstoryRoutes.tsx
@@ -1,22 +1,20 @@
 // components/layout/BackstoryRoutes.tsx
-import React, { Ref, ReactNode } from "react";
-import { Route } from "react-router-dom";
+import React, { Ref, ReactNode } from 'react';
+import { Route } from 'react-router-dom';
 
-import { BackstoryPageProps } from "../BackstoryTab";
-import { ConversationHandle } from "../Conversation";
-import { User } from "types/types";
-import { getAllRoutes } from "config/navigationConfig";
-import { NavigationItem } from "types/navigation";
-import { useAppState } from "hooks/GlobalContext";
+import { BackstoryPageProps } from '../BackstoryTab';
+import { ConversationHandle } from '../Conversation';
+import { User } from 'types/types';
+import { getAllRoutes } from 'config/navigationConfig';
+import { NavigationItem } from 'types/navigation';
+import { useAppState } from 'hooks/GlobalContext';
 
 interface BackstoryDynamicRoutesProps extends BackstoryPageProps {
   chatRef: Ref<ConversationHandle>;
   user?: User | null;
 }
 
-const getBackstoryDynamicRoutes = (
-  props: BackstoryDynamicRoutesProps
-): ReactNode => {
+const getBackstoryDynamicRoutes = (props: BackstoryDynamicRoutesProps): ReactNode => {
   const { user, chatRef } = props;
   const userType = user?.userType || null;
   const isAdmin = user?.isAdmin ? true : false;
@@ -29,23 +27,14 @@ const getBackstoryDynamicRoutes = (
       if (!route.path || !route.component) return null;
 
       // Clone the component and pass necessary props
-      const componentWithProps = React.cloneElement(
-        route.component as React.ReactElement,
-        {
-          // Special handling for chat component ref
-          ...(route.id === "chat" && { ref: chatRef }),
-          // Preserve any existing props
-          ...(route.component.props || {}),
-        }
-      );
+      const componentWithProps = React.cloneElement(route.component as React.ReactElement, {
+        // Special handling for chat component ref
+        ...(route.id === 'chat' && { ref: chatRef }),
+        // Preserve any existing props
+        ...(route.component.props || {}),
+      });
 
-      return (
-        <Route
-          key={`${route.id}-${index}`}
-          path={route.path}
-          element={componentWithProps}
-        />
-      );
+      return <Route key={`${route.id}-${index}`} path={route.path} element={componentWithProps} />;
     })
     .filter(Boolean);
 };
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index 78baeaf..7943691 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   Paper,
   Box,
@@ -10,8 +10,8 @@ import {
   IconButton,
   Stack,
   useMediaQuery,
-} from "@mui/material";
-import { styled, useTheme } from "@mui/material/styles";
+} from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 import {
   Facebook,
   Twitter,
@@ -21,7 +21,7 @@ import {
   Email,
   LocationOn,
   Copyright,
-} from "@mui/icons-material";
+} from '@mui/icons-material';
 
 // Styled components
 const FooterContainer = styled(Paper)(({ theme }) => ({
@@ -34,12 +34,12 @@ const FooterContainer = styled(Paper)(({ theme }) => ({
 
 const FooterLink = styled(Link)(({ theme }) => ({
   color: theme.palette.primary.contrastText,
-  textDecoration: "none",
-  "&:hover": {
-    textDecoration: "underline",
+  textDecoration: 'none',
+  '&:hover': {
+    textDecoration: 'underline',
     color: theme.palette.action.active,
   },
-  display: "block",
+  display: 'block',
   marginBottom: theme.spacing(1),
 }));
 
@@ -50,15 +50,15 @@ const FooterHeading = styled(Typography)(({ theme }) => ({
 }));
 
 const ContactItem = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
+  display: 'flex',
+  alignItems: 'center',
   marginBottom: theme.spacing(1.5),
 }));
 
 // Footer component
 const Footer = () => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const currentYear = new Date().getFullYear();
 
   return (
@@ -73,15 +73,15 @@ const Footer = () => {
                 component="div"
                 sx={{
                   fontWeight: 700,
-                  letterSpacing: ".2rem",
+                  letterSpacing: '.2rem',
                   marginBottom: 2,
                 }}
               >
                 BACKSTORY
               </Typography>
-              <Typography variant="body2" sx={{ mb: 2, color: "white" }}>
-                Helping candidates share their professional journey and connect
-                with the right employers through compelling backstories.
+              <Typography variant="body2" sx={{ mb: 2, color: 'white' }}>
+                Helping candidates share their professional journey and connect with the right
+                employers through compelling backstories.
               </Typography>
               <Stack direction="row">
                 {/* <IconButton
@@ -120,16 +120,13 @@ const Footer = () => {
                   sx={{
                     color: theme.palette.primary.contrastText,
                     mr: 1,
-                    "&:hover": {
-                      backgroundColor: "rgba(211, 205, 191, 0.1)",
+                    '&:hover': {
+                      backgroundColor: 'rgba(211, 205, 191, 0.1)',
                       color: theme.palette.action.active,
                     },
                   }}
                   onClick={() =>
-                    window.open(
-                      "https://www.linkedin.com/in/james-ketrenos/",
-                      "_blank"
-                    )
+                    window.open('https://www.linkedin.com/in/james-ketrenos/', '_blank')
                   }
                 >
                   <LinkedIn />
@@ -172,17 +169,11 @@ const Footer = () => {
           {false && (
             <>
               <Grid size={{ xs: 12, sm: 6, md: 2 }}>
-                <FooterHeading variant="subtitle1">
-                  For Candidates
-                </FooterHeading>
+                <FooterHeading variant="subtitle1">For Candidates</FooterHeading>
                 <FooterLink href="/create-profile">Create Profile</FooterLink>
-                <FooterLink href="/backstory-editor">
-                  Backstory Editor
-                </FooterLink>
+                <FooterLink href="/backstory-editor">Backstory Editor</FooterLink>
                 <FooterLink href="/resume-builder">Resume Builder</FooterLink>
-                <FooterLink href="/career-resources">
-                  Career Resources
-                </FooterLink>
+                <FooterLink href="/career-resources">Career Resources</FooterLink>
                 <FooterLink href="/interview-tips">Interview Tips</FooterLink>
               </Grid>
             </>
@@ -194,13 +185,9 @@ const Footer = () => {
               <Grid size={{ xs: 12, sm: 6, md: 2 }}>
                 <FooterHeading variant="subtitle1">For Employers</FooterHeading>
                 <FooterLink href="/post-job">Post a Job</FooterLink>
-                <FooterLink href="/search-candidates">
-                  Search Candidates
-                </FooterLink>
+                <FooterLink href="/search-candidates">Search Candidates</FooterLink>
                 <FooterLink href="/company-profile">Company Profile</FooterLink>
-                <FooterLink href="/recruiting-tools">
-                  Recruiting Tools
-                </FooterLink>
+                <FooterLink href="/recruiting-tools">Recruiting Tools</FooterLink>
                 <FooterLink href="/pricing-plans">Pricing Plans</FooterLink>
               </Grid>
             </>
@@ -223,9 +210,7 @@ const Footer = () => {
           <Grid size={{ xs: 12, sm: 6, md: 3 }}>
             <ContactItem>
               <Email sx={{ mr: 1, fontSize: 20 }} />
-              <FooterLink href="mailto:james_backstory@ketrenos.com">
-                Email
-              </FooterLink>
+              <FooterLink href="mailto:james_backstory@ketrenos.com">Email</FooterLink>
             </ContactItem>
             {/* <ContactItem>
               <Phone sx={{ mr: 1, fontSize: 20 }} />
@@ -233,21 +218,21 @@ const Footer = () => {
             </ContactItem> */}
             <ContactItem>
               <LocationOn sx={{ mr: 1, fontSize: 20 }} />
-              <Typography variant="body2" sx={{ color: "white" }}>
+              <Typography variant="body2" sx={{ color: 'white' }}>
                 Beaverton, OR 97003
               </Typography>
             </ContactItem>
           </Grid>
         </Grid>
 
-        <Divider sx={{ my: 4, backgroundColor: "rgba(211, 205, 191, 0.2)" }} />
+        <Divider sx={{ my: 4, backgroundColor: 'rgba(211, 205, 191, 0.2)' }} />
 
         {/* Bottom Footer */}
         <Grid container spacing={2} alignItems="center">
           <Grid size={{ xs: 12, md: 6 }}>
             <Box display="flex" alignItems="center">
-              <Copyright sx={{ fontSize: 16, mr: 1, color: "white" }} />
-              <Typography variant="body2" sx={{ color: "white" }}>
+              <Copyright sx={{ fontSize: 16, mr: 1, color: 'white' }} />
+              <Typography variant="body2" sx={{ color: 'white' }}>
                 {currentYear} James P. Ketrenos. All rights reserved.
               </Typography>
             </Box>
@@ -256,9 +241,9 @@ const Footer = () => {
             {false && (
               <>
                 <Stack
-                  direction={isMobile ? "column" : "row"}
+                  direction={isMobile ? 'column' : 'row'}
                   spacing={isMobile ? 1 : 3}
-                  sx={{ textAlign: { xs: "left", md: "right" } }}
+                  sx={{ textAlign: { xs: 'left', md: 'right' } }}
                 >
                   <FooterLink href="/terms" sx={{ mb: 0 }}>
                     Terms of Service
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 770b33e..4ae0114 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,6 +1,6 @@
 // components/layout/Header.tsx
-import React, { useEffect, useState } from "react";
-import { NavigateFunction, useLocation } from "react-router-dom";
+import React, { useEffect, useState } from 'react';
+import { NavigateFunction, useLocation } from 'react-router-dom';
 import {
   AppBar,
   Toolbar,
@@ -27,8 +27,8 @@ import {
   ListItem,
   ListItemButton,
   SxProps,
-} from "@mui/material";
-import { styled, useTheme } from "@mui/material/styles";
+} from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 import {
   Menu as MenuIcon,
   Dashboard,
@@ -38,60 +38,60 @@ import {
   ExpandMore,
   ExpandLess,
   KeyboardArrowDown,
-} from "@mui/icons-material";
-import FaceRetouchingNaturalIcon from "@mui/icons-material/FaceRetouchingNatural";
-import { getUserMenuItemsByGroup } from "config/navigationConfig";
-import { NavigationItem } from "types/navigation";
-import { Beta } from "components/ui/Beta";
-import { Candidate, Employer } from "types/types";
-import { SetSnackType } from "components/Snack";
-import { CopyBubble } from "components/CopyBubble";
+} from '@mui/icons-material';
+import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
+import { getUserMenuItemsByGroup } from 'config/navigationConfig';
+import { NavigationItem } from 'types/navigation';
+import { Beta } from 'components/ui/Beta';
+import { Candidate, Employer } from 'types/types';
+import { SetSnackType } from 'components/Snack';
+import { CopyBubble } from 'components/CopyBubble';
 
-import "components/layout/Header.css";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState } from "hooks/GlobalContext";
+import 'components/layout/Header.css';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState } from 'hooks/GlobalContext';
 
 // Styled components
 const StyledAppBar = styled(AppBar, {
-  shouldForwardProp: (prop) => prop !== "transparent",
+  shouldForwardProp: prop => prop !== 'transparent',
 })<{ transparent?: boolean }>(({ theme, transparent }) => ({
-  backgroundColor: transparent ? "transparent" : theme.palette.primary.main,
-  boxShadow: transparent ? "none" : "",
-  transition: "background-color 0.3s ease",
+  backgroundColor: transparent ? 'transparent' : theme.palette.primary.main,
+  boxShadow: transparent ? 'none' : '',
+  transition: 'background-color 0.3s ease',
   borderRadius: 0,
   padding: 0,
 }));
 
 const NavLinksContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
+  display: 'flex',
+  justifyContent: 'center',
   flex: 1,
-  [theme.breakpoints.down("md")]: {
-    display: "none",
+  [theme.breakpoints.down('md')]: {
+    display: 'none',
   },
 }));
 
 const UserActionsContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
+  display: 'flex',
+  alignItems: 'center',
   gap: theme.spacing(1),
 }));
 
 const UserButton = styled(Button)(({ theme }) => ({
   color: theme.palette.primary.contrastText,
-  textTransform: "none",
-  display: "flex",
-  alignItems: "center",
+  textTransform: 'none',
+  display: 'flex',
+  alignItems: 'center',
   gap: theme.spacing(1),
   padding: theme.spacing(0.5, 1.5),
   borderRadius: theme.shape.borderRadius,
-  "&:hover": {
+  '&:hover': {
     backgroundColor: theme.palette.action.hover,
   },
 }));
 
 const MobileDrawer = styled(Drawer)(({ theme }) => ({
-  "& .MuiDrawer-paper": {
+  '& .MuiDrawer-paper': {
     width: 320,
     backgroundColor: theme.palette.background.paper,
   },
@@ -99,9 +99,9 @@ const MobileDrawer = styled(Drawer)(({ theme }) => ({
 
 const DropdownButton = styled(Button)(({ theme }) => ({
   color: theme.palette.primary.contrastText,
-  textTransform: "none",
+  textTransform: 'none',
   minHeight: 48,
-  "&:hover": {
+  '&:hover': {
     backgroundColor: theme.palette.action.hover,
   },
 }));
@@ -110,7 +110,7 @@ const UserMenuContainer = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   borderRadius: theme.shape.borderRadius,
   boxShadow: theme.shadows[8],
-  overflow: "hidden",
+  overflow: 'hidden',
   minWidth: 200,
 }));
 
@@ -126,17 +126,11 @@ interface HeaderProps {
 const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { user, logout } = useAuth();
   const { setSnack } = useAppState();
-  const {
-    transparent = false,
-    className,
-    navigate,
-    navigationItems,
-    sessionId,
-  } = props;
+  const { transparent = false, className, navigate, navigationItems, sessionId } = props;
   const theme = useTheme();
   const location = useLocation();
 
-  const name = user?.firstName || user?.email || "";
+  const name = user?.firstName || user?.email || '';
 
   // State for desktop dropdown menus
   const [dropdownAnchors, setDropdownAnchors] = useState<{
@@ -150,18 +144,13 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   }>({});
 
   // State for user menu
-  const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(
-    null
-  );
+  const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(null);
   const userMenuOpen = Boolean(userMenuAnchor);
 
   const isAdmin = user?.isAdmin || false;
 
   // Get user menu items from navigation config
-  const userMenuGroups = getUserMenuItemsByGroup(
-    user?.userType || null,
-    isAdmin
-  );
+  const userMenuGroups = getUserMenuItemsByGroup(user?.userType || null, isAdmin);
 
   // Create user menu items array with proper actions
   const createUserMenuItems = () => {
@@ -174,14 +163,14 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     }> = [];
 
     // Add profile group items
-    userMenuGroups.profile.forEach((item) => {
+    userMenuGroups.profile.forEach(item => {
       if (!item.divider) {
         items.push({
           id: item.id,
           label: item.label as string,
           icon: item.icon || null,
-          action: () => item.path && navigate(item.path.replace(/:.*$/, "")),
-          group: "profile",
+          action: () => item.path && navigate(item.path.replace(/:.*$/, '')),
+          group: 'profile',
         });
       }
     });
@@ -189,23 +178,23 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     // Add divider if we have items before system group
     if (items.length > 0 && userMenuGroups.system.length > 0) {
       items.push({
-        id: "divider",
-        label: "",
+        id: 'divider',
+        label: '',
         icon: null,
         action: () => {},
-        group: "divider",
+        group: 'divider',
       });
     }
 
     // Add account group items
-    userMenuGroups.account.forEach((item) => {
+    userMenuGroups.account.forEach(item => {
       if (!item.divider) {
         items.push({
           id: item.id,
           label: item.label as string,
           icon: item.icon || null,
-          action: () => item.path && navigate(item.path.replace(/:.*$/, "")),
-          group: "account",
+          action: () => item.path && navigate(item.path.replace(/:.*$/, '')),
+          group: 'account',
         });
       }
     });
@@ -213,23 +202,23 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     // Add divider if we have items before system group
     if (items.length > 0 && userMenuGroups.system.length > 0) {
       items.push({
-        id: "divider",
-        label: "",
+        id: 'divider',
+        label: '',
         icon: null,
         action: () => {},
-        group: "divider",
+        group: 'divider',
       });
     }
 
     // Add admin group items
-    userMenuGroups.admin.forEach((item) => {
+    userMenuGroups.admin.forEach(item => {
       if (!item.divider) {
         items.push({
           id: item.id,
           label: item.label as string,
           icon: item.icon || null,
-          action: () => item.path && navigate(item.path.replace(/:.*$/, "")),
-          group: "admin",
+          action: () => item.path && navigate(item.path.replace(/:.*$/, '')),
+          group: 'admin',
         });
       }
     });
@@ -237,47 +226,47 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     // Add divider if we have items before system group
     if (items.length > 0 && userMenuGroups.admin.length > 0) {
       items.push({
-        id: "divider",
-        label: "",
+        id: 'divider',
+        label: '',
         icon: null,
         action: () => {},
-        group: "divider",
+        group: 'divider',
       });
     }
 
     // Add system group items with special handling for logout
-    userMenuGroups.system.forEach((item) => {
-      if (item.id === "logout") {
+    userMenuGroups.system.forEach(item => {
+      if (item.id === 'logout') {
         items.push({
-          id: "logout",
-          label: "Logout",
+          id: 'logout',
+          label: 'Logout',
           icon: <Logout fontSize="small" />,
           action: () => {
             logout();
-            navigate("/");
+            navigate('/');
           },
-          group: "system",
+          group: 'system',
         });
       } else if (!item.divider) {
         items.push({
           id: item.id,
           label: item.label as string,
           icon: item.icon || null,
-          action: () => item.path && navigate(item.path.replace(/:.*$/, "")),
-          group: "system",
+          action: () => item.path && navigate(item.path.replace(/:.*$/, '')),
+          group: 'system',
         });
       }
     });
 
     // Add other group items
-    userMenuGroups.other.forEach((item) => {
+    userMenuGroups.other.forEach(item => {
       if (!item.divider) {
         items.push({
           id: item.id,
           label: item.label as string,
           icon: item.icon || null,
-          action: () => item.path && navigate(item.path.replace(/:.*$/, "")),
-          group: "other",
+          action: () => item.path && navigate(item.path.replace(/:.*$/, '')),
+          group: 'other',
         });
       }
     });
@@ -299,26 +288,21 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   // Helper function to check if any child is current path
   const hasActiveChild = (item: NavigationItem): boolean => {
     if (!item.children) return false;
-    return item.children.some(
-      (child) => isCurrentPath(child) || hasActiveChild(child)
-    );
+    return item.children.some(child => isCurrentPath(child) || hasActiveChild(child));
   };
 
   // Desktop dropdown handlers
-  const handleDropdownOpen = (
-    event: React.MouseEvent<HTMLElement>,
-    itemId: string
-  ) => {
-    setDropdownAnchors((prev) => ({ ...prev, [itemId]: event.currentTarget }));
+  const handleDropdownOpen = (event: React.MouseEvent<HTMLElement>, itemId: string) => {
+    setDropdownAnchors(prev => ({ ...prev, [itemId]: event.currentTarget }));
   };
 
   const handleDropdownClose = (itemId: string) => {
-    setDropdownAnchors((prev) => ({ ...prev, [itemId]: null }));
+    setDropdownAnchors(prev => ({ ...prev, [itemId]: null }));
   };
 
   // Mobile accordion handlers
   const handleMobileToggle = (itemId: string) => {
-    setMobileExpanded((prev) => ({ ...prev, [itemId]: !prev[itemId] }));
+    setMobileExpanded(prev => ({ ...prev, [itemId]: !prev[itemId] }));
   };
 
   const handleDrawerToggle = () => {
@@ -340,7 +324,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     action: () => void;
     group?: string;
   }) => {
-    if (item.group !== "divider") {
+    if (item.group !== 'divider') {
       item.action();
       handleUserMenuClose();
     }
@@ -348,7 +332,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
 
   // Navigation handlers
   const handleNavigate = (path: string) => {
-    navigate(path.replace(/:.*$/, ""));
+    navigate(path.replace(/:.*$/, ''));
     setMobileOpen(false);
     // Close all dropdowns
     setDropdownAnchors({});
@@ -359,10 +343,10 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     return (
       <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
-          width: "100%",
-          justifyContent: "space-between",
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          justifyContent: 'space-between',
         }}
       >
         {navigationItems.map((item, index) => {
@@ -374,45 +358,38 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
               <Box
                 key={item.id}
                 sx={{
-                  mr:
-                    index === 0 || index === navigationItems.length - 1
-                      ? "auto"
-                      : "unset",
+                  mr: index === 0 || index === navigationItems.length - 1 ? 'auto' : 'unset',
                 }}
               >
                 <DropdownButton
-                  onClick={(e) => handleDropdownOpen(e, item.id)}
+                  onClick={e => handleDropdownOpen(e, item.id)}
                   endIcon={<KeyboardArrowDown />}
                   sx={{
-                    backgroundColor: isActive
-                      ? "action.selected"
-                      : "transparent",
-                    color: isActive ? "secondary.main" : "primary.contrastText",
+                    backgroundColor: isActive ? 'action.selected' : 'transparent',
+                    color: isActive ? 'secondary.main' : 'primary.contrastText',
                   }}
                 >
-                  {item.icon && (
-                    <Box sx={{ mr: 1, display: "flex" }}>{item.icon}</Box>
-                  )}
+                  {item.icon && <Box sx={{ mr: 1, display: 'flex' }}>{item.icon}</Box>}
                   {item.label}
                 </DropdownButton>
                 <Menu
                   anchorEl={dropdownAnchors[item.id]}
                   open={Boolean(dropdownAnchors[item.id])}
                   onClose={() => handleDropdownClose(item.id)}
-                  anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                  transformOrigin={{ vertical: "top", horizontal: "left" }}
+                  anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                  transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                   TransitionComponent={Fade}
                 >
-                  {item.children?.map((child) => (
+                  {item.children?.map(child => (
                     <MenuItem
                       key={child.id}
                       onClick={() => child.path && handleNavigate(child.path)}
                       selected={isCurrentPath(child)}
                       disabled={!child.path}
                       sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        "& *": { m: 0, p: 0 },
+                        display: 'flex',
+                        alignItems: 'center',
+                        '& *': { m: 0, p: 0 },
                         m: 0,
                       }}
                     >
@@ -429,17 +406,12 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
                 key={item.id}
                 onClick={() => item.path && handleNavigate(item.path)}
                 sx={{
-                  backgroundColor: isActive ? "action.selected" : "transparent",
-                  color: isActive ? "secondary.main" : "primary.contrastText",
-                  mr:
-                    index === 0 || index === navigationItems.length - 1
-                      ? "auto"
-                      : "unset",
+                  backgroundColor: isActive ? 'action.selected' : 'transparent',
+                  color: isActive ? 'secondary.main' : 'primary.contrastText',
+                  mr: index === 0 || index === navigationItems.length - 1 ? 'auto' : 'unset',
                 }}
               >
-                {item.icon && (
-                  <Box sx={{ mr: 1, display: "flex" }}>{item.icon}</Box>
-                )}
+                {item.icon && <Box sx={{ mr: 1, display: 'flex' }}>{item.icon}</Box>}
                 {item.label}
               </DropdownButton>
             );
@@ -469,41 +441,35 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
               }}
               selected={isActive}
               sx={{
-                backgroundColor: isActive ? "action.selected" : "transparent",
-                "&.Mui-selected": {
-                  backgroundColor: "primary.main",
-                  color: "primary.contrastText",
-                  "& .MuiListItemIcon-root": {
-                    color: "primary.contrastText",
+                backgroundColor: isActive ? 'action.selected' : 'transparent',
+                '&.Mui-selected': {
+                  backgroundColor: 'primary.main',
+                  color: 'primary.contrastText',
+                  '& .MuiListItemIcon-root': {
+                    color: 'primary.contrastText',
                   },
                 },
               }}
             >
-              {item.icon && (
-                <ListItemIcon sx={{ minWidth: 36 }}>{item.icon}</ListItemIcon>
-              )}
+              {item.icon && <ListItemIcon sx={{ minWidth: 36 }}>{item.icon}</ListItemIcon>}
               <ListItemText
                 primary={item.label}
                 sx={{
-                  "& .MuiTypography-root": {
-                    fontSize: depth > 0 ? "0.875rem" : "1rem",
+                  '& .MuiTypography-root': {
+                    fontSize: depth > 0 ? '0.875rem' : '1rem',
                     fontWeight: depth === 0 ? 500 : 400,
                   },
                 }}
               />
               {hasChildren && (
-                <IconButton size="small">
-                  {isExpanded ? <ExpandLess /> : <ExpandMore />}
-                </IconButton>
+                <IconButton size="small">{isExpanded ? <ExpandLess /> : <ExpandMore />}</IconButton>
               )}
             </ListItemButton>
           </ListItem>
           {hasChildren && (
             <Collapse in={isExpanded} timeout="auto" unmountOnExit>
               <List disablePadding>
-                {item.children?.map((child) =>
-                  renderNavigationItem(child, depth + 1)
-                )}
+                {item.children?.map(child => renderNavigationItem(child, depth + 1))}
               </List>
             </Collapse>
           )}
@@ -513,11 +479,11 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
 
     return (
       <List sx={{ pt: 0 }}>
-        {navigationItems.map((item) => renderNavigationItem(item))}
+        {navigationItems.map(item => renderNavigationItem(item))}
         <Divider sx={{ my: 1 }} />
         {!user && (
           <ListItem disablePadding>
-            <ListItemButton onClick={() => handleNavigate("/login")}>
+            <ListItemButton onClick={() => handleNavigate('/login')}>
               <ListItemText primary="Login" />
             </ListItemButton>
           </ListItem>
@@ -532,16 +498,12 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
       <UserMenuContainer>
         <List dense>
           {userMenuItems.map((item, index) =>
-            item.group === "divider" ? (
+            item.group === 'divider' ? (
               <Divider key={`divider-${index}`} />
             ) : (
               <ListItem key={item.id}>
                 <ListItemButton onClick={() => handleUserMenuAction(item)}>
-                  {item.icon && (
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      {item.icon}
-                    </ListItemIcon>
-                  )}
+                  {item.icon && <ListItemIcon sx={{ minWidth: 36 }}>{item.icon}</ListItemIcon>}
                   <ListItemText primary={item.label} />
                 </ListItemButton>
               </ListItem>
@@ -559,9 +521,9 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
         <Button
           color="info"
           variant="contained"
-          onClick={() => navigate("/login")}
+          onClick={() => navigate('/login')}
           sx={{
-            display: { xs: "none", sm: "block" },
+            display: { xs: 'none', sm: 'block' },
             color: theme.palette.primary.contrastText,
           }}
         >
@@ -574,9 +536,9 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
       <>
         <UserButton
           onClick={handleUserMenuOpen}
-          aria-controls={userMenuOpen ? "user-menu" : undefined}
+          aria-controls={userMenuOpen ? 'user-menu' : undefined}
           aria-haspopup="true"
-          aria-expanded={userMenuOpen ? "true" : undefined}
+          aria-expanded={userMenuOpen ? 'true' : undefined}
         >
           <Avatar
             sx={{
@@ -587,7 +549,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
           >
             {name.charAt(0).toUpperCase()}
           </Avatar>
-          <Box sx={{ display: { xs: "none", sm: "block" } }}>{name}</Box>
+          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>{name}</Box>
           <ExpandMore fontSize="small" />
         </UserButton>
 
@@ -597,12 +559,12 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
           anchorEl={userMenuAnchor}
           onClose={handleUserMenuClose}
           anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "right",
+            vertical: 'bottom',
+            horizontal: 'right',
           }}
           transformOrigin={{
-            vertical: "top",
-            horizontal: "right",
+            vertical: 'top',
+            horizontal: 'right',
           }}
           TransitionComponent={Fade}
         >
@@ -617,7 +579,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
       position="fixed"
       transparent={transparent}
       className={className}
-      sx={{ overflow: "hidden" }}
+      sx={{ overflow: 'hidden' }}
     >
       <Container maxWidth="xl">
         <Toolbar disableGutters>
@@ -635,7 +597,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
                 aria-label="open drawer"
                 edge="end"
                 onClick={handleDrawerToggle}
-                sx={{ display: { md: "none" } }}
+                sx={{ display: { md: 'none' } }}
               >
                 <MenuIcon />
               </IconButton>
@@ -651,13 +613,13 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
                   width: 36,
                   height: 36,
                   opacity: 1,
-                  bgcolor: "inherit",
-                  "&:hover": { bgcolor: "action.hover", opacity: 1 },
+                  bgcolor: 'inherit',
+                  '&:hover': { bgcolor: 'action.hover', opacity: 1 },
                 }}
                 content={`${window.location.origin}${window.location.pathname}?id=${sessionId}`}
                 onClick={() => {
                   navigate(`${window.location.pathname}?id=${sessionId}`);
-                  setSnack("Link copied!");
+                  setSnack('Link copied!');
                 }}
                 size="large"
               />
@@ -679,9 +641,9 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
         </Toolbar>
       </Container>
       <Beta
-        sx={{ left: "-90px", "& .mobile": { right: "-72px" } }}
+        sx={{ left: '-90px', '& .mobile': { right: '-72px' } }}
         onClick={() => {
-          navigate("/docs/beta");
+          navigate('/docs/beta');
         }}
       />
     </StyledAppBar>
diff --git a/frontend/src/components/ui/AIBanner.tsx b/frontend/src/components/ui/AIBanner.tsx
index 15e7cc9..cdb0e1c 100644
--- a/frontend/src/components/ui/AIBanner.tsx
+++ b/frontend/src/components/ui/AIBanner.tsx
@@ -1,27 +1,24 @@
-import React, { useRef } from "react";
-import Box from "@mui/material/Box";
-import { SxProps } from "@mui/material/styles";
+import React, { useRef } from 'react';
+import Box from '@mui/material/Box';
+import { SxProps } from '@mui/material/styles';
 
-import "./AIBanner.css";
-import { useMediaQuery, useTheme } from "@mui/material";
+import './AIBanner.css';
+import { useMediaQuery, useTheme } from '@mui/material';
 
 type AIBannerProps = {
   sx?: SxProps;
-  variant?: "minimal" | "small" | "normal" | undefined;
+  variant?: 'minimal' | 'small' | 'normal' | undefined;
 };
 
 const AIBanner: React.FC<AIBannerProps> = (props: AIBannerProps) => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const { sx = {}, variant = isMobile ? "small" : "normal" } = props;
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const { sx = {}, variant = isMobile ? 'small' : 'normal' } = props;
   const aibannerRef = useRef<HTMLElement | null>(null);
 
   return (
     <Box sx={sx} className="aibanner-clipper">
-      <Box
-        ref={aibannerRef}
-        className={` aibanner-label-${variant} aibanner-label`}
-      >
+      <Box ref={aibannerRef} className={` aibanner-label-${variant} aibanner-label`}>
         <Box>AI Generated</Box>
       </Box>
     </Box>
diff --git a/frontend/src/components/ui/BackstoryLogo.tsx b/frontend/src/components/ui/BackstoryLogo.tsx
index 44f79af..f2eec63 100644
--- a/frontend/src/components/ui/BackstoryLogo.tsx
+++ b/frontend/src/components/ui/BackstoryLogo.tsx
@@ -1,8 +1,8 @@
-import React from "react";
-import { Typography, Avatar } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
+import React from 'react';
+import { Typography, Avatar } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 
-import "components/layout/Header.css";
+import 'components/layout/Header.css';
 
 const BackstoryLogo = () => {
   const theme = useTheme();
@@ -12,17 +12,17 @@ const BackstoryLogo = () => {
       className="BackstoryLogo"
       noWrap
       sx={{
-        cursor: "pointer",
+        cursor: 'pointer',
         fontWeight: 700,
-        letterSpacing: ".2rem",
+        letterSpacing: '.2rem',
         color: theme.palette.primary.contrastText,
-        textDecoration: "none",
-        display: "inline-flex",
-        flexDirection: "row",
-        alignItems: "center",
-        verticalAlign: "center",
+        textDecoration: 'none',
+        display: 'inline-flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        verticalAlign: 'center',
         gap: 1,
-        textTransform: "uppercase",
+        textTransform: 'uppercase',
       }}
     >
       <Avatar
diff --git a/frontend/src/components/ui/Beta.tsx b/frontend/src/components/ui/Beta.tsx
index a5e5ec4..225e8ea 100644
--- a/frontend/src/components/ui/Beta.tsx
+++ b/frontend/src/components/ui/Beta.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
-import Box from "@mui/material/Box";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { SxProps, useTheme } from "@mui/material/styles";
+import React, { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { SxProps, useTheme } from '@mui/material/styles';
 
-import "./Beta.css";
+import './Beta.css';
 
 type BetaProps = {
   adaptive?: boolean;
@@ -15,7 +15,7 @@ const Beta: React.FC<BetaProps> = (props: BetaProps) => {
   const { onClick, adaptive = true, sx = {} } = props;
   const betaRef = useRef<HTMLElement | null>(null);
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [animationKey, setAnimationKey] = useState<number>(0);
   const [firstPass, setFirstPass] = useState<boolean>(true);
 
@@ -31,24 +31,21 @@ const Beta: React.FC<BetaProps> = (props: BetaProps) => {
     if (!betaRef.current) return;
 
     // Increment animation key to force React to recreate the element
-    setAnimationKey((prevKey) => prevKey + 1);
+    setAnimationKey(prevKey => prevKey + 1);
 
     // Ensure the animate class is present
-    betaRef.current.classList.add("animate");
+    betaRef.current.classList.add('animate');
   };
 
   return (
     <Box
       sx={sx}
-      className={`beta-clipper ${adaptive && isMobile && "mobile"}`}
-      onClick={(e) => {
+      className={`beta-clipper ${adaptive && isMobile && 'mobile'}`}
+      onClick={e => {
         onClick && onClick(e);
       }}
     >
-      <Box
-        ref={betaRef}
-        className={`beta-label ${adaptive && isMobile && "mobile"}`}
-      >
+      <Box ref={betaRef} className={`beta-label ${adaptive && isMobile && 'mobile'}`}>
         <Box key={animationKey} className="particles"></Box>
         <Box>BETA</Box>
       </Box>
diff --git a/frontend/src/components/ui/CandidateInfo.tsx b/frontend/src/components/ui/CandidateInfo.tsx
index 36c260c..b33c45b 100644
--- a/frontend/src/components/ui/CandidateInfo.tsx
+++ b/frontend/src/components/ui/CandidateInfo.tsx
@@ -1,43 +1,30 @@
-import React, { useState, useRef, useEffect } from "react";
-import {
-  Box,
-  Link,
-  Typography,
-  Avatar,
-  Grid,
-  SxProps,
-  Tooltip,
-  IconButton,
-} from "@mui/material";
-import { Card, CardContent, Divider, useTheme } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { useMediaQuery } from "@mui/material";
-import { Candidate, CandidateAI } from "types/types";
-import { CopyBubble } from "components/CopyBubble";
-import { rest } from "lodash";
-import { AIBanner } from "components/ui/AIBanner";
-import { useAuth } from "hooks/AuthContext";
-import { DeleteConfirmation } from "../DeleteConfirmation";
+import React, { useState, useRef, useEffect } from 'react';
+import { Box, Link, Typography, Avatar, Grid, SxProps, Tooltip, IconButton } from '@mui/material';
+import { Card, CardContent, Divider, useTheme } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useMediaQuery } from '@mui/material';
+import { Candidate, CandidateAI } from 'types/types';
+import { CopyBubble } from 'components/CopyBubble';
+import { rest } from 'lodash';
+import { AIBanner } from 'components/ui/AIBanner';
+import { useAuth } from 'hooks/AuthContext';
+import { DeleteConfirmation } from '../DeleteConfirmation';
 
 interface CandidateInfoProps {
   candidate: Candidate;
   sx?: SxProps;
   action?: string;
   elevation?: number;
-  variant?: "minimal" | "small" | "normal" | undefined;
+  variant?: 'minimal' | 'small' | 'normal' | undefined;
 }
 
-const CandidateInfo: React.FC<CandidateInfoProps> = (
-  props: CandidateInfoProps
-) => {
+const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps) => {
   const { candidate } = props;
   const { user, apiClient } = useAuth();
-  const { sx, action = "", elevation = 1, variant = "normal" } = props;
+  const { sx, action = '', elevation = 1, variant = 'normal' } = props;
   const theme = useTheme();
-  const isMobile =
-    useMediaQuery(theme.breakpoints.down("md")) || variant === "minimal";
-  const ai: CandidateAI | null =
-    "isAI" in candidate ? (candidate as CandidateAI) : null;
+  const isMobile = useMediaQuery(theme.breakpoints.down('md')) || variant === 'minimal';
+  const ai: CandidateAI | null = 'isAI' in candidate ? (candidate as CandidateAI) : null;
   const isAdmin = user?.isAdmin;
 
   // State for description expansion
@@ -67,76 +54,68 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (
   return (
     <Box
       sx={{
-        display: "flex",
-        transition: "all 0.3s ease",
+        display: 'flex',
+        transition: 'all 0.3s ease',
         flexGrow: 1,
         p: isMobile ? 1 : 2,
-        height: "100%",
-        flexDirection: "column",
-        alignItems: "stretch",
-        position: "relative",
-        overflow: "hidden",
+        height: '100%',
+        flexDirection: 'column',
+        alignItems: 'stretch',
+        position: 'relative',
+        overflow: 'hidden',
         ...sx,
       }}
       {...rest}
     >
       {ai && <AIBanner variant={variant} />}
 
-      <Box sx={{ display: "flex", flexDirection: "row" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row' }}>
         <Avatar
-          src={
-            candidate.profileImage
-              ? `/api/1.0/candidates/profile/${candidate.username}`
-              : ""
-          }
+          src={candidate.profileImage ? `/api/1.0/candidates/profile/${candidate.username}` : ''}
           alt={`${candidate.fullName}'s profile`}
           sx={{
-            alignSelf: "flex-start",
+            alignSelf: 'flex-start',
             width: isMobile ? 40 : 80,
             height: isMobile ? 40 : 80,
-            border: "2px solid #e0e0e0",
+            border: '2px solid #e0e0e0',
           }}
         />
 
         <Box sx={{ ml: 1 }}>
           <Box
             sx={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'flex-start',
               mb: 1,
             }}
           >
             <Box>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: isMobile ? "column" : "row",
-                  alignItems: "left",
+                  display: 'flex',
+                  flexDirection: isMobile ? 'column' : 'row',
+                  alignItems: 'left',
                   gap: 1,
-                  "& > .MuiTypography-root": { m: 0 },
+                  '& > .MuiTypography-root': { m: 0 },
                 }}
               >
-                {action !== "" && (
-                  <Typography variant="body1">{action}</Typography>
-                )}
-                {action === "" && (
+                {action !== '' && <Typography variant="body1">{action}</Typography>}
+                {action === '' && (
                   <Typography
                     variant="h5"
                     component="h1"
                     sx={{
-                      fontWeight: "bold",
-                      whiteSpace: "nowrap",
+                      fontWeight: 'bold',
+                      whiteSpace: 'nowrap',
                     }}
                   >
                     {candidate.fullName}
                   </Typography>
                 )}
               </Box>
-              <Box sx={{ fontSize: "0.75rem", alignItems: "center" }}>
-                <Link
-                  href={`/u/${candidate.username}`}
-                >{`/u/${candidate.username}`}</Link>
+              <Box sx={{ fontSize: '0.75rem', alignItems: 'center' }}>
+                <Link href={`/u/${candidate.username}`}>{`/u/${candidate.username}`}</Link>
                 <CopyBubble
                   onClick={(event: any) => {
                     event.stopPropagation();
@@ -151,20 +130,20 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (
       </Box>
 
       <Box>
-        {!isMobile && variant === "normal" && (
-          <Box sx={{ minHeight: "5rem" }}>
+        {!isMobile && variant === 'normal' && (
+          <Box sx={{ minHeight: '5rem' }}>
             <Typography
               ref={descriptionRef}
               variant="body1"
               color="text.secondary"
               sx={{
-                display: "-webkit-box",
-                WebkitLineClamp: isDescriptionExpanded ? "unset" : 3,
-                WebkitBoxOrient: "vertical",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                display: '-webkit-box',
+                WebkitLineClamp: isDescriptionExpanded ? 'unset' : 3,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
                 lineHeight: 1.5,
-                fontSize: "0.8rem !important",
+                fontSize: '0.8rem !important',
               }}
             >
               {candidate.description}
@@ -173,37 +152,37 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (
               <Link
                 component="button"
                 variant="body2"
-                onClick={(e) => {
+                onClick={e => {
                   e.preventDefault();
                   e.stopPropagation();
                   setIsDescriptionExpanded(!isDescriptionExpanded);
                 }}
                 sx={{
                   color: theme.palette.primary.main,
-                  textDecoration: "none",
-                  cursor: "pointer",
-                  fontSize: "0.725rem",
+                  textDecoration: 'none',
+                  cursor: 'pointer',
+                  fontSize: '0.725rem',
                   fontWeight: 500,
                   mt: 0.5,
-                  display: "block",
-                  "&:hover": {
-                    textDecoration: "underline",
+                  display: 'block',
+                  '&:hover': {
+                    textDecoration: 'underline',
                   },
                 }}
               >
-                [{isDescriptionExpanded ? "less" : "more"}]
+                [{isDescriptionExpanded ? 'less' : 'more'}]
               </Link>
             )}
           </Box>
         )}
 
-        {variant !== "small" && variant !== "minimal" && (
+        {variant !== 'small' && variant !== 'minimal' && (
           <>
             <Divider sx={{ my: 2 }} />
 
             {candidate.location && (
               <Typography variant="body2" sx={{ mb: 1 }}>
-                <strong>Location:</strong> {candidate.location.city},{" "}
+                <strong>Location:</strong> {candidate.location.city},{' '}
                 {candidate.location.state || candidate.location.country}
               </Typography>
             )}
@@ -223,15 +202,15 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (
       {isAdmin && ai && (
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "flex-start",
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
           }}
         >
           <Tooltip title="Delete Job">
             <IconButton
               size="small"
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
                 deleteCandidate(candidate.id);
               }}
diff --git a/frontend/src/components/ui/CandidatePicker.tsx b/frontend/src/components/ui/CandidatePicker.tsx
index c698cff..cd0e955 100644
--- a/frontend/src/components/ui/CandidatePicker.tsx
+++ b/frontend/src/components/ui/CandidatePicker.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
 
-import { BackstoryElementProps } from "components/BackstoryTab";
-import { CandidateInfo } from "components/ui/CandidateInfo";
-import { Candidate, CandidateAI } from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState, useSelectedCandidate } from "hooks/GlobalContext";
-import { Paper } from "@mui/material";
+import { BackstoryElementProps } from 'components/BackstoryTab';
+import { CandidateInfo } from 'components/ui/CandidateInfo';
+import { Candidate, CandidateAI } from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
+import { Paper } from '@mui/material';
 
 interface CandidatePickerProps extends BackstoryElementProps {
   onSelect?: (candidate: Candidate) => void;
@@ -31,8 +31,8 @@ const CandidatePicker = (props: CandidatePickerProps) => {
         const results = await apiClient.getCandidates();
         const candidates: Candidate[] = results.data;
         candidates.sort((a, b) => {
-          const aIsAi = "isAI" in a ? 1 : 0;
-          const bIsAi = "isAI" in b ? 1 : 0;
+          const aIsAi = 'isAI' in a ? 1 : 0;
+          const bIsAi = 'isAI' in b ? 1 : 0;
           let result = aIsAi - bIsAi;
           if (result === 0) {
             result = a.lastName.localeCompare(b.lastName);
@@ -47,7 +47,7 @@ const CandidatePicker = (props: CandidatePickerProps) => {
         });
         setCandidates(candidates);
       } catch (err) {
-        setSnack("" + err);
+        setSnack('' + err);
       }
     };
 
@@ -55,13 +55,13 @@ const CandidatePicker = (props: CandidatePickerProps) => {
   }, [candidates, setSnack]);
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", ...sx }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', ...sx }}>
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           gap: 1,
-          flexWrap: "wrap",
-          justifyContent: "center",
+          flexWrap: 'wrap',
+          justifyContent: 'center',
         }}
       >
         {candidates?.map((u, i) => (
@@ -70,20 +70,19 @@ const CandidatePicker = (props: CandidatePickerProps) => {
             onClick={() => {
               onSelect ? onSelect(u) : setSelectedCandidate(u);
             }}
-            sx={{ cursor: "pointer" }}
+            sx={{ cursor: 'pointer' }}
           >
             <CandidateInfo
               variant="small"
               sx={{
-                maxWidth: "100%",
-                minWidth: "320px",
-                width: "320px",
-                cursor: "pointer",
-                backgroundColor:
-                  selectedCandidate?.id === u.id ? "#f0f0f0" : "inherit",
-                border: "2px solid transparent",
-                "&:hover": {
-                  border: "2px solid orange",
+                maxWidth: '100%',
+                minWidth: '320px',
+                width: '320px',
+                cursor: 'pointer',
+                backgroundColor: selectedCandidate?.id === u.id ? '#f0f0f0' : 'inherit',
+                border: '2px solid transparent',
+                '&:hover': {
+                  border: '2px solid orange',
                 },
               }}
               candidate={u}
diff --git a/frontend/src/components/ui/ComingSoon.tsx b/frontend/src/components/ui/ComingSoon.tsx
index 0bdc535..e1d4b26 100644
--- a/frontend/src/components/ui/ComingSoon.tsx
+++ b/frontend/src/components/ui/ComingSoon.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
-import Box from "@mui/material/Box";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { SxProps, useTheme } from "@mui/material/styles";
+import React, { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { SxProps, useTheme } from '@mui/material/styles';
 
-import "./ComingSoon.css";
+import './ComingSoon.css';
 
 type ComingSoonProps = {
   children?: React.ReactNode;
diff --git a/frontend/src/components/ui/JobInfo.tsx b/frontend/src/components/ui/JobInfo.tsx
index 0831373..c8bacce 100644
--- a/frontend/src/components/ui/JobInfo.tsx
+++ b/frontend/src/components/ui/JobInfo.tsx
@@ -1,4 +1,4 @@
-import React, { JSX, useActionState, useEffect, useRef, useState } from "react";
+import React, { JSX, useActionState, useEffect, useRef, useState } from 'react';
 import {
   Box,
   Link,
@@ -15,52 +15,43 @@ import {
   LinearProgress,
   IconButton,
   Tooltip,
-} from "@mui/material";
-import { Card, CardContent, Divider, useTheme } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { useMediaQuery } from "@mui/material";
-import { Job } from "types/types";
-import { CopyBubble } from "components/CopyBubble";
-import { rest } from "lodash";
-import { AIBanner } from "components/ui/AIBanner";
-import { useAuth } from "hooks/AuthContext";
-import { DeleteConfirmation } from "../DeleteConfirmation";
-import {
-  Build,
-  CheckCircle,
-  Description,
-  Psychology,
-  Star,
-  Work,
-} from "@mui/icons-material";
-import ModelTrainingIcon from "@mui/icons-material/ModelTraining";
-import { StatusIcon, StatusBox } from "components/ui/StatusIcon";
-import RestoreIcon from "@mui/icons-material/Restore";
-import SaveIcon from "@mui/icons-material/Save";
-import * as Types from "types/types";
-import { useAppState } from "hooks/GlobalContext";
-import { StyledMarkdown } from "components/StyledMarkdown";
+} from '@mui/material';
+import { Card, CardContent, Divider, useTheme } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useMediaQuery } from '@mui/material';
+import { Job } from 'types/types';
+import { CopyBubble } from 'components/CopyBubble';
+import { rest } from 'lodash';
+import { AIBanner } from 'components/ui/AIBanner';
+import { useAuth } from 'hooks/AuthContext';
+import { DeleteConfirmation } from '../DeleteConfirmation';
+import { Build, CheckCircle, Description, Psychology, Star, Work } from '@mui/icons-material';
+import ModelTrainingIcon from '@mui/icons-material/ModelTraining';
+import { StatusIcon, StatusBox } from 'components/ui/StatusIcon';
+import RestoreIcon from '@mui/icons-material/Restore';
+import SaveIcon from '@mui/icons-material/Save';
+import * as Types from 'types/types';
+import { useAppState } from 'hooks/GlobalContext';
+import { StyledMarkdown } from 'components/StyledMarkdown';
 
 interface JobInfoProps {
   job: Job;
   sx?: SxProps;
   action?: string;
   elevation?: number;
-  variant?: "minimal" | "small" | "normal" | "all" | null;
+  variant?: 'minimal' | 'small' | 'normal' | 'all' | null;
 }
 
 const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
   const { setSnack } = useAppState();
   const { job } = props;
   const { user, apiClient } = useAuth();
-  const { sx, action = "", elevation = 1, variant = "normal" } = props;
+  const { sx, action = '', elevation = 1, variant = 'normal' } = props;
   const theme = useTheme();
-  const isMobile =
-    useMediaQuery(theme.breakpoints.down("md")) || variant === "minimal";
+  const isMobile = useMediaQuery(theme.breakpoints.down('md')) || variant === 'minimal';
   const isAdmin = user?.isAdmin;
   const [adminStatus, setAdminStatus] = useState<string | null>(null);
-  const [adminStatusType, setAdminStatusType] =
-    useState<Types.ApiActivityType | null>(null);
+  const [adminStatusType, setAdminStatusType] = useState<Types.ApiActivityType | null>(null);
   const [activeJob, setActiveJob] = useState<Types.Job>({
     ...job,
   }); /* Copy of job */
@@ -100,36 +91,33 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
   }
 
   const handleSave = async () => {
-    const newJob = await apiClient.updateJob(job.id || "", {
+    const newJob = await apiClient.updateJob(job.id || '', {
       description: activeJob.description,
       requirements: activeJob.requirements,
     });
     job.updatedAt = newJob.updatedAt;
     setActiveJob(newJob);
-    setSnack("Job updated.");
+    setSnack('Job updated.');
   };
 
   const handleRefresh = () => {
-    setAdminStatus("Re-extracting Job information...");
+    setAdminStatus('Re-extracting Job information...');
     const jobStatusHandlers = {
       onStatus: (status: Types.ChatMessageStatus) => {
-        console.log("status:", status.content);
+        console.log('status:', status.content);
         setAdminStatusType(status.activity);
         setAdminStatus(status.content);
       },
       onMessage: async (jobMessage: Types.JobRequirementsMessage) => {
         const newJob: Types.Job = jobMessage.job;
-        console.log("onMessage - job", newJob);
+        console.log('onMessage - job', newJob);
         newJob.id = job.id;
         newJob.createdAt = job.createdAt;
-        const updatedJob: Types.Job = await apiClient.updateJob(
-          job.id || "",
-          newJob
-        );
+        const updatedJob: Types.Job = await apiClient.updateJob(job.id || '', newJob);
         setActiveJob(updatedJob);
       },
       onError: (error: Types.ChatMessageError) => {
-        console.log("onError", error);
+        console.log('onError', error);
         setAdminStatusType(null);
         setAdminStatus(null);
       },
@@ -138,10 +126,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
         setAdminStatus(null);
       },
     };
-    apiClient.createJobFromDescription(
-      activeJob.description,
-      jobStatusHandlers
-    );
+    apiClient.createJobFromDescription(activeJob.description, jobStatusHandlers);
   };
 
   const renderRequirementSection = (
@@ -154,11 +139,11 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
 
     return (
       <Box sx={{ mb: 2 }}>
-        <Box sx={{ display: "flex", alignItems: "center", mb: 1.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
           {icon}
           <Typography
             variant="subtitle1"
-            sx={{ ml: 1, fontWeight: 600, fontSize: "0.85rem !important" }}
+            sx={{ ml: 1, fontWeight: 600, fontSize: '0.85rem !important' }}
           >
             {title}
           </Typography>
@@ -167,7 +152,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
               label="Required"
               size="small"
               color="error"
-              sx={{ ml: 1, fontSize: "0.75rem !important" }}
+              sx={{ ml: 1, fontSize: '0.75rem !important' }}
             />
           )}
         </Box>
@@ -178,7 +163,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
               label={item}
               variant="outlined"
               size="small"
-              sx={{ mb: 1, fontSize: "0.75rem !important" }}
+              sx={{ mb: 1, fontSize: '0.75rem !important' }}
             />
           ))}
         </Stack>
@@ -190,10 +175,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
     if (!activeJob.requirements) return null;
 
     return (
-      <Card
-        elevation={0}
-        sx={{ m: 0, p: 0, mt: 2, background: "transparent !important" }}
-      >
+      <Card elevation={0} sx={{ m: 0, p: 0, mt: 2, background: 'transparent !important' }}>
         <CardHeader
           title="Job Requirements Analysis"
           avatar={<CheckCircle color="success" />}
@@ -201,49 +183,49 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
         />
         <CardContent sx={{ p: 0 }}>
           {renderRequirementSection(
-            "Technical Skills (Required)",
+            'Technical Skills (Required)',
             activeJob.requirements.technicalSkills.required,
             <Build color="primary" />,
             true
           )}
           {renderRequirementSection(
-            "Technical Skills (Preferred)",
+            'Technical Skills (Preferred)',
             activeJob.requirements.technicalSkills.preferred,
             <Build color="action" />
           )}
           {renderRequirementSection(
-            "Experience Requirements (Required)",
+            'Experience Requirements (Required)',
             activeJob.requirements.experienceRequirements.required,
             <Work color="primary" />,
             true
           )}
           {renderRequirementSection(
-            "Experience Requirements (Preferred)",
+            'Experience Requirements (Preferred)',
             activeJob.requirements.experienceRequirements.preferred,
             <Work color="action" />
           )}
           {renderRequirementSection(
-            "Soft Skills",
+            'Soft Skills',
             activeJob.requirements.softSkills,
             <Psychology color="secondary" />
           )}
           {renderRequirementSection(
-            "Experience",
+            'Experience',
             activeJob.requirements.experience,
             <Star color="warning" />
           )}
           {renderRequirementSection(
-            "Education",
+            'Education',
             activeJob.requirements.education,
             <Description color="info" />
           )}
           {renderRequirementSection(
-            "Certifications",
+            'Certifications',
             activeJob.requirements.certifications,
             <CheckCircle color="success" />
           )}
           {renderRequirementSection(
-            "Preferred Attributes",
+            'Preferred Attributes',
             activeJob.requirements.preferredAttributes,
             <Star color="secondary" />
           )}
@@ -255,61 +237,61 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
   return (
     <Box
       sx={{
-        display: "flex",
-        borderColor: "transparent",
+        display: 'flex',
+        borderColor: 'transparent',
         borderWidth: 2,
-        borderStyle: "solid",
-        transition: "all 0.3s ease",
-        flexDirection: "column",
+        borderStyle: 'solid',
+        transition: 'all 0.3s ease',
+        flexDirection: 'column',
         minWidth: 0,
         opacity: deleted ? 0.5 : 1.0,
         backgroundColor: deleted
           ? theme.palette.action.disabledBackground
           : theme.palette.background.paper,
-        pointerEvents: deleted ? "none" : "auto",
+        pointerEvents: deleted ? 'none' : 'auto',
         ...sx,
       }}
       {...rest}
     >
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           flexGrow: 1,
           p: 1,
           pb: 0,
-          height: "100%",
-          flexDirection: "column",
-          alignItems: "stretch",
-          position: "relative",
+          height: '100%',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+          position: 'relative',
         }}
       >
         <Box
           sx={{
-            display: "flex",
-            flexDirection: isMobile || variant === "small" ? "column" : "row",
-            "& > div > div > :first-of-type": {
-              fontWeight: "bold",
-              whiteSpace: "nowrap",
+            display: 'flex',
+            flexDirection: isMobile || variant === 'small' ? 'column' : 'row',
+            '& > div > div > :first-of-type': {
+              fontWeight: 'bold',
+              whiteSpace: 'nowrap',
             },
-            "& > div > div > :last-of-type": { mb: 0.75, mr: 1 },
+            '& > div > div > :last-of-type': { mb: 0.75, mr: 1 },
           }}
         >
           <Box
             sx={{
-              display: "flex",
-              flexDirection: isMobile ? "row" : "column",
+              display: 'flex',
+              flexDirection: isMobile ? 'row' : 'column',
               flexGrow: 1,
               gap: 1,
             }}
           >
             {activeJob.company && (
-              <Box sx={{ fontSize: "0.8rem" }}>
+              <Box sx={{ fontSize: '0.8rem' }}>
                 <Box>Company</Box>
-                <Box sx={{ whiteSpace: "nowrap" }}>{activeJob.company}</Box>
+                <Box sx={{ whiteSpace: 'nowrap' }}>{activeJob.company}</Box>
               </Box>
             )}
             {activeJob.title && (
-              <Box sx={{ fontSize: "0.8rem" }}>
+              <Box sx={{ fontSize: '0.8rem' }}>
                 <Box>Title</Box>
                 <Box>{activeJob.title}</Box>
               </Box>
@@ -317,30 +299,27 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
           </Box>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              width:
-                variant !== "small" && variant !== "minimal" ? "75%" : "100%",
+              display: 'flex',
+              flexDirection: 'column',
+              width: variant !== 'small' && variant !== 'minimal' ? '75%' : '100%',
             }}
           >
             {!isMobile && activeJob.summary && (
-              <Box sx={{ fontSize: "0.8rem" }}>
+              <Box sx={{ fontSize: '0.8rem' }}>
                 <Box>Summary</Box>
-                <Box
-                  sx={{ minHeight: variant === "small" ? "5rem" : "inherit" }}
-                >
+                <Box sx={{ minHeight: variant === 'small' ? '5rem' : 'inherit' }}>
                   <Typography
                     ref={descriptionRef}
                     variant="body1"
                     color="text.secondary"
                     sx={{
-                      display: "-webkit-box",
-                      WebkitLineClamp: isDescriptionExpanded ? "unset" : 3,
-                      WebkitBoxOrient: "vertical",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
+                      display: '-webkit-box',
+                      WebkitLineClamp: isDescriptionExpanded ? 'unset' : 3,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
                       lineHeight: 1.5,
-                      fontSize: "0.8rem !important",
+                      fontSize: '0.8rem !important',
                     }}
                   >
                     {activeJob.summary}
@@ -349,25 +328,25 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
                     <Link
                       component="button"
                       variant="body2"
-                      onClick={(e) => {
+                      onClick={e => {
                         e.preventDefault();
                         e.stopPropagation();
                         setIsDescriptionExpanded(!isDescriptionExpanded);
                       }}
                       sx={{
                         color: theme.palette.primary.main,
-                        textDecoration: "none",
-                        cursor: "pointer",
-                        fontSize: "0.725rem",
+                        textDecoration: 'none',
+                        cursor: 'pointer',
+                        fontSize: '0.725rem',
                         fontWeight: 500,
                         mt: 0.5,
-                        display: "block",
-                        "&:hover": {
-                          textDecoration: "underline",
+                        display: 'block',
+                        '&:hover': {
+                          textDecoration: 'underline',
                         },
                       }}
                     >
-                      [{isDescriptionExpanded ? "less" : "more"}]
+                      [{isDescriptionExpanded ? 'less' : 'more'}]
                     </Link>
                   )}
                 </Box>
@@ -376,13 +355,12 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
           </Box>
         </Box>
 
-        {variant !== "small" && variant !== "minimal" && (
+        {variant !== 'small' && variant !== 'minimal' && (
           <>
             {activeJob.details && (
               <Typography variant="body2" sx={{ mb: 1 }}>
-                <strong>Location:</strong> {activeJob.details.location.city},{" "}
-                {activeJob.details.location.state ||
-                  activeJob.details.location.country}
+                <strong>Location:</strong> {activeJob.details.location.city},{' '}
+                {activeJob.details.location.state || activeJob.details.location.country}
               </Typography>
             )}
             {activeJob.owner && (
@@ -403,14 +381,11 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
             <Typography variant="caption">Job ID: {job.id}</Typography>
           </>
         )}
-        {variant === "all" && (
-          <StyledMarkdown
-            sx={{ display: "flex" }}
-            content={activeJob.description}
-          />
+        {variant === 'all' && (
+          <StyledMarkdown sx={{ display: 'flex' }} content={activeJob.description} />
         )}
 
-        {variant !== "small" && variant !== "minimal" && (
+        {variant !== 'small' && variant !== 'minimal' && (
           <Box>
             <Divider />
             {renderJobRequirements()}
@@ -418,16 +393,16 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
         )}
 
         {isAdmin && (
-          <Box sx={{ display: "flex", flexDirection: "column", p: 1 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', p: 1 }}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: "row",
+                display: 'flex',
+                flexDirection: 'row',
                 pl: 1,
                 pr: 1,
                 gap: 1,
-                alignContent: "center",
-                height: "32px",
+                alignContent: 'center',
+                height: '32px',
               }}
             >
               {(job.updatedAt && job.updatedAt.toISOString()) !==
@@ -435,7 +410,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
                 <Tooltip title="Save Job">
                   <IconButton
                     size="small"
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
                       handleSave();
                     }}
@@ -447,7 +422,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
               <Tooltip title="Delete Job">
                 <IconButton
                   size="small"
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                     deleteJob(job.id);
                     setDeleted(true);
@@ -459,7 +434,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
               <Tooltip title="Reset Job">
                 <IconButton
                   size="small"
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                     handleReset();
                   }}
@@ -470,7 +445,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
               <Tooltip title="Reprocess Job">
                 <IconButton
                   size="small"
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                     handleRefresh();
                   }}
@@ -484,7 +459,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
                 <StatusBox>
                   {adminStatusType && <StatusIcon type={adminStatusType} />}
                   <Typography variant="body2" sx={{ ml: 1 }}>
-                    {adminStatus || "Processing..."}
+                    {adminStatus || 'Processing...'}
                   </Typography>
                 </StatusBox>
                 {adminStatus && <LinearProgress sx={{ mt: 1 }} />}
diff --git a/frontend/src/components/ui/JobPicker.tsx b/frontend/src/components/ui/JobPicker.tsx
index 1cde362..690082f 100644
--- a/frontend/src/components/ui/JobPicker.tsx
+++ b/frontend/src/components/ui/JobPicker.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
 
-import { BackstoryElementProps } from "components/BackstoryTab";
-import { JobInfo } from "components/ui/JobInfo";
-import { Job } from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState, useSelectedJob } from "hooks/GlobalContext";
-import { Paper } from "@mui/material";
+import { BackstoryElementProps } from 'components/BackstoryTab';
+import { JobInfo } from 'components/ui/JobInfo';
+import { Job } from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedJob } from 'hooks/GlobalContext';
+import { Paper } from '@mui/material';
 
 interface JobPickerProps extends BackstoryElementProps {
   onSelect?: (job: Job) => void;
@@ -30,15 +30,15 @@ const JobPicker = (props: JobPickerProps) => {
         const results = await apiClient.getJobs();
         const jobs: Job[] = results.data;
         jobs.sort((a, b) => {
-          let result = a.company?.localeCompare(b.company || "");
+          let result = a.company?.localeCompare(b.company || '');
           if (result === 0) {
-            result = a.title?.localeCompare(b.title || "");
+            result = a.title?.localeCompare(b.title || '');
           }
           return result || 0;
         });
         setJobs(jobs);
       } catch (err) {
-        setSnack("" + err);
+        setSnack('' + err);
       }
     };
 
@@ -46,36 +46,35 @@ const JobPicker = (props: JobPickerProps) => {
   }, [jobs, setSnack]);
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", mb: 1 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', mb: 1 }}>
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           gap: 1,
-          flexWrap: "wrap",
-          justifyContent: "center",
+          flexWrap: 'wrap',
+          justifyContent: 'center',
         }}
       >
         {jobs?.map((j, i) => (
           <Paper
             key={`${j.id}`}
             onClick={() => {
-              console.log("Selected job", j);
+              console.log('Selected job', j);
               onSelect && onSelect(j);
             }}
-            sx={{ cursor: "pointer" }}
+            sx={{ cursor: 'pointer' }}
           >
             <JobInfo
               variant="small"
               sx={{
-                maxWidth: "100%",
-                minWidth: "320px",
-                width: "320px",
-                cursor: "pointer",
-                backgroundColor:
-                  selectedJob?.id === j.id ? "#f0f0f0" : "inherit",
-                border: "2px solid transparent",
-                "&:hover": {
-                  border: "2px solid orange",
+                maxWidth: '100%',
+                minWidth: '320px',
+                width: '320px',
+                cursor: 'pointer',
+                backgroundColor: selectedJob?.id === j.id ? '#f0f0f0' : 'inherit',
+                border: '2px solid transparent',
+                '&:hover': {
+                  border: '2px solid orange',
                 },
               }}
               job={j}
diff --git a/frontend/src/components/ui/JobViewer.tsx b/frontend/src/components/ui/JobViewer.tsx
index 60747ef..77a9b7d 100644
--- a/frontend/src/components/ui/JobViewer.tsx
+++ b/frontend/src/components/ui/JobViewer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import {
   Box,
   Paper,
@@ -21,7 +21,7 @@ import {
   useMediaQuery,
   useTheme,
   Slide,
-} from "@mui/material";
+} from '@mui/material';
 import {
   KeyboardArrowUp as ArrowUpIcon,
   KeyboardArrowDown as ArrowDownIcon,
@@ -30,16 +30,16 @@ import {
   Schedule as ScheduleIcon,
   Close as CloseIcon,
   ArrowBack as ArrowBackIcon,
-} from "@mui/icons-material";
-import { TransitionProps } from "@mui/material/transitions";
-import { JobInfo } from "components/ui/JobInfo";
-import { Job } from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState, useSelectedJob } from "hooks/GlobalContext";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+} from '@mui/icons-material';
+import { TransitionProps } from '@mui/material/transitions';
+import { JobInfo } from 'components/ui/JobInfo';
+import { Job } from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedJob } from 'hooks/GlobalContext';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
 
-type SortField = "updatedAt" | "createdAt" | "company" | "title";
-type SortOrder = "asc" | "desc";
+type SortField = 'updatedAt' | 'createdAt' | 'company' | 'title';
+type SortOrder = 'asc' | 'desc';
 
 interface JobViewerProps {
   onSelect?: (job: Job) => void;
@@ -57,16 +57,16 @@ const Transition = React.forwardRef(function Transition(
 const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
   const navigate = useNavigate();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
 
   const { apiClient } = useAuth();
   const { selectedJob, setSelectedJob } = useSelectedJob();
   const { setSnack } = useAppState();
   const [jobs, setJobs] = useState<Job[]>([]);
   const [loading, setLoading] = useState(false);
-  const [sortField, setSortField] = useState<SortField>("updatedAt");
-  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [sortField, setSortField] = useState<SortField>('updatedAt');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
   const [mobileDialogOpen, setMobileDialogOpen] = useState(false);
   const { jobId } = useParams<{ jobId?: string }>();
 
@@ -79,7 +79,7 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
         setJobs(jobsData);
 
         if (jobId) {
-          const job = jobsData.find((j) => j.id === jobId);
+          const job = jobsData.find(j => j.id === jobId);
           if (job) {
             setSelectedJob(job);
             onSelect?.(job);
@@ -95,7 +95,7 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
           onSelect?.(firstJob);
         }
       } catch (err) {
-        setSnack("Failed to load jobs: " + err);
+        setSnack('Failed to load jobs: ' + err);
       } finally {
         setLoading(false);
       }
@@ -104,48 +104,44 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
     getJobs();
   }, [apiClient, setSnack]);
 
-  const sortJobs = (
-    jobsList: Job[],
-    field: SortField,
-    order: SortOrder
-  ): Job[] => {
+  const sortJobs = (jobsList: Job[], field: SortField, order: SortOrder): Job[] => {
     return [...jobsList].sort((a, b) => {
       let aValue: any;
       let bValue: any;
 
       switch (field) {
-        case "updatedAt":
+        case 'updatedAt':
           aValue = a.updatedAt?.getTime() || 0;
           bValue = b.updatedAt?.getTime() || 0;
           break;
-        case "createdAt":
+        case 'createdAt':
           aValue = a.createdAt?.getTime() || 0;
           bValue = b.createdAt?.getTime() || 0;
           break;
-        case "company":
-          aValue = a.company?.toLowerCase() || "";
-          bValue = b.company?.toLowerCase() || "";
+        case 'company':
+          aValue = a.company?.toLowerCase() || '';
+          bValue = b.company?.toLowerCase() || '';
           break;
-        case "title":
-          aValue = a.title?.toLowerCase() || "";
-          bValue = b.title?.toLowerCase() || "";
+        case 'title':
+          aValue = a.title?.toLowerCase() || '';
+          bValue = b.title?.toLowerCase() || '';
           break;
         default:
           return 0;
       }
 
-      if (aValue < bValue) return order === "asc" ? -1 : 1;
-      if (aValue > bValue) return order === "asc" ? 1 : -1;
+      if (aValue < bValue) return order === 'asc' ? -1 : 1;
+      if (aValue > bValue) return order === 'asc' ? 1 : -1;
       return 0;
     });
   };
 
   const handleSort = (field: SortField) => {
     if (sortField === field) {
-      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
     } else {
       setSortField(field);
-      setSortOrder("desc");
+      setSortOrder('desc');
     }
   };
 
@@ -163,18 +159,18 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
   const sortedJobs = sortJobs(jobs, sortField, sortOrder);
 
   const formatDate = (date: Date | undefined) => {
-    if (!date) return "N/A";
-    return new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      ...(isMobile ? {} : { year: "numeric" }),
-      ...(isSmall ? {} : { hour: "2-digit", minute: "2-digit" }),
+    if (!date) return 'N/A';
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      ...(isMobile ? {} : { year: 'numeric' }),
+      ...(isSmall ? {} : { hour: '2-digit', minute: '2-digit' }),
     }).format(date);
   };
 
   const getSortIcon = (field: SortField) => {
     if (sortField !== field) return null;
-    return sortOrder === "asc" ? (
+    return sortOrder === 'asc' ? (
       <ArrowUpIcon fontSize="small" />
     ) : (
       <ArrowDownIcon fontSize="small" />
@@ -185,42 +181,36 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
     <Paper
       elevation={isMobile ? 0 : 1}
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        boxShadow: "none",
-        backgroundColor: "transparent",
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        boxShadow: 'none',
+        backgroundColor: 'transparent',
       }}
     >
       <Box
         sx={{
           p: isMobile ? 0.5 : 1,
           borderBottom: 1,
-          borderColor: "divider",
-          backgroundColor: isMobile ? "background.paper" : "inherit",
+          borderColor: 'divider',
+          backgroundColor: isMobile ? 'background.paper' : 'inherit',
         }}
       >
         <Typography
-          variant={isSmall ? "subtitle2" : isMobile ? "subtitle1" : "h6"}
+          variant={isSmall ? 'subtitle2' : isMobile ? 'subtitle1' : 'h6'}
           gutterBottom
           sx={{ mb: isMobile ? 0.5 : 1, fontWeight: 600 }}
         >
           Jobs ({jobs.length})
         </Typography>
 
-        <FormControl
-          size="small"
-          sx={{ minWidth: isSmall ? 120 : isMobile ? 150 : 200 }}
-        >
+        <FormControl size="small" sx={{ minWidth: isSmall ? 120 : isMobile ? 150 : 200 }}>
           <InputLabel>Sort by</InputLabel>
           <Select
             value={`${sortField}-${sortOrder}`}
             label="Sort by"
-            onChange={(e) => {
-              const [field, order] = e.target.value.split("-") as [
-                SortField,
-                SortOrder
-              ];
+            onChange={e => {
+              const [field, order] = e.target.value.split('-') as [SortField, SortOrder];
               setSortField(field);
               setSortOrder(order);
             }}
@@ -240,9 +230,9 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
       <TableContainer
         sx={{
           flex: 1,
-          overflow: "auto",
-          "& .MuiTable-root": {
-            tableLayout: isMobile ? "fixed" : "auto",
+          overflow: 'auto',
+          '& .MuiTable-root': {
+            tableLayout: isMobile ? 'fixed' : 'auto',
           },
         }}
       >
@@ -251,59 +241,59 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
             <TableRow>
               <TableCell
                 sx={{
-                  cursor: "pointer",
-                  userSelect: "none",
+                  cursor: 'pointer',
+                  userSelect: 'none',
                   py: isMobile ? 0.25 : 0.5,
                   px: isMobile ? 0.5 : 1,
-                  width: isMobile ? "25%" : "auto",
-                  backgroundColor: "background.paper",
+                  width: isMobile ? '25%' : 'auto',
+                  backgroundColor: 'background.paper',
                 }}
-                onClick={() => handleSort("company")}
+                onClick={() => handleSort('company')}
               >
-                <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                  <BusinessIcon fontSize={isMobile ? "small" : "medium"} />
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <BusinessIcon fontSize={isMobile ? 'small' : 'medium'} />
                   <Typography variant="caption" fontWeight="bold" noWrap>
-                    {isSmall ? "Co." : isMobile ? "Company" : "Company"}
+                    {isSmall ? 'Co.' : isMobile ? 'Company' : 'Company'}
                   </Typography>
-                  {getSortIcon("company")}
+                  {getSortIcon('company')}
                 </Box>
               </TableCell>
               <TableCell
                 sx={{
-                  cursor: "pointer",
-                  userSelect: "none",
+                  cursor: 'pointer',
+                  userSelect: 'none',
                   py: isMobile ? 0.25 : 0.5,
                   px: isMobile ? 0.5 : 1,
-                  width: isMobile ? "45%" : "auto",
-                  backgroundColor: "background.paper",
+                  width: isMobile ? '45%' : 'auto',
+                  backgroundColor: 'background.paper',
                 }}
-                onClick={() => handleSort("title")}
+                onClick={() => handleSort('title')}
               >
-                <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                  <WorkIcon fontSize={isMobile ? "small" : "medium"} />
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <WorkIcon fontSize={isMobile ? 'small' : 'medium'} />
                   <Typography variant="caption" fontWeight="bold" noWrap>
                     Title
                   </Typography>
-                  {getSortIcon("title")}
+                  {getSortIcon('title')}
                 </Box>
               </TableCell>
               {!isMobile && (
                 <TableCell
                   sx={{
-                    cursor: "pointer",
-                    userSelect: "none",
+                    cursor: 'pointer',
+                    userSelect: 'none',
                     py: 0.5,
                     px: 1,
-                    backgroundColor: "background.paper",
+                    backgroundColor: 'background.paper',
                   }}
-                  onClick={() => handleSort("updatedAt")}
+                  onClick={() => handleSort('updatedAt')}
                 >
-                  <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <ScheduleIcon fontSize="medium" />
                     <Typography variant="caption" fontWeight="bold">
                       Updated
                     </Typography>
-                    {getSortIcon("updatedAt")}
+                    {getSortIcon('updatedAt')}
                   </Box>
                 </TableCell>
               )}
@@ -311,31 +301,31 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
                 sx={{
                   py: isMobile ? 0.25 : 0.5,
                   px: isMobile ? 0.5 : 1,
-                  width: isMobile ? "30%" : "auto",
-                  backgroundColor: "background.paper",
+                  width: isMobile ? '30%' : 'auto',
+                  backgroundColor: 'background.paper',
                 }}
               >
                 <Typography variant="caption" fontWeight="bold" noWrap>
-                  {isMobile ? "Status" : "Status"}
+                  {isMobile ? 'Status' : 'Status'}
                 </Typography>
               </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
-            {sortedJobs.map((job) => (
+            {sortedJobs.map(job => (
               <TableRow
                 key={job.id}
                 hover
                 selected={selectedJob?.id === job.id}
                 onClick={() => handleJobSelect(job)}
                 sx={{
-                  cursor: "pointer",
-                  height: isMobile ? 48 : "auto",
-                  "&.Mui-selected": {
-                    backgroundColor: "action.selected",
+                  cursor: 'pointer',
+                  height: isMobile ? 48 : 'auto',
+                  '&.Mui-selected': {
+                    backgroundColor: 'action.selected',
                   },
-                  "&:hover": {
-                    backgroundColor: "action.hover",
+                  '&:hover': {
+                    backgroundColor: 'action.hover',
                   },
                 }}
               >
@@ -343,27 +333,26 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
                   sx={{
                     py: isMobile ? 0.25 : 0.5,
                     px: isMobile ? 0.5 : 1,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                   }}
                 >
                   <Typography
-                    variant={isMobile ? "caption" : "body2"}
+                    variant={isMobile ? 'caption' : 'body2'}
                     fontWeight="medium"
                     noWrap
-                    sx={{ fontSize: isMobile ? "0.75rem" : "0.875rem" }}
+                    sx={{ fontSize: isMobile ? '0.75rem' : '0.875rem' }}
                   >
-                    {job.company || "N/A"}
+                    {job.company || 'N/A'}
                   </Typography>
                   {!isMobile && job.details?.location && (
                     <Typography
                       variant="caption"
                       color="text.secondary"
                       noWrap
-                      sx={{ display: "block", fontSize: "0.7rem" }}
+                      sx={{ display: 'block', fontSize: '0.7rem' }}
                     >
-                      {job.details.location.city},{" "}
-                      {job.details.location.state ||
-                        job.details.location.country}
+                      {job.details.location.city},{' '}
+                      {job.details.location.state || job.details.location.country}
                     </Typography>
                   )}
                 </TableCell>
@@ -371,16 +360,16 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
                   sx={{
                     py: isMobile ? 0.25 : 0.5,
                     px: isMobile ? 0.5 : 1,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                   }}
                 >
                   <Typography
-                    variant={isMobile ? "caption" : "body2"}
+                    variant={isMobile ? 'caption' : 'body2'}
                     fontWeight="medium"
                     noWrap
-                    sx={{ fontSize: isMobile ? "0.75rem" : "0.875rem" }}
+                    sx={{ fontSize: isMobile ? '0.75rem' : '0.875rem' }}
                   >
-                    {job.title || "N/A"}
+                    {job.title || 'N/A'}
                   </Typography>
                   {!isMobile && job.details?.employmentType && (
                     <Chip
@@ -389,23 +378,23 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
                       variant="outlined"
                       sx={{
                         mt: 0.25,
-                        fontSize: "0.6rem",
+                        fontSize: '0.6rem',
                         height: 16,
-                        "& .MuiChip-label": { px: 0.5 },
+                        '& .MuiChip-label': { px: 0.5 },
                       }}
                     />
                   )}
                 </TableCell>
                 {!isMobile && (
                   <TableCell sx={{ py: 0.5, px: 1 }}>
-                    <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+                    <Typography variant="body2" sx={{ fontSize: '0.8rem' }}>
                       {formatDate(job.updatedAt)}
                     </Typography>
                     {job.createdAt && (
                       <Typography
                         variant="caption"
                         color="text.secondary"
-                        sx={{ display: "block", fontSize: "0.7rem" }}
+                        sx={{ display: 'block', fontSize: '0.7rem' }}
                       >
                         Created: {formatDate(job.createdAt)}
                       </Typography>
@@ -416,18 +405,18 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
                   sx={{
                     py: isMobile ? 0.25 : 0.5,
                     px: isMobile ? 0.5 : 1,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                   }}
                 >
                   <Chip
-                    label={job.details?.isActive ? "Active" : "Inactive"}
-                    color={job.details?.isActive ? "success" : "default"}
+                    label={job.details?.isActive ? 'Active' : 'Inactive'}
+                    color={job.details?.isActive ? 'success' : 'default'}
                     size="small"
                     variant="outlined"
                     sx={{
-                      fontSize: isMobile ? "0.65rem" : "0.7rem",
+                      fontSize: isMobile ? '0.65rem' : '0.7rem',
                       height: isMobile ? 20 : 22,
-                      "& .MuiChip-label": {
+                      '& .MuiChip-label': {
                         px: isMobile ? 0.5 : 0.75,
                         py: 0,
                       },
@@ -446,9 +435,9 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
     <Box
       sx={{
         flex: 1,
-        overflow: "auto",
+        overflow: 'auto',
         p: inDialog ? 1.5 : 0.75,
-        height: inDialog ? "100%" : "auto",
+        height: inDialog ? '100%' : 'auto',
       }}
     >
       {selectedJob ? (
@@ -456,23 +445,23 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
           job={selectedJob}
           variant="all"
           sx={{
-            border: "none",
-            boxShadow: "none",
-            backgroundColor: "transparent",
-            "& .MuiTypography-h6": {
-              fontSize: inDialog ? "1.25rem" : "1.1rem",
+            border: 'none',
+            boxShadow: 'none',
+            backgroundColor: 'transparent',
+            '& .MuiTypography-h6': {
+              fontSize: inDialog ? '1.25rem' : '1.1rem',
             },
           }}
         />
       ) : (
         <Box
           sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100%",
-            color: "text.secondary",
-            textAlign: "center",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            color: 'text.secondary',
+            textAlign: 'center',
             p: 2,
           }}
         >
@@ -485,9 +474,9 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
   return (
     <Box
       sx={{
-        height: "100%",
+        height: '100%',
         p: 0.5,
-        backgroundColor: "background.default",
+        backgroundColor: 'background.default',
       }}
     >
       <JobList />
@@ -499,7 +488,7 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
         TransitionComponent={Transition}
         TransitionProps={{ timeout: 300 }}
       >
-        <AppBar sx={{ position: "relative", elevation: 1 }}>
+        <AppBar sx={{ position: 'relative', elevation: 1 }}>
           <Toolbar variant="dense" sx={{ minHeight: 48 }}>
             <IconButton
               edge="start"
@@ -511,18 +500,13 @@ const JobViewer: React.FC<JobViewerProps> = ({ onSelect }) => {
               <ArrowBackIcon />
             </IconButton>
             <Box sx={{ ml: 1, flex: 1, minWidth: 0 }}>
-              <Typography
-                variant="h6"
-                component="div"
-                noWrap
-                sx={{ fontSize: "1rem" }}
-              >
+              <Typography variant="h6" component="div" noWrap sx={{ fontSize: '1rem' }}>
                 {selectedJob?.title}
               </Typography>
               <Typography
                 variant="caption"
                 component="div"
-                sx={{ color: "rgba(255, 255, 255, 0.7)" }}
+                sx={{ color: 'rgba(255, 255, 255, 0.7)' }}
                 noWrap
               >
                 {selectedJob?.company}
diff --git a/frontend/src/components/ui/LoginRequired.tsx b/frontend/src/components/ui/LoginRequired.tsx
index 17e9034..e6421cb 100644
--- a/frontend/src/components/ui/LoginRequired.tsx
+++ b/frontend/src/components/ui/LoginRequired.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import { Button, Typography, Paper, Container } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import React from 'react';
+import { Button, Typography, Paper, Container } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
 interface LoginRequiredProps {
   asset: string;
@@ -11,14 +11,14 @@ const LoginRequired = (props: LoginRequiredProps) => {
 
   return (
     <Container maxWidth="md">
-      <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: "center" }}>
+      <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
         <Typography variant="h5" gutterBottom>
           Please log in to access {asset}
         </Typography>
         <Button
           variant="contained"
           onClick={() => {
-            navigate("/login");
+            navigate('/login');
           }}
           color="primary"
           sx={{ mt: 2 }}
diff --git a/frontend/src/components/ui/LoginRestricted.tsx b/frontend/src/components/ui/LoginRestricted.tsx
index 58a7785..90eb5c6 100644
--- a/frontend/src/components/ui/LoginRestricted.tsx
+++ b/frontend/src/components/ui/LoginRestricted.tsx
@@ -1,5 +1,5 @@
-import Box from "@mui/material/Box";
-import "./LoginRestricted.css";
+import Box from '@mui/material/Box';
+import './LoginRestricted.css';
 
 interface LoginRestrictedProps {
   children?: React.ReactNode;
@@ -9,9 +9,7 @@ const LoginRestricted = (props: LoginRestrictedProps) => {
   const { children } = props;
   return (
     <Box className="LoginRestricted">
-      <Box className="LoginRestricted-label">
-        You must login to access this feature
-      </Box>
+      <Box className="LoginRestricted-label">You must login to access this feature</Box>
       {children}
     </Box>
   );
diff --git a/frontend/src/components/ui/ResumeInfo.tsx b/frontend/src/components/ui/ResumeInfo.tsx
index e05c1ac..faa5cf6 100644
--- a/frontend/src/components/ui/ResumeInfo.tsx
+++ b/frontend/src/components/ui/ResumeInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Box,
   Link,
@@ -26,8 +26,8 @@ import {
   DialogActions,
   Tabs,
   Tab,
-} from "@mui/material";
-import PrintIcon from "@mui/icons-material/Print";
+} from '@mui/material';
+import PrintIcon from '@mui/icons-material/Print';
 import {
   Delete as DeleteIcon,
   Restore as RestoreIcon,
@@ -39,35 +39,34 @@ import {
   Schedule as ScheduleIcon,
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon,
-} from "@mui/icons-material";
-import PreviewIcon from "@mui/icons-material/Preview";
-import EditDocumentIcon from "@mui/icons-material/EditDocument";
+} from '@mui/icons-material';
+import PreviewIcon from '@mui/icons-material/Preview';
+import EditDocumentIcon from '@mui/icons-material/EditDocument';
 
-import { useReactToPrint } from "react-to-print";
+import { useReactToPrint } from 'react-to-print';
 
-import { useAuth } from "hooks/AuthContext";
-import { useAppState } from "hooks/GlobalContext";
-import { StyledMarkdown } from "components/StyledMarkdown";
-import { Resume } from "types/types";
-import { BackstoryTextField } from "components/BackstoryTextField";
-import { JobInfo } from "./JobInfo";
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState } from 'hooks/GlobalContext';
+import { StyledMarkdown } from 'components/StyledMarkdown';
+import { Resume } from 'types/types';
+import { BackstoryTextField } from 'components/BackstoryTextField';
+import { JobInfo } from './JobInfo';
 
 interface ResumeInfoProps {
   resume: Resume;
   sx?: SxProps;
   action?: string;
   elevation?: number;
-  variant?: "minimal" | "small" | "normal" | "all" | null;
+  variant?: 'minimal' | 'small' | 'normal' | 'all' | null;
 }
 
 const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   const { setSnack } = useAppState();
   const { resume } = props;
   const { user, apiClient } = useAuth();
-  const { sx, action = "", elevation = 1, variant = "normal" } = props;
+  const { sx, action = '', elevation = 1, variant = 'normal' } = props;
   const theme = useTheme();
-  const isMobile =
-    useMediaQuery(theme.breakpoints.down("md")) || variant === "minimal";
+  const isMobile = useMediaQuery(theme.breakpoints.down('md')) || variant === 'minimal';
   const isAdmin = user?.isAdmin;
   const [activeResume, setActiveResume] = useState<Resume>({ ...resume });
   const [isContentExpanded, setIsContentExpanded] = useState(false);
@@ -75,14 +74,14 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   const [deleted, setDeleted] = useState<boolean>(false);
   const [editDialogOpen, setEditDialogOpen] = useState<boolean>(false);
   const [printDialogOpen, setPrintDialogOpen] = useState<boolean>(false);
-  const [editContent, setEditContent] = useState<string>("");
+  const [editContent, setEditContent] = useState<string>('');
   const [saving, setSaving] = useState<boolean>(false);
   const contentRef = useRef<HTMLDivElement>(null);
-  const [tabValue, setTabValue] = useState("markdown");
+  const [tabValue, setTabValue] = useState('markdown');
   const printContentRef = useRef<HTMLDivElement>(null);
   const reactToPrintFn = useReactToPrint({
     contentRef: printContentRef,
-    pageStyle: "@page { margin: 10px; }",
+    pageStyle: '@page { margin: 10px; }',
   });
 
   useEffect(() => {
@@ -104,9 +103,9 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
       try {
         await apiClient.deleteResume(id);
         setDeleted(true);
-        setSnack("Resume deleted successfully.");
+        setSnack('Resume deleted successfully.');
       } catch (error) {
-        setSnack("Failed to delete resume.");
+        setSnack('Failed to delete resume.');
       }
     }
   };
@@ -118,19 +117,16 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   const handleSave = async () => {
     setSaving(true);
     try {
-      const result = await apiClient.updateResume(
-        activeResume.id || "",
-        editContent
-      );
+      const result = await apiClient.updateResume(activeResume.id || '', editContent);
       const updatedResume = {
         ...activeResume,
         resume: editContent,
         updatedAt: new Date(),
       };
       setActiveResume(updatedResume);
-      setSnack("Resume updated successfully.");
+      setSnack('Resume updated successfully.');
     } catch (error) {
-      setSnack("Failed to update resume.");
+      setSnack('Failed to update resume.');
     } finally {
       setSaving(false);
     }
@@ -146,18 +142,18 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   }
 
   const formatDate = (date: Date | undefined) => {
-    if (!date) return "N/A";
-    return new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
+    if (!date) return 'N/A';
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
     }).format(date);
   };
 
   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
-    if (newValue === "print") {
+    if (newValue === 'print') {
       reactToPrintFn();
       return;
     }
@@ -167,38 +163,38 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   return (
     <Box
       sx={{
-        display: "flex",
-        borderColor: "transparent",
+        display: 'flex',
+        borderColor: 'transparent',
         borderWidth: 2,
-        borderStyle: "solid",
-        transition: "all 0.3s ease",
-        flexDirection: "column",
+        borderStyle: 'solid',
+        transition: 'all 0.3s ease',
+        flexDirection: 'column',
         minWidth: 0,
         opacity: deleted ? 0.5 : 1.0,
         backgroundColor: deleted
           ? theme.palette.action.disabledBackground
           : theme.palette.background.paper,
-        pointerEvents: deleted ? "none" : "auto",
+        pointerEvents: deleted ? 'none' : 'auto',
         ...sx,
       }}
     >
       <Box
         sx={{
-          display: "flex",
+          display: 'flex',
           flexGrow: 1,
           p: 1,
           pb: 0,
-          height: "100%",
-          flexDirection: "column",
-          alignItems: "stretch",
-          position: "relative",
+          height: '100%',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+          position: 'relative',
         }}
       >
         {/* Header Information */}
         <Box
           sx={{
-            display: "flex",
-            flexDirection: isMobile ? "column" : "row",
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
             gap: 2,
             mb: 2,
           }}
@@ -207,7 +203,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
             <Grid size={{ xs: 12, md: 6 }}>
               <Stack spacing={1}>
                 {activeResume.candidate && (
-                  <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <PersonIcon color="primary" fontSize="small" />
                     <Typography variant="subtitle2" fontWeight="bold">
                       Candidate
@@ -222,8 +218,8 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
                   <>
                     <Box
                       sx={{
-                        display: "flex",
-                        alignItems: "center",
+                        display: 'flex',
+                        alignItems: 'center',
                         gap: 1,
                         mt: 1,
                       }}
@@ -243,7 +239,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
 
             <Grid size={{ xs: 12, md: 6 }}>
               <Stack spacing={1}>
-                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <ScheduleIcon color="primary" fontSize="small" />
                   <Typography variant="subtitle2" fontWeight="bold">
                     Timeline
@@ -267,10 +263,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
 
         {/* Resume Content */}
         {activeResume.resume && (
-          <Card
-            elevation={0}
-            sx={{ m: 0, p: 0, background: "transparent !important" }}
-          >
+          <Card elevation={0} sx={{ m: 0, p: 0, background: 'transparent !important' }}>
             <CardHeader
               title="Resume Content"
               avatar={<DescriptionIcon color="success" />}
@@ -286,27 +279,27 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
               }
             />
             <CardContent sx={{ p: 0 }}>
-              <Box sx={{ position: "relative" }}>
+              <Box sx={{ position: 'relative' }}>
                 <Typography
                   ref={contentRef}
                   variant="body2"
                   component="div"
                   sx={{
-                    display: "-webkit-box",
+                    display: '-webkit-box',
                     WebkitLineClamp: isContentExpanded
-                      ? "unset"
-                      : variant === "small"
+                      ? 'unset'
+                      : variant === 'small'
                       ? 5
-                      : variant === "minimal"
+                      : variant === 'minimal'
                       ? 3
                       : 10,
-                    WebkitBoxOrient: "vertical",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
                     lineHeight: 1.6,
-                    fontSize: "0.875rem !important",
-                    whiteSpace: "pre-wrap",
-                    fontFamily: "monospace",
+                    fontSize: '0.875rem !important',
+                    whiteSpace: 'pre-wrap',
+                    fontFamily: 'monospace',
                     backgroundColor: theme.palette.action.hover,
                     p: 2,
                     borderRadius: 1,
@@ -316,24 +309,16 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
                   {activeResume.resume}
                 </Typography>
 
-                {shouldShowMoreButton && variant !== "all" && (
-                  <Box
-                    sx={{ display: "flex", justifyContent: "center", mt: 1 }}
-                  >
+                {shouldShowMoreButton && variant !== 'all' && (
+                  <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
                     <Button
                       variant="text"
                       size="small"
                       onClick={() => setIsContentExpanded(!isContentExpanded)}
-                      startIcon={
-                        isContentExpanded ? (
-                          <VisibilityOffIcon />
-                        ) : (
-                          <VisibilityIcon />
-                        )
-                      }
-                      sx={{ fontSize: "0.75rem" }}
+                      startIcon={isContentExpanded ? <VisibilityOffIcon /> : <VisibilityIcon />}
+                      sx={{ fontSize: '0.75rem' }}
                     >
-                      {isContentExpanded ? "Show Less" : "Show More"}
+                      {isContentExpanded ? 'Show Less' : 'Show More'}
                     </Button>
                   </Box>
                 )}
@@ -342,7 +327,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
           </Card>
         )}
 
-        {variant === "all" && activeResume.resume && (
+        {variant === 'all' && activeResume.resume && (
           <Box sx={{ mt: 2 }}>
             <StyledMarkdown content={activeResume.resume} />
           </Box>
@@ -351,22 +336,22 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
 
       {/* Admin Controls */}
       {isAdmin && (
-        <Box sx={{ display: "flex", flexDirection: "column", p: 1 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', p: 1 }}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "row",
+              display: 'flex',
+              flexDirection: 'row',
               pl: 1,
               pr: 1,
               gap: 1,
-              alignContent: "center",
-              height: "32px",
+              alignContent: 'center',
+              height: '32px',
             }}
           >
             <Tooltip title="Edit Resume">
               <IconButton
                 size="small"
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                   handleEditOpen();
                 }}
@@ -378,7 +363,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
             <Tooltip title="Delete Resume">
               <IconButton
                 size="small"
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                   deleteResume(activeResume.id);
                 }}
@@ -390,7 +375,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
             <Tooltip title="Reset Resume">
               <IconButton
                 size="small"
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                   handleReset();
                 }}
@@ -423,13 +408,13 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
           content={activeResume.resume}
           sx={{
             p: 2,
-            position: "relative",
-            maxHeight: "100%",
-            width: "100%",
-            display: "flex",
+            position: 'relative',
+            maxHeight: '100%',
+            width: '100%',
+            display: 'flex',
             flexGrow: 1,
             flex: 1 /* Take remaining space in some-container */,
-            overflowY: "auto" /* Scroll if content overflows */,
+            overflowY: 'auto' /* Scroll if content overflows */,
           }}
         />
       </Dialog>
@@ -446,35 +431,28 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
         <DialogTitle>
           Edit Resume Content
           <Typography variant="caption" display="block" color="text.secondary">
-            Resume for{" "}
-            {activeResume.candidate?.fullName || activeResume.candidateId},{" "}
-            {activeResume.job?.title || "No Job Title Assigned"},{" "}
-            {activeResume.job?.company || "No Company Assigned"}
+            Resume for {activeResume.candidate?.fullName || activeResume.candidateId},{' '}
+            {activeResume.job?.title || 'No Job Title Assigned'},{' '}
+            {activeResume.job?.company || 'No Company Assigned'}
           </Typography>
           <Typography variant="caption" display="block" color="text.secondary">
             Resume ID: # {activeResume.id}
           </Typography>
           <Typography variant="caption" display="block" color="text.secondary">
-            Last saved:{" "}
-            {activeResume.updatedAt
-              ? new Date(activeResume.updatedAt).toLocaleString()
-              : "N/A"}
+            Last saved:{' '}
+            {activeResume.updatedAt ? new Date(activeResume.updatedAt).toLocaleString() : 'N/A'}
           </Typography>
         </DialogTitle>
         <DialogContent
           sx={{
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
           }}
         >
           <Tabs value={tabValue} onChange={handleTabChange} centered>
-            <Tab
-              value="markdown"
-              icon={<EditDocumentIcon />}
-              label="Markdown"
-            />
+            <Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" />
             <Tab value="preview" icon={<PreviewIcon />} label="Preview" />
             <Tab value="job" icon={<WorkIcon />} label="Job" />
             <Tab value="print" icon={<PrintIcon />} label="Print" />
@@ -482,68 +460,68 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
           <Box
             ref={printContentRef}
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              height: "100%" /* Restrict to main-container's height */,
-              width: "100%",
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%' /* Restrict to main-container's height */,
+              width: '100%',
               minHeight: 0 /* Prevent flex overflow */,
               //maxHeight: "min-content",
-              "& > *:not(.Scrollable)": {
+              '& > *:not(.Scrollable)': {
                 flexShrink: 0 /* Prevent shrinking */,
               },
-              position: "relative",
+              position: 'relative',
             }}
           >
-            {tabValue === "markdown" && (
+            {tabValue === 'markdown' && (
               <BackstoryTextField
                 value={editContent}
-                onChange={(value) => setEditContent(value)}
+                onChange={value => setEditContent(value)}
                 style={{
-                  position: "relative",
+                  position: 'relative',
                   //   maxHeight: "100%",
-                  height: "100%",
-                  width: "100%",
-                  display: "flex",
-                  minHeight: "100%",
+                  height: '100%',
+                  width: '100%',
+                  display: 'flex',
+                  minHeight: '100%',
 
                   flexGrow: 1,
                   flex: 1 /* Take remaining space in some-container */,
-                  overflowY: "auto" /* Scroll if content overflows */,
+                  overflowY: 'auto' /* Scroll if content overflows */,
                 }}
                 placeholder="Enter resume content..."
               />
             )}
-            {tabValue === "preview" && (
+            {tabValue === 'preview' && (
               <>
                 <StyledMarkdown
                   sx={{
                     p: 2,
-                    position: "relative",
-                    maxHeight: "100%",
-                    width: "100%",
-                    display: "flex",
+                    position: 'relative',
+                    maxHeight: '100%',
+                    width: '100%',
+                    display: 'flex',
                     flexGrow: 1,
                     flex: 1 /* Take remaining space in some-container */,
-                    overflowY: "auto" /* Scroll if content overflows */,
+                    overflowY: 'auto' /* Scroll if content overflows */,
                   }}
                   content={editContent}
                 />
                 <Box sx={{ pb: 2 }}></Box>
               </>
             )}
-            {tabValue === "job" && activeResume.job && (
+            {tabValue === 'job' && activeResume.job && (
               <JobInfo
                 variant="all"
                 job={activeResume.job}
                 sx={{
                   p: 2,
-                  position: "relative",
-                  maxHeight: "100%",
-                  width: "100%",
-                  display: "flex",
+                  position: 'relative',
+                  maxHeight: '100%',
+                  width: '100%',
+                  display: 'flex',
                   flexGrow: 1,
                   flex: 1 /* Take remaining space in some-container */,
-                  overflowY: "auto" /* Scroll if content overflows */,
+                  overflowY: 'auto' /* Scroll if content overflows */,
                 }}
               />
             )}
@@ -557,7 +535,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
             disabled={saving}
             startIcon={<SaveIcon />}
           >
-            {saving ? "Saving..." : "Save"}
+            {saving ? 'Saving...' : 'Save'}
           </Button>
         </DialogActions>
       </Dialog>
diff --git a/frontend/src/components/ui/ResumeViewer.tsx b/frontend/src/components/ui/ResumeViewer.tsx
index 408453a..53fc656 100644
--- a/frontend/src/components/ui/ResumeViewer.tsx
+++ b/frontend/src/components/ui/ResumeViewer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import {
   Box,
   Paper,
@@ -23,7 +23,7 @@ import {
   Slide,
   TextField,
   InputAdornment,
-} from "@mui/material";
+} from '@mui/material';
 import {
   KeyboardArrowUp as ArrowUpIcon,
   KeyboardArrowDown as ArrowDownIcon,
@@ -35,16 +35,16 @@ import {
   ArrowBack as ArrowBackIcon,
   Search as SearchIcon,
   Clear as ClearIcon,
-} from "@mui/icons-material";
-import { TransitionProps } from "@mui/material/transitions";
-import { ResumeInfo } from "components/ui/ResumeInfo";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState, useSelectedResume } from "hooks/GlobalContext"; // Assuming similar context exists
-import { Navigate, useNavigate, useParams } from "react-router-dom";
-import { Resume } from "types/types";
+} from '@mui/icons-material';
+import { TransitionProps } from '@mui/material/transitions';
+import { ResumeInfo } from 'components/ui/ResumeInfo';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedResume } from 'hooks/GlobalContext'; // Assuming similar context exists
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { Resume } from 'types/types';
 
-type SortField = "updatedAt" | "createdAt" | "candidateId" | "jobId";
-type SortOrder = "asc" | "desc";
+type SortField = 'updatedAt' | 'createdAt' | 'candidateId' | 'jobId';
+type SortOrder = 'asc' | 'desc';
 
 interface ResumeViewerProps {
   onSelect?: (resume: Resume) => void;
@@ -61,25 +61,21 @@ const Transition = React.forwardRef(function Transition(
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
-const ResumeViewer: React.FC<ResumeViewerProps> = ({
-  onSelect,
-  candidateId,
-  jobId,
-}) => {
+const ResumeViewer: React.FC<ResumeViewerProps> = ({ onSelect, candidateId, jobId }) => {
   const navigate = useNavigate();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
 
   const { apiClient } = useAuth();
   const { selectedResume, setSelectedResume } = useSelectedResume(); // Assuming similar context
   const { setSnack } = useAppState();
   const [resumes, setResumes] = useState<Resume[]>([]);
   const [loading, setLoading] = useState(false);
-  const [sortField, setSortField] = useState<SortField>("updatedAt");
-  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [sortField, setSortField] = useState<SortField>('updatedAt');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
   const [mobileDialogOpen, setMobileDialogOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useState('');
   const [filteredResumes, setFilteredResumes] = useState<Resume[]>([]);
   const { resumeId } = useParams<{ resumeId?: string }>();
 
@@ -102,7 +98,7 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
         setFilteredResumes(resumesData);
 
         if (resumeId) {
-          const resume = resumesData.find((r) => r.id === resumeId);
+          const resume = resumesData.find(r => r.id === resumeId);
           if (resume) {
             setSelectedResume(resume);
             onSelect?.(resume);
@@ -117,8 +113,8 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
           onSelect?.(firstResume);
         }
       } catch (err) {
-        console.error("Failed to load resumes:", err);
-        setSnack("Failed to load resumes: " + err, "error");
+        console.error('Failed to load resumes:', err);
+        setSnack('Failed to load resumes: ' + err, 'error');
       } finally {
         setLoading(false);
       }
@@ -133,16 +129,10 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
       setFilteredResumes(resumes);
     } else {
       const filtered = resumes.filter(
-        (resume) =>
-          resume.candidate?.fullName
-            ?.toLowerCase()
-            .includes(searchQuery.toLowerCase()) ||
-          resume.job?.title
-            ?.toLowerCase()
-            .includes(searchQuery.toLowerCase()) ||
-          resume.job?.company
-            ?.toLowerCase()
-            .includes(searchQuery.toLowerCase()) ||
+        resume =>
+          resume.candidate?.fullName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          resume.job?.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          resume.job?.company?.toLowerCase().includes(searchQuery.toLowerCase()) ||
           resume.resume?.toLowerCase().includes(searchQuery.toLowerCase()) ||
           resume.id?.toLowerCase().includes(searchQuery.toLowerCase())
       );
@@ -150,54 +140,44 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
     }
   }, [searchQuery, resumes]);
 
-  const sortResumes = (
-    resumesList: Resume[],
-    field: SortField,
-    order: SortOrder
-  ): Resume[] => {
+  const sortResumes = (resumesList: Resume[], field: SortField, order: SortOrder): Resume[] => {
     return [...resumesList].sort((a, b) => {
       let aValue: any;
       let bValue: any;
 
       switch (field) {
-        case "updatedAt":
+        case 'updatedAt':
           aValue = a.updatedAt?.getTime() || 0;
           bValue = b.updatedAt?.getTime() || 0;
           break;
-        case "createdAt":
+        case 'createdAt':
           aValue = a.createdAt?.getTime() || 0;
           bValue = b.createdAt?.getTime() || 0;
           break;
-        case "candidateId":
-          aValue =
-            a.candidate?.fullName?.toLowerCase() ||
-            a.candidateId?.toLowerCase() ||
-            "";
-          bValue =
-            b.candidate?.fullName?.toLowerCase() ||
-            b.candidateId?.toLowerCase() ||
-            "";
+        case 'candidateId':
+          aValue = a.candidate?.fullName?.toLowerCase() || a.candidateId?.toLowerCase() || '';
+          bValue = b.candidate?.fullName?.toLowerCase() || b.candidateId?.toLowerCase() || '';
           break;
-        case "jobId":
-          aValue = a.job?.title?.toLowerCase() || a.jobId?.toLowerCase() || "";
-          bValue = b.job?.title?.toLowerCase() || b.jobId?.toLowerCase() || "";
+        case 'jobId':
+          aValue = a.job?.title?.toLowerCase() || a.jobId?.toLowerCase() || '';
+          bValue = b.job?.title?.toLowerCase() || b.jobId?.toLowerCase() || '';
           break;
         default:
           return 0;
       }
 
-      if (aValue < bValue) return order === "asc" ? -1 : 1;
-      if (aValue > bValue) return order === "asc" ? 1 : -1;
+      if (aValue < bValue) return order === 'asc' ? -1 : 1;
+      if (aValue > bValue) return order === 'asc' ? 1 : -1;
       return 0;
     });
   };
 
   const handleSort = (field: SortField) => {
     if (sortField === field) {
-      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
     } else {
       setSortField(field);
-      setSortOrder("desc");
+      setSortOrder('desc');
     }
   };
 
@@ -216,24 +196,24 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
   };
 
   const handleSearchClear = () => {
-    setSearchQuery("");
+    setSearchQuery('');
   };
 
   const sortedResumes = sortResumes(filteredResumes, sortField, sortOrder);
 
   const formatDate = (date: Date | undefined) => {
-    if (!date) return "N/A";
-    return new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      ...(isMobile ? {} : { year: "numeric" }),
-      ...(isSmall ? {} : { hour: "2-digit", minute: "2-digit" }),
+    if (!date) return 'N/A';
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      ...(isMobile ? {} : { year: 'numeric' }),
+      ...(isSmall ? {} : { hour: '2-digit', minute: '2-digit' }),
     }).format(date);
   };
 
   const getSortIcon = (field: SortField) => {
     if (sortField !== field) return null;
-    return sortOrder === "asc" ? (
+    return sortOrder === 'asc' ? (
       <ArrowUpIcon fontSize="small" />
     ) : (
       <ArrowDownIcon fontSize="small" />
@@ -250,27 +230,27 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
     <Paper
       elevation={isMobile ? 0 : 1}
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         ...(isMobile
           ? {
-              width: "100%",
-              boxShadow: "none",
-              backgroundColor: "transparent",
+              width: '100%',
+              boxShadow: 'none',
+              backgroundColor: 'transparent',
             }
-          : { width: "50%" }),
+          : { width: '50%' }),
       }}
     >
       <Box
         sx={{
           p: isMobile ? 0.5 : 1,
           borderBottom: 1,
-          borderColor: "divider",
-          backgroundColor: isMobile ? "background.paper" : "inherit",
+          borderColor: 'divider',
+          backgroundColor: isMobile ? 'background.paper' : 'inherit',
         }}
       >
         <Typography
-          variant={isSmall ? "subtitle2" : isMobile ? "subtitle1" : "h6"}
+          variant={isSmall ? 'subtitle2' : isMobile ? 'subtitle1' : 'h6'}
           gutterBottom
           sx={{ mb: isMobile ? 0.5 : 1, fontWeight: 600 }}
         >
@@ -279,17 +259,17 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
 
         <Box
           sx={{
-            display: "flex",
+            display: 'flex',
             gap: 1,
-            flexDirection: isSmall ? "column" : "row",
-            alignItems: isSmall ? "stretch" : "center",
+            flexDirection: isSmall ? 'column' : 'row',
+            alignItems: isSmall ? 'stretch' : 'center',
           }}
         >
           <TextField
             size="small"
             placeholder="Search resumes..."
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={e => setSearchQuery(e.target.value)}
             InputProps={{
               startAdornment: (
                 <InputAdornment position="start">
@@ -304,19 +284,16 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                 </InputAdornment>
               ),
             }}
-            sx={{ flexGrow: 1, minWidth: isSmall ? "100%" : 200 }}
+            sx={{ flexGrow: 1, minWidth: isSmall ? '100%' : 200 }}
           />
 
-          <FormControl size="small" sx={{ minWidth: isSmall ? "100%" : 180 }}>
+          <FormControl size="small" sx={{ minWidth: isSmall ? '100%' : 180 }}>
             <InputLabel>Sort by</InputLabel>
             <Select
               value={`${sortField}-${sortOrder}`}
               label="Sort by"
-              onChange={(e) => {
-                const [field, order] = e.target.value.split("-") as [
-                  SortField,
-                  SortOrder
-                ];
+              onChange={e => {
+                const [field, order] = e.target.value.split('-') as [SortField, SortOrder];
                 setSortField(field);
                 setSortOrder(order);
               }}
@@ -337,9 +314,9 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
       <TableContainer
         sx={{
           flex: 1,
-          overflow: "auto",
-          "& .MuiTable-root": {
-            tableLayout: isMobile ? "fixed" : "auto",
+          overflow: 'auto',
+          '& .MuiTable-root': {
+            tableLayout: isMobile ? 'fixed' : 'auto',
           },
         }}
       >
@@ -348,59 +325,59 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
             <TableRow>
               <TableCell
                 sx={{
-                  cursor: "pointer",
-                  userSelect: "none",
+                  cursor: 'pointer',
+                  userSelect: 'none',
                   py: isMobile ? 0.25 : 0.5,
                   px: isMobile ? 0.5 : 1,
-                  width: isMobile ? "35%" : "auto",
-                  backgroundColor: "background.paper",
+                  width: isMobile ? '35%' : 'auto',
+                  backgroundColor: 'background.paper',
                 }}
-                onClick={() => handleSort("candidateId")}
+                onClick={() => handleSort('candidateId')}
               >
-                <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                  <PersonIcon fontSize={isMobile ? "small" : "medium"} />
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <PersonIcon fontSize={isMobile ? 'small' : 'medium'} />
                   <Typography variant="caption" fontWeight="bold" noWrap>
-                    {isSmall ? "Candidate" : "Candidate"}
+                    {isSmall ? 'Candidate' : 'Candidate'}
                   </Typography>
-                  {getSortIcon("candidateId")}
+                  {getSortIcon('candidateId')}
                 </Box>
               </TableCell>
               <TableCell
                 sx={{
-                  cursor: "pointer",
-                  userSelect: "none",
+                  cursor: 'pointer',
+                  userSelect: 'none',
                   py: isMobile ? 0.25 : 0.5,
                   px: isMobile ? 0.5 : 1,
-                  width: isMobile ? "35%" : "auto",
-                  backgroundColor: "background.paper",
+                  width: isMobile ? '35%' : 'auto',
+                  backgroundColor: 'background.paper',
                 }}
-                onClick={() => handleSort("jobId")}
+                onClick={() => handleSort('jobId')}
               >
-                <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                  <WorkIcon fontSize={isMobile ? "small" : "medium"} />
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <WorkIcon fontSize={isMobile ? 'small' : 'medium'} />
                   <Typography variant="caption" fontWeight="bold" noWrap>
                     Job
                   </Typography>
-                  {getSortIcon("jobId")}
+                  {getSortIcon('jobId')}
                 </Box>
               </TableCell>
               {!isMobile && (
                 <TableCell
                   sx={{
-                    cursor: "pointer",
-                    userSelect: "none",
+                    cursor: 'pointer',
+                    userSelect: 'none',
                     py: 0.5,
                     px: 1,
-                    backgroundColor: "background.paper",
+                    backgroundColor: 'background.paper',
                   }}
-                  onClick={() => handleSort("updatedAt")}
+                  onClick={() => handleSort('updatedAt')}
                 >
-                  <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <ScheduleIcon fontSize="medium" />
                     <Typography variant="caption" fontWeight="bold">
                       Updated
                     </Typography>
-                    {getSortIcon("updatedAt")}
+                    {getSortIcon('updatedAt')}
                   </Box>
                 </TableCell>
               )}
@@ -408,8 +385,8 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                 sx={{
                   py: isMobile ? 0.25 : 0.5,
                   px: isMobile ? 0.5 : 1,
-                  width: isMobile ? "30%" : "auto",
-                  backgroundColor: "background.paper",
+                  width: isMobile ? '30%' : 'auto',
+                  backgroundColor: 'background.paper',
                 }}
               >
                 <Typography variant="caption" fontWeight="bold" noWrap>
@@ -419,20 +396,20 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            {sortedResumes.map((resume) => (
+            {sortedResumes.map(resume => (
               <TableRow
                 key={resume.id}
                 hover
                 selected={selectedResume?.id === resume.id}
                 onClick={() => handleResumeSelect(resume)}
                 sx={{
-                  cursor: "pointer",
-                  height: isMobile ? 48 : "auto",
-                  "&.Mui-selected": {
-                    backgroundColor: "action.selected",
+                  cursor: 'pointer',
+                  height: isMobile ? 48 : 'auto',
+                  '&.Mui-selected': {
+                    backgroundColor: 'action.selected',
                   },
-                  "&:hover": {
-                    backgroundColor: "action.hover",
+                  '&:hover': {
+                    backgroundColor: 'action.hover',
                   },
                 }}
               >
@@ -440,14 +417,14 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                   sx={{
                     py: isMobile ? 0.25 : 0.5,
                     px: isMobile ? 0.5 : 1,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                   }}
                 >
                   <Typography
-                    variant={isMobile ? "caption" : "body2"}
+                    variant={isMobile ? 'caption' : 'body2'}
                     fontWeight="medium"
                     noWrap
-                    sx={{ fontSize: isMobile ? "0.75rem" : "0.875rem" }}
+                    sx={{ fontSize: isMobile ? '0.75rem' : '0.875rem' }}
                   >
                     {resume.candidate?.fullName || resume.candidateId}
                   </Typography>
@@ -456,7 +433,7 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                       variant="caption"
                       color="text.secondary"
                       noWrap
-                      sx={{ display: "block", fontSize: "0.7rem" }}
+                      sx={{ display: 'block', fontSize: '0.7rem' }}
                     >
                       {formatDate(resume.updatedAt)}
                     </Typography>
@@ -466,23 +443,23 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                   sx={{
                     py: isMobile ? 0.25 : 0.5,
                     px: isMobile ? 0.5 : 1,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                   }}
                 >
                   <Typography
-                    variant={isMobile ? "caption" : "body2"}
+                    variant={isMobile ? 'caption' : 'body2'}
                     fontWeight="medium"
                     noWrap
-                    sx={{ fontSize: isMobile ? "0.75rem" : "0.875rem" }}
+                    sx={{ fontSize: isMobile ? '0.75rem' : '0.875rem' }}
                   >
-                    {resume.job?.title || "Unknown Job"}
+                    {resume.job?.title || 'Unknown Job'}
                   </Typography>
                   {!isMobile && resume.job?.company && (
                     <Typography
                       variant="caption"
                       color="text.secondary"
                       noWrap
-                      sx={{ display: "block", fontSize: "0.7rem" }}
+                      sx={{ display: 'block', fontSize: '0.7rem' }}
                     >
                       {resume.job.company}
                     </Typography>
@@ -490,14 +467,14 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                 </TableCell>
                 {!isMobile && (
                   <TableCell sx={{ py: 0.5, px: 1 }}>
-                    <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+                    <Typography variant="body2" sx={{ fontSize: '0.8rem' }}>
                       {formatDate(resume.updatedAt)}
                     </Typography>
                     {resume.createdAt && (
                       <Typography
                         variant="caption"
                         color="text.secondary"
-                        sx={{ display: "block", fontSize: "0.7rem" }}
+                        sx={{ display: 'block', fontSize: '0.7rem' }}
                       >
                         Created: {formatDate(resume.createdAt)}
                       </Typography>
@@ -508,14 +485,14 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                   sx={{
                     py: isMobile ? 0.25 : 0.5,
                     px: isMobile ? 0.5 : 1,
-                    overflow: "hidden",
+                    overflow: 'hidden',
                   }}
                 >
                   <Typography
                     variant="caption"
                     color="text.secondary"
                     noWrap
-                    sx={{ fontSize: isMobile ? "0.65rem" : "0.7rem" }}
+                    sx={{ fontSize: isMobile ? '0.65rem' : '0.7rem' }}
                   >
                     {resume.id}
                   </Typography>
@@ -532,9 +509,9 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
     <Box
       sx={{
         flex: 1,
-        overflow: "auto",
+        overflow: 'auto',
         p: inDialog ? 1.5 : 0.75,
-        height: inDialog ? "100%" : "auto",
+        height: inDialog ? '100%' : 'auto',
       }}
     >
       {selectedResume ? (
@@ -542,29 +519,27 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
           resume={selectedResume}
           variant="all"
           sx={{
-            border: "none",
-            boxShadow: "none",
-            backgroundColor: "transparent",
-            "& .MuiTypography-h6": {
-              fontSize: inDialog ? "1.25rem" : "1.1rem",
+            border: 'none',
+            boxShadow: 'none',
+            backgroundColor: 'transparent',
+            '& .MuiTypography-h6': {
+              fontSize: inDialog ? '1.25rem' : '1.1rem',
             },
           }}
         />
       ) : (
         <Box
           sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100%",
-            color: "text.secondary",
-            textAlign: "center",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            color: 'text.secondary',
+            textAlign: 'center',
             p: 2,
           }}
         >
-          <Typography variant="body2">
-            Select a resume to view details
-          </Typography>
+          <Typography variant="body2">Select a resume to view details</Typography>
         </Box>
       )}
     </Box>
@@ -574,9 +549,9 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
     return (
       <Box
         sx={{
-          height: "100%",
+          height: '100%',
           p: 0.5,
-          backgroundColor: "background.default",
+          backgroundColor: 'background.default',
         }}
       >
         <ResumeList />
@@ -588,7 +563,7 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
           TransitionComponent={Transition}
           TransitionProps={{ timeout: 300 }}
         >
-          <AppBar sx={{ position: "relative", elevation: 1 }}>
+          <AppBar sx={{ position: 'relative', elevation: 1 }}>
             <Toolbar variant="dense" sx={{ minHeight: 48 }}>
               <IconButton
                 edge="start"
@@ -600,22 +575,16 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
                 <ArrowBackIcon />
               </IconButton>
               <Box sx={{ ml: 1, flex: 1, minWidth: 0 }}>
-                <Typography
-                  variant="h6"
-                  component="div"
-                  noWrap
-                  sx={{ fontSize: "1rem" }}
-                >
+                <Typography variant="h6" component="div" noWrap sx={{ fontSize: '1rem' }}>
                   Resume Details
                 </Typography>
                 <Typography
                   variant="caption"
                   component="div"
-                  sx={{ color: "rgba(255, 255, 255, 0.7)" }}
+                  sx={{ color: 'rgba(255, 255, 255, 0.7)' }}
                   noWrap
                 >
-                  {selectedResume?.candidate?.fullName ||
-                    selectedResume?.candidateId}
+                  {selectedResume?.candidate?.fullName || selectedResume?.candidateId}
                 </Typography>
               </Box>
             </Toolbar>
@@ -629,20 +598,20 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
   return (
     <Box
       sx={{
-        display: "flex",
-        height: "100%",
+        display: 'flex',
+        height: '100%',
         gap: 0.75,
         p: 0.75,
-        backgroundColor: "background.default",
+        backgroundColor: 'background.default',
       }}
     >
       <ResumeList />
 
       <Paper
         sx={{
-          width: "50%",
-          display: "flex",
-          flexDirection: "column",
+          width: '50%',
+          display: 'flex',
+          flexDirection: 'column',
           elevation: 1,
         }}
       >
@@ -650,11 +619,11 @@ const ResumeViewer: React.FC<ResumeViewerProps> = ({
           sx={{
             p: 0.75,
             borderBottom: 1,
-            borderColor: "divider",
-            backgroundColor: "background.paper",
+            borderColor: 'divider',
+            backgroundColor: 'background.paper',
           }}
         >
-          <Typography variant="h6" sx={{ fontSize: "1.1rem", fontWeight: 600 }}>
+          <Typography variant="h6" sx={{ fontSize: '1.1rem', fontWeight: 600 }}>
             Resume Details
           </Typography>
         </Box>
diff --git a/frontend/src/components/ui/StatusIcon.tsx b/frontend/src/components/ui/StatusIcon.tsx
index fa3f067..ec3518c 100644
--- a/frontend/src/components/ui/StatusIcon.tsx
+++ b/frontend/src/components/ui/StatusIcon.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   SyncAlt,
   Favorite,
@@ -9,18 +9,18 @@ import {
   Image,
   Psychology,
   Build,
-} from "@mui/icons-material";
-import { styled } from "@mui/material/styles";
-import * as Types from "types/types";
-import { Box } from "@mui/material";
+} from '@mui/icons-material';
+import { styled } from '@mui/material/styles';
+import * as Types from 'types/types';
+import { Box } from '@mui/material';
 
 interface StatusIconProps {
   type: Types.ApiActivityType;
 }
 
 const StatusBox = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
+  display: 'flex',
+  alignItems: 'center',
   gap: theme.spacing(1),
   padding: theme.spacing(1, 2),
   backgroundColor: theme.palette.background.paper,
@@ -33,23 +33,23 @@ const StatusIcon = (props: StatusIconProps) => {
   const { type } = props;
 
   switch (type) {
-    case "converting":
+    case 'converting':
       return <SyncAlt color="primary" />;
-    case "heartbeat":
+    case 'heartbeat':
       return <Favorite color="error" />;
-    case "system":
+    case 'system':
       return <Settings color="action" />;
-    case "info":
+    case 'info':
       return <Info color="info" />;
-    case "searching":
+    case 'searching':
       return <Search color="primary" />;
-    case "generating":
+    case 'generating':
       return <AutoFixHigh color="secondary" />;
-    case "generating_image":
+    case 'generating_image':
       return <Image color="primary" />;
-    case "thinking":
+    case 'thinking':
       return <Psychology color="secondary" />;
-    case "tooling":
+    case 'tooling':
       return <Build color="action" />;
     default:
       return <Info color="action" />;
diff --git a/frontend/src/config/navigationConfig.tsx b/frontend/src/config/navigationConfig.tsx
index 8c8ffc9..edda268 100644
--- a/frontend/src/config/navigationConfig.tsx
+++ b/frontend/src/config/navigationConfig.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   Chat as ChatIcon,
   Dashboard as DashboardIcon,
@@ -18,35 +18,35 @@ import {
   Analytics as AnalyticsIcon,
   BubbleChart,
   AutoFixHigh,
-} from "@mui/icons-material";
-import EditDocumentIcon from "@mui/icons-material/EditDocument";
+} from '@mui/icons-material';
+import EditDocumentIcon from '@mui/icons-material/EditDocument';
 
-import { BackstoryLogo } from "components/ui/BackstoryLogo";
-import { HomePage } from "pages/HomePage";
-import { CandidateChatPage } from "pages/CandidateChatPage";
-import { DocsPage } from "pages/DocsPage";
-import { CreateProfilePage } from "pages/candidate/ProfileWizard";
-import { VectorVisualizerPage } from "pages/VectorVisualizerPage";
-import { BetaPage } from "pages/BetaPage";
-import { CandidateListingPage } from "pages/FindCandidatePage";
-import { JobAnalysisPage } from "pages/JobAnalysisPage";
-import { GenerateCandidate } from "pages/GenerateCandidate";
-import { LoginPage } from "pages/LoginPage";
-import { EmailVerificationPage } from "components/EmailVerificationComponents";
-import { Box, Typography } from "@mui/material";
-import { CandidateDashboard } from "pages/candidate/Dashboard";
-import { NavigationConfig, NavigationItem } from "types/navigation";
-import { HowItWorks } from "pages/HowItWorks";
-import SchoolIcon from "@mui/icons-material/School";
-import { CandidateProfile } from "pages/candidate/Profile";
-import { Settings } from "pages/candidate/Settings";
-import { VectorVisualizer } from "components/VectorVisualizer";
-import { DocumentManager } from "components/DocumentManager";
-import { useAuth } from "hooks/AuthContext";
-import { useNavigate } from "react-router-dom";
-import { JobViewer } from "components/ui/JobViewer";
-import { CandidatePicker } from "components/ui/CandidatePicker";
-import { ResumeViewer } from "components/ui/ResumeViewer";
+import { BackstoryLogo } from 'components/ui/BackstoryLogo';
+import { HomePage } from 'pages/HomePage';
+import { CandidateChatPage } from 'pages/CandidateChatPage';
+import { DocsPage } from 'pages/DocsPage';
+import { CreateProfilePage } from 'pages/candidate/ProfileWizard';
+import { VectorVisualizerPage } from 'pages/VectorVisualizerPage';
+import { BetaPage } from 'pages/BetaPage';
+import { CandidateListingPage } from 'pages/FindCandidatePage';
+import { JobAnalysisPage } from 'pages/JobAnalysisPage';
+import { GenerateCandidate } from 'pages/GenerateCandidate';
+import { LoginPage } from 'pages/LoginPage';
+import { EmailVerificationPage } from 'components/EmailVerificationComponents';
+import { Box, Typography } from '@mui/material';
+import { CandidateDashboard } from 'pages/candidate/Dashboard';
+import { NavigationConfig, NavigationItem } from 'types/navigation';
+import { HowItWorks } from 'pages/HowItWorks';
+import SchoolIcon from '@mui/icons-material/School';
+import { CandidateProfile } from 'pages/candidate/Profile';
+import { Settings } from 'pages/candidate/Settings';
+import { VectorVisualizer } from 'components/VectorVisualizer';
+import { DocumentManager } from 'components/DocumentManager';
+import { useAuth } from 'hooks/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { JobViewer } from 'components/ui/JobViewer';
+import { CandidatePicker } from 'components/ui/CandidatePicker';
+import { ResumeViewer } from 'components/ui/ResumeViewer';
 
 // Beta page components for placeholder routes
 const BackstoryPage = () => (
@@ -89,7 +89,7 @@ const LogoutPage = () => {
   const { logout } = useAuth();
   const navigate = useNavigate();
   logout().then(() => {
-    navigate("/");
+    navigate('/');
   });
   return <Typography variant="h4">Logging out...</Typography>;
 };
@@ -107,28 +107,28 @@ const SettingsPage = () => (
 export const navigationConfig: NavigationConfig = {
   items: [
     {
-      id: "home",
+      id: 'home',
       label: <BackstoryLogo />,
-      path: "/",
+      path: '/',
       component: <HowItWorks />,
-      userTypes: ["guest", "candidate", "employer"],
+      userTypes: ['guest', 'candidate', 'employer'],
       exact: true,
     },
     {
-      id: "job-analysis",
-      label: "Job Analysis",
-      path: "/job-analysis",
+      id: 'job-analysis',
+      label: 'Job Analysis',
+      path: '/job-analysis',
       icon: <WorkIcon />,
       component: <JobAnalysisPage />,
-      userTypes: ["guest", "candidate", "employer"],
+      userTypes: ['guest', 'candidate', 'employer'],
     },
     {
-      id: "chat",
-      label: "Candidate Chat",
-      path: "/chat",
+      id: 'chat',
+      label: 'Candidate Chat',
+      path: '/chat',
       icon: <ChatIcon />,
       component: <CandidateChatPage />,
-      userTypes: ["guest", "candidate", "employer"],
+      userTypes: ['guest', 'candidate', 'employer'],
     },
     // {
     //   id: "explore",
@@ -151,74 +151,74 @@ export const navigationConfig: NavigationConfig = {
     // },
 
     {
-      id: "generate-candidate",
-      label: "Generate Candidate",
-      path: "/admin/generate-candidate",
+      id: 'generate-candidate',
+      label: 'Generate Candidate',
+      path: '/admin/generate-candidate',
       icon: <AutoFixHigh />,
       component: <GenerateCandidate />,
-      userTypes: ["admin"],
+      userTypes: ['admin'],
       showInNavigation: false,
       showInUserMenu: true,
-      userMenuGroup: "admin",
+      userMenuGroup: 'admin',
     },
     // User menu only items (not shown in main navigation)
     {
-      id: "candidate-profile",
-      label: "Profile",
+      id: 'candidate-profile',
+      label: 'Profile',
       icon: <PersonIcon />,
-      path: "/candidate/profile",
+      path: '/candidate/profile',
       component: <CandidateProfile />,
-      userTypes: ["candidate"],
-      userMenuGroup: "profile",
+      userTypes: ['candidate'],
+      userMenuGroup: 'profile',
       showInNavigation: false,
       showInUserMenu: true,
     },
     {
-      id: "candidate-dashboard",
-      label: "Dashboard",
-      path: "/candidate/dashboard",
+      id: 'candidate-dashboard',
+      label: 'Dashboard',
+      path: '/candidate/dashboard',
       icon: <DashboardIcon />,
       component: <CandidateDashboard />,
-      userTypes: ["candidate"],
-      userMenuGroup: "profile",
+      userTypes: ['candidate'],
+      userMenuGroup: 'profile',
       showInNavigation: false,
       showInUserMenu: true,
     },
     {
-      id: "explore-jobs",
-      label: "Jobs",
-      path: "/candidate/jobs/:jobId?",
+      id: 'explore-jobs',
+      label: 'Jobs',
+      path: '/candidate/jobs/:jobId?',
       icon: <WorkIcon />,
       component: <JobViewer />,
-      userTypes: ["candidate", "guest", "employer"],
+      userTypes: ['candidate', 'guest', 'employer'],
       showInNavigation: false,
       showInUserMenu: true,
-      userMenuGroup: "profile",
+      userMenuGroup: 'profile',
     },
     {
-      id: "explore-resumes",
-      label: "Resumes",
-      path: "/candidate/resumes/:resumeId?",
+      id: 'explore-resumes',
+      label: 'Resumes',
+      path: '/candidate/resumes/:resumeId?',
       icon: <EditDocumentIcon />,
       component: <ResumeViewer />,
-      userTypes: ["candidate", "guest", "employer"],
+      userTypes: ['candidate', 'guest', 'employer'],
       showInNavigation: false,
       showInUserMenu: true,
-      userMenuGroup: "profile",
+      userMenuGroup: 'profile',
     },
     {
-      id: "candidate-docs",
-      label: "Content",
+      id: 'candidate-docs',
+      label: 'Content',
       icon: <BubbleChart />,
-      path: "/candidate/documents",
+      path: '/candidate/documents',
       component: (
-        <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+        <Box sx={{ display: 'flex', width: '100%', flexDirection: 'column' }}>
           <VectorVisualizer />
           <DocumentManager />
         </Box>
       ),
-      userTypes: ["candidate"],
-      userMenuGroup: "profile",
+      userTypes: ['candidate'],
+      userMenuGroup: 'profile',
       showInNavigation: false,
       showInUserMenu: true,
     },
@@ -265,65 +265,65 @@ export const navigationConfig: NavigationConfig = {
     //   showInUserMenu: true,
     // },
     {
-      id: "candidate-settings",
-      label: "System Information",
-      path: "/candidate/settings",
+      id: 'candidate-settings',
+      label: 'System Information',
+      path: '/candidate/settings',
       icon: <SettingsIcon />,
       component: <Settings />,
-      userTypes: ["candidate"],
-      userMenuGroup: "account",
+      userTypes: ['candidate'],
+      userMenuGroup: 'account',
       showInNavigation: false,
       showInUserMenu: true,
     },
     {
-      id: "logout",
-      label: "Logout",
+      id: 'logout',
+      label: 'Logout',
       icon: <PersonIcon />, // This will be handled specially in Header
-      userTypes: ["candidate", "employer"],
+      userTypes: ['candidate', 'employer'],
       showInNavigation: false,
       showInUserMenu: true,
-      userMenuGroup: "system",
+      userMenuGroup: 'system',
     },
     // Auth routes (special handling)
     {
-      id: "auth",
-      label: "Auth",
-      userTypes: ["guest", "candidate", "employer"],
+      id: 'auth',
+      label: 'Auth',
+      userTypes: ['guest', 'candidate', 'employer'],
       showInNavigation: false,
       children: [
         {
-          id: "verify-email",
-          label: "Verify Email",
-          path: "/login/verify-email",
+          id: 'verify-email',
+          label: 'Verify Email',
+          path: '/login/verify-email',
           component: <EmailVerificationPage />,
-          userTypes: ["guest", "candidate", "employer"],
+          userTypes: ['guest', 'candidate', 'employer'],
           showInNavigation: false,
         },
         {
-          id: "login",
-          label: "Login",
-          path: "/login/:tab?",
+          id: 'login',
+          label: 'Login',
+          path: '/login/:tab?',
           component: <LoginPage />,
-          userTypes: ["guest", "candidate", "employer"],
+          userTypes: ['guest', 'candidate', 'employer'],
           showInNavigation: false,
         },
         {
-          id: "logout-page",
-          label: "Logout",
-          path: "/logout",
+          id: 'logout-page',
+          label: 'Logout',
+          path: '/logout',
           component: <LogoutPage />,
-          userTypes: ["candidate", "employer"],
+          userTypes: ['candidate', 'employer'],
           showInNavigation: false,
         },
       ],
     },
     // Catch-all route
     {
-      id: "catch-all",
-      label: "Not Found",
-      path: "*",
+      id: 'catch-all',
+      label: 'Not Found',
+      path: '*',
       component: <BetaPage />,
-      userTypes: ["guest", "candidate", "employer"],
+      userTypes: ['guest', 'candidate', 'employer'],
       showInNavigation: false,
     },
   ],
@@ -331,46 +331,44 @@ export const navigationConfig: NavigationConfig = {
 
 // Utility functions for working with navigation config
 export const getNavigationItemsForUser = (
-  userType: "guest" | "candidate" | "employer" | null,
+  userType: 'guest' | 'candidate' | 'employer' | null,
   isAdmin: boolean
 ): NavigationItem[] => {
-  const currentUserType = userType || "guest";
+  const currentUserType = userType || 'guest';
 
   const filterItems = (items: NavigationItem[]): NavigationItem[] => {
     return items
       .filter(
-        (item) =>
+        item =>
           !item.userTypes ||
           item.userTypes.includes(currentUserType) ||
-          (item.userTypes.includes("admin") && isAdmin)
+          (item.userTypes.includes('admin') && isAdmin)
       )
-      .filter((item) => item.showInNavigation !== false) // Default to true if not specified
-      .map((item) => ({
+      .filter(item => item.showInNavigation !== false) // Default to true if not specified
+      .map(item => ({
         ...item,
         children: item.children ? filterItems(item.children) : undefined,
       }))
-      .filter(
-        (item) => item.path || (item.children && item.children.length > 0)
-      );
+      .filter(item => item.path || (item.children && item.children.length > 0));
   };
 
   return filterItems(navigationConfig.items);
 };
 
 export const getAllRoutes = (
-  userType: "guest" | "candidate" | "employer" | null,
+  userType: 'guest' | 'candidate' | 'employer' | null,
   isAdmin: boolean
 ): NavigationItem[] => {
-  const currentUserType = userType || "guest";
+  const currentUserType = userType || 'guest';
 
   const extractRoutes = (items: NavigationItem[]): NavigationItem[] => {
     const routes: NavigationItem[] = [];
 
-    items.forEach((item) => {
+    items.forEach(item => {
       if (
         !item.userTypes ||
         item.userTypes.includes(currentUserType) ||
-        (item.userTypes.includes("admin") && isAdmin)
+        (item.userTypes.includes('admin') && isAdmin)
       ) {
         if (item.path && item.component) {
           routes.push(item);
@@ -388,20 +386,20 @@ export const getAllRoutes = (
 };
 
 export const getMainNavigationItems = (
-  userType: "guest" | "candidate" | "employer" | null,
+  userType: 'guest' | 'candidate' | 'employer' | null,
   isAdmin: boolean
 ): NavigationItem[] => {
   return getNavigationItemsForUser(userType, isAdmin).filter(
-    (item) =>
-      item.id !== "auth" &&
-      item.id !== "catch-all" &&
+    item =>
+      item.id !== 'auth' &&
+      item.id !== 'catch-all' &&
       item.showInNavigation !== false &&
       (item.path || (item.children && item.children.length > 0))
   );
 };
 
 export const getUserMenuItems = (
-  userType: "candidate" | "employer" | "guest" | null,
+  userType: 'candidate' | 'employer' | 'guest' | null,
   isAdmin: boolean
 ): NavigationItem[] => {
   if (!userType) return [];
@@ -409,7 +407,7 @@ export const getUserMenuItems = (
   const extractUserMenuItems = (items: NavigationItem[]): NavigationItem[] => {
     const menuItems: NavigationItem[] = [];
 
-    items.forEach((item) => {
+    items.forEach(item => {
       if (!item.userTypes || item.userTypes.includes(userType) || isAdmin) {
         if (item.showInUserMenu) {
           menuItems.push(item);
@@ -427,7 +425,7 @@ export const getUserMenuItems = (
 };
 
 export const getUserMenuItemsByGroup = (
-  userType: "candidate" | "employer" | "guest" | null,
+  userType: 'candidate' | 'employer' | 'guest' | null,
   isAdmin: boolean
 ): { [key: string]: NavigationItem[] } => {
   const menuItems = getUserMenuItems(userType, isAdmin);
@@ -439,8 +437,8 @@ export const getUserMenuItemsByGroup = (
     other: [],
   };
 
-  menuItems.forEach((item) => {
-    const group = item.userMenuGroup || "other";
+  menuItems.forEach(item => {
+    const group = item.userMenuGroup || 'other';
     if (!grouped[group]) {
       grouped[group] = [];
     }
diff --git a/frontend/src/declarations.d.ts b/frontend/src/declarations.d.ts
index 3a506be..fa60bb2 100644
--- a/frontend/src/declarations.d.ts
+++ b/frontend/src/declarations.d.ts
@@ -1 +1 @@
-declare module "react-plotly.js";
+declare module 'react-plotly.js';
diff --git a/frontend/src/documents/BackstoryAppAnalysisPage.tsx b/frontend/src/documents/BackstoryAppAnalysisPage.tsx
index 1483f5c..59fba52 100644
--- a/frontend/src/documents/BackstoryAppAnalysisPage.tsx
+++ b/frontend/src/documents/BackstoryAppAnalysisPage.tsx
@@ -1,21 +1,15 @@
-import React from "react";
-import { Box, Typography, Paper, Container } from "@mui/material";
+import React from 'react';
+import { Box, Typography, Paper, Container } from '@mui/material';
 
 // Import the backstoryTheme
 
 // BackstoryAnalysisDisplay component
 const BackstoryAppAnalysisPage = () => {
   return (
-    <Box
-      sx={{ backgroundColor: "background.default", minHeight: "100%", py: 4 }}
-    >
+    <Box sx={{ backgroundColor: 'background.default', minHeight: '100%', py: 4 }}>
       <Container maxWidth="lg">
         <Paper sx={{ p: 4, boxShadow: 2 }}>
-          <Typography
-            variant="h1"
-            component="h1"
-            sx={{ mb: 3, color: "primary.main" }}
-          >
+          <Typography variant="h1" component="h1" sx={{ mb: 3, color: 'primary.main' }}>
             Backstory Application Analysis
           </Typography>
 
@@ -23,9 +17,9 @@ const BackstoryAppAnalysisPage = () => {
             Core Concept
           </Typography>
           <Typography variant="body1">
-            Backstory is a dual-purpose platform designed to bridge the gap
-            between job candidates and employers/recruiters with an AI-powered
-            approach to professional profiles and resume generation.
+            Backstory is a dual-purpose platform designed to bridge the gap between job candidates
+            and employers/recruiters with an AI-powered approach to professional profiles and resume
+            generation.
           </Typography>
 
           <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
@@ -34,16 +28,15 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ol" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Job Candidates</strong> - Upload and manage
-                comprehensive professional histories and generate tailored
-                resumes for specific positions
+                <strong>Job Candidates</strong> - Upload and manage comprehensive professional
+                histories and generate tailored resumes for specific positions
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Employers/Recruiters</strong> - Search for candidates,
-                directly interact with AI assistants about candidate
-                experiences, and generate position-specific resumes
+                <strong>Employers/Recruiters</strong> - Search for candidates, directly interact
+                with AI assistants about candidate experiences, and generate position-specific
+                resumes
               </Typography>
             </li>
           </Box>
@@ -58,32 +51,32 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Complete Profile Management</strong> - Create detailed
-                professional histories beyond typical resume constraints
+                <strong>Complete Profile Management</strong> - Create detailed professional
+                histories beyond typical resume constraints
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>AI-Assisted Q&A Setup</strong> - Configure an AI
-                assistant to answer employer questions about your experience
+                <strong>AI-Assisted Q&A Setup</strong> - Configure an AI assistant to answer
+                employer questions about your experience
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Smart Resume Generator</strong> - Create tailored
-                resumes for specific positions using AI
+                <strong>Smart Resume Generator</strong> - Create tailored resumes for specific
+                positions using AI
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Analytics Dashboard</strong> - Track profile views,
-                resume downloads, and employer engagement
+                <strong>Analytics Dashboard</strong> - Track profile views, resume downloads, and
+                employer engagement
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Privacy Controls</strong> - Manage visibility and access
-                to your professional information
+                <strong>Privacy Controls</strong> - Manage visibility and access to your
+                professional information
               </Typography>
             </li>
           </Box>
@@ -94,32 +87,32 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Advanced Candidate Search</strong> - Find candidates
-                with specific skills, experience levels, and qualifications
+                <strong>Advanced Candidate Search</strong> - Find candidates with specific skills,
+                experience levels, and qualifications
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Interactive Q&A</strong> - Ask questions directly to
-                candidate AI assistants to learn more about their experience
+                <strong>Interactive Q&A</strong> - Ask questions directly to candidate AI assistants
+                to learn more about their experience
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Resume Generation</strong> - Generate candidate resumes
-                tailored to specific job requirements
+                <strong>Resume Generation</strong> - Generate candidate resumes tailored to specific
+                job requirements
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Talent Pool Management</strong> - Create and manage
-                groups of candidates for different positions
+                <strong>Talent Pool Management</strong> - Create and manage groups of candidates for
+                different positions
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Job Posting Management</strong> - Create, manage, and
-                track applications for job postings
+                <strong>Job Posting Management</strong> - Create, manage, and track applications for
+                job postings
               </Typography>
             </li>
           </Box>
@@ -137,20 +130,20 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Public Navigation</strong> - Home, Docs, Pricing,
-                Login/Register accessible to all users
+                <strong>Public Navigation</strong> - Home, Docs, Pricing, Login/Register accessible
+                to all users
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Candidate Dashboard Navigation</strong> - Profile,
-                Backstory, Resumes, Q&A Setup, Analytics, Settings
+                <strong>Candidate Dashboard Navigation</strong> - Profile, Backstory, Resumes, Q&A
+                Setup, Analytics, Settings
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Employer Dashboard Navigation</strong> - Dashboard,
-                Search, Saved, Jobs, Company, Analytics, Settings
+                <strong>Employer Dashboard Navigation</strong> - Dashboard, Search, Saved, Jobs,
+                Company, Analytics, Settings
               </Typography>
             </li>
           </Box>
@@ -161,38 +154,38 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ol" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Dashboard Cards</strong> - Both user types have
-                dashboards with card-based information displays
+                <strong>Dashboard Cards</strong> - Both user types have dashboards with card-based
+                information displays
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Tab-Based Content Organization</strong> - Many screens
-                use horizontal tabs to organize related content
+                <strong>Tab-Based Content Organization</strong> - Many screens use horizontal tabs
+                to organize related content
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Form-Based Editors</strong> - Profile and content
-                editors use structured forms with varied input types
+                <strong>Form-Based Editors</strong> - Profile and content editors use structured
+                forms with varied input types
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Three-Column Layouts</strong> - Many screens follow a
-                left sidebar, main content, right sidebar pattern
+                <strong>Three-Column Layouts</strong> - Many screens follow a left sidebar, main
+                content, right sidebar pattern
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Preview/Edit Toggle</strong> - Resume and profile
-                editing screens offer both editing and preview modes
+                <strong>Preview/Edit Toggle</strong> - Resume and profile editing screens offer both
+                editing and preview modes
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Filter-Based Search</strong> - Employer search uses
-                multiple filter categories to refine candidate results
+                <strong>Filter-Based Search</strong> - Employer search uses multiple filter
+                categories to refine candidate results
               </Typography>
             </li>
           </Box>
@@ -201,9 +194,8 @@ const BackstoryAppAnalysisPage = () => {
             Mobile Adaptations
           </Typography>
           <Typography variant="body1">
-            The mobile designs show a simplified navigation structure with
-            bottom tabs and a hamburger menu, maintaining the core functionality
-            while adapting to smaller screens.
+            The mobile designs show a simplified navigation structure with bottom tabs and a
+            hamburger menu, maintaining the core functionality while adapting to smaller screens.
           </Typography>
 
           <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
@@ -216,26 +208,26 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>LLM Integration</strong> - Supports multiple AI models
-                (Claude, GPT-4, self-hosted models)
+                <strong>LLM Integration</strong> - Supports multiple AI models (Claude, GPT-4,
+                self-hosted models)
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Candidate AI Assistant</strong> - Personalized AI
-                chatbot that answers questions about candidate experience
+                <strong>Candidate AI Assistant</strong> - Personalized AI chatbot that answers
+                questions about candidate experience
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Resume Generation</strong> - AI-powered resume creation
-                based on job requirements
+                <strong>Resume Generation</strong> - AI-powered resume creation based on job
+                requirements
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Skills Matching</strong> - Automated matching between
-                candidate skills and job requirements
+                <strong>Skills Matching</strong> - Automated matching between candidate skills and
+                job requirements
               </Typography>
             </li>
           </Box>
@@ -246,26 +238,25 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Authentication</strong> - OAuth with Google, LinkedIn,
-                GitHub
+                <strong>Authentication</strong> - OAuth with Google, LinkedIn, GitHub
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Data Import</strong> - LinkedIn profile import, resume
-                parsing (PDF, DOCX), CSV/JSON import
+                <strong>Data Import</strong> - LinkedIn profile import, resume parsing (PDF, DOCX),
+                CSV/JSON import
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>ATS Compatibility</strong> - Integration with employer
-                Applicant Tracking Systems
+                <strong>ATS Compatibility</strong> - Integration with employer Applicant Tracking
+                Systems
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Vector Databases</strong> - Semantic search capabilities
-                for candidate matching
+                <strong>Vector Databases</strong> - Semantic search capabilities for candidate
+                matching
               </Typography>
             </li>
           </Box>
@@ -276,32 +267,32 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ol" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Beyond the Resume</strong> - Focuses on comprehensive
-                professional stories rather than just resume highlights
+                <strong>Beyond the Resume</strong> - Focuses on comprehensive professional stories
+                rather than just resume highlights
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>AI-Mediated Communication</strong> - Uses AI to
-                facilitate deeper understanding of candidate experiences
+                <strong>AI-Mediated Communication</strong> - Uses AI to facilitate deeper
+                understanding of candidate experiences
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Bidirectional Resume Generation</strong> - Both
-                candidates and employers can generate tailored resumes
+                <strong>Bidirectional Resume Generation</strong> - Both candidates and employers can
+                generate tailored resumes
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Configurable AI Personalities</strong> - Candidates can
-                customize how their AI assistant responds to questions
+                <strong>Configurable AI Personalities</strong> - Candidates can customize how their
+                AI assistant responds to questions
               </Typography>
             </li>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Deep Analytics</strong> - Both candidates and employers
-                receive insights about their engagement
+                <strong>Deep Analytics</strong> - Both candidates and employers receive insights
+                about their engagement
               </Typography>
             </li>
           </Box>
@@ -320,9 +311,7 @@ const BackstoryAppAnalysisPage = () => {
               <Typography variant="body1">Cloud-hosted (SaaS model)</Typography>
             </li>
             <li>
-              <Typography variant="body1">
-                Hybrid deployment (mixed cloud/on-premises)
-              </Typography>
+              <Typography variant="body1">Hybrid deployment (mixed cloud/on-premises)</Typography>
             </li>
           </Box>
 
@@ -331,14 +320,10 @@ const BackstoryAppAnalysisPage = () => {
           </Typography>
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
-              <Typography variant="body1">
-                Granular candidate privacy controls
-              </Typography>
+              <Typography variant="body1">Granular candidate privacy controls</Typography>
             </li>
             <li>
-              <Typography variant="body1">
-                Role-based access for employer teams
-              </Typography>
+              <Typography variant="body1">Role-based access for employer teams</Typography>
             </li>
             <li>
               <Typography variant="body1">
diff --git a/frontend/src/documents/BackstoryThemeVisualizerPage.tsx b/frontend/src/documents/BackstoryThemeVisualizerPage.tsx
index 24d21d5..4cf964f 100644
--- a/frontend/src/documents/BackstoryThemeVisualizerPage.tsx
+++ b/frontend/src/documents/BackstoryThemeVisualizerPage.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import { backstoryTheme } from "../BackstoryTheme";
-import { Box, Paper, Container } from "@mui/material";
+import React from 'react';
+import { backstoryTheme } from '../BackstoryTheme';
+import { Box, Paper, Container } from '@mui/material';
 
 // This component provides a visual demonstration of the theme colors
 const BackstoryThemeVisualizerPage = () => {
-  const colorSwatch = (color: string, name: string, textColor = "#fff") => (
+  const colorSwatch = (color: string, name: string, textColor = '#fff') => (
     <div className="flex flex-col items-center">
       <div
         className="w-20 h-20 rounded-lg shadow-md flex items-center justify-center mb-2"
@@ -17,9 +17,7 @@ const BackstoryThemeVisualizerPage = () => {
   );
 
   return (
-    <Box
-      sx={{ backgroundColor: "background.default", minHeight: "100%", py: 4 }}
-    >
+    <Box sx={{ backgroundColor: 'background.default', minHeight: '100%', py: 4 }}>
       <Container maxWidth="lg">
         <Paper sx={{ p: 4, boxShadow: 2 }}>
           <div className="p-8">
@@ -31,70 +29,41 @@ const BackstoryThemeVisualizerPage = () => {
             </h1>
 
             <div className="mb-8">
-              <h2
-                className="text-xl mb-4"
-                style={{ color: backstoryTheme.palette.text.primary }}
-              >
+              <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
                 Primary Colors
               </h2>
               <div className="flex space-x-4">
                 {colorSwatch(
                   backstoryTheme.palette.primary.main,
-                  "Primary",
+                  'Primary',
                   backstoryTheme.palette.primary.contrastText
                 )}
                 {colorSwatch(
                   backstoryTheme.palette.secondary.main,
-                  "Secondary",
+                  'Secondary',
                   backstoryTheme.palette.secondary.contrastText
                 )}
-                {colorSwatch(
-                  backstoryTheme.palette.custom.highlight,
-                  "Highlight",
-                  "#fff"
-                )}
+                {colorSwatch(backstoryTheme.palette.custom.highlight, 'Highlight', '#fff')}
               </div>
             </div>
 
             <div className="mb-8">
-              <h2
-                className="text-xl mb-4"
-                style={{ color: backstoryTheme.palette.text.primary }}
-              >
+              <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
                 Background Colors
               </h2>
               <div className="flex space-x-4">
-                {colorSwatch(
-                  backstoryTheme.palette.background.default,
-                  "Default",
-                  "#000"
-                )}
-                {colorSwatch(
-                  backstoryTheme.palette.background.paper,
-                  "Paper",
-                  "#000"
-                )}
+                {colorSwatch(backstoryTheme.palette.background.default, 'Default', '#000')}
+                {colorSwatch(backstoryTheme.palette.background.paper, 'Paper', '#000')}
               </div>
             </div>
 
             <div className="mb-8">
-              <h2
-                className="text-xl mb-4"
-                style={{ color: backstoryTheme.palette.text.primary }}
-              >
+              <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
                 Text Colors
               </h2>
               <div className="flex space-x-4">
-                {colorSwatch(
-                  backstoryTheme.palette.text.primary,
-                  "Primary",
-                  "#fff"
-                )}
-                {colorSwatch(
-                  backstoryTheme.palette.text.secondary,
-                  "Secondary",
-                  "#fff"
-                )}
+                {colorSwatch(backstoryTheme.palette.text.primary, 'Primary', '#fff')}
+                {colorSwatch(backstoryTheme.palette.text.secondary, 'Secondary', '#fff')}
               </div>
             </div>
 
@@ -104,10 +73,7 @@ const BackstoryThemeVisualizerPage = () => {
                 backgroundColor: backstoryTheme.palette.background.paper,
               }}
             >
-              <h2
-                className="text-xl mb-4"
-                style={{ color: backstoryTheme.palette.text.primary }}
-              >
+              <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
                 Typography Examples
               </h2>
 
@@ -132,10 +98,9 @@ const BackstoryThemeVisualizerPage = () => {
                     color: backstoryTheme.typography.body1.color,
                   }}
                 >
-                  Body Text - This is how the regular text content will appear
-                  in the Backstory application. The application uses Roboto as
-                  its primary font family, with carefully selected sizing and
-                  colors.
+                  Body Text - This is how the regular text content will appear in the Backstory
+                  application. The application uses Roboto as its primary font family, with
+                  carefully selected sizing and colors.
                 </p>
               </div>
 
@@ -150,10 +115,7 @@ const BackstoryThemeVisualizerPage = () => {
             </div>
 
             <div className="mb-8">
-              <h2
-                className="text-xl mb-4"
-                style={{ color: backstoryTheme.palette.text.primary }}
-              >
+              <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
                 UI Component Examples
               </h2>
 
@@ -180,12 +142,12 @@ const BackstoryThemeVisualizerPage = () => {
 
                 <div
                   style={{
-                    padding: "8px 16px",
+                    padding: '8px 16px',
                     backgroundColor: backstoryTheme.palette.primary.main,
                     color: backstoryTheme.palette.primary.contrastText,
-                    display: "inline-block",
-                    borderRadius: "4px",
-                    cursor: "pointer",
+                    display: 'inline-block',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
                     fontFamily: backstoryTheme.typography.fontFamily,
                   }}
                 >
@@ -195,12 +157,12 @@ const BackstoryThemeVisualizerPage = () => {
                 <div
                   className="mt-4"
                   style={{
-                    padding: "8px 16px",
+                    padding: '8px 16px',
                     backgroundColor: backstoryTheme.palette.secondary.main,
                     color: backstoryTheme.palette.secondary.contrastText,
-                    display: "inline-block",
-                    borderRadius: "4px",
-                    cursor: "pointer",
+                    display: 'inline-block',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
                     fontFamily: backstoryTheme.typography.fontFamily,
                   }}
                 >
@@ -210,12 +172,12 @@ const BackstoryThemeVisualizerPage = () => {
                 <div
                   className="mt-4"
                   style={{
-                    padding: "8px 16px",
+                    padding: '8px 16px',
                     backgroundColor: backstoryTheme.palette.action.active,
-                    color: "#fff",
-                    display: "inline-block",
-                    borderRadius: "4px",
-                    cursor: "pointer",
+                    color: '#fff',
+                    display: 'inline-block',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
                     fontFamily: backstoryTheme.typography.fontFamily,
                   }}
                 >
@@ -225,10 +187,7 @@ const BackstoryThemeVisualizerPage = () => {
             </div>
 
             <div>
-              <h2
-                className="text-xl mb-4"
-                style={{ color: backstoryTheme.palette.text.primary }}
-              >
+              <h2 className="text-xl mb-4" style={{ color: backstoryTheme.palette.text.primary }}>
                 Theme Color Breakdown
               </h2>
               <table className="border-collapse">
@@ -237,8 +196,7 @@ const BackstoryThemeVisualizerPage = () => {
                     <th
                       className="border p-2 text-left"
                       style={{
-                        backgroundColor:
-                          backstoryTheme.palette.background.default,
+                        backgroundColor: backstoryTheme.palette.background.default,
                         color: backstoryTheme.palette.text.primary,
                       }}
                     >
@@ -247,8 +205,7 @@ const BackstoryThemeVisualizerPage = () => {
                     <th
                       className="border p-2 text-left"
                       style={{
-                        backgroundColor:
-                          backstoryTheme.palette.background.default,
+                        backgroundColor: backstoryTheme.palette.background.default,
                         color: backstoryTheme.palette.text.primary,
                       }}
                     >
@@ -257,8 +214,7 @@ const BackstoryThemeVisualizerPage = () => {
                     <th
                       className="border p-2 text-left"
                       style={{
-                        backgroundColor:
-                          backstoryTheme.palette.background.default,
+                        backgroundColor: backstoryTheme.palette.background.default,
                         color: backstoryTheme.palette.text.primary,
                       }}
                     >
@@ -284,8 +240,7 @@ const BackstoryThemeVisualizerPage = () => {
                       className="border p-2"
                       style={{ color: backstoryTheme.palette.text.primary }}
                     >
-                      Midnight Blue - Used for main headers and primary UI
-                      elements
+                      Midnight Blue - Used for main headers and primary UI elements
                     </td>
                   </tr>
                   <tr>
@@ -345,8 +300,7 @@ const BackstoryThemeVisualizerPage = () => {
                       className="border p-2"
                       style={{ color: backstoryTheme.palette.text.primary }}
                     >
-                      Golden Ochre - Used for highlights, accents, and important
-                      actions
+                      Golden Ochre - Used for highlights, accents, and important actions
                     </td>
                   </tr>
                   <tr>
diff --git a/frontend/src/documents/BackstoryUIOverviewPage.tsx b/frontend/src/documents/BackstoryUIOverviewPage.tsx
index 30afef7..468a97c 100644
--- a/frontend/src/documents/BackstoryUIOverviewPage.tsx
+++ b/frontend/src/documents/BackstoryUIOverviewPage.tsx
@@ -1,27 +1,20 @@
-import React from "react";
-import { ThemeProvider } from "@mui/material/styles";
-import {
-  Box,
-  Container,
-  Paper,
-  Typography,
-  Grid,
-  CssBaseline,
-} from "@mui/material";
-import { backstoryTheme } from "BackstoryTheme";
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { Box, Container, Paper, Typography, Grid, CssBaseline } from '@mui/material';
+import { backstoryTheme } from 'BackstoryTheme';
 
 const BackstoryUIOverviewPage: React.FC = () => {
   return (
     <ThemeProvider theme={backstoryTheme}>
       <CssBaseline />
-      <Box sx={{ bgcolor: "background.default", overflow: "hidden", py: 4 }}>
+      <Box sx={{ bgcolor: 'background.default', overflow: 'hidden', py: 4 }}>
         <Container maxWidth="lg">
           <Paper sx={{ p: 4, borderRadius: 2, boxShadow: 2 }}>
             {/* Header */}
             <Box
               sx={{
                 p: 3,
-                bgcolor: "background.paper",
+                bgcolor: 'background.paper',
                 borderRadius: 2,
                 mb: 4,
                 boxShadow: 1,
@@ -30,13 +23,12 @@ const BackstoryUIOverviewPage: React.FC = () => {
               <Typography
                 variant="h4"
                 component="h1"
-                sx={{ fontWeight: "bold", color: "primary.main", mb: 1 }}
+                sx={{ fontWeight: 'bold', color: 'primary.main', mb: 1 }}
               >
                 Backstory UI Architecture
               </Typography>
               <Typography variant="body1" color="text.secondary">
-                A visual overview of the dual-purpose application serving
-                candidates and employers
+                A visual overview of the dual-purpose application serving candidates and employers
               </Typography>
             </Box>
 
@@ -46,38 +38,33 @@ const BackstoryUIOverviewPage: React.FC = () => {
                 <Box
                   sx={{
                     p: 3,
-                    bgcolor: "rgba(74, 122, 125, 0.1)",
+                    bgcolor: 'rgba(74, 122, 125, 0.1)',
                     borderRadius: 2,
-                    border: "1px solid",
-                    borderColor: "rgba(74, 122, 125, 0.3)",
-                    height: "100%",
+                    border: '1px solid',
+                    borderColor: 'rgba(74, 122, 125, 0.3)',
+                    height: '100%',
                   }}
                 >
                   <Typography
                     variant="h6"
-                    sx={{ color: "secondary.main", mb: 2, fontWeight: "bold" }}
+                    sx={{ color: 'secondary.main', mb: 2, fontWeight: 'bold' }}
                   >
                     Candidate Experience
                   </Typography>
-                  <Box
-                    sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
-                  >
+                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                     {[
-                      "Create comprehensive professional profiles",
-                      "Configure AI assistant for employer Q&A",
-                      "Generate tailored resumes for specific jobs",
-                      "Track profile engagement metrics",
+                      'Create comprehensive professional profiles',
+                      'Configure AI assistant for employer Q&A',
+                      'Generate tailored resumes for specific jobs',
+                      'Track profile engagement metrics',
                     ].map((item, index) => (
-                      <Box
-                        key={index}
-                        sx={{ display: "flex", alignItems: "center", gap: 1.5 }}
-                      >
+                      <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                         <Box
                           sx={{
                             width: 8,
                             height: 8,
-                            borderRadius: "50%",
-                            bgcolor: "secondary.main",
+                            borderRadius: '50%',
+                            bgcolor: 'secondary.main',
                           }}
                         />
                         <Typography variant="body2">{item}</Typography>
@@ -91,38 +78,33 @@ const BackstoryUIOverviewPage: React.FC = () => {
                 <Box
                   sx={{
                     p: 3,
-                    bgcolor: "rgba(26, 37, 54, 0.1)",
+                    bgcolor: 'rgba(26, 37, 54, 0.1)',
                     borderRadius: 2,
-                    border: "1px solid",
-                    borderColor: "rgba(26, 37, 54, 0.3)",
-                    height: "100%",
+                    border: '1px solid',
+                    borderColor: 'rgba(26, 37, 54, 0.3)',
+                    height: '100%',
                   }}
                 >
                   <Typography
                     variant="h6"
-                    sx={{ color: "primary.main", mb: 2, fontWeight: "bold" }}
+                    sx={{ color: 'primary.main', mb: 2, fontWeight: 'bold' }}
                   >
                     Employer Experience
                   </Typography>
-                  <Box
-                    sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
-                  >
+                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                     {[
-                      "Search for candidates with specific skills",
-                      "Interact with candidate AI assistants",
-                      "Generate position-specific candidate resumes",
-                      "Manage talent pools and job listings",
+                      'Search for candidates with specific skills',
+                      'Interact with candidate AI assistants',
+                      'Generate position-specific candidate resumes',
+                      'Manage talent pools and job listings',
                     ].map((item, index) => (
-                      <Box
-                        key={index}
-                        sx={{ display: "flex", alignItems: "center", gap: 1.5 }}
-                      >
+                      <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                         <Box
                           sx={{
                             width: 8,
                             height: 8,
-                            borderRadius: "50%",
-                            bgcolor: "primary.main",
+                            borderRadius: '50%',
+                            bgcolor: 'primary.main',
                           }}
                         />
                         <Typography variant="body2">{item}</Typography>
@@ -137,64 +119,56 @@ const BackstoryUIOverviewPage: React.FC = () => {
             <Box
               sx={{
                 p: 3,
-                bgcolor: "background.paper",
+                bgcolor: 'background.paper',
                 borderRadius: 2,
                 mb: 4,
                 boxShadow: 1,
               }}
             >
-              <Typography
-                variant="h5"
-                sx={{ color: "text.primary", mb: 3, fontWeight: "bold" }}
-              >
+              <Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
                 Key UI Components
               </Typography>
               <Grid container spacing={2}>
                 {[
                   {
-                    title: "Dashboards",
+                    title: 'Dashboards',
                     description:
-                      "Role-specific dashboards with card-based metrics and action items",
+                      'Role-specific dashboards with card-based metrics and action items',
                   },
                   {
-                    title: "Profile Editors",
-                    description:
-                      "Comprehensive forms for managing professional information",
+                    title: 'Profile Editors',
+                    description: 'Comprehensive forms for managing professional information',
                   },
                   {
-                    title: "Resume Builder",
-                    description:
-                      "AI-powered tools for creating tailored resumes",
+                    title: 'Resume Builder',
+                    description: 'AI-powered tools for creating tailored resumes',
                   },
                   {
-                    title: "Q&A Interface",
-                    description:
-                      "Chat-like interface for employer-candidate AI interaction",
+                    title: 'Q&A Interface',
+                    description: 'Chat-like interface for employer-candidate AI interaction',
                   },
                   {
-                    title: "Search & Filters",
-                    description:
-                      "Advanced search with multiple filter categories",
+                    title: 'Search & Filters',
+                    description: 'Advanced search with multiple filter categories',
                   },
                   {
-                    title: "Analytics Dashboards",
-                    description:
-                      "Visual metrics for tracking engagement and performance",
+                    title: 'Analytics Dashboards',
+                    description: 'Visual metrics for tracking engagement and performance',
                   },
                 ].map((component, index) => (
                   <Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
                     <Box
                       sx={{
                         p: 2,
-                        border: "1px solid",
-                        borderColor: "divider",
+                        border: '1px solid',
+                        borderColor: 'divider',
                         borderRadius: 1,
-                        height: "100%",
-                        transition: "all 0.2s ease-in-out",
-                        "&:hover": {
-                          bgcolor: "rgba(212, 160, 23, 0.05)",
-                          borderColor: "action.active",
-                          transform: "translateY(-2px)",
+                        height: '100%',
+                        transition: 'all 0.2s ease-in-out',
+                        '&:hover': {
+                          bgcolor: 'rgba(212, 160, 23, 0.05)',
+                          borderColor: 'action.active',
+                          transform: 'translateY(-2px)',
                           boxShadow: 1,
                         },
                       }}
@@ -202,9 +176,9 @@ const BackstoryUIOverviewPage: React.FC = () => {
                       <Typography
                         variant="h6"
                         sx={{
-                          color: "secondary.main",
+                          color: 'secondary.main',
                           mb: 1,
-                          fontWeight: "medium",
+                          fontWeight: 'medium',
                         }}
                       >
                         {component.title}
@@ -222,53 +196,53 @@ const BackstoryUIOverviewPage: React.FC = () => {
             <Grid container spacing={3} sx={{ mb: 4 }}>
               {[
                 {
-                  title: "Candidate Navigation",
+                  title: 'Candidate Navigation',
                   items: [
-                    "Dashboard",
-                    "Profile",
-                    "Backstory",
-                    "Resumes",
-                    "Q&A Setup",
-                    "Analytics",
-                    "Settings",
+                    'Dashboard',
+                    'Profile',
+                    'Backstory',
+                    'Resumes',
+                    'Q&A Setup',
+                    'Analytics',
+                    'Settings',
                   ],
-                  color: "secondary.main",
-                  borderColor: "secondary.main",
+                  color: 'secondary.main',
+                  borderColor: 'secondary.main',
                 },
                 {
-                  title: "Employer Navigation",
+                  title: 'Employer Navigation',
                   items: [
-                    "Dashboard",
-                    "Search",
-                    "Saved",
-                    "Jobs",
-                    "Company",
-                    "Analytics",
-                    "Settings",
+                    'Dashboard',
+                    'Search',
+                    'Saved',
+                    'Jobs',
+                    'Company',
+                    'Analytics',
+                    'Settings',
                   ],
-                  color: "primary.main",
-                  borderColor: "primary.main",
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
                 },
                 {
-                  title: "Public Navigation",
-                  items: ["Home", "Docs", "Pricing", "Login", "Register"],
-                  color: "custom.highlight",
-                  borderColor: "custom.highlight",
+                  title: 'Public Navigation',
+                  items: ['Home', 'Docs', 'Pricing', 'Login', 'Register'],
+                  color: 'custom.highlight',
+                  borderColor: 'custom.highlight',
                 },
               ].map((nav, index) => (
                 <Grid size={{ xs: 12, md: 4 }} key={index}>
                   <Box
                     sx={{
                       p: 3,
-                      bgcolor: "background.paper",
+                      bgcolor: 'background.paper',
                       borderRadius: 2,
                       boxShadow: 1,
-                      height: "100%",
+                      height: '100%',
                     }}
                   >
                     <Typography
                       variant="h6"
-                      sx={{ color: "text.primary", mb: 2, fontWeight: "bold" }}
+                      sx={{ color: 'text.primary', mb: 2, fontWeight: 'bold' }}
                     >
                       {nav.title}
                     </Typography>
@@ -278,16 +252,13 @@ const BackstoryUIOverviewPage: React.FC = () => {
                         borderColor: nav.borderColor,
                         pl: 2,
                         py: 1,
-                        display: "flex",
-                        flexDirection: "column",
+                        display: 'flex',
+                        flexDirection: 'column',
                         gap: 1.5,
                       }}
                     >
                       {nav.items.map((item, idx) => (
-                        <Typography
-                          key={idx}
-                          sx={{ color: nav.color, fontWeight: "medium" }}
-                        >
+                        <Typography key={idx} sx={{ color: nav.color, fontWeight: 'medium' }}>
                           {item}
                         </Typography>
                       ))}
@@ -301,68 +272,65 @@ const BackstoryUIOverviewPage: React.FC = () => {
             <Box
               sx={{
                 p: 3,
-                bgcolor: "background.paper",
+                bgcolor: 'background.paper',
                 borderRadius: 2,
                 mb: 4,
                 boxShadow: 1,
               }}
             >
-              <Typography
-                variant="h5"
-                sx={{ color: "text.primary", mb: 3, fontWeight: "bold" }}
-              >
+              <Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
                 System Connection Points
               </Typography>
-              <Box sx={{ position: "relative", py: 2 }}>
+              <Box sx={{ position: 'relative', py: 2 }}>
                 {/* Connection line */}
                 <Box
                   sx={{
-                    position: "absolute",
-                    left: "50%",
+                    position: 'absolute',
+                    left: '50%',
                     top: 0,
                     bottom: 0,
                     width: 1,
-                    borderColor: "divider",
+                    borderColor: 'divider',
                     zIndex: 0,
-                    borderLeft: "1px solid",
-                    overflow: "hidden",
+                    borderLeft: '1px solid',
+                    overflow: 'hidden',
                   }}
                 />
 
                 {/* Connection points */}
                 {[
-                  { left: "Candidate Profile", right: "Employer Search" },
-                  { left: "Q&A Setup", right: "Q&A Interface" },
-                  { left: "Resume Generator", right: "Job Posts" },
+                  { left: 'Candidate Profile', right: 'Employer Search' },
+                  { left: 'Q&A Setup', right: 'Q&A Interface' },
+                  { left: 'Resume Generator', right: 'Job Posts' },
                 ].map((connection, index) => (
                   <Box
                     key={index}
                     sx={{
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       mb: index < 2 ? 5 : 0,
-                      position: "relative",
+                      position: 'relative',
                       zIndex: 1,
                     }}
                   >
                     <Box
                       sx={{
                         flex: 1,
-                        display: "flex",
-                        justifyContent: "flex-end",
+                        display: 'flex',
+                        justifyContent: 'flex-end',
                         pr: 3,
                       }}
                     >
                       <Box
                         sx={{
-                          display: "inline-block",
-                          bgcolor: "rgba(74, 122, 125, 0.1)",
+                          display: 'inline-block',
+                          bgcolor: 'rgba(74, 122, 125, 0.1)',
                           p: 2,
                           borderRadius: 2,
-                          color: "secondary.main",
-                          fontWeight: "medium",
-                          border: "1px solid",
-                          borderColor: "rgba(74, 122, 125, 0.3)",
+                          color: 'secondary.main',
+                          fontWeight: 'medium',
+                          border: '1px solid',
+                          borderColor: 'rgba(74, 122, 125, 0.3)',
                         }}
                       >
                         {connection.left}
@@ -373,8 +341,8 @@ const BackstoryUIOverviewPage: React.FC = () => {
                       sx={{
                         width: 16,
                         height: 16,
-                        borderRadius: "50%",
-                        bgcolor: "custom.highlight",
+                        borderRadius: '50%',
+                        bgcolor: 'custom.highlight',
                         zIndex: 2,
                         boxShadow: 2,
                       }}
@@ -388,14 +356,14 @@ const BackstoryUIOverviewPage: React.FC = () => {
                     >
                       <Box
                         sx={{
-                          display: "inline-block",
-                          bgcolor: "rgba(26, 37, 54, 0.1)",
+                          display: 'inline-block',
+                          bgcolor: 'rgba(26, 37, 54, 0.1)',
                           p: 2,
                           borderRadius: 2,
-                          color: "primary.main",
-                          fontWeight: "medium",
-                          border: "1px solid",
-                          borderColor: "rgba(26, 37, 54, 0.3)",
+                          color: 'primary.main',
+                          fontWeight: 'medium',
+                          border: '1px solid',
+                          borderColor: 'rgba(26, 37, 54, 0.3)',
                         }}
                       >
                         {connection.right}
@@ -410,54 +378,49 @@ const BackstoryUIOverviewPage: React.FC = () => {
             <Box
               sx={{
                 p: 3,
-                bgcolor: "background.paper",
+                bgcolor: 'background.paper',
                 borderRadius: 2,
                 boxShadow: 1,
               }}
             >
-              <Typography
-                variant="h5"
-                sx={{ color: "text.primary", mb: 3, fontWeight: "bold" }}
-              >
+              <Typography variant="h5" sx={{ color: 'text.primary', mb: 3, fontWeight: 'bold' }}>
                 Mobile Adaptation
               </Typography>
-              <Box sx={{ display: "flex", justifyContent: "center" }}>
+              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                 <Box
                   sx={{
                     width: 200,
                     height: 400,
-                    border: "4px solid",
-                    borderColor: "text.primary",
+                    border: '4px solid',
+                    borderColor: 'text.primary',
                     borderRadius: 5,
                     p: 1,
-                    bgcolor: "background.default",
+                    bgcolor: 'background.default',
                   }}
                 >
                   <Box
                     sx={{
-                      height: "100%",
-                      display: "flex",
-                      flexDirection: "column",
-                      border: "1px solid",
-                      borderColor: "divider",
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      border: '1px solid',
+                      borderColor: 'divider',
                       borderRadius: 4,
-                      overflow: "hidden",
+                      overflow: 'hidden',
                     }}
                   >
                     {/* Mobile header */}
                     <Box
                       sx={{
-                        bgcolor: "primary.main",
-                        color: "primary.contrastText",
+                        bgcolor: 'primary.main',
+                        color: 'primary.contrastText',
                         p: 1,
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
                       }}
                     >
-                      <Typography
-                        sx={{ fontWeight: "bold", fontSize: "0.875rem" }}
-                      >
+                      <Typography sx={{ fontWeight: 'bold', fontSize: '0.875rem' }}>
                         BACKSTORY
                       </Typography>
                       <Box>☰</Box>
@@ -468,96 +431,86 @@ const BackstoryUIOverviewPage: React.FC = () => {
                       sx={{
                         flex: 1,
                         p: 1.5,
-                        overflow: "auto",
-                        fontSize: "0.75rem",
+                        overflow: 'auto',
+                        fontSize: '0.75rem',
                       }}
                     >
-                      <Typography sx={{ mb: 1, fontWeight: "medium" }}>
+                      <Typography sx={{ mb: 1, fontWeight: 'medium' }}>
                         Welcome back, [Name]!
                       </Typography>
-                      <Typography sx={{ fontSize: "0.675rem", mb: 2 }}>
+                      <Typography sx={{ fontSize: '0.675rem', mb: 2 }}>
                         Profile: 75% complete
                       </Typography>
 
                       <Box
                         sx={{
-                          border: "1px solid",
-                          borderColor: "divider",
+                          border: '1px solid',
+                          borderColor: 'divider',
                           borderRadius: 1,
                           p: 1.5,
                           mb: 2,
-                          bgcolor: "background.paper",
+                          bgcolor: 'background.paper',
                         }}
                       >
                         <Typography
                           sx={{
-                            fontWeight: "bold",
-                            fontSize: "0.75rem",
+                            fontWeight: 'bold',
+                            fontSize: '0.75rem',
                             mb: 0.5,
                           }}
                         >
                           Resume Builder
                         </Typography>
-                        <Typography sx={{ fontSize: "0.675rem" }}>
-                          3 custom resumes
-                        </Typography>
+                        <Typography sx={{ fontSize: '0.675rem' }}>3 custom resumes</Typography>
                       </Box>
 
                       <Box
                         sx={{
-                          border: "1px solid",
-                          borderColor: "divider",
+                          border: '1px solid',
+                          borderColor: 'divider',
                           borderRadius: 1,
                           p: 1.5,
-                          bgcolor: "background.paper",
+                          bgcolor: 'background.paper',
                         }}
                       >
                         <Typography
                           sx={{
-                            fontWeight: "bold",
-                            fontSize: "0.75rem",
+                            fontWeight: 'bold',
+                            fontSize: '0.75rem',
                             mb: 0.5,
                           }}
                         >
                           Recent Activity
                         </Typography>
-                        <Typography sx={{ fontSize: "0.675rem" }}>
-                          • 5 profile views
-                        </Typography>
-                        <Typography sx={{ fontSize: "0.675rem" }}>
-                          • 2 downloads
-                        </Typography>
+                        <Typography sx={{ fontSize: '0.675rem' }}>• 5 profile views</Typography>
+                        <Typography sx={{ fontSize: '0.675rem' }}>• 2 downloads</Typography>
                       </Box>
                     </Box>
 
                     {/* Mobile footer */}
                     <Box
                       sx={{
-                        bgcolor: "background.default",
+                        bgcolor: 'background.default',
                         p: 1,
-                        display: "flex",
-                        justifyContent: "space-around",
-                        borderTop: "1px solid",
-                        borderColor: "divider",
+                        display: 'flex',
+                        justifyContent: 'space-around',
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
                       }}
                     >
                       <Typography
                         sx={{
-                          fontWeight: "bold",
-                          fontSize: "0.75rem",
-                          color: "secondary.main",
+                          fontWeight: 'bold',
+                          fontSize: '0.75rem',
+                          color: 'secondary.main',
                         }}
                       >
                         Home
                       </Typography>
-                      <Typography
-                        sx={{ fontSize: "0.75rem", color: "text.secondary" }}
-                      >
+                      <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
                         Profile
                       </Typography>
-                      <Typography
-                        sx={{ fontSize: "0.75rem", color: "text.secondary" }}
-                      >
+                      <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
                         More
                       </Typography>
                     </Box>
diff --git a/frontend/src/documents/MockupPage.tsx b/frontend/src/documents/MockupPage.tsx
index c4c07bb..bcab384 100644
--- a/frontend/src/documents/MockupPage.tsx
+++ b/frontend/src/documents/MockupPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   AppBar,
   Box,
@@ -18,7 +18,7 @@ import {
   Typography,
   useMediaQuery,
   useTheme,
-} from "@mui/material";
+} from '@mui/material';
 import {
   Menu as MenuIcon,
   Search as SearchIcon,
@@ -31,7 +31,7 @@ import {
   Save as SaveIcon,
   Delete as TrashIcon,
   AccessTime as ClockIcon,
-} from "@mui/icons-material";
+} from '@mui/icons-material';
 
 interface Resume {
   id: number;
@@ -42,8 +42,8 @@ interface Resume {
 
 const MockupPage = () => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const [activeTab, setActiveTab] = useState<string>("resume");
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [activeTab, setActiveTab] = useState<string>('resume');
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
   const [selectedResume, setSelectedResume] = useState<number | null>(null);
 
@@ -51,20 +51,20 @@ const MockupPage = () => {
   const savedResumes: Resume[] = [
     {
       id: 1,
-      name: "Software Engineer - Tech Co",
-      date: "May 15, 2025",
+      name: 'Software Engineer - Tech Co',
+      date: 'May 15, 2025',
       isRecent: true,
     },
     {
       id: 2,
-      name: "Product Manager - StartupX",
-      date: "May 10, 2025",
+      name: 'Product Manager - StartupX',
+      date: 'May 10, 2025',
       isRecent: false,
     },
     {
       id: 3,
-      name: "Data Scientist - AI Corp",
-      date: "May 5, 2025",
+      name: 'Data Scientist - AI Corp',
+      date: 'May 5, 2025',
       isRecent: false,
     },
   ];
@@ -72,10 +72,10 @@ const MockupPage = () => {
   return (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        bgcolor: "background.default",
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        bgcolor: 'background.default',
       }}
     >
       {/* Header */}
@@ -83,24 +83,19 @@ const MockupPage = () => {
         position="static"
         color="default"
         elevation={1}
-        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        sx={{ zIndex: theme => theme.zIndex.drawer + 1 }}
       >
         <Box
           sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
             px: 2,
             py: 1,
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <Typography
-              variant="h6"
-              component="h1"
-              fontWeight="bold"
-              color="text.primary"
-            >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Typography variant="h6" component="h1" fontWeight="bold" color="text.primary">
               Backstory
             </Typography>
             {isMobile && (
@@ -113,20 +108,20 @@ const MockupPage = () => {
               </IconButton>
             )}
           </Box>
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
             {!isMobile && (
               <Button startIcon={<PlusIcon />} color="primary" size="small">
                 New Resume
               </Button>
             )}
-            <IconButton sx={{ bgcolor: "action.hover", borderRadius: "50%" }}>
+            <IconButton sx={{ bgcolor: 'action.hover', borderRadius: '50%' }}>
               <UserIcon />
             </IconButton>
           </Box>
         </Box>
       </AppBar>
 
-      <Box sx={{ display: "flex", flex: 1, overflow: "hidden" }}>
+      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
         {/* Sidebar - hidden on mobile */}
         {!isMobile && (
           <Drawer
@@ -136,25 +131,21 @@ const MockupPage = () => {
               flexShrink: 0,
               [`& .MuiDrawer-paper`]: {
                 width: 240,
-                boxSizing: "border-box",
-                position: "relative",
+                boxSizing: 'border-box',
+                position: 'relative',
               },
             }}
           >
             <Box
               sx={{
                 p: 2,
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
               }}
             >
               <Box sx={{ mb: 3 }}>
-                <Typography
-                  variant="overline"
-                  color="text.secondary"
-                  gutterBottom
-                >
+                <Typography variant="overline" color="text.secondary" gutterBottom>
                   Main
                 </Typography>
                 <List disablePadding>
@@ -170,13 +161,11 @@ const MockupPage = () => {
                     <ListItemButton
                       sx={{
                         borderRadius: 1,
-                        bgcolor: "primary.lighter",
-                        color: "primary.main",
+                        bgcolor: 'primary.lighter',
+                        color: 'primary.main',
                       }}
                     >
-                      <ListItemIcon
-                        sx={{ minWidth: 36, color: "primary.main" }}
-                      >
+                      <ListItemIcon sx={{ minWidth: 36, color: 'primary.main' }}>
                         <FileTextIcon fontSize="small" />
                       </ListItemIcon>
                       <ListItemText primary="Resume Builder" />
@@ -186,11 +175,7 @@ const MockupPage = () => {
               </Box>
 
               <Box sx={{ mb: 3 }}>
-                <Typography
-                  variant="overline"
-                  color="text.secondary"
-                  gutterBottom
-                >
+                <Typography variant="overline" color="text.secondary" gutterBottom>
                   My Content
                 </Typography>
                 <List disablePadding>
@@ -218,27 +203,16 @@ const MockupPage = () => {
                 </List>
               </Box>
 
-              <Box sx={{ mt: "auto" }}>
-                <Paper
-                  variant="outlined"
-                  sx={{ p: 2, bgcolor: "background.default" }}
-                >
-                  <Typography
-                    variant="subtitle2"
-                    color="text.primary"
-                    gutterBottom
-                  >
+              <Box sx={{ mt: 'auto' }}>
+                <Paper variant="outlined" sx={{ p: 2, bgcolor: 'background.default' }}>
+                  <Typography variant="subtitle2" color="text.primary" gutterBottom>
                     Recent Activity
                   </Typography>
                   <List dense disablePadding>
                     {savedResumes
-                      .filter((r) => r.isRecent)
-                      .map((resume) => (
-                        <ListItem
-                          key={resume.id}
-                          disablePadding
-                          sx={{ mb: 0.5 }}
-                        >
+                      .filter(r => r.isRecent)
+                      .map(resume => (
+                        <ListItem key={resume.id} disablePadding sx={{ mb: 0.5 }}>
                           <ListItemIcon sx={{ minWidth: 24 }}>
                             <ClockIcon fontSize="small" />
                           </ListItemIcon>
@@ -260,24 +234,20 @@ const MockupPage = () => {
           open={isMobileMenuOpen}
           onClose={() => setIsMobileMenuOpen(false)}
           sx={{
-            display: { xs: "block", md: "none" },
-            "& .MuiDrawer-paper": { width: 240 },
+            display: { xs: 'block', md: 'none' },
+            '& .MuiDrawer-paper': { width: 240 },
           }}
         >
           <Box
             sx={{
               p: 2,
-              display: "flex",
-              flexDirection: "column",
-              height: "100%",
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
             }}
           >
             <Box sx={{ mb: 3 }}>
-              <Typography
-                variant="overline"
-                color="text.secondary"
-                gutterBottom
-              >
+              <Typography variant="overline" color="text.secondary" gutterBottom>
                 Main
               </Typography>
               <List disablePadding>
@@ -292,9 +262,9 @@ const MockupPage = () => {
                 <ListItem disablePadding>
                   <ListItemButton
                     onClick={() => setIsMobileMenuOpen(false)}
-                    sx={{ bgcolor: "primary.lighter", color: "primary.main" }}
+                    sx={{ bgcolor: 'primary.lighter', color: 'primary.main' }}
                   >
-                    <ListItemIcon sx={{ color: "primary.main" }}>
+                    <ListItemIcon sx={{ color: 'primary.main' }}>
                       <FileTextIcon fontSize="small" />
                     </ListItemIcon>
                     <ListItemText primary="Resume Builder" />
@@ -304,11 +274,7 @@ const MockupPage = () => {
             </Box>
 
             <Box sx={{ mb: 3 }}>
-              <Typography
-                variant="overline"
-                color="text.secondary"
-                gutterBottom
-              >
+              <Typography variant="overline" color="text.secondary" gutterBottom>
                 My Content
               </Typography>
               <List disablePadding>
@@ -339,15 +305,10 @@ const MockupPage = () => {
         </Drawer>
 
         {/* Main content */}
-        <Box sx={{ flex: 1, overflow: "auto", p: 3 }}>
+        <Box sx={{ flex: 1, overflow: 'auto', p: 3 }}>
           {/* Resume Builder content */}
           <Box sx={{ mb: 4 }}>
-            <Typography
-              variant="h5"
-              component="h2"
-              fontWeight="bold"
-              gutterBottom
-            >
+            <Typography variant="h5" component="h2" fontWeight="bold" gutterBottom>
               Resume Builder
             </Typography>
             <Typography variant="body2" color="text.secondary">
@@ -355,13 +316,13 @@ const MockupPage = () => {
             </Typography>
           </Box>
           {/* Tabs */}
-          <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 3 }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
             <Tabs
               value={activeTab}
               onChange={(_, newValue) => setActiveTab(newValue)}
               aria-label="Resume builder tabs"
-              variant={isMobile ? "scrollable" : "standard"}
-              scrollButtons={isMobile ? "auto" : undefined}
+              variant={isMobile ? 'scrollable' : 'standard'}
+              scrollButtons={isMobile ? 'auto' : undefined}
             >
               <Tab label="Job Description" value="job" />
               <Tab label="Resume" value="resume" />
@@ -370,7 +331,7 @@ const MockupPage = () => {
             </Tabs>
           </Box>
           {/* Tab content */}
-          {activeTab === "job" && (
+          {activeTab === 'job' && (
             <Paper variant="outlined" sx={{ p: 3 }}>
               <Typography variant="h6" gutterBottom>
                 Job Description
@@ -389,44 +350,36 @@ const MockupPage = () => {
               </Box>
             </Paper>
           )}
-          {activeTab === "resume" && (
+          {activeTab === 'resume' && (
             <Paper variant="outlined" sx={{ p: 3 }}>
               <Box
                 sx={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
                   mb: 3,
                 }}
               >
                 <Typography variant="h6">Resume Editor</Typography>
-                <Box sx={{ display: "flex", gap: 1 }}>
-                  <Button
-                    variant="outlined"
-                    size="small"
-                    startIcon={<SaveIcon />}
-                  >
+                <Box sx={{ display: 'flex', gap: 1 }}>
+                  <Button variant="outlined" size="small" startIcon={<SaveIcon />}>
                     Save
                   </Button>
-                  <Button
-                    variant="outlined"
-                    size="small"
-                    startIcon={<EyeIcon />}
-                  >
+                  <Button variant="outlined" size="small" startIcon={<EyeIcon />}>
                     Preview
                   </Button>
                 </Box>
               </Box>
 
               {/* Resume content editor with sections */}
-              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                 {/* Contact information */}
                 <Paper variant="outlined" sx={{ p: 2 }}>
                   <Box
                     sx={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                       mb: 2,
                     }}
                   >
@@ -439,8 +392,8 @@ const MockupPage = () => {
                   </Box>
                   <Box
                     sx={{
-                      display: "grid",
-                      gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+                      display: 'grid',
+                      gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
                       gap: 2,
                     }}
                   >
@@ -453,11 +406,7 @@ const MockupPage = () => {
                       >
                         Full Name
                       </Typography>
-                      <TextField
-                        size="small"
-                        fullWidth
-                        defaultValue="John Doe"
-                      />
+                      <TextField size="small" fullWidth defaultValue="John Doe" />
                     </Box>
                     <Box>
                       <Typography
@@ -468,11 +417,7 @@ const MockupPage = () => {
                       >
                         Email
                       </Typography>
-                      <TextField
-                        size="small"
-                        fullWidth
-                        defaultValue="john@example.com"
-                      />
+                      <TextField size="small" fullWidth defaultValue="john@example.com" />
                     </Box>
                   </Box>
                 </Paper>
@@ -481,9 +426,9 @@ const MockupPage = () => {
                 <Paper variant="outlined" sx={{ p: 2 }}>
                   <Box
                     sx={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                       mb: 2,
                     }}
                   >
@@ -507,36 +452,27 @@ const MockupPage = () => {
                 <Paper variant="outlined" sx={{ p: 2 }}>
                   <Box
                     sx={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                       mb: 2,
                     }}
                   >
                     <Typography variant="subtitle1" fontWeight="medium">
                       Work Experience
                     </Typography>
-                    <Button
-                      startIcon={<PlusIcon />}
-                      color="primary"
-                      size="small"
-                    >
+                    <Button startIcon={<PlusIcon />} color="primary" size="small">
                       Add Position
                     </Button>
                   </Box>
 
                   {/* Job entry */}
-                  <Paper
-                    variant="outlined"
-                    sx={{ p: 2, mb: 2, bgcolor: "background.default" }}
-                  >
-                    <Box
-                      sx={{ display: "flex", justifyContent: "space-between" }}
-                    >
+                  <Paper variant="outlined" sx={{ p: 2, mb: 2, bgcolor: 'background.default' }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                       <Typography variant="subtitle2" fontWeight="medium">
                         Senior Developer
                       </Typography>
-                      <Box sx={{ display: "flex", gap: 0.5 }}>
+                      <Box sx={{ display: 'flex', gap: 0.5 }}>
                         <IconButton size="small">
                           <EditIcon fontSize="small" />
                         </IconButton>
@@ -564,10 +500,10 @@ const MockupPage = () => {
                   variant="outlined"
                   fullWidth
                   sx={{
-                    borderStyle: "dashed",
+                    borderStyle: 'dashed',
                     p: 1.5,
-                    color: "text.secondary",
-                    "&:hover": { bgcolor: "background.default" },
+                    color: 'text.secondary',
+                    '&:hover': { bgcolor: 'background.default' },
                   }}
                   startIcon={<PlusIcon />}
                 >
@@ -575,53 +511,40 @@ const MockupPage = () => {
                 </Button>
               </Box>
             </Paper>
-          )}{" "}
-          {activeTab === "saved" && (
+          )}{' '}
+          {activeTab === 'saved' && (
             <Paper variant="outlined" sx={{ p: 3 }}>
               <Box
                 sx={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
                   mb: 3,
                 }}
               >
                 <Typography variant="h6">Saved Resumes</Typography>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  startIcon={<PlusIcon />}
-                >
+                <Button variant="contained" color="primary" size="small" startIcon={<PlusIcon />}>
                   New Resume
                 </Button>
               </Box>
 
               {/* Resume list */}
-              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                {savedResumes.map((resume) => (
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                {savedResumes.map(resume => (
                   <Paper
                     key={resume.id}
                     variant="outlined"
                     sx={{
                       p: 2,
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      cursor: "pointer",
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      cursor: 'pointer',
                       bgcolor:
-                        selectedResume === resume.id
-                          ? "primary.lighter"
-                          : "background.paper",
-                      borderColor:
-                        selectedResume === resume.id
-                          ? "primary.light"
-                          : "divider",
-                      "&:hover": {
-                        bgcolor:
-                          selectedResume === resume.id
-                            ? "primary.lighter"
-                            : "action.hover",
+                        selectedResume === resume.id ? 'primary.lighter' : 'background.paper',
+                      borderColor: selectedResume === resume.id ? 'primary.light' : 'divider',
+                      '&:hover': {
+                        bgcolor: selectedResume === resume.id ? 'primary.lighter' : 'action.hover',
                       },
                     }}
                     onClick={() => setSelectedResume(resume.id)}
@@ -632,7 +555,7 @@ const MockupPage = () => {
                         Last edited: {resume.date}
                       </Typography>
                     </Box>
-                    <Box sx={{ display: "flex", gap: 1 }}>
+                    <Box sx={{ display: 'flex', gap: 1 }}>
                       <IconButton size="small">
                         <EditIcon fontSize="small" />
                       </IconButton>
@@ -645,26 +568,18 @@ const MockupPage = () => {
               </Box>
             </Paper>
           )}
-          {activeTab === "fact" && (
+          {activeTab === 'fact' && (
             <Paper variant="outlined" sx={{ p: 3 }}>
               <Typography variant="h6" gutterBottom>
                 Fact Check
               </Typography>
               <Typography variant="body2" color="text.secondary" paragraph>
-                This tab shows how your resume content compares to your
-                employment history data.
+                This tab shows how your resume content compares to your employment history data.
               </Typography>
 
               <Box sx={{ mt: 2 }}>
-                <Paper
-                  variant="outlined"
-                  sx={{ p: 2, mb: 2, bgcolor: "success.lighter" }}
-                >
-                  <Typography
-                    variant="subtitle2"
-                    fontWeight="medium"
-                    color="success.dark"
-                  >
+                <Paper variant="outlined" sx={{ p: 2, mb: 2, bgcolor: 'success.lighter' }}>
+                  <Typography variant="subtitle2" fontWeight="medium" color="success.dark">
                     ✓ Work History Verification
                   </Typography>
                   <Typography variant="body2">
@@ -672,20 +587,13 @@ const MockupPage = () => {
                   </Typography>
                 </Paper>
 
-                <Paper
-                  variant="outlined"
-                  sx={{ p: 2, mb: 2, bgcolor: "warning.lighter" }}
-                >
-                  <Typography
-                    variant="subtitle2"
-                    fontWeight="medium"
-                    color="warning.dark"
-                  >
+                <Paper variant="outlined" sx={{ p: 2, mb: 2, bgcolor: 'warning.lighter' }}>
+                  <Typography variant="subtitle2" fontWeight="medium" color="warning.dark">
                     ⚠ Skills Verification
                   </Typography>
                   <Typography variant="body2">
-                    Some skills listed (React Native, Flutter) are not strongly
-                    supported by your experience documents.
+                    Some skills listed (React Native, Flutter) are not strongly supported by your
+                    experience documents.
                   </Typography>
                 </Paper>
               </Box>
@@ -698,26 +606,26 @@ const MockupPage = () => {
       {isMobile && (
         <Paper
           sx={{
-            position: "fixed",
+            position: 'fixed',
             bottom: 0,
             left: 0,
             right: 0,
-            display: "flex",
-            justifyContent: "space-around",
+            display: 'flex',
+            justifyContent: 'space-around',
             borderTop: 1,
-            borderColor: "divider",
+            borderColor: 'divider',
             zIndex: 1100,
           }}
           elevation={3}
         >
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
               py: 1,
               px: 2,
-              color: "text.secondary",
+              color: 'text.secondary',
             }}
             component="button"
           >
@@ -726,12 +634,12 @@ const MockupPage = () => {
           </Box>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
               py: 1,
               px: 2,
-              color: "primary.main",
+              color: 'primary.main',
             }}
             component="button"
           >
@@ -740,12 +648,12 @@ const MockupPage = () => {
           </Box>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
               py: 1,
               px: 2,
-              color: "text.secondary",
+              color: 'text.secondary',
             }}
             component="button"
           >
diff --git a/frontend/src/documents/UserManagement.tsx b/frontend/src/documents/UserManagement.tsx
index 32ac506..6e2d714 100644
--- a/frontend/src/documents/UserManagement.tsx
+++ b/frontend/src/documents/UserManagement.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   Box,
   Typography,
@@ -23,8 +23,8 @@ import {
   FormControl,
   InputLabel,
   Grid,
-} from "@mui/material";
-import { Person, Business, AssignmentInd } from "@mui/icons-material";
+} from '@mui/material';
+import { Person, Business, AssignmentInd } from '@mui/icons-material';
 
 // Interfaces from the data model
 interface BaseUser {
@@ -37,7 +37,7 @@ interface BaseUser {
 }
 
 interface Candidate extends BaseUser {
-  type: "candidate";
+  type: 'candidate';
   firstName: string;
   lastName: string;
   skills: { id: string; name: string; level: string }[];
@@ -45,7 +45,7 @@ interface Candidate extends BaseUser {
 }
 
 interface Employer extends BaseUser {
-  type: "employer";
+  type: 'employer';
   companyName: string;
   industry: string;
   companySize: string;
@@ -58,58 +58,58 @@ type User = Candidate | Employer;
 // Mock data
 const mockUsers: User[] = [
   {
-    id: "1",
-    email: "john.doe@example.com",
-    createdAt: new Date("2023-08-15"),
-    lastLogin: new Date("2023-10-22"),
+    id: '1',
+    email: 'john.doe@example.com',
+    createdAt: new Date('2023-08-15'),
+    lastLogin: new Date('2023-10-22'),
     isActive: true,
-    type: "candidate",
-    firstName: "John",
-    lastName: "Doe",
+    type: 'candidate',
+    firstName: 'John',
+    lastName: 'Doe',
     skills: [
-      { id: "s1", name: "React", level: "advanced" },
-      { id: "s2", name: "TypeScript", level: "intermediate" },
+      { id: 's1', name: 'React', level: 'advanced' },
+      { id: 's2', name: 'TypeScript', level: 'intermediate' },
     ],
-    location: { city: "Austin", country: "USA" },
+    location: { city: 'Austin', country: 'USA' },
   },
   {
-    id: "2",
-    email: "sarah.smith@example.com",
-    createdAt: new Date("2023-09-10"),
-    lastLogin: new Date("2023-10-24"),
+    id: '2',
+    email: 'sarah.smith@example.com',
+    createdAt: new Date('2023-09-10'),
+    lastLogin: new Date('2023-10-24'),
     isActive: true,
-    type: "candidate",
-    firstName: "Sarah",
-    lastName: "Smith",
+    type: 'candidate',
+    firstName: 'Sarah',
+    lastName: 'Smith',
     skills: [
-      { id: "s3", name: "Python", level: "expert" },
-      { id: "s4", name: "Data Science", level: "advanced" },
+      { id: 's3', name: 'Python', level: 'expert' },
+      { id: 's4', name: 'Data Science', level: 'advanced' },
     ],
-    location: { city: "Seattle", country: "USA", remote: true },
+    location: { city: 'Seattle', country: 'USA', remote: true },
   },
   {
-    id: "3",
-    email: "tech@acme.com",
-    createdAt: new Date("2023-07-05"),
-    lastLogin: new Date("2023-10-23"),
+    id: '3',
+    email: 'tech@acme.com',
+    createdAt: new Date('2023-07-05'),
+    lastLogin: new Date('2023-10-23'),
     isActive: true,
-    type: "employer",
-    companyName: "Acme Tech",
-    industry: "Software",
-    companySize: "50-200",
-    location: { city: "San Francisco", country: "USA" },
+    type: 'employer',
+    companyName: 'Acme Tech',
+    industry: 'Software',
+    companySize: '50-200',
+    location: { city: 'San Francisco', country: 'USA' },
   },
   {
-    id: "4",
-    email: "careers@globex.com",
-    createdAt: new Date("2023-08-20"),
-    lastLogin: new Date("2023-10-20"),
+    id: '4',
+    email: 'careers@globex.com',
+    createdAt: new Date('2023-08-20'),
+    lastLogin: new Date('2023-10-20'),
     isActive: false,
-    type: "employer",
-    companyName: "Globex Corporation",
-    industry: "Manufacturing",
-    companySize: "1000+",
-    location: { city: "Chicago", country: "USA" },
+    type: 'employer',
+    companyName: 'Globex Corporation',
+    industry: 'Manufacturing',
+    companySize: '1000+',
+    location: { city: 'Chicago', country: 'USA' },
   },
 ];
 
@@ -127,10 +127,10 @@ const UserManagement: React.FC = () => {
   };
 
   // Filter users based on tab value
-  const filteredUsers = users.filter((user) => {
+  const filteredUsers = users.filter(user => {
     if (tabValue === 0) return true;
-    if (tabValue === 1) return user.type === "candidate";
-    if (tabValue === 2) return user.type === "employer";
+    if (tabValue === 1) return user.type === 'candidate';
+    if (tabValue === 2) return user.type === 'employer';
     return false;
   });
 
@@ -159,7 +159,7 @@ const UserManagement: React.FC = () => {
 
   // Helper function to get user's name for display
   const getUserDisplayName = (user: User) => {
-    if (user.type === "candidate") {
+    if (user.type === 'candidate') {
       return `${user.firstName} ${user.lastName}`;
     } else {
       return user.companyName;
@@ -172,8 +172,8 @@ const UserManagement: React.FC = () => {
   };
 
   return (
-    <Box sx={{ width: "100%", p: 3 }}>
-      <Paper sx={{ width: "100%", mb: 2 }}>
+    <Box sx={{ width: '100%', p: 3 }}>
+      <Paper sx={{ width: '100%', mb: 2 }}>
         <Tabs
           value={tabValue}
           onChange={handleTabChange}
@@ -200,17 +200,14 @@ const UserManagement: React.FC = () => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {filteredUsers.map((user) => (
-                <TableRow
-                  key={user.id}
-                  sx={{ "& > td": { whiteSpace: "nowrap" } }}
-                >
+              {filteredUsers.map(user => (
+                <TableRow key={user.id} sx={{ '& > td': { whiteSpace: 'nowrap' } }}>
                   <TableCell>
                     <Box
                       sx={{
-                        display: "flex",
-                        alignItems: "flex-start",
-                        flexDirection: "column",
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        flexDirection: 'column',
                       }}
                     >
                       <Typography>{getUserDisplayName(user)}</Typography>
@@ -218,12 +215,8 @@ const UserManagement: React.FC = () => {
                   </TableCell>
                   <TableCell>
                     <Chip
-                      label={
-                        user.type === "candidate" ? "Candidate" : "Employer"
-                      }
-                      color={
-                        user.type === "candidate" ? "primary" : "secondary"
-                      }
+                      label={user.type === 'candidate' ? 'Candidate' : 'Employer'}
+                      color={user.type === 'candidate' ? 'primary' : 'secondary'}
                       size="small"
                     />
                   </TableCell>
@@ -237,8 +230,8 @@ const UserManagement: React.FC = () => {
                   <TableCell>{formatDate(user.lastLogin)}</TableCell>
                   <TableCell>
                     <Chip
-                      label={user.isActive ? "Active" : "Inactive"}
-                      color={user.isActive ? "success" : "error"}
+                      label={user.isActive ? 'Active' : 'Inactive'}
+                      color={user.isActive ? 'success' : 'error'}
                       size="small"
                     />
                   </TableCell>
@@ -268,26 +261,17 @@ const UserManagement: React.FC = () => {
       </Paper>
 
       {/* User Details Dialog */}
-      <Dialog
-        open={openDialog}
-        onClose={handleCloseDialog}
-        maxWidth="md"
-        fullWidth
-      >
+      <Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="md" fullWidth>
         {selectedUser && (
           <>
             <DialogTitle>
-              {selectedUser.type === "candidate"
-                ? "Candidate Details"
-                : "Employer Details"}
+              {selectedUser.type === 'candidate' ? 'Candidate Details' : 'Employer Details'}
             </DialogTitle>
             <DialogContent dividers>
-              {selectedUser.type === "candidate" ? (
+              {selectedUser.type === 'candidate' ? (
                 <Grid container spacing={2}>
                   <Grid size={{ xs: 12, md: 6 }}>
-                    <Typography variant="subtitle1">
-                      Personal Information
-                    </Typography>
+                    <Typography variant="subtitle1">Personal Information</Typography>
                     <TextField
                       label="First Name"
                       value={selectedUser.firstName}
@@ -313,7 +297,7 @@ const UserManagement: React.FC = () => {
                   <Grid size={{ xs: 12, md: 6 }}>
                     <Typography variant="subtitle1">Skills</Typography>
                     <Box sx={{ mt: 2 }}>
-                      {selectedUser.skills.map((skill) => (
+                      {selectedUser.skills.map(skill => (
                         <Chip
                           key={skill.id}
                           label={`${skill.name} (${skill.level})`}
@@ -326,9 +310,7 @@ const UserManagement: React.FC = () => {
               ) : (
                 <Grid container spacing={2}>
                   <Grid size={{ xs: 12, md: 6 }}>
-                    <Typography variant="subtitle1">
-                      Company Information
-                    </Typography>
+                    <Typography variant="subtitle1">Company Information</Typography>
                     <TextField
                       label="Company Name"
                       value={selectedUser.companyName}
@@ -352,9 +334,7 @@ const UserManagement: React.FC = () => {
                     />
                   </Grid>
                   <Grid size={{ xs: 12, md: 6 }}>
-                    <Typography variant="subtitle1">
-                      Contact Information
-                    </Typography>
+                    <Typography variant="subtitle1">Contact Information</Typography>
                     <TextField
                       label="Email"
                       value={selectedUser.email}
@@ -381,26 +361,17 @@ const UserManagement: React.FC = () => {
       </Dialog>
 
       {/* AI Config Dialog */}
-      <Dialog
-        open={aiConfigOpen}
-        onClose={handleCloseAiConfig}
-        maxWidth="md"
-        fullWidth
-      >
+      <Dialog open={aiConfigOpen} onClose={handleCloseAiConfig} maxWidth="md" fullWidth>
         {selectedUser && (
           <>
-            <DialogTitle>
-              AI Configuration for {getUserDisplayName(selectedUser)}
-            </DialogTitle>
+            <DialogTitle>AI Configuration for {getUserDisplayName(selectedUser)}</DialogTitle>
             <DialogContent dividers>
               <Typography variant="subtitle1" gutterBottom>
                 RAG Database Configuration
               </Typography>
 
               <FormControl fullWidth margin="normal">
-                <InputLabel id="embedding-model-label">
-                  Embedding Model
-                </InputLabel>
+                <InputLabel id="embedding-model-label">Embedding Model</InputLabel>
                 <Select
                   labelId="embedding-model-label"
                   label="Embedding Model"
@@ -414,11 +385,7 @@ const UserManagement: React.FC = () => {
 
               <FormControl fullWidth margin="normal">
                 <InputLabel id="vector-store-label">Vector Store</InputLabel>
-                <Select
-                  labelId="vector-store-label"
-                  label="Vector Store"
-                  defaultValue="pinecone"
-                >
+                <Select labelId="vector-store-label" label="Vector Store" defaultValue="pinecone">
                   <MenuItem value="pinecone">Pinecone</MenuItem>
                   <MenuItem value="qdrant">Qdrant</MenuItem>
                   <MenuItem value="faiss">FAISS</MenuItem>
@@ -433,11 +400,7 @@ const UserManagement: React.FC = () => {
                 <Grid size={{ xs: 12, md: 6 }}>
                   <FormControl fullWidth margin="normal">
                     <InputLabel id="model-label">AI Model</InputLabel>
-                    <Select
-                      labelId="model-label"
-                      label="AI Model"
-                      defaultValue="gpt-4"
-                    >
+                    <Select labelId="model-label" label="AI Model" defaultValue="gpt-4">
                       <MenuItem value="gpt-4">GPT-4</MenuItem>
                       <MenuItem value="claude-3">Claude 3</MenuItem>
                       <MenuItem value="custom">Custom</MenuItem>
@@ -482,9 +445,9 @@ const UserManagement: React.FC = () => {
                 fullWidth
                 margin="normal"
                 defaultValue={`You are an AI assistant helping ${
-                  selectedUser.type === "candidate"
-                    ? "job candidates find relevant positions"
-                    : "employers find qualified candidates"
+                  selectedUser.type === 'candidate'
+                    ? 'job candidates find relevant positions'
+                    : 'employers find qualified candidates'
                 }. Be professional, helpful, and concise in your responses.`}
               />
 
diff --git a/frontend/src/hooks/AuthContext.tsx b/frontend/src/hooks/AuthContext.tsx
index a88d091..5baaa41 100644
--- a/frontend/src/hooks/AuthContext.tsx
+++ b/frontend/src/hooks/AuthContext.tsx
@@ -1,21 +1,14 @@
 // Replace the existing AuthContext.tsx with these enhancements
 
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
-import * as Types from "../types/types";
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import * as Types from '../types/types';
 import {
   ApiClient,
   CreateCandidateRequest,
   CreateEmployerRequest,
   GuestConversionRequest,
-} from "services/api-client";
-import { formatApiRequest, toCamelCase } from "types/conversion";
+} from 'services/api-client';
+import { formatApiRequest, toCamelCase } from 'types/conversion';
 
 // ============================
 // Enhanced Types and Interfaces
@@ -54,13 +47,13 @@ interface PasswordResetRequest {
 // ============================
 
 const TOKEN_STORAGE = {
-  ACCESS_TOKEN: "accessToken",
-  REFRESH_TOKEN: "refreshToken",
-  USER_DATA: "userData",
-  TOKEN_EXPIRY: "tokenExpiry",
-  USER_TYPE: "userType",
-  IS_GUEST: "isGuest",
-  PENDING_VERIFICATION_EMAIL: "pendingVerificationEmail",
+  ACCESS_TOKEN: 'accessToken',
+  REFRESH_TOKEN: 'refreshToken',
+  USER_DATA: 'userData',
+  TOKEN_EXPIRY: 'tokenExpiry',
+  USER_TYPE: 'userType',
+  IS_GUEST: 'isGuest',
+  PENDING_VERIFICATION_EMAIL: 'pendingVerificationEmail',
 } as const;
 
 // ============================
@@ -69,17 +62,17 @@ const TOKEN_STORAGE = {
 
 function parseJwtPayload(token: string): any {
   try {
-    const base64Url = token.split(".")[1];
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
     const jsonPayload = decodeURIComponent(
       atob(base64)
-        .split("")
-        .map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
-        .join("")
+        .split('')
+        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
     );
     return JSON.parse(jsonPayload);
   } catch (error) {
-    console.error("Failed to parse JWT token:", error);
+    console.error('Failed to parse JWT token:', error);
     return null;
   }
 }
@@ -117,7 +110,7 @@ function prepareUserDataForStorage(user: Types.User): string {
     const userForStorage = formatApiRequest(user);
     return JSON.stringify(userForStorage);
   } catch (error) {
-    console.error("Failed to prepare user data for storage:", error);
+    console.error('Failed to prepare user data for storage:', error);
     return JSON.stringify(user); // Fallback to direct serialization
   }
 }
@@ -131,36 +124,24 @@ function parseStoredUserData(userDataStr: string): Types.User | null {
 
     return convertedData;
   } catch (error) {
-    console.error("Failed to parse stored user data:", error);
+    console.error('Failed to parse stored user data:', error);
     return null;
   }
 }
 
 function updateStoredUserData(user: Types.User): void {
   try {
-    localStorage.setItem(
-      TOKEN_STORAGE.USER_DATA,
-      prepareUserDataForStorage(user)
-    );
+    localStorage.setItem(TOKEN_STORAGE.USER_DATA, prepareUserDataForStorage(user));
   } catch (error) {
-    console.error("Failed to update stored user data:", error);
+    console.error('Failed to update stored user data:', error);
   }
 }
 
-function storeAuthData(
-  authResponse: Types.AuthResponse,
-  isGuest = false
-): void {
+function storeAuthData(authResponse: Types.AuthResponse, isGuest = false): void {
   localStorage.setItem(TOKEN_STORAGE.ACCESS_TOKEN, authResponse.accessToken);
   localStorage.setItem(TOKEN_STORAGE.REFRESH_TOKEN, authResponse.refreshToken);
-  localStorage.setItem(
-    TOKEN_STORAGE.USER_DATA,
-    prepareUserDataForStorage(authResponse.user)
-  );
-  localStorage.setItem(
-    TOKEN_STORAGE.TOKEN_EXPIRY,
-    authResponse.expiresAt.toString()
-  );
+  localStorage.setItem(TOKEN_STORAGE.USER_DATA, prepareUserDataForStorage(authResponse.user));
+  localStorage.setItem(TOKEN_STORAGE.TOKEN_EXPIRY, authResponse.expiresAt.toString());
   localStorage.setItem(TOKEN_STORAGE.USER_TYPE, authResponse.user.userType);
   localStorage.setItem(TOKEN_STORAGE.IS_GUEST, isGuest.toString());
 }
@@ -191,7 +172,7 @@ function getStoredAuthData(): {
       expiresAt = parseInt(expiryStr, 10);
     }
   } catch (error) {
-    console.error("Failed to parse stored auth data:", error);
+    console.error('Failed to parse stored auth data:', error);
     clearStoredAuth();
   }
 
@@ -201,7 +182,7 @@ function getStoredAuthData(): {
     userData,
     expiresAt,
     userType,
-    isGuest: isGuestStr === "true",
+    isGuest: isGuestStr === 'true',
   };
 }
 
@@ -232,7 +213,7 @@ function useAuthenticationLogic() {
         const response = await apiClient.refreshToken(refreshToken);
         return response;
       } catch (error) {
-        console.error("Token refresh failed:", error);
+        console.error('Token refresh failed:', error);
         return null;
       }
     },
@@ -248,10 +229,10 @@ function useAuthenticationLogic() {
     guestCreationAttempted.current = true;
 
     try {
-      console.log("🔄 Creating guest session...");
+      console.log('🔄 Creating guest session...');
       const guestAuth = await apiClient.createGuestSession();
 
-      if (guestAuth && guestAuth.user && guestAuth.user.userType === "guest") {
+      if (guestAuth && guestAuth.user && guestAuth.user.userType === 'guest') {
         storeAuthData(guestAuth, true);
         apiClient.setAuthToken(guestAuth.accessToken);
 
@@ -266,17 +247,17 @@ function useAuthenticationLogic() {
           mfaResponse: null,
         });
 
-        console.log("👤 Guest session created successfully:", guestAuth.user);
+        console.log('👤 Guest session created successfully:', guestAuth.user);
         return true;
       }
 
       return false;
     } catch (error) {
-      console.error("❌ Failed to create guest session:", error);
+      console.error('❌ Failed to create guest session:', error);
       guestCreationAttempted.current = false;
 
       // Set to unauthenticated state if guest creation fails
-      setAuthState((prev) => ({
+      setAuthState(prev => ({
         ...prev,
         user: null,
         guest: null,
@@ -284,7 +265,7 @@ function useAuthenticationLogic() {
         isGuest: false,
         isLoading: false,
         isInitializing: false,
-        error: "Failed to create guest session",
+        error: 'Failed to create guest session',
       }));
 
       return false;
@@ -302,35 +283,28 @@ function useAuthenticationLogic() {
 
       // If no stored tokens, create guest session
       if (!stored.accessToken || !stored.refreshToken || !stored.userData) {
-        console.log("🔄 No stored auth found, creating guest session...");
+        console.log('🔄 No stored auth found, creating guest session...');
         await createGuestSession();
         return;
       }
 
       // For guests, always verify the session exists on server
-      if (stored.userType === "guest" && stored.userData) {
+      if (stored.userType === 'guest' && stored.userData) {
         console.log(stored.userData);
         try {
           // Make a quick API call to verify guest still exists
-          const response = await fetch(
-            `${apiClient.getBaseUrl()}/users/${stored.userData.id}`,
-            {
-              headers: { Authorization: `Bearer ${stored.accessToken}` },
-            }
-          );
+          const response = await fetch(`${apiClient.getBaseUrl()}/users/${stored.userData.id}`, {
+            headers: { Authorization: `Bearer ${stored.accessToken}` },
+          });
 
           if (!response.ok) {
-            console.log(
-              "🔄 Guest session invalid, creating new guest session..."
-            );
+            console.log('🔄 Guest session invalid, creating new guest session...');
             clearStoredAuth();
             await createGuestSession();
             return;
           }
         } catch (error) {
-          console.log(
-            "🔄 Guest verification failed, creating new guest session..."
-          );
+          console.log('🔄 Guest verification failed, creating new guest session...');
           clearStoredAuth();
           await createGuestSession();
           return;
@@ -339,12 +313,12 @@ function useAuthenticationLogic() {
 
       // Check if access token is expired
       if (isTokenExpired(stored.accessToken)) {
-        console.log("🔄 Access token expired, attempting refresh...");
+        console.log('🔄 Access token expired, attempting refresh...');
 
         const refreshResult = await refreshAccessToken(stored.refreshToken);
 
         if (refreshResult) {
-          const isGuest = stored.userType === "guest";
+          const isGuest = stored.userType === 'guest';
           storeAuthData(refreshResult, isGuest);
           apiClient.setAuthToken(refreshResult.accessToken);
 
@@ -359,9 +333,9 @@ function useAuthenticationLogic() {
             mfaResponse: null,
           });
 
-          console.log("✅ Token refreshed successfully");
+          console.log('✅ Token refreshed successfully');
         } else {
-          console.log("❌ Token refresh failed, creating new guest session...");
+          console.log('❌ Token refresh failed, creating new guest session...');
           clearStoredAuth();
           apiClient.clearAuthToken();
           await createGuestSession();
@@ -369,7 +343,7 @@ function useAuthenticationLogic() {
       } else {
         // Access token is still valid
         apiClient.setAuthToken(stored.accessToken);
-        const isGuest = stored.userType === "guest";
+        const isGuest = stored.userType === 'guest';
 
         setAuthState({
           user: isGuest ? null : stored.userData,
@@ -382,10 +356,10 @@ function useAuthenticationLogic() {
           mfaResponse: null,
         });
 
-        console.log("✅ Restored authentication from stored tokens");
+        console.log('✅ Restored authentication from stored tokens');
       }
     } catch (error) {
-      console.error("❌ Error initializing auth:", error);
+      console.error('❌ Error initializing auth:', error);
       clearStoredAuth();
       apiClient.clearAuthToken();
       await createGuestSession();
@@ -420,7 +394,7 @@ function useAuthenticationLogic() {
     }
 
     const refreshTimer = setTimeout(() => {
-      console.log("🔄 Auto-refreshing token before expiry...");
+      console.log('🔄 Auto-refreshing token before expiry...');
       initializeAuth();
     }, timeUntilExpiry);
 
@@ -430,7 +404,7 @@ function useAuthenticationLogic() {
   // Enhanced login with MFA support
   const login = useCallback(
     async (loginData: LoginRequest): Promise<boolean> => {
-      setAuthState((prev) => ({
+      setAuthState(prev => ({
         ...prev,
         isLoading: true,
         error: null,
@@ -443,9 +417,9 @@ function useAuthenticationLogic() {
           password: loginData.password,
         });
 
-        if ("mfaRequired" in result) {
+        if ('mfaRequired' in result) {
           // MFA required for new device
-          setAuthState((prev) => ({
+          setAuthState(prev => ({
             ...prev,
             isLoading: false,
             mfaResponse: result,
@@ -457,7 +431,7 @@ function useAuthenticationLogic() {
           storeAuthData(authResponse, false);
           apiClient.setAuthToken(authResponse.accessToken);
 
-          setAuthState((prev) => ({
+          setAuthState(prev => ({
             ...prev,
             user: authResponse.user,
             guest: null,
@@ -468,17 +442,13 @@ function useAuthenticationLogic() {
             mfaResponse: null,
           }));
 
-          console.log(
-            "✅ Login successful, converted from guest to authenticated user"
-          );
+          console.log('✅ Login successful, converted from guest to authenticated user');
           return true;
         }
       } catch (error: any) {
         const errorMessage =
-          error instanceof Error
-            ? error.message
-            : "Network error occurred. Please try again.";
-        setAuthState((prev) => ({
+          error instanceof Error ? error.message : 'Network error occurred. Please try again.';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -494,10 +464,10 @@ function useAuthenticationLogic() {
   const convertGuestToUser = useCallback(
     async (registrationData: GuestConversionRequest): Promise<boolean> => {
       if (!authState.isGuest || !authState.guest) {
-        throw new Error("Not currently a guest user");
+        throw new Error('Not currently a guest user');
       }
 
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         const result = await apiClient.convertGuestToUser(registrationData);
@@ -506,7 +476,7 @@ function useAuthenticationLogic() {
         storeAuthData(result.auth, false);
         apiClient.setAuthToken(result.auth.accessToken);
 
-        setAuthState((prev) => ({
+        setAuthState(prev => ({
           ...prev,
           user: result.auth.user,
           guest: null,
@@ -516,14 +486,12 @@ function useAuthenticationLogic() {
           error: null,
         }));
 
-        console.log("✅ Guest successfully converted to permanent user");
+        console.log('✅ Guest successfully converted to permanent user');
         return true;
       } catch (error: any) {
         const errorMessage =
-          error instanceof Error
-            ? error.message
-            : "Failed to convert guest account";
-        setAuthState((prev) => ({
+          error instanceof Error ? error.message : 'Failed to convert guest account';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -537,7 +505,7 @@ function useAuthenticationLogic() {
   // MFA verification
   const verifyMFA = useCallback(
     async (mfaData: Types.MFAVerifyRequest): Promise<boolean> => {
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         const result = await apiClient.verifyMFA(mfaData);
@@ -547,7 +515,7 @@ function useAuthenticationLogic() {
           storeAuthData(authResponse, false);
           apiClient.setAuthToken(authResponse.accessToken);
 
-          setAuthState((prev) => ({
+          setAuthState(prev => ({
             ...prev,
             user: authResponse.user,
             guest: null,
@@ -558,15 +526,14 @@ function useAuthenticationLogic() {
             mfaResponse: null,
           }));
 
-          console.log("✅ MFA verification successful, converted from guest");
+          console.log('✅ MFA verification successful, converted from guest');
           return true;
         }
 
         return false;
       } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : "MFA verification failed";
-        setAuthState((prev) => ({
+        const errorMessage = error instanceof Error ? error.message : 'MFA verification failed';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -587,14 +554,12 @@ function useAuthenticationLogic() {
           try {
             await apiClient.logout(stored.accessToken, stored.refreshToken);
           } catch (error) {
-            console.warn(
-              "Logout request failed, proceeding with local cleanup"
-            );
+            console.warn('Logout request failed, proceeding with local cleanup');
           }
         }
       }
     } catch (error) {
-      console.warn("Error during logout:", error);
+      console.warn('Error during logout:', error);
     } finally {
       // Always clear stored auth and create new guest session
       clearStoredAuth();
@@ -604,25 +569,20 @@ function useAuthenticationLogic() {
       // Create new guest session
       await createGuestSession();
 
-      console.log("🔄 Logged out, created new guest session");
+      console.log('🔄 Logged out, created new guest session');
     }
-  }, [
-    apiClient,
-    authState.isAuthenticated,
-    authState.isGuest,
-    createGuestSession,
-  ]);
+  }, [apiClient, authState.isAuthenticated, authState.isGuest, createGuestSession]);
 
   // Update user data
   const updateUserData = useCallback(
     (updatedUser: Types.User) => {
       updateStoredUserData(updatedUser);
-      setAuthState((prev) => ({
+      setAuthState(prev => ({
         ...prev,
         user: authState.isGuest ? null : updatedUser,
         guest: authState.isGuest ? (updatedUser as Types.Guest) : prev.guest,
       }));
-      console.log("✅ User data updated");
+      console.log('✅ User data updated');
     },
     [authState.isGuest]
   );
@@ -630,19 +590,18 @@ function useAuthenticationLogic() {
   // Email verification functions (unchanged)
   const verifyEmail = useCallback(
     async (verificationData: EmailVerificationRequest) => {
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         const result = await apiClient.verifyEmail(verificationData);
-        setAuthState((prev) => ({ ...prev, isLoading: false }));
+        setAuthState(prev => ({ ...prev, isLoading: false }));
         return {
-          message: result.message || "Email verified successfully",
-          userType: result.userType || "user",
+          message: result.message || 'Email verified successfully',
+          userType: result.userType || 'user',
         };
       } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Email verification failed";
-        setAuthState((prev) => ({
+        const errorMessage = error instanceof Error ? error.message : 'Email verification failed';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -656,18 +615,16 @@ function useAuthenticationLogic() {
   // Other existing methods remain the same...
   const resendEmailVerification = useCallback(
     async (email: string): Promise<boolean> => {
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         await apiClient.resendVerificationEmail({ email });
-        setAuthState((prev) => ({ ...prev, isLoading: false }));
+        setAuthState(prev => ({ ...prev, isLoading: false }));
         return true;
       } catch (error) {
         const errorMessage =
-          error instanceof Error
-            ? error.message
-            : "Failed to resend verification email";
-        setAuthState((prev) => ({
+          error instanceof Error ? error.message : 'Failed to resend verification email';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -688,20 +645,19 @@ function useAuthenticationLogic() {
 
   const createEmployerAccount = useCallback(
     async (employerData: CreateEmployerRequest): Promise<boolean> => {
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         const employer = await apiClient.createEmployer(employerData);
-        console.log("✅ Employer created:", employer);
+        console.log('✅ Employer created:', employer);
 
         setPendingVerificationEmail(employerData.email);
 
-        setAuthState((prev) => ({ ...prev, isLoading: false }));
+        setAuthState(prev => ({ ...prev, isLoading: false }));
         return true;
       } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Account creation failed";
-        setAuthState((prev) => ({
+        const errorMessage = error instanceof Error ? error.message : 'Account creation failed';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -714,18 +670,16 @@ function useAuthenticationLogic() {
 
   const requestPasswordReset = useCallback(
     async (email: string): Promise<boolean> => {
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         await apiClient.requestPasswordReset({ email });
-        setAuthState((prev) => ({ ...prev, isLoading: false }));
+        setAuthState(prev => ({ ...prev, isLoading: false }));
         return true;
       } catch (error) {
         const errorMessage =
-          error instanceof Error
-            ? error.message
-            : "Password reset request failed";
-        setAuthState((prev) => ({
+          error instanceof Error ? error.message : 'Password reset request failed';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -742,16 +696,16 @@ function useAuthenticationLogic() {
       return false;
     }
 
-    setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+    setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
     const refreshResult = await refreshAccessToken(stored.refreshToken);
 
     if (refreshResult) {
-      const isGuest = stored.userType === "guest";
+      const isGuest = stored.userType === 'guest';
       storeAuthData(refreshResult, isGuest);
       apiClient.setAuthToken(refreshResult.accessToken);
 
-      setAuthState((prev) => ({
+      setAuthState(prev => ({
         ...prev,
         user: isGuest ? null : refreshResult.user,
         guest: isGuest ? (refreshResult.user as Types.Guest) : null,
@@ -770,27 +724,22 @@ function useAuthenticationLogic() {
 
   // Resend MFA code
   const resendMFACode = useCallback(
-    async (
-      email: string,
-      deviceId: string,
-      deviceName: string
-    ): Promise<boolean> => {
-      setAuthState((prev) => ({ ...prev, isLoading: true, error: null }));
+    async (email: string, deviceId: string, deviceName: string): Promise<boolean> => {
+      setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
 
       try {
         await apiClient.requestMFA({
           email,
-          password: "", // This would need to be stored securely or re-entered
+          password: '', // This would need to be stored securely or re-entered
           deviceId,
           deviceName,
         });
 
-        setAuthState((prev) => ({ ...prev, isLoading: false }));
+        setAuthState(prev => ({ ...prev, isLoading: false }));
         return true;
       } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : "Failed to resend MFA code";
-        setAuthState((prev) => ({
+        const errorMessage = error instanceof Error ? error.message : 'Failed to resend MFA code';
+        setAuthState(prev => ({
           ...prev,
           isLoading: false,
           error: errorMessage,
@@ -803,7 +752,7 @@ function useAuthenticationLogic() {
 
   // Clear MFA state
   const clearMFA = useCallback(() => {
-    setAuthState((prev) => ({
+    setAuthState(prev => ({
       ...prev,
       mfaResponse: null,
       error: null,
@@ -835,9 +784,7 @@ function useAuthenticationLogic() {
 // Enhanced Context Provider
 // ============================
 
-const AuthContext = createContext<ReturnType<
-  typeof useAuthenticationLogic
-> | null>(null);
+const AuthContext = createContext<ReturnType<typeof useAuthenticationLogic> | null>(null);
 
 function AuthProvider({ children }: { children: React.ReactNode }) {
   const auth = useAuthenticationLogic();
@@ -848,7 +795,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
 function useAuth() {
   const context = useContext(AuthContext);
   if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
+    throw new Error('useAuth must be used within an AuthProvider');
   }
   return context;
 }
@@ -904,9 +851,6 @@ export type {
   GuestConversionRequest,
 };
 
-export type {
-  CreateCandidateRequest,
-  CreateEmployerRequest,
-} from "../services/api-client";
+export type { CreateCandidateRequest, CreateEmployerRequest } from '../services/api-client';
 
 export { useAuthenticationLogic, AuthProvider, useAuth, ProtectedRoute };
diff --git a/frontend/src/hooks/GlobalContext.tsx b/frontend/src/hooks/GlobalContext.tsx
index d96e935..946b66d 100644
--- a/frontend/src/hooks/GlobalContext.tsx
+++ b/frontend/src/hooks/GlobalContext.tsx
@@ -1,30 +1,23 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
-import * as Types from "types/types";
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import * as Types from 'types/types';
 // Assuming you're using React Router
-import { useLocation, useNavigate } from "react-router-dom";
-import { useAuth } from "hooks/AuthContext";
-import { SetSnackType, SeverityType, Snack } from "components/Snack";
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from 'hooks/AuthContext';
+import { SetSnackType, SeverityType, Snack } from 'components/Snack';
 
 // ============================
 // Storage Keys
 // ============================
 
 const STORAGE_KEYS = {
-  SELECTED_CANDIDATE_ID: "selectedCandidateId",
-  SELECTED_JOB_ID: "selectedJobId",
-  SELECTED_EMPLOYER_ID: "selectedEmployerId",
-  LAST_ROUTE: "lastVisitedRoute",
-  ROUTE_STATE: "routeState",
-  ACTIVE_TAB: "activeTab",
-  APPLIED_FILTERS: "appliedFilters",
-  SIDEBAR_COLLAPSED: "sidebarCollapsed",
+  SELECTED_CANDIDATE_ID: 'selectedCandidateId',
+  SELECTED_JOB_ID: 'selectedJobId',
+  SELECTED_EMPLOYER_ID: 'selectedEmployerId',
+  LAST_ROUTE: 'lastVisitedRoute',
+  ROUTE_STATE: 'routeState',
+  ACTIVE_TAB: 'activeTab',
+  APPLIED_FILTERS: 'appliedFilters',
+  SIDEBAR_COLLAPSED: 'sidebarCollapsed',
 } as const;
 
 // ============================
@@ -81,7 +74,7 @@ function getStoredId(key: string): string | null {
   try {
     return localStorage.getItem(key);
   } catch (error) {
-    console.warn("Failed to read from localStorage:", error);
+    console.warn('Failed to read from localStorage:', error);
     return null;
   }
 }
@@ -94,7 +87,7 @@ function setStoredId(key: string, id: string | null): void {
       localStorage.removeItem(key);
     }
   } catch (error) {
-    console.warn("Failed to write to localStorage:", error);
+    console.warn('Failed to write to localStorage:', error);
   }
 }
 
@@ -146,19 +139,14 @@ export function useAppStateLogic(): AppStateContextType {
   const { apiClient } = useAuth();
 
   // Entity state
-  const [selectedCandidate, setSelectedCandidateState] =
-    useState<Types.Candidate | null>(null);
+  const [selectedCandidate, setSelectedCandidateState] = useState<Types.Candidate | null>(null);
   const [selectedJob, setSelectedJobState] = useState<Types.Job | null>(null);
-  const [selectedEmployer, setSelectedEmployerState] =
-    useState<Types.Employer | null>(null);
-  const [selectedResume, setSelectedResume] = useState<Types.Resume | null>(
-    null
-  );
+  const [selectedEmployer, setSelectedEmployerState] = useState<Types.Employer | null>(null);
+  const [selectedResume, setSelectedResume] = useState<Types.Resume | null>(null);
   const [isInitializing, setIsInitializing] = useState<boolean>(true);
 
   // Route state
-  const [routeState, setRouteStateState] =
-    useState<RouteState>(getInitialRouteState);
+  const [routeState, setRouteStateState] = useState<RouteState>(getInitialRouteState);
 
   // ============================
   // Initialization Effect
@@ -184,13 +172,13 @@ export function useAppStateLogic(): AppStateContextType {
                 const candidate = await apiClient.getCandidate(candidateId);
                 if (candidate) {
                   setSelectedCandidateState(candidate);
-                  console.log("Restored candidate from storage:", candidate);
+                  console.log('Restored candidate from storage:', candidate);
                 } else {
                   setStoredId(STORAGE_KEYS.SELECTED_CANDIDATE_ID, null);
-                  console.log("Candidate not found, cleared from storage");
+                  console.log('Candidate not found, cleared from storage');
                 }
               } catch (error) {
-                console.warn("Failed to restore candidate:", error);
+                console.warn('Failed to restore candidate:', error);
                 setStoredId(STORAGE_KEYS.SELECTED_CANDIDATE_ID, null);
               }
             })()
@@ -204,13 +192,13 @@ export function useAppStateLogic(): AppStateContextType {
                 const job = await apiClient.getJob(jobId);
                 if (job) {
                   setSelectedJobState(job);
-                  console.log("Restored job from storage:", job);
+                  console.log('Restored job from storage:', job);
                 } else {
                   setStoredId(STORAGE_KEYS.SELECTED_JOB_ID, null);
-                  console.log("Job not found, cleared from storage");
+                  console.log('Job not found, cleared from storage');
                 }
               } catch (error) {
-                console.warn("Failed to restore job:", error);
+                console.warn('Failed to restore job:', error);
                 setStoredId(STORAGE_KEYS.SELECTED_JOB_ID, null);
               }
             })()
@@ -224,13 +212,13 @@ export function useAppStateLogic(): AppStateContextType {
                 const employer = await apiClient.getEmployer(employerId);
                 if (employer) {
                   setSelectedEmployerState(employer);
-                  console.log("Restored employer from storage:", employer);
+                  console.log('Restored employer from storage:', employer);
                 } else {
                   setStoredId(STORAGE_KEYS.SELECTED_EMPLOYER_ID, null);
-                  console.log("Employer not found, cleared from storage");
+                  console.log('Employer not found, cleared from storage');
                 }
               } catch (error) {
-                console.warn("Failed to restore employer:", error);
+                console.warn('Failed to restore employer:', error);
                 setStoredId(STORAGE_KEYS.SELECTED_EMPLOYER_ID, null);
               }
             })()
@@ -240,7 +228,7 @@ export function useAppStateLogic(): AppStateContextType {
         // Wait for all restoration attempts to complete
         await Promise.all(promises);
       } catch (error) {
-        console.error("Error during app state initialization:", error);
+        console.error('Error during app state initialization:', error);
       } finally {
         setIsInitializing(false);
       }
@@ -255,18 +243,11 @@ export function useAppStateLogic(): AppStateContextType {
 
   useEffect(() => {
     // Don't save certain routes (login, register, etc.)
-    const excludedRoutes = [
-      "/login",
-      "/register",
-      "/verify-email",
-      "/reset-password",
-    ];
-    const shouldSaveRoute = !excludedRoutes.some((route) =>
-      location.pathname.startsWith(route)
-    );
+    const excludedRoutes = ['/login', '/register', '/verify-email', '/reset-password'];
+    const shouldSaveRoute = !excludedRoutes.some(route => location.pathname.startsWith(route));
 
     if (shouldSaveRoute && !isInitializing) {
-      setRouteStateState((prev) => {
+      setRouteStateState(prev => {
         const newState = { ...prev, lastRoute: location.pathname };
         persistRouteState(newState);
         return newState;
@@ -278,28 +259,25 @@ export function useAppStateLogic(): AppStateContextType {
   // Entity State Setters with Persistence
   // ============================
 
-  const setSelectedCandidate = useCallback(
-    (candidate: Types.Candidate | null) => {
-      setSelectedCandidateState(candidate);
-      setStoredId(STORAGE_KEYS.SELECTED_CANDIDATE_ID, candidate?.id || null);
+  const setSelectedCandidate = useCallback((candidate: Types.Candidate | null) => {
+    setSelectedCandidateState(candidate);
+    setStoredId(STORAGE_KEYS.SELECTED_CANDIDATE_ID, candidate?.id || null);
 
-      if (candidate) {
-        console.log("Selected candidate:", candidate);
-      } else {
-        console.log("Cleared selected candidate");
-      }
-    },
-    []
-  );
+    if (candidate) {
+      console.log('Selected candidate:', candidate);
+    } else {
+      console.log('Cleared selected candidate');
+    }
+  }, []);
 
   const setSelectedJob = useCallback((job: Types.Job | null) => {
     setSelectedJobState(job);
     setStoredId(STORAGE_KEYS.SELECTED_JOB_ID, job?.id || null);
 
     if (job) {
-      console.log("Selected job:", job);
+      console.log('Selected job:', job);
     } else {
-      console.log("Cleared selected job");
+      console.log('Cleared selected job');
     }
   }, []);
 
@@ -308,9 +286,9 @@ export function useAppStateLogic(): AppStateContextType {
     setStoredId(STORAGE_KEYS.SELECTED_EMPLOYER_ID, employer?.id || null);
 
     if (employer) {
-      console.log("Selected employer:", employer);
+      console.log('Selected employer:', employer);
     } else {
-      console.log("Cleared selected employer");
+      console.log('Cleared selected employer');
     }
   }, []);
 
@@ -323,7 +301,7 @@ export function useAppStateLogic(): AppStateContextType {
     setStoredId(STORAGE_KEYS.SELECTED_JOB_ID, null);
     setStoredId(STORAGE_KEYS.SELECTED_EMPLOYER_ID, null);
 
-    console.log("Cleared all selections");
+    console.log('Cleared all selections');
   }, []);
 
   // ============================
@@ -331,7 +309,7 @@ export function useAppStateLogic(): AppStateContextType {
   // ============================
 
   const saveCurrentRoute = useCallback(() => {
-    setRouteStateState((prev) => {
+    setRouteStateState(prev => {
       const newState = { ...prev, lastRoute: location.pathname };
       persistRouteState(newState);
       return newState;
@@ -345,7 +323,7 @@ export function useAppStateLogic(): AppStateContextType {
   }, [routeState.lastRoute, location.pathname, navigate]);
 
   const setActiveTab = useCallback((tab: string) => {
-    setRouteStateState((prev) => {
+    setRouteStateState(prev => {
       const newState = { ...prev, activeTab: tab };
       persistRouteState(newState);
       return newState;
@@ -353,7 +331,7 @@ export function useAppStateLogic(): AppStateContextType {
   }, []);
 
   const setFilters = useCallback((filters: Record<string, any>) => {
-    setRouteStateState((prev) => {
+    setRouteStateState(prev => {
       const newState = { ...prev, appliedFilters: filters };
       persistRouteState(newState);
       return newState;
@@ -361,7 +339,7 @@ export function useAppStateLogic(): AppStateContextType {
   }, []);
 
   const setSidebarCollapsed = useCallback((collapsed: boolean) => {
-    setRouteStateState((prev) => {
+    setRouteStateState(prev => {
       const newState = { ...prev, sidebarCollapsed: collapsed };
       persistRouteState(newState);
       return newState;
@@ -384,13 +362,10 @@ export function useAppStateLogic(): AppStateContextType {
     localStorage.removeItem(STORAGE_KEYS.APPLIED_FILTERS);
     localStorage.removeItem(STORAGE_KEYS.SIDEBAR_COLLAPSED);
 
-    console.log("Cleared all route state");
+    console.log('Cleared all route state');
   }, []);
 
-  const emptySetSnack: SetSnackType = (
-    message: string,
-    severity?: SeverityType
-  ) => {
+  const emptySetSnack: SetSnackType = (message: string, severity?: SeverityType) => {
     return;
   };
 
@@ -445,7 +420,7 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
 export function useAppState() {
   const context = useContext(AppStateContext);
   if (!context) {
-    throw new Error("useAppState must be used within an AppStateProvider");
+    throw new Error('useAppState must be used within an AppStateProvider');
   }
   return context;
 }
diff --git a/frontend/src/hooks/useAutoScrollToBottom.tsx b/frontend/src/hooks/useAutoScrollToBottom.tsx
index 7490ceb..4fb501b 100644
--- a/frontend/src/hooks/useAutoScrollToBottom.tsx
+++ b/frontend/src/hooks/useAutoScrollToBottom.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, RefObject, useCallback } from "react";
+import { useEffect, useRef, RefObject, useCallback } from 'react';
 
 const debug = false;
 
@@ -69,10 +69,10 @@ const useResizeObserverAndMutationObserver = (
     }, 500);
 
     const resizeObserver = new ResizeObserver((e: any) => {
-      debouncedCallback("resize");
+      debouncedCallback('resize');
     });
     const mutationObserver = new MutationObserver((e: any) => {
-      debouncedCallback("mutation");
+      debouncedCallback('mutation');
     });
 
     // Observe container size
@@ -124,7 +124,7 @@ const useAutoScrollToBottom = (
       const scrollTo = scrollToRef.current;
 
       if (isPasteEvent && !scrollTo) {
-        console.error("Paste Event triggered without scrollTo");
+        console.error('Paste Event triggered without scrollTo');
       }
 
       if (scrollTo) {
@@ -136,16 +136,14 @@ const useAutoScrollToBottom = (
 
         // Check if TextField is fully or partially visible (for non-paste events)
         const isTextFieldVisible =
-          scrollToRect.top < containerBottom &&
-          scrollToRect.bottom > containerTop;
+          scrollToRect.top < containerBottom && scrollToRect.bottom > containerTop;
 
         // Scroll on paste or if TextField is visible and user isn't scrolling up
-        shouldScroll =
-          isPasteEvent || (isTextFieldVisible && !isUserScrollingUpRef.current);
+        shouldScroll = isPasteEvent || (isTextFieldVisible && !isUserScrollingUpRef.current);
         if (shouldScroll) {
           requestAnimationFrame(() => {
             debug &&
-              console.debug("Scrolling to container bottom:", {
+              console.debug('Scrolling to container bottom:', {
                 scrollHeight: container.scrollHeight,
                 scrollToHeight: scrollToRect.height,
                 containerHeight: container.clientHeight,
@@ -155,7 +153,7 @@ const useAutoScrollToBottom = (
               });
             container.scrollTo({
               top: container.scrollHeight,
-              behavior: smooth ? "smooth" : "auto",
+              behavior: smooth ? 'smooth' : 'auto',
             });
           });
         }
@@ -170,12 +168,12 @@ const useAutoScrollToBottom = (
         if (shouldScroll) {
           requestAnimationFrame(() => {
             debug &&
-              console.debug("Scrolling to container bottom (fallback):", {
+              console.debug('Scrolling to container bottom (fallback):', {
                 scrollHeight,
               });
             container.scrollTo({
               top: container.scrollHeight,
-              behavior: smooth ? "smooth" : "auto",
+              behavior: smooth ? 'smooth' : 'auto',
             });
           });
         }
@@ -195,74 +193,60 @@ const useAutoScrollToBottom = (
        * they may be zooming in a region; pause scrolling */
       isUserScrollingUpRef.current =
         currentScrollTop <= lastScrollTop.current || pause ? true : false;
-      debug &&
-        console.debug(
-          `Scrolling up or paused: ${isUserScrollingUpRef.current} ${pause}`
-        );
+      debug && console.debug(`Scrolling up or paused: ${isUserScrollingUpRef.current} ${pause}`);
       lastScrollTop.current = currentScrollTop;
 
       if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
       scrollTimeout.current = setTimeout(
         () => {
           isUserScrollingUpRef.current = false;
-          debug &&
-            console.debug(`Scrolling up: ${isUserScrollingUpRef.current}`);
+          debug && console.debug(`Scrolling up: ${isUserScrollingUpRef.current}`);
         },
         pause ? pause : 500
       );
     };
 
     const pauseScroll = (ev: Event) => {
-      debug && console.log("Pausing for mouse movement");
+      debug && console.log('Pausing for mouse movement');
       handleScroll(ev, 500);
     };
 
     const pauseClick = (ev: Event) => {
-      debug && console.log("Pausing for mouse click");
+      debug && console.log('Pausing for mouse click');
       handleScroll(ev, 1000);
     };
 
     const handlePaste = () => {
-      console.log("handlePaste");
+      console.log('handlePaste');
       // Delay scroll check to ensure DOM updates
       setTimeout(() => {
-        console.log("scrolling for handlePaste");
+        console.log('scrolling for handlePaste');
         requestAnimationFrame(() => checkAndScrollToBottom(true));
       }, 100);
     };
 
-    window.addEventListener("mousemove", pauseScroll);
-    window.addEventListener("mousedown", pauseClick);
+    window.addEventListener('mousemove', pauseScroll);
+    window.addEventListener('mousedown', pauseClick);
 
-    container.addEventListener("scroll", handleScroll);
+    container.addEventListener('scroll', handleScroll);
     if (scrollTo) {
-      scrollTo.addEventListener("paste", handlePaste);
+      scrollTo.addEventListener('paste', handlePaste);
     }
     checkAndScrollToBottom();
 
     return () => {
-      window.removeEventListener("mousedown", pauseClick);
-      window.removeEventListener("mousemove", pauseScroll);
-      container.removeEventListener("scroll", handleScroll);
+      window.removeEventListener('mousedown', pauseClick);
+      window.removeEventListener('mousemove', pauseScroll);
+      container.removeEventListener('scroll', handleScroll);
       if (scrollTo) {
-        scrollTo.removeEventListener("paste", handlePaste);
+        scrollTo.removeEventListener('paste', handlePaste);
       }
       if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
     };
-  }, [
-    smooth,
-    scrollToRef,
-    fallbackThreshold,
-    contentUpdateTrigger,
-    checkAndScrollToBottom,
-  ]);
+  }, [smooth, scrollToRef, fallbackThreshold, contentUpdateTrigger, checkAndScrollToBottom]);
 
   // Observe container and TextField size, plus DOM changes
-  useResizeObserverAndMutationObserver(
-    containerRef,
-    scrollToRef,
-    checkAndScrollToBottom
-  );
+  useResizeObserverAndMutationObserver(containerRef, scrollToRef, checkAndScrollToBottom);
 
   return containerRef;
 };
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 60533eb..9e9d0e9 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,16 +1,14 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { ThemeProvider } from "@mui/material/styles";
-import { backstoryTheme } from "./BackstoryTheme";
-import { BrowserRouter as Router } from "react-router-dom";
-import { BackstoryApp } from "./BackstoryApp";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from '@mui/material/styles';
+import { backstoryTheme } from './BackstoryTheme';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { BackstoryApp } from './BackstoryApp';
 // import { BackstoryTestApp } from 'TestApp';
 
-import "./index.css";
+import './index.css';
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
   <React.StrictMode>
diff --git a/frontend/src/pages/BetaPage.tsx b/frontend/src/pages/BetaPage.tsx
index e4b4ad9..806fe4f 100644
--- a/frontend/src/pages/BetaPage.tsx
+++ b/frontend/src/pages/BetaPage.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import {
   Box,
   Container,
@@ -9,11 +9,11 @@ import {
   Button,
   alpha,
   GlobalStyles,
-} from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import ConstructionIcon from "@mui/icons-material/Construction";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
-import { Beta } from "../components/ui/Beta";
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import ConstructionIcon from '@mui/icons-material/Construction';
+import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import { Beta } from '../components/ui/Beta';
 
 interface BetaPageProps {
   children?: React.ReactNode;
@@ -26,10 +26,10 @@ interface BetaPageProps {
 
 const BetaPage: React.FC<BetaPageProps> = ({
   children,
-  title = "Coming Soon",
-  subtitle = "This page is currently in development",
-  returnPath = "/",
-  returnLabel = "Return to Backstory",
+  title = 'Coming Soon',
+  subtitle = 'This page is currently in development',
+  returnPath = '/',
+  returnLabel = 'Return to Backstory',
   onReturn,
 }) => {
   const theme = useTheme();
@@ -39,10 +39,9 @@ const BetaPage: React.FC<BetaPageProps> = ({
 
   if (!children) {
     children = (
-      <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
+      <Box sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
         <Typography>
-          The page you requested (<b>{location.pathname.replace(/^\//, "")}</b>)
-          is not yet ready.
+          The page you requested (<b>{location.pathname.replace(/^\//, '')}</b>) is not yet ready.
         </Typography>
       </Box>
     );
@@ -94,10 +93,10 @@ const BetaPage: React.FC<BetaPageProps> = ({
   return (
     <Box
       sx={{
-        minHeight: "100%",
-        width: "100%",
-        position: "relative",
-        overflow: "hidden",
+        minHeight: '100%',
+        width: '100%',
+        position: 'relative',
+        overflow: 'hidden',
         bgcolor: theme.palette.background.default,
         pt: 8,
         pb: 6,
@@ -106,25 +105,25 @@ const BetaPage: React.FC<BetaPageProps> = ({
       {/* Animated background elements */}
       <Box
         sx={{
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
           zIndex: 0,
-          overflow: "hidden",
+          overflow: 'hidden',
         }}
       >
-        {sparkles.map((sparkle) => (
+        {sparkles.map(sparkle => (
           <Box
             key={sparkle.id}
             sx={{
-              position: "absolute",
+              position: 'absolute',
               left: `${sparkle.x}%`,
               top: `${sparkle.y}%`,
               width: sparkle.size,
               height: sparkle.size,
-              borderRadius: "50%",
+              borderRadius: '50%',
               bgcolor: alpha(theme.palette.primary.main, sparkle.opacity),
               boxShadow: `0 0 ${sparkle.size * 2}px ${alpha(
                 theme.palette.primary.main,
@@ -136,34 +135,24 @@ const BetaPage: React.FC<BetaPageProps> = ({
         ))}
       </Box>
 
-      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 2 }}>
+      <Container maxWidth="lg" sx={{ position: 'relative', zIndex: 2 }}>
         <Grid container spacing={4} direction="column" alignItems="center">
-          <Grid size={{ xs: 12 }} sx={{ textAlign: "center", mb: 2 }}>
+          <Grid size={{ xs: 12 }} sx={{ textAlign: 'center', mb: 2 }}>
             <Typography
               variant="h2"
               component="h1"
               gutterBottom
               sx={{
-                fontWeight: "bold",
+                fontWeight: 'bold',
                 color: theme.palette.primary.main,
-                textShadow: `0 0 10px ${alpha(
-                  theme.palette.primary.main,
-                  0.3
-                )}`,
-                animation: showSparkle
-                  ? "titleGlow 3s ease-in-out infinite alternate"
-                  : "none",
+                textShadow: `0 0 10px ${alpha(theme.palette.primary.main, 0.3)}`,
+                animation: showSparkle ? 'titleGlow 3s ease-in-out infinite alternate' : 'none',
               }}
             >
               {title}
             </Typography>
 
-            <Typography
-              variant="h5"
-              component="h2"
-              color="textSecondary"
-              sx={{ mb: 6 }}
-            >
+            <Typography variant="h5" component="h2" color="textSecondary" sx={{ mb: 6 }}>
               {subtitle}
             </Typography>
           </Grid>
@@ -175,28 +164,25 @@ const BetaPage: React.FC<BetaPageProps> = ({
                 p: { xs: 3, md: 5 },
                 borderRadius: 2,
                 bgcolor: alpha(theme.palette.background.paper, 0.8),
-                backdropFilter: "blur(8px)",
-                boxShadow: `0 8px 32px ${alpha(
-                  theme.palette.primary.main,
-                  0.15
-                )}`,
+                backdropFilter: 'blur(8px)',
+                boxShadow: `0 8px 32px ${alpha(theme.palette.primary.main, 0.15)}`,
                 border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-                position: "relative",
-                overflow: "hidden",
+                position: 'relative',
+                overflow: 'hidden',
               }}
             >
               {/* Construction icon */}
               <Box
                 sx={{
-                  position: "absolute",
+                  position: 'absolute',
                   top: -15,
                   right: -15,
                   bgcolor: theme.palette.warning.main,
                   color: theme.palette.warning.contrastText,
-                  borderRadius: "50%",
+                  borderRadius: '50%',
                   p: 2,
                   boxShadow: 3,
-                  transform: "rotate(15deg)",
+                  transform: 'rotate(15deg)',
                 }}
               >
                 <ConstructionIcon fontSize="large" />
@@ -205,14 +191,14 @@ const BetaPage: React.FC<BetaPageProps> = ({
               {/* Content */}
               <Box sx={{ mt: 3, mb: 3 }}>
                 {children || (
-                  <Box sx={{ textAlign: "center", py: 4 }}>
+                  <Box sx={{ textAlign: 'center', py: 4 }}>
                     <RocketLaunchIcon
                       fontSize="large"
                       color="primary"
                       sx={{
                         fontSize: 80,
                         mb: 2,
-                        animation: "rocketWobble 3s ease-in-out infinite",
+                        animation: 'rocketWobble 3s ease-in-out infinite',
                       }}
                     />
                     <Typography>
@@ -227,21 +213,21 @@ const BetaPage: React.FC<BetaPageProps> = ({
                   adaptive={false}
                   sx={{
                     opacity: 0.5,
-                    left: "-72px",
-                    "& > div": {
-                      paddingRight: "30px",
-                      background: "gold",
-                      color: "#808080",
+                    left: '-72px',
+                    '& > div': {
+                      paddingRight: '30px',
+                      background: 'gold',
+                      color: '#808080',
                     },
                   }}
                   onClick={() => {
-                    navigate("/docs/beta");
+                    navigate('/docs/beta');
                   }}
                 />
               </Box>
 
               {/* Return button */}
-              <Box sx={{ mt: 4, textAlign: "center" }}>
+              <Box sx={{ mt: 4, textAlign: 'center' }}>
                 <Button
                   variant="contained"
                   color="primary"
@@ -251,15 +237,9 @@ const BetaPage: React.FC<BetaPageProps> = ({
                     px: 4,
                     py: 1,
                     borderRadius: 4,
-                    boxShadow: `0 4px 14px ${alpha(
-                      theme.palette.primary.main,
-                      0.4
-                    )}`,
-                    "&:hover": {
-                      boxShadow: `0 6px 20px ${alpha(
-                        theme.palette.primary.main,
-                        0.6
-                      )}`,
+                    boxShadow: `0 4px 14px ${alpha(theme.palette.primary.main, 0.4)}`,
+                    '&:hover': {
+                      boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.6)}`,
                     },
                   }}
                 >
@@ -274,47 +254,47 @@ const BetaPage: React.FC<BetaPageProps> = ({
       {/* Global styles added with MUI's GlobalStyles component */}
       <GlobalStyles
         styles={{
-          "@keyframes float": {
-            "0%": {
-              transform: "translateY(0) scale(1)",
+          '@keyframes float': {
+            '0%': {
+              transform: 'translateY(0) scale(1)',
             },
-            "100%": {
-              transform: "translateY(-20px) scale(1.1)",
+            '100%': {
+              transform: 'translateY(-20px) scale(1.1)',
             },
           },
-          "@keyframes sparkleFloat": {
-            "0%": {
-              transform: "translateY(0) scale(1)",
+          '@keyframes sparkleFloat': {
+            '0%': {
+              transform: 'translateY(0) scale(1)',
               opacity: 0.7,
             },
-            "50%": {
+            '50%': {
               opacity: 1,
             },
-            "100%": {
-              transform: "translateY(-15px) scale(1.2)",
+            '100%': {
+              transform: 'translateY(-15px) scale(1.2)',
               opacity: 0.7,
             },
           },
-          "@keyframes titleGlow": {
-            "0%": {
+          '@keyframes titleGlow': {
+            '0%': {
               textShadow: `0 0 10px ${alpha(theme.palette.primary.main, 0.3)}`,
             },
-            "100%": {
-              textShadow: `0 0 25px ${alpha(
+            '100%': {
+              textShadow: `0 0 25px ${alpha(theme.palette.primary.main, 0.7)}, 0 0 40px ${alpha(
                 theme.palette.primary.main,
-                0.7
-              )}, 0 0 40px ${alpha(theme.palette.primary.main, 0.4)}`,
+                0.4
+              )}`,
             },
           },
-          "@keyframes rocketWobble": {
-            "0%": {
-              transform: "translateY(0) rotate(0deg)",
+          '@keyframes rocketWobble': {
+            '0%': {
+              transform: 'translateY(0) rotate(0deg)',
             },
-            "50%": {
-              transform: "translateY(-10px) rotate(3deg)",
+            '50%': {
+              transform: 'translateY(-10px) rotate(3deg)',
             },
-            "100%": {
-              transform: "translateY(0) rotate(-2deg)",
+            '100%': {
+              transform: 'translateY(0) rotate(-2deg)',
             },
           },
         }}
diff --git a/frontend/src/pages/CandidateChatPage.tsx b/frontend/src/pages/CandidateChatPage.tsx
index 811bc66..423709e 100644
--- a/frontend/src/pages/CandidateChatPage.tsx
+++ b/frontend/src/pages/CandidateChatPage.tsx
@@ -1,15 +1,7 @@
-import React, { forwardRef, useState, useEffect, useRef } from "react";
-import {
-  Box,
-  Paper,
-  Button,
-  Divider,
-  useTheme,
-  useMediaQuery,
-  Tooltip,
-} from "@mui/material";
-import { Send as SendIcon } from "@mui/icons-material";
-import { useAuth } from "hooks/AuthContext";
+import React, { forwardRef, useState, useEffect, useRef } from 'react';
+import { Box, Paper, Button, Divider, useTheme, useMediaQuery, Tooltip } from '@mui/material';
+import { Send as SendIcon } from '@mui/icons-material';
+import { useAuth } from 'hooks/AuthContext';
 import {
   ChatMessage,
   ChatSession,
@@ -17,30 +9,27 @@ import {
   ChatMessageError,
   ChatMessageStreaming,
   ChatMessageStatus,
-} from "types/types";
-import { ConversationHandle } from "components/Conversation";
-import { BackstoryPageProps } from "components/BackstoryTab";
-import { Message } from "components/Message";
-import { DeleteConfirmation } from "components/DeleteConfirmation";
-import { CandidateInfo } from "components/ui/CandidateInfo";
-import { useNavigate } from "react-router-dom";
-import { useAppState, useSelectedCandidate } from "hooks/GlobalContext";
-import PropagateLoader from "react-spinners/PropagateLoader";
-import {
-  BackstoryTextField,
-  BackstoryTextFieldRef,
-} from "components/BackstoryTextField";
-import { BackstoryQuery } from "components/BackstoryQuery";
-import { CandidatePicker } from "components/ui/CandidatePicker";
-import { Scrollable } from "components/Scrollable";
+} from 'types/types';
+import { ConversationHandle } from 'components/Conversation';
+import { BackstoryPageProps } from 'components/BackstoryTab';
+import { Message } from 'components/Message';
+import { DeleteConfirmation } from 'components/DeleteConfirmation';
+import { CandidateInfo } from 'components/ui/CandidateInfo';
+import { useNavigate } from 'react-router-dom';
+import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
+import PropagateLoader from 'react-spinners/PropagateLoader';
+import { BackstoryTextField, BackstoryTextFieldRef } from 'components/BackstoryTextField';
+import { BackstoryQuery } from 'components/BackstoryQuery';
+import { CandidatePicker } from 'components/ui/CandidatePicker';
+import { Scrollable } from 'components/Scrollable';
 
 const defaultMessage: ChatMessage = {
-  status: "done",
-  type: "text",
-  sessionId: "",
+  status: 'done',
+  type: 'text',
+  sessionId: '',
   timestamp: new Date(),
-  content: "",
-  role: "user",
+  content: '',
+  role: 'user',
   metadata: null as any,
 };
 
@@ -53,8 +42,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
     const [processingMessage, setProcessingMessage] = useState<
       ChatMessageStatus | ChatMessageError | null
     >(null);
-    const [streamingMessage, setStreamingMessage] =
-      useState<ChatMessage | null>(null);
+    const [streamingMessage, setStreamingMessage] = useState<ChatMessage | null>(null);
     const backstoryTextRef = useRef<BackstoryTextFieldRef>(null);
 
     const { setSnack } = useAppState();
@@ -75,12 +63,9 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
         setMessages(chatMessages);
         setProcessingMessage(null);
         setStreamingMessage(null);
-        console.log(
-          `getChatMessages returned ${chatMessages.length} messages.`,
-          chatMessages
-        );
+        console.log(`getChatMessages returned ${chatMessages.length} messages.`, chatMessages);
       } catch (error) {
-        console.error("Failed to load messages:", error);
+        console.error('Failed to load messages:', error);
       }
     };
 
@@ -92,43 +77,37 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
         await apiClient.resetChatSession(session.id);
         // If we're deleting the currently selected session, clear it
         setMessages([]);
-        setSnack("Session reset succeeded", "success");
+        setSnack('Session reset succeeded', 'success');
       } catch (error) {
-        console.error("Failed to delete session:", error);
-        setSnack("Failed to delete session", "error");
+        console.error('Failed to delete session:', error);
+        setSnack('Failed to delete session', 'error');
       }
     };
 
     // Send message
     const sendMessage = async (message: string) => {
-      if (
-        !message.trim() ||
-        !chatSession?.id ||
-        streaming ||
-        !selectedCandidate
-      )
-        return;
+      if (!message.trim() || !chatSession?.id || streaming || !selectedCandidate) return;
 
       const messageContent = message;
       setStreaming(true);
 
       const chatMessage: ChatMessageUser = {
         sessionId: chatSession.id,
-        role: "user",
+        role: 'user',
         content: messageContent,
-        status: "done",
-        type: "text",
+        status: 'done',
+        type: 'text',
         timestamp: new Date(),
       };
 
       setProcessingMessage({
         ...defaultMessage,
-        status: "status",
-        activity: "info",
+        status: 'status',
+        activity: 'info',
         content: `Establishing connection with ${selectedCandidate.firstName}'s chat session.`,
       });
 
-      setMessages((prev) => {
+      setMessages(prev => {
         const filtered = prev.filter((m: any) => m.id !== chatMessage.id);
         return [...filtered, chatMessage] as any;
       });
@@ -136,7 +115,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
       try {
         apiClient.sendMessageStream(chatMessage, {
           onMessage: (msg: ChatMessage) => {
-            setMessages((prev) => {
+            setMessages(prev => {
               const filtered = prev.filter((m: any) => m.id !== msg.id);
               return [...filtered, msg] as any;
             });
@@ -144,20 +123,16 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
             setProcessingMessage(null);
           },
           onError: (error: string | ChatMessageError) => {
-            console.log("onError:", error);
+            console.log('onError:', error);
             let message: string;
             // Type-guard to determine if this is a ChatMessageBase or a string
-            if (
-              typeof error === "object" &&
-              error !== null &&
-              "content" in error
-            ) {
+            if (typeof error === 'object' && error !== null && 'content' in error) {
               setProcessingMessage(error);
               message = error.content as string;
             } else {
               setProcessingMessage({
                 ...defaultMessage,
-                status: "error",
+                status: 'error',
                 content: error,
               });
             }
@@ -167,7 +142,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
             // console.log("onStreaming:", chunk);
             setStreamingMessage({
               ...chunk,
-              role: "assistant",
+              role: 'assistant',
               metadata: null as any,
             });
           },
@@ -175,21 +150,21 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
             setProcessingMessage(status);
           },
           onComplete: () => {
-            console.log("onComplete");
+            console.log('onComplete');
             setStreamingMessage(null);
             setProcessingMessage(null);
             setStreaming(false);
           },
         });
       } catch (error) {
-        console.error("Failed to send message:", error);
+        console.error('Failed to send message:', error);
         setStreaming(false);
       }
     };
 
     // Auto-scroll to bottom when new messages arrive
     useEffect(() => {
-      (messagesEndRef.current as any)?.scrollIntoView({ behavior: "smooth" });
+      (messagesEndRef.current as any)?.scrollIntoView({ behavior: 'smooth' });
     }, [messages]);
 
     // Load sessions when username changes
@@ -201,14 +176,14 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
           .getOrCreateChatSession(
             selectedCandidate,
             `Backstory chat with ${selectedCandidate.fullName}`,
-            "candidate_chat"
+            'candidate_chat'
           )
-          .then((session) => {
+          .then(session => {
             setChatSession(session);
             setLoading(false);
           });
       } catch (error) {
-        setSnack("Unable to load chat session", "error");
+        setSnack('Unable to load chat session', 'error');
       } finally {
         setLoading(false);
       }
@@ -226,10 +201,10 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
     }
 
     const welcomeMessage: ChatMessage = {
-      sessionId: chatSession?.id || "",
-      role: "information",
-      type: "text",
-      status: "done",
+      sessionId: chatSession?.id || '',
+      role: 'information',
+      type: 'text',
+      status: 'done',
       timestamp: new Date(),
       content: `Welcome to the Backstory Chat about ${selectedCandidate.fullName}. Ask any questions you have about ${selectedCandidate.firstName}.`,
       metadata: null as any,
@@ -239,16 +214,16 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
       <Box
         ref={ref}
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          height: "100%" /* Restrict to main-container's height */,
-          width: "100%",
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%' /* Restrict to main-container's height */,
+          width: '100%',
           minHeight: 0 /* Prevent flex overflow */,
-          maxHeight: "min-content",
-          "& > *:not(.Scrollable)": {
+          maxHeight: 'min-content',
+          '& > *:not(.Scrollable)': {
             flexShrink: 0 /* Prevent shrinking */,
           },
-          position: "relative",
+          position: 'relative',
         }}
       >
         <Paper elevation={2} sx={{ m: 1, p: 1 }}>
@@ -260,13 +235,13 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
             variant="small"
             sx={{
               flexShrink: 1,
-              width: "100%",
+              width: '100%',
               maxHeight: 0,
-              minHeight: "min-content",
+              minHeight: 'min-content',
             }} // Prevent header from shrinking
           />
           <Button
-            sx={{ maxWidth: "max-content" }}
+            sx={{ maxWidth: 'max-content' }}
             onClick={() => {
               setSelectedCandidate(null);
             }}
@@ -280,22 +255,20 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
         {chatSession && (
           <Scrollable
             sx={{
-              position: "relative",
-              maxHeight: "100%",
-              width: "100%",
-              display: "flex",
+              position: 'relative',
+              maxHeight: '100%',
+              width: '100%',
+              display: 'flex',
               flexGrow: 1,
               flex: 1 /* Take remaining space in some-container */,
-              overflowY: "auto" /* Scroll if content overflows */,
+              overflowY: 'auto' /* Scroll if content overflows */,
               pt: 2,
               pl: 1,
               pr: 1,
               pb: 2,
             }}
           >
-            {messages.length === 0 && (
-              <Message {...{ chatSession, message: welcomeMessage }} />
-            )}
+            {messages.length === 0 && <Message {...{ chatSession, message: welcomeMessage }} />}
             {messages.map((message: ChatMessage) => (
               <Message key={message.id} {...{ chatSession, message }} />
             ))}
@@ -308,10 +281,10 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
             {streaming && (
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                   m: 1,
                 }}
               >
@@ -327,17 +300,15 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
           </Scrollable>
         )}
         {selectedCandidate.questions?.length !== 0 &&
-          selectedCandidate.questions?.map((q) => (
-            <BackstoryQuery question={q} />
-          ))}
+          selectedCandidate.questions?.map(q => <BackstoryQuery question={q} />)}
         {/* Fixed Message Input */}
-        <Box sx={{ display: "flex", flexShrink: 1, gap: 1 }}>
+        <Box sx={{ display: 'flex', flexShrink: 1, gap: 1 }}>
           <DeleteConfirmation
             onDelete={() => {
               chatSession && onDelete(chatSession);
             }}
             disabled={!chatSession}
-            sx={{ minWidth: "auto", px: 2, maxHeight: "min-content" }}
+            sx={{ minWidth: 'auto', px: 2, maxHeight: 'min-content' }}
             action="reset"
             label="chat session"
             title="Reset Chat Session"
@@ -352,18 +323,16 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
           <Tooltip title="Send">
             <span
               style={{
-                minWidth: "auto",
-                maxHeight: "min-content",
-                alignSelf: "center",
+                minWidth: 'auto',
+                maxHeight: 'min-content',
+                alignSelf: 'center',
               }}
             >
               <Button
                 variant="contained"
                 onClick={() => {
                   sendMessage(
-                    (backstoryTextRef.current &&
-                      backstoryTextRef.current.getAndResetValue()) ||
-                      ""
+                    (backstoryTextRef.current && backstoryTextRef.current.getAndResetValue()) || ''
                   );
                 }}
                 disabled={streaming || loading}
diff --git a/frontend/src/pages/DocsPage.tsx b/frontend/src/pages/DocsPage.tsx
index 1b6793c..c43ff9c 100644
--- a/frontend/src/pages/DocsPage.tsx
+++ b/frontend/src/pages/DocsPage.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useLocation, useParams } from "react-router-dom";
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation, useParams } from 'react-router-dom';
 import {
   Box,
   Drawer,
@@ -19,27 +19,27 @@ import {
   CardActionArea,
   useTheme,
   useMediaQuery,
-} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import PersonIcon from "@mui/icons-material/Person";
-import CloseIcon from "@mui/icons-material/Close";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import DescriptionIcon from "@mui/icons-material/Description";
-import CodeIcon from "@mui/icons-material/Code";
-import LayersIcon from "@mui/icons-material/Layers";
-import DashboardIcon from "@mui/icons-material/Dashboard";
-import PaletteIcon from "@mui/icons-material/Palette";
-import AnalyticsIcon from "@mui/icons-material/Analytics";
-import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import PersonIcon from '@mui/icons-material/Person';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import DescriptionIcon from '@mui/icons-material/Description';
+import CodeIcon from '@mui/icons-material/Code';
+import LayersIcon from '@mui/icons-material/Layers';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import PaletteIcon from '@mui/icons-material/Palette';
+import AnalyticsIcon from '@mui/icons-material/Analytics';
+import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';
 
-import { Document } from "../components/Document";
-import { BackstoryPageProps } from "../components/BackstoryTab";
-import { BackstoryUIOverviewPage } from "documents/BackstoryUIOverviewPage";
-import { BackstoryAppAnalysisPage } from "documents/BackstoryAppAnalysisPage";
-import { BackstoryThemeVisualizerPage } from "documents/BackstoryThemeVisualizerPage";
-import { UserManagement } from "documents/UserManagement";
-import { MockupPage } from "documents/MockupPage";
-import { useAppState } from "hooks/GlobalContext";
+import { Document } from '../components/Document';
+import { BackstoryPageProps } from '../components/BackstoryTab';
+import { BackstoryUIOverviewPage } from 'documents/BackstoryUIOverviewPage';
+import { BackstoryAppAnalysisPage } from 'documents/BackstoryAppAnalysisPage';
+import { BackstoryThemeVisualizerPage } from 'documents/BackstoryThemeVisualizerPage';
+import { UserManagement } from 'documents/UserManagement';
+import { MockupPage } from 'documents/MockupPage';
+import { useAppState } from 'hooks/GlobalContext';
 
 // Sidebar navigation component using MUI components
 const Sidebar: React.FC<{
@@ -60,26 +60,22 @@ const Sidebar: React.FC<{
   };
 
   return (
-    <Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box
         sx={{
           p: 2,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
           borderBottom: 1,
-          borderColor: "divider",
+          borderColor: 'divider',
         }}
       >
         <Typography variant="h6" component="h2" fontWeight="bold">
           Documentation
         </Typography>
         {isMobile && onClose && (
-          <IconButton
-            onClick={onClose}
-            size="small"
-            aria-label="Close navigation"
-          >
+          <IconButton onClick={onClose} size="small" aria-label="Close navigation">
             <CloseIcon />
           </IconButton>
         )}
@@ -88,7 +84,7 @@ const Sidebar: React.FC<{
       <Box
         sx={{
           flexGrow: 1,
-          overflow: "auto",
+          overflow: 'auto',
           p: 1,
         }}
       >
@@ -96,9 +92,7 @@ const Sidebar: React.FC<{
           {documents.map((doc, index) => (
             <ListItem key={index} disablePadding>
               <ListItemButton
-                onClick={() =>
-                  doc.route ? handleItemClick(doc.route) : navigate("/")
-                }
+                onClick={() => (doc.route ? handleItemClick(doc.route) : navigate('/'))}
                 selected={currentPage === doc.route}
                 sx={{
                   borderRadius: 1,
@@ -107,10 +101,7 @@ const Sidebar: React.FC<{
               >
                 <ListItemIcon
                   sx={{
-                    color:
-                      currentPage === doc.route
-                        ? "primary.main"
-                        : "text.secondary",
+                    color: currentPage === doc.route ? 'primary.main' : 'text.secondary',
                     minWidth: 40,
                   }}
                 >
@@ -120,8 +111,7 @@ const Sidebar: React.FC<{
                   primary={doc.title}
                   slotProps={{
                     primary: {
-                      fontWeight:
-                        currentPage === doc.route ? "medium" : "regular",
+                      fontWeight: currentPage === doc.route ? 'medium' : 'regular',
                     },
                   }}
                 />
@@ -135,9 +125,7 @@ const Sidebar: React.FC<{
 };
 
 const getDocumentIcon = (title: string): React.ReactNode => {
-  const item = documents.find(
-    (d) => d.title.toLocaleLowerCase() === title.toLocaleLowerCase()
-  );
+  const item = documents.find(d => d.title.toLocaleLowerCase() === title.toLocaleLowerCase());
   if (!item) {
     throw Error(`${title} does not exist in documents`);
   }
@@ -153,87 +141,86 @@ type DocType = {
 
 const documents: DocType[] = [
   {
-    title: "Backstory",
+    title: 'Backstory',
     route: null,
-    description: "Backstory",
+    description: 'Backstory',
     icon: <ArrowBackIcon />,
   },
   {
-    title: "About",
-    route: "about",
-    description: "General information about the application and its purpose",
+    title: 'About',
+    route: 'about',
+    description: 'General information about the application and its purpose',
     icon: <DescriptionIcon />,
   },
   {
-    title: "BETA",
-    route: "beta",
-    description: "Details about the current beta version and upcoming features",
+    title: 'BETA',
+    route: 'beta',
+    description: 'Details about the current beta version and upcoming features',
     icon: <CodeIcon />,
   },
   {
-    title: "Resume Generation Architecture",
-    route: "resume-generation",
-    description:
-      "Technical overview of how resumes are processed and generated",
+    title: 'Resume Generation Architecture',
+    route: 'resume-generation',
+    description: 'Technical overview of how resumes are processed and generated',
     icon: <LayersIcon />,
   },
   {
-    title: "Application Architecture",
-    route: "about-app",
-    description: "System design and technical stack information",
+    title: 'Application Architecture',
+    route: 'about-app',
+    description: 'System design and technical stack information',
     icon: <LayersIcon />,
   },
   {
-    title: "Authentication Architecture",
-    route: "authentication.md",
-    description: "Complete authentication architecture",
+    title: 'Authentication Architecture',
+    route: 'authentication.md',
+    description: 'Complete authentication architecture',
     icon: <LayersIcon />,
   },
   {
-    title: "UI Overview",
-    route: "ui-overview",
-    description: "Guide to the user interface components and interactions",
+    title: 'UI Overview',
+    route: 'ui-overview',
+    description: 'Guide to the user interface components and interactions',
     icon: <DashboardIcon />,
   },
   {
-    title: "UI Mockup",
-    route: "ui-mockup",
-    description: "Visual previews of interfaces and layout concepts",
+    title: 'UI Mockup',
+    route: 'ui-mockup',
+    description: 'Visual previews of interfaces and layout concepts',
     icon: <DashboardIcon />,
   },
   {
-    title: "Theme Visualizer",
-    route: "theme-visualizer",
-    description: "Explore and customize application themes and visual styles",
+    title: 'Theme Visualizer',
+    route: 'theme-visualizer',
+    description: 'Explore and customize application themes and visual styles',
     icon: <PaletteIcon />,
   },
   {
-    title: "App Analysis",
-    route: "app-analysis",
-    description: "Statistics and performance metrics of the application",
+    title: 'App Analysis',
+    route: 'app-analysis',
+    description: 'Statistics and performance metrics of the application',
     icon: <AnalyticsIcon />,
   },
   {
-    title: "Text Mockups",
-    route: "backstory-ui-mockups",
-    description: "Early text mockups of many of the interaction points.",
+    title: 'Text Mockups',
+    route: 'backstory-ui-mockups',
+    description: 'Early text mockups of many of the interaction points.',
   },
   {
-    title: "User Management",
-    route: "user-management",
-    description: "User management.",
+    title: 'User Management',
+    route: 'user-management',
+    description: 'User management.',
     icon: <PersonIcon />,
   },
   {
-    title: "Type Safety",
-    route: "type-safety",
-    description: "Overview of front/back-end type synchronization.",
+    title: 'Type Safety',
+    route: 'type-safety',
+    description: 'Overview of front/back-end type synchronization.',
     icon: <CodeIcon />,
   },
 ];
 
 const documentFromRoute = (route: string): DocType | null => {
-  const index = documents.findIndex((v) => v.route === route);
+  const index = documents.findIndex(v => v.route === route);
   if (index === -1) {
     return null;
   }
@@ -244,7 +231,7 @@ const documentFromRoute = (route: string): DocType | null => {
 const documentTitleFromRoute = (route: string): string => {
   const doc = documentFromRoute(route);
   if (doc === null) {
-    return "Documentation";
+    return 'Documentation';
   }
   return doc.title;
 };
@@ -253,20 +240,20 @@ const DocsPage = (props: BackstoryPageProps) => {
   const { setSnack } = useAppState();
   const navigate = useNavigate();
   const location = useLocation();
-  const { paramPage = "" } = useParams();
+  const { paramPage = '' } = useParams();
   const [page, setPage] = useState<string>(paramPage);
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   // Track location changes
   useEffect(() => {
-    const parts = location.pathname.split("/");
+    const parts = location.pathname.split('/');
     if (parts.length > 2) {
       setPage(parts[2]);
     } else {
-      setPage("");
+      setPage('');
     }
   }, [location]);
 
@@ -279,21 +266,21 @@ const DocsPage = (props: BackstoryPageProps) => {
 
   // Handle document navigation
   const onDocumentExpand = (docName: string, open: boolean) => {
-    console.log("Document expanded:", { docName, open, location });
+    console.log('Document expanded:', { docName, open, location });
     if (open) {
-      const parts = location.pathname.split("/");
-      if (docName === "backstory") {
-        navigate("/");
+      const parts = location.pathname.split('/');
+      if (docName === 'backstory') {
+        navigate('/');
         return;
       }
       if (parts.length > 2) {
-        const basePath = parts.slice(0, -1).join("/");
+        const basePath = parts.slice(0, -1).join('/');
         navigate(`${basePath}/${docName}`);
       } else {
         navigate(docName);
       }
     } else {
-      const basePath = location.pathname.split("/").slice(0, -1).join("/");
+      const basePath = location.pathname.split('/').slice(0, -1).join('/');
       navigate(`${basePath}`);
     }
   };
@@ -312,7 +299,7 @@ const DocsPage = (props: BackstoryPageProps) => {
     page: string;
   }
   const DocView = (props: DocViewProps) => {
-    const { page = "about" } = props;
+    const { page = 'about' } = props;
     const title = documentTitleFromRoute(page);
     const icon = getDocumentIcon(title);
 
@@ -321,13 +308,13 @@ const DocsPage = (props: BackstoryPageProps) => {
         <CardContent>
           <Box
             sx={{
-              color: "inherit",
-              fontSize: "1.75rem",
-              fontWeight: "bold",
-              display: "flex",
-              flexDirection: "row",
+              color: 'inherit',
+              fontSize: '1.75rem',
+              fontWeight: 'bold',
+              display: 'flex',
+              flexDirection: 'row',
               gap: 1,
-              alignItems: "center",
+              alignItems: 'center',
               mr: 1.5,
             }}
           >
@@ -343,19 +330,19 @@ const DocsPage = (props: BackstoryPageProps) => {
   // Render the appropriate content based on current page
   function renderContent() {
     switch (page) {
-      case "ui-overview":
+      case 'ui-overview':
         return <BackstoryUIOverviewPage />;
-      case "theme-visualizer":
+      case 'theme-visualizer':
         return (
           <Paper sx={{ m: 0, p: 1 }}>
             <BackstoryThemeVisualizerPage />
           </Paper>
         );
-      case "app-analysis":
+      case 'app-analysis':
         return <BackstoryAppAnalysisPage />;
-      case "ui-mockup":
+      case 'ui-mockup':
         return <MockupPage />;
-      case "user-management":
+      case 'user-management':
         return <UserManagement />;
       default:
         if (documentFromRoute(page)) {
@@ -369,45 +356,39 @@ const DocsPage = (props: BackstoryPageProps) => {
                 Documentation
               </Typography>
               <Typography variant="body1" color="text.secondary">
-                Select a document from the sidebar to view detailed technical
-                information about the application.
+                Select a document from the sidebar to view detailed technical information about the
+                application.
               </Typography>
             </Box>
             <Grid container spacing={1}>
               {documents.map((doc, index) => {
                 if (doc.route === null) return <></>;
                 return (
-                  <Grid
-                    sx={{ minWidth: "164px" }}
-                    size={{ xs: 12, sm: 6, md: 4 }}
-                    key={index}
-                  >
-                    <Card sx={{ minHeight: "180px" }}>
+                  <Grid sx={{ minWidth: '164px' }} size={{ xs: 12, sm: 6, md: 4 }} key={index}>
+                    <Card sx={{ minHeight: '180px' }}>
                       <CardActionArea
                         onClick={() =>
-                          doc.route
-                            ? onDocumentExpand(doc.route, true)
-                            : navigate("/")
+                          doc.route ? onDocumentExpand(doc.route, true) : navigate('/')
                         }
                       >
                         <CardContent
                           sx={{
-                            display: "flex",
-                            flexDirection: "column",
+                            display: 'flex',
+                            flexDirection: 'column',
                             m: 0,
                             p: 1,
                           }}
                         >
                           <Box
                             sx={{
-                              display: "flex",
-                              flexDirection: "row",
+                              display: 'flex',
+                              flexDirection: 'row',
                               gap: 1,
-                              verticalAlign: "top",
+                              verticalAlign: 'top',
                             }}
                           >
                             {getDocumentIcon(doc.title)}
-                            <Typography variant="h3" sx={{ m: "0 !important" }}>
+                            <Typography variant="h3" sx={{ m: '0 !important' }}>
                               {doc.title}
                             </Typography>
                           </Box>
@@ -430,7 +411,7 @@ const DocsPage = (props: BackstoryPageProps) => {
   const drawerWidth = 240;
 
   return (
-    <Box sx={{ display: "flex", height: "100%" }}>
+    <Box sx={{ display: 'flex', height: '100%' }}>
       {/* Mobile App Bar */}
       {isMobile && (
         <AppBar
@@ -438,27 +419,17 @@ const DocsPage = (props: BackstoryPageProps) => {
           sx={{
             width: { sm: `calc(100% - ${drawerWidth}px)` },
             ml: { sm: `${drawerWidth}px` },
-            display: { md: "none" },
+            display: { md: 'none' },
           }}
           elevation={0}
           color="default"
         >
           <Toolbar>
-            <IconButton
-              aria-label="open drawer"
-              edge="start"
-              onClick={toggleDrawer}
-              sx={{ mr: 2 }}
-            >
+            <IconButton aria-label="open drawer" edge="start" onClick={toggleDrawer} sx={{ mr: 2 }}>
               <MenuIcon />
             </IconButton>
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{ color: "white" }}
-            >
-              {page ? documentTitleFromRoute(page) : "Documentation"}
+            <Typography variant="h6" noWrap component="div" sx={{ color: 'white' }}>
+              {page ? documentTitleFromRoute(page) : 'Documentation'}
             </Typography>
           </Toolbar>
         </AppBar>
@@ -482,9 +453,9 @@ const DocsPage = (props: BackstoryPageProps) => {
               keepMounted: true, // Better open performance on mobile
             }}
             sx={{
-              display: { xs: "block", md: "none" },
-              "& .MuiDrawer-paper": {
-                boxSizing: "border-box",
+              display: { xs: 'block', md: 'none' },
+              '& .MuiDrawer-paper': {
+                boxSizing: 'border-box',
                 width: drawerWidth,
               },
             }}
@@ -501,21 +472,17 @@ const DocsPage = (props: BackstoryPageProps) => {
           <Drawer
             variant="permanent"
             sx={{
-              display: { xs: "none", md: "block" },
-              "& .MuiDrawer-paper": {
-                boxSizing: "border-box",
+              display: { xs: 'none', md: 'block' },
+              '& .MuiDrawer-paper': {
+                boxSizing: 'border-box',
                 width: drawerWidth,
-                position: "relative",
-                height: "100%",
+                position: 'relative',
+                height: '100%',
               },
             }}
             open
           >
-            <Sidebar
-              currentPage={page}
-              onDocumentSelect={onDocumentExpand}
-              isMobile={false}
-            />
+            <Sidebar currentPage={page} onDocumentSelect={onDocumentExpand} isMobile={false} />
           </Drawer>
         )}
       </Box>
@@ -528,8 +495,8 @@ const DocsPage = (props: BackstoryPageProps) => {
           p: 3,
           width: { md: `calc(100% - ${drawerWidth}px)` },
           pt: isMobile ? { xs: 8, sm: 9 } : 3, // Add padding top on mobile to account for AppBar
-          height: "100%",
-          overflow: "auto",
+          height: '100%',
+          overflow: 'auto',
         }}
       >
         {renderContent()}
diff --git a/frontend/src/pages/FindCandidatePage.tsx b/frontend/src/pages/FindCandidatePage.tsx
index 08b23f4..d23abbf 100644
--- a/frontend/src/pages/FindCandidatePage.tsx
+++ b/frontend/src/pages/FindCandidatePage.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import { BackstoryPageProps } from "../components/BackstoryTab";
-import { CandidatePicker } from "components/ui/CandidatePicker";
+import { BackstoryPageProps } from '../components/BackstoryTab';
+import { CandidatePicker } from 'components/ui/CandidatePicker';
 
 const CandidateListingPage = (props: BackstoryPageProps) => {
   return <CandidatePicker {...props} />;
diff --git a/frontend/src/pages/GenerateCandidate.tsx b/frontend/src/pages/GenerateCandidate.tsx
index beffd76..5e4d019 100644
--- a/frontend/src/pages/GenerateCandidate.tsx
+++ b/frontend/src/pages/GenerateCandidate.tsx
@@ -1,25 +1,22 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
-import Avatar from "@mui/material/Avatar";
-import Box from "@mui/material/Box";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import CancelIcon from "@mui/icons-material/Cancel";
-import SendIcon from "@mui/icons-material/Send";
-import PropagateLoader from "react-spinners/PropagateLoader";
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import CancelIcon from '@mui/icons-material/Cancel';
+import SendIcon from '@mui/icons-material/Send';
+import PropagateLoader from 'react-spinners/PropagateLoader';
 
-import { CandidateInfo } from "../components/ui/CandidateInfo";
-import { Quote } from "components/Quote";
-import { BackstoryElementProps } from "components/BackstoryTab";
-import {
-  BackstoryTextField,
-  BackstoryTextFieldRef,
-} from "components/BackstoryTextField";
-import { StyledMarkdown } from "components/StyledMarkdown";
-import { Scrollable } from "../components/Scrollable";
-import { Pulse } from "components/Pulse";
-import { StreamingResponse } from "services/api-client";
+import { CandidateInfo } from '../components/ui/CandidateInfo';
+import { Quote } from 'components/Quote';
+import { BackstoryElementProps } from 'components/BackstoryTab';
+import { BackstoryTextField, BackstoryTextFieldRef } from 'components/BackstoryTextField';
+import { StyledMarkdown } from 'components/StyledMarkdown';
+import { Scrollable } from '../components/Scrollable';
+import { Pulse } from 'components/Pulse';
+import { StreamingResponse } from 'services/api-client';
 import {
   ChatMessage,
   ChatMessageUser,
@@ -27,34 +24,32 @@ import {
   CandidateAI,
   ChatMessageStatus,
   ChatMessageError,
-} from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { Message } from "components/Message";
-import { useAppState } from "hooks/GlobalContext";
+} from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { Message } from 'components/Message';
+import { useAppState } from 'hooks/GlobalContext';
 
 const defaultMessage: ChatMessage = {
-  status: "done",
-  type: "text",
-  sessionId: "",
+  status: 'done',
+  type: 'text',
+  sessionId: '',
   timestamp: new Date(),
-  content: "",
-  role: "user",
+  content: '',
+  role: 'user',
   metadata: null as any,
 };
 
 const GenerateCandidate = (props: BackstoryElementProps) => {
   const { apiClient, user } = useAuth();
   const { setSnack } = useAppState();
-  const [processingMessage, setProcessingMessage] =
-    useState<ChatMessage | null>(null);
+  const [processingMessage, setProcessingMessage] = useState<ChatMessage | null>(null);
   const [processing, setProcessing] = useState<boolean>(false);
   const [generatedUser, setGeneratedUser] = useState<CandidateAI | null>(null);
-  const [prompt, setPrompt] = useState<string>("");
+  const [prompt, setPrompt] = useState<string>('');
   const [resume, setResume] = useState<string | null>(null);
   const [canGenImage, setCanGenImage] = useState<boolean>(false);
-  const [timestamp, setTimestamp] = useState<string>("");
-  const [shouldGenerateProfile, setShouldGenerateProfile] =
-    useState<boolean>(false);
+  const [timestamp, setTimestamp] = useState<string>('');
+  const [shouldGenerateProfile, setShouldGenerateProfile] = useState<boolean>(false);
   const [chatSession, setChatSession] = useState<ChatSession | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -74,26 +69,18 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
         .getOrCreateChatSession(
           generatedUser,
           `Profile image generator for ${generatedUser.fullName}`,
-          "generate_image"
+          'generate_image'
         )
-        .then((session) => {
+        .then(session => {
           setChatSession(session);
           setLoading(false);
         });
     } catch (error) {
-      setSnack("Unable to load chat session", "error");
+      setSnack('Unable to load chat session', 'error');
     } finally {
       setLoading(false);
     }
-  }, [
-    generatedUser,
-    chatSession,
-    loading,
-    setChatSession,
-    setLoading,
-    setSnack,
-    apiClient,
-  ]);
+  }, [generatedUser, chatSession, loading, setChatSession, setLoading, setSnack, apiClient]);
 
   const cancelQuery = useCallback(() => {
     if (controllerRef.current) {
@@ -111,18 +98,18 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
 
       const generatePersona = async (prompt: string) => {
         const userMessage: ChatMessageUser = {
-          type: "text",
-          role: "user",
+          type: 'text',
+          role: 'user',
           content: prompt,
-          sessionId: "",
-          status: "done",
+          sessionId: '',
+          status: 'done',
           timestamp: new Date(),
         };
-        setPrompt(prompt || "");
+        setPrompt(prompt || '');
         setProcessing(true);
         setProcessingMessage({
           ...defaultMessage,
-          content: "Generating persona...",
+          content: 'Generating persona...',
         });
         try {
           const result = await apiClient.createCandidateAI(userMessage);
@@ -133,11 +120,11 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
           setShouldGenerateProfile(true); // Reset the flag
         } catch (error) {
           console.error(error);
-          setPrompt("");
+          setPrompt('');
           setResume(null);
           setProcessing(false);
           setProcessingMessage(null);
-          setSnack("Unable to generate AI persona", "error");
+          setSnack('Unable to generate AI persona', 'error');
         }
       };
 
@@ -147,10 +134,7 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
   );
 
   const handleSendClick = useCallback(() => {
-    const value =
-      (backstoryTextRef.current &&
-        backstoryTextRef.current.getAndResetValue()) ||
-      "";
+    const value = (backstoryTextRef.current && backstoryTextRef.current.getAndResetValue()) || '';
     onEnter(value);
   }, [onEnter]);
 
@@ -163,29 +147,29 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
 
     if (
       !shouldGenerateProfile ||
-      username === "[blank]" ||
-      generatedUser?.firstName === "[blank]"
+      username === '[blank]' ||
+      generatedUser?.firstName === '[blank]'
     ) {
       return;
     }
 
     if (controllerRef.current) {
-      console.log("Controller already active, skipping profile generation");
+      console.log('Controller already active, skipping profile generation');
       return;
     }
 
     setProcessingMessage({
       ...defaultMessage,
-      content: "Starting image generation...",
+      content: 'Starting image generation...',
     });
     setProcessing(true);
     setCanGenImage(false);
 
     const chatMessage: ChatMessageUser = {
-      sessionId: chatSession.id || "",
-      role: "user",
-      status: "done",
-      type: "text",
+      sessionId: chatSession.id || '',
+      role: 'user',
+      status: 'done',
+      type: 'text',
       timestamp: new Date(),
       content: prompt,
     };
@@ -195,20 +179,18 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
         console.log(`onMessage: ${msg.type} ${msg.content}`, msg);
         controllerRef.current = null;
         try {
-          await apiClient.updateCandidate(generatedUser.id || "", {
-            profileImage: "profile.png",
+          await apiClient.updateCandidate(generatedUser.id || '', {
+            profileImage: 'profile.png',
           });
-          const { success, message } = await apiClient.deleteChatSession(
-            chatSession.id || ""
-          );
+          const { success, message } = await apiClient.deleteChatSession(chatSession.id || '');
           console.log(
             `Profile generated for ${username} and chat session was ${
-              !success ? "not " : ""
+              !success ? 'not ' : ''
             } deleted: ${message}}`
           );
           setGeneratedUser({
             ...generatedUser,
-            profileImage: "profile.png",
+            profileImage: 'profile.png',
           } as CandidateAI);
           setCanGenImage(true);
           setShouldGenerateProfile(false);
@@ -216,20 +198,17 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
           console.error(error);
           setSnack(
             `Unable to update ${username} to indicate they have a profile picture.`,
-            "error"
+            'error'
           );
         }
       },
       onError: (error: string | ChatMessageError) => {
-        console.log("onError:", error);
+        console.log('onError:', error);
         // Type-guard to determine if this is a ChatMessageBase or a string
-        if (typeof error === "object" && error !== null && "content" in error) {
-          setSnack(
-            error.content || "Unknown error generating profile image",
-            "error"
-          );
+        if (typeof error === 'object' && error !== null && 'content' in error) {
+          setSnack(error.content || 'Unknown error generating profile image', 'error');
         } else {
-          setSnack(error as string, "error");
+          setSnack(error as string, 'error');
         }
         setProcessingMessage(null);
         setProcessing(false);
@@ -245,51 +224,40 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
         setShouldGenerateProfile(false);
       },
       onStatus: (status: ChatMessageStatus) => {
-        if (status.activity === "heartbeat" && status.content) {
-          setTimestamp(status.timestamp?.toISOString() || "");
+        if (status.activity === 'heartbeat' && status.content) {
+          setTimestamp(status.timestamp?.toISOString() || '');
         } else if (status.content) {
           setProcessingMessage({ ...defaultMessage, content: status.content });
         }
         console.log(`onStatusChange: ${status}`);
       },
     });
-  }, [
-    chatSession,
-    shouldGenerateProfile,
-    generatedUser,
-    prompt,
-    setSnack,
-    apiClient,
-  ]);
+  }, [chatSession, shouldGenerateProfile, generatedUser, prompt, setSnack, apiClient]);
 
   if (!user?.isAdmin) {
-    return (
-      <Box>You must be logged in as an admin to generate AI candidates.</Box>
-    );
+    return <Box>You must be logged in as an admin to generate AI candidates.</Box>;
   }
 
   return (
     <Box
       className="GenerateCandidate"
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         flexGrow: 1,
         gap: 1,
-        maxWidth: { xs: "100%", md: "700px", lg: "1024px" },
+        maxWidth: { xs: '100%', md: '700px', lg: '1024px' },
       }}
     >
-      {generatedUser && (
-        <CandidateInfo candidate={generatedUser} sx={{ flexShrink: 1 }} />
-      )}
+      {generatedUser && <CandidateInfo candidate={generatedUser} sx={{ flexShrink: 1 }} />}
       {prompt && <Quote quote={prompt} />}
       {processing && (
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
             m: 2,
           }}
         >
@@ -304,62 +272,58 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
           />
         </Box>
       )}
-      <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "row",
-            position: "relative",
+            display: 'flex',
+            flexDirection: 'row',
+            position: 'relative',
           }}
         >
           <Box
             sx={{
-              display: "flex",
-              position: "relative",
-              width: "min-content",
-              height: "min-content",
+              display: 'flex',
+              position: 'relative',
+              width: 'min-content',
+              height: 'min-content',
             }}
           >
             <Avatar
               src={
                 generatedUser?.profileImage
                   ? `/api/1.0/candidates/profile/${generatedUser.username}`
-                  : ""
+                  : ''
               }
               alt={`${generatedUser?.fullName}'s profile`}
               sx={{
                 width: 80,
                 height: 80,
-                border: "2px solid #e0e0e0",
+                border: '2px solid #e0e0e0',
               }}
             />
             {processing && (
               <Pulse
                 sx={{
-                  position: "relative",
-                  left: "-80px",
-                  top: "0px",
-                  mr: "-80px",
+                  position: 'relative',
+                  left: '-80px',
+                  top: '0px',
+                  mr: '-80px',
                 }}
                 timestamp={timestamp}
               />
             )}
           </Box>
 
-          <Tooltip
-            title={`${
-              generatedUser?.profileImage ? "Re-" : ""
-            }Generate Picture`}
-          >
-            <span style={{ display: "flex", flexGrow: 1 }}>
+          <Tooltip title={`${generatedUser?.profileImage ? 'Re-' : ''}Generate Picture`}>
+            <span style={{ display: 'flex', flexGrow: 1 }}>
               <Button
                 sx={{
                   m: 1,
                   gap: 1,
-                  justifySelf: "flex-start",
-                  alignSelf: "center",
+                  justifySelf: 'flex-start',
+                  alignSelf: 'center',
                   flexGrow: 0,
-                  maxHeight: "min-content",
+                  maxHeight: 'min-content',
                 }}
                 variant="contained"
                 disabled={processing || !canGenImage}
@@ -367,7 +331,7 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
                   setShouldGenerateProfile(true);
                 }}
               >
-                {generatedUser?.profileImage ? "Re-" : ""}Generate Picture
+                {generatedUser?.profileImage ? 'Re-' : ''}Generate Picture
                 <SendIcon />
               </Button>
             </span>
@@ -388,11 +352,9 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
         onEnter={onEnter}
         placeholder='Specify any characteristics you would like the persona to have. For example, "This person likes yo-yos."'
       />
-      <Box
-        sx={{ display: "flex", justifyContent: "center", flexDirection: "row" }}
-      >
-        <Tooltip title={"Send"}>
-          <span style={{ display: "flex", flexGrow: 1 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'row' }}>
+        <Tooltip title={'Send'}>
+          <span style={{ display: 'flex', flexGrow: 1 }}>
             <Button
               sx={{ m: 1, gap: 1, flexGrow: 1 }}
               variant="contained"
@@ -405,13 +367,13 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
           </span>
         </Tooltip>
         <Tooltip title="Cancel">
-          <span style={{ display: "flex" }}>
-            {" "}
+          <span style={{ display: 'flex' }}>
+            {' '}
             {/* This span is used to wrap the IconButton to ensure Tooltip works even when disabled */}
             <IconButton
               aria-label="cancel"
               onClick={cancelQuery}
-              sx={{ display: "flex", margin: "auto 0px" }}
+              sx={{ display: 'flex', margin: 'auto 0px' }}
               size="large"
               edge="start"
               disabled={controllerRef.current === null || processing === false}
@@ -421,7 +383,7 @@ const GenerateCandidate = (props: BackstoryElementProps) => {
           </span>
         </Tooltip>
       </Box>
-      <Box sx={{ display: "flex", flexGrow: 1 }} />
+      <Box sx={{ display: 'flex', flexGrow: 1 }} />
     </Box>
   );
 };
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index bfdaa61..c26008c 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Box,
   Button,
@@ -11,16 +11,16 @@ import {
   Card,
   CardContent,
   CardActions,
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import PersonSearchIcon from "@mui/icons-material/PersonSearch";
-import WorkHistoryIcon from "@mui/icons-material/WorkHistory";
-import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
-import DescriptionIcon from "@mui/icons-material/Description";
-import professionalConversationPng from "assets/Conversation.png";
-import { ComingSoon } from "components/ui/ComingSoon";
-import { useAuth } from "hooks/AuthContext";
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import PersonSearchIcon from '@mui/icons-material/PersonSearch';
+import WorkHistoryIcon from '@mui/icons-material/WorkHistory';
+import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
+import DescriptionIcon from '@mui/icons-material/Description';
+import professionalConversationPng from 'assets/Conversation.png';
+import { ComingSoon } from 'components/ui/ComingSoon';
+import { useAuth } from 'hooks/AuthContext';
 
 // Placeholder for Testimonials component
 const Testimonials = () => {
@@ -36,7 +36,7 @@ const HeroSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(8, 0),
   backgroundColor: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down('md')]: {
     padding: theme.spacing(6, 0),
   },
 }));
@@ -50,7 +50,7 @@ const HeroButton = (props: HeroButtonProps) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    const path = children?.replace(/ /g, "-").toLocaleLowerCase() || "/";
+    const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
     navigate(path);
   };
 
@@ -60,7 +60,7 @@ const HeroButton = (props: HeroButtonProps) => {
     fontWeight: 500,
     backgroundColor: theme.palette.action.active,
     color: theme.palette.background.paper,
-    "&:hover": {
+    '&:hover': {
       backgroundColor: theme.palette.action.active,
       opacity: 0.9,
     },
@@ -81,7 +81,7 @@ const ActionButton = (props: ActionButtonProps) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    const path = children?.replace(/ /g, "-").toLocaleLowerCase() || "/";
+    const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
     navigate(path);
   };
 
@@ -95,11 +95,11 @@ const ActionButton = (props: ActionButtonProps) => {
 const FeatureIcon = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.action.active,
   color: theme.palette.background.paper,
-  borderRadius: "50%",
+  borderRadius: '50%',
   padding: theme.spacing(2),
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
   marginBottom: theme.spacing(2),
   width: 64,
   height: 64,
@@ -116,7 +116,7 @@ const FeatureCard = ({
   description: string;
 }) => {
   return (
-    <Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       <CardContent sx={{ flexGrow: 1 }}>
         <Box display="flex" justifyContent="center" mb={2}>
           {icon}
@@ -128,7 +128,7 @@ const FeatureCard = ({
           {description}
         </Typography>
       </CardContent>
-      <CardActions sx={{ justifyContent: "center", pb: 2 }}>
+      <CardActions sx={{ justifyContent: 'center', pb: 2 }}>
         <Button size="small" endIcon={<ArrowForwardIcon />}>
           Learn more
         </Button>
@@ -143,25 +143,25 @@ const HomePage = () => {
 
   if (isGuest) {
     // Show guest-specific UI
-    console.log("Guest session:", guest?.sessionId || "No guest");
+    console.log('Guest session:', guest?.sessionId || 'No guest');
   } else {
     // Show authenticated user UI
-    console.log("Authenticated user:", user?.email || "No user");
+    console.log('Authenticated user:', user?.email || 'No user');
   }
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column" }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       {/* Hero Section */}
       <HeroSection>
         <Container>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: { xs: "column", md: "row" },
+              display: 'flex',
+              flexDirection: { xs: 'column', md: 'row' },
               gap: 4,
-              alignItems: "center",
+              alignItems: 'center',
               flexGrow: 1,
-              maxWidth: "1024px",
+              maxWidth: '1024px',
             }}
           >
             <Box sx={{ flex: 1, flexGrow: 1 }}>
@@ -170,18 +170,18 @@ const HomePage = () => {
                 component="h1"
                 sx={{
                   fontWeight: 700,
-                  fontSize: { xs: "2rem", md: "3rem" },
+                  fontSize: { xs: '2rem', md: '3rem' },
                   mb: 2,
-                  color: "white",
+                  color: 'white',
                 }}
               >
                 Your complete professional story, beyond a single page
               </Typography>
               <Typography variant="h5" sx={{ mb: 3, fontWeight: 400 }}>
-                Let potential employers discover the depth of your experience
-                through interactive Q&A and tailored resumes
+                Let potential employers discover the depth of your experience through interactive
+                Q&A and tailored resumes
               </Typography>
-              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                 <HeroButton variant="contained" size="large">
                   Get Started as Candidate
                 </HeroButton>
@@ -189,9 +189,9 @@ const HomePage = () => {
                   variant="outlined"
                   size="large"
                   sx={{
-                    backgroundColor: "transparent",
-                    border: "2px solid",
-                    borderColor: "action.active",
+                    backgroundColor: 'transparent',
+                    border: '2px solid',
+                    borderColor: 'action.active',
                   }}
                 >
                   Recruit Talent
@@ -200,8 +200,8 @@ const HomePage = () => {
             </Box>
             <Box
               sx={{
-                justifyContent: "center",
-                display: { xs: "none", md: "block" },
+                justifyContent: 'center',
+                display: { xs: 'none', md: 'block' },
               }}
             >
               <Box
@@ -209,9 +209,9 @@ const HomePage = () => {
                 src={professionalConversationPng}
                 alt="Professional conversation"
                 sx={{
-                  width: "100%",
+                  width: '100%',
                   maxWidth: 200,
-                  height: "auto",
+                  height: 'auto',
                   borderRadius: 2,
                   boxShadow: 3,
                 }}
@@ -235,25 +235,19 @@ const HomePage = () => {
 
         <Box
           sx={{
-            display: "flex",
-            flexDirection: { xs: "column", md: "row" },
+            display: 'flex',
+            flexDirection: { xs: 'column', md: 'row' },
             gap: 4,
           }}
         >
           <Box sx={{ flex: 1 }}>
-            <Typography
-              variant="h4"
-              component="h3"
-              gutterBottom
-              sx={{ color: "primary.main" }}
-            >
+            <Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
               For Job Seekers
             </Typography>
             <Box sx={{ my: 3 }}>
               <Typography variant="body1" paragraph>
-                Backstory helps you tell your complete professional story,
-                highlight your achievements, and showcase your skills beyond
-                what fits on a traditional resume.
+                Backstory helps you tell your complete professional story, highlight your
+                achievements, and showcase your skills beyond what fits on a traditional resume.
               </Typography>
             </Box>
 
@@ -261,18 +255,18 @@ const HomePage = () => {
               <Box display="flex" alignItems="center">
                 <Box
                   sx={{
-                    backgroundColor: "primary.main",
-                    color: "primary.contrastText",
-                    borderRadius: "50%",
+                    backgroundColor: 'primary.main',
+                    color: 'primary.contrastText',
+                    borderRadius: '50%',
                     width: 40,
                     height: 40,
                     minWidth: 40,
                     minHeight: 40,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
                     mr: 2,
-                    fontWeight: "bold",
+                    fontWeight: 'bold',
                   }}
                 >
                   1
@@ -285,43 +279,42 @@ const HomePage = () => {
               <Box display="flex" alignItems="center">
                 <Box
                   sx={{
-                    backgroundColor: "primary.main",
-                    color: "primary.contrastText",
-                    borderRadius: "50%",
+                    backgroundColor: 'primary.main',
+                    color: 'primary.contrastText',
+                    borderRadius: '50%',
                     width: 40,
                     height: 40,
                     minWidth: 40,
                     minHeight: 40,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
                     mr: 2,
-                    fontWeight: "bold",
+                    fontWeight: 'bold',
                   }}
                 >
                   2
                 </Box>
                 <Typography variant="body1">
-                  Configure your AI assistant to answer questions about your
-                  experience
+                  Configure your AI assistant to answer questions about your experience
                 </Typography>
               </Box>
 
               <Box display="flex" alignItems="center">
                 <Box
                   sx={{
-                    backgroundColor: "primary.main",
-                    color: "primary.contrastText",
-                    borderRadius: "50%",
+                    backgroundColor: 'primary.main',
+                    color: 'primary.contrastText',
+                    borderRadius: '50%',
                     width: 40,
                     height: 40,
                     minWidth: 40,
                     minHeight: 40,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
                     mr: 2,
-                    fontWeight: "bold",
+                    fontWeight: 'bold',
                   }}
                 >
                   3
@@ -344,19 +337,13 @@ const HomePage = () => {
 
           <ComingSoon>
             <Box sx={{ flex: 1 }}>
-              <Typography
-                variant="h4"
-                component="h3"
-                gutterBottom
-                sx={{ color: "primary.main" }}
-              >
+              <Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
                 For Employers
               </Typography>
               <Box sx={{ my: 3 }}>
                 <Typography variant="body1" paragraph>
-                  Discover candidates with the perfect skills and experience for
-                  your positions by engaging in meaningful Q&A to learn more
-                  about their background.
+                  Discover candidates with the perfect skills and experience for your positions by
+                  engaging in meaningful Q&A to learn more about their background.
                 </Typography>
               </Box>
 
@@ -364,68 +351,66 @@ const HomePage = () => {
                 <Box display="flex" alignItems="center">
                   <Box
                     sx={{
-                      backgroundColor: "secondary.main",
-                      color: "secondary.contrastText",
-                      borderRadius: "50%",
+                      backgroundColor: 'secondary.main',
+                      color: 'secondary.contrastText',
+                      borderRadius: '50%',
                       width: 40,
                       height: 40,
                       minWidth: 40,
                       minHeight: 40,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
                       mr: 2,
-                      fontWeight: "bold",
+                      fontWeight: 'bold',
                     }}
                   >
                     1
                   </Box>
                   <Typography variant="body1">
-                    Search the candidate pool based on skills, experience, and
-                    location
+                    Search the candidate pool based on skills, experience, and location
                   </Typography>
                 </Box>
 
                 <Box display="flex" alignItems="center">
                   <Box
                     sx={{
-                      backgroundColor: "secondary.main",
-                      color: "secondary.contrastText",
-                      borderRadius: "50%",
+                      backgroundColor: 'secondary.main',
+                      color: 'secondary.contrastText',
+                      borderRadius: '50%',
                       width: 40,
                       height: 40,
                       minWidth: 40,
                       minHeight: 40,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
                       mr: 2,
-                      fontWeight: "bold",
+                      fontWeight: 'bold',
                     }}
                   >
                     2
                   </Box>
                   <Typography variant="body1">
-                    Ask personalized questions about candidates' experience and
-                    skills
+                    Ask personalized questions about candidates' experience and skills
                   </Typography>
                 </Box>
 
                 <Box display="flex" alignItems="center">
                   <Box
                     sx={{
-                      backgroundColor: "secondary.main",
-                      color: "secondary.contrastText",
-                      borderRadius: "50%",
+                      backgroundColor: 'secondary.main',
+                      color: 'secondary.contrastText',
+                      borderRadius: '50%',
                       width: 40,
                       height: 40,
                       minWidth: 40,
                       minHeight: 40,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
                       mr: 2,
-                      fontWeight: "bold",
+                      fontWeight: 'bold',
                     }}
                   >
                     3
@@ -450,7 +435,7 @@ const HomePage = () => {
       </Container>
 
       {/* Features Section */}
-      <Box sx={{ backgroundColor: "background.paper", py: 8 }}>
+      <Box sx={{ backgroundColor: 'background.paper', py: 8 }}>
         <Container>
           <Typography
             variant="h3"
@@ -462,14 +447,14 @@ const HomePage = () => {
             Key Features
           </Typography>
 
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
             <Box
               sx={{
-                flex: "1 1 250px",
+                flex: '1 1 250px',
                 minWidth: {
-                  xs: "100%",
-                  sm: "calc(50% - 16px)",
-                  md: "calc(25% - 16px)",
+                  xs: '100%',
+                  sm: 'calc(50% - 16px)',
+                  md: 'calc(25% - 16px)',
                 },
               }}
             >
@@ -485,11 +470,11 @@ const HomePage = () => {
             </Box>
             <Box
               sx={{
-                flex: "1 1 250px",
+                flex: '1 1 250px',
                 minWidth: {
-                  xs: "100%",
-                  sm: "calc(50% - 16px)",
-                  md: "calc(25% - 16px)",
+                  xs: '100%',
+                  sm: 'calc(50% - 16px)',
+                  md: 'calc(25% - 16px)',
                 },
               }}
             >
@@ -505,11 +490,11 @@ const HomePage = () => {
             </Box>
             <Box
               sx={{
-                flex: "1 1 250px",
+                flex: '1 1 250px',
                 minWidth: {
-                  xs: "100%",
-                  sm: "calc(50% - 16px)",
-                  md: "calc(25% - 16px)",
+                  xs: '100%',
+                  sm: 'calc(50% - 16px)',
+                  md: 'calc(25% - 16px)',
                 },
               }}
             >
@@ -525,11 +510,11 @@ const HomePage = () => {
             </Box>
             <Box
               sx={{
-                flex: "1 1 250px",
+                flex: '1 1 250px',
                 minWidth: {
-                  xs: "100%",
-                  sm: "calc(50% - 16px)",
-                  md: "calc(25% - 16px)",
+                  xs: '100%',
+                  sm: 'calc(50% - 16px)',
+                  md: 'calc(25% - 16px)',
                 },
               }}
             >
@@ -559,13 +544,8 @@ const HomePage = () => {
           >
             Success Stories
           </Typography>
-          <Typography
-            variant="body1"
-            align="center"
-            sx={{ mb: 6, maxWidth: 800, mx: "auto" }}
-          >
-            See how Backstory has transformed the hiring process for both
-            candidates and employers.
+          <Typography variant="body1" align="center" sx={{ mb: 6, maxWidth: 800, mx: 'auto' }}>
+            See how Backstory has transformed the hiring process for both candidates and employers.
           </Typography>
 
           <Testimonials />
@@ -575,39 +555,29 @@ const HomePage = () => {
       {/* CTA Section */}
       <Box
         sx={{
-          backgroundColor: "primary.main",
-          color: "primary.contrastText",
+          backgroundColor: 'primary.main',
+          color: 'primary.contrastText',
           py: 8,
         }}
       >
         <Container>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
               maxWidth: 800,
-              mx: "auto",
+              mx: 'auto',
             }}
           >
-            <Typography
-              variant="h3"
-              component="h2"
-              gutterBottom
-              sx={{ color: "white" }}
-            >
+            <Typography variant="h3" component="h2" gutterBottom sx={{ color: 'white' }}>
               Ready to transform your hiring process?
             </Typography>
             <Typography variant="h6" sx={{ mb: 4 }}>
-              Join Backstory today and discover a better way to connect talent
-              with opportunity.
+              Join Backstory today and discover a better way to connect talent with opportunity.
             </Typography>
-            <Stack
-              direction={{ xs: "column", sm: "row" }}
-              spacing={2}
-              justifyContent="center"
-            >
+            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} justifyContent="center">
               <HeroButton variant="contained" size="large">
                 Sign Up as Candidate
               </HeroButton>
@@ -615,9 +585,9 @@ const HomePage = () => {
                 variant="outlined"
                 size="large"
                 sx={{
-                  backgroundColor: "transparent",
-                  border: "2px solid",
-                  borderColor: "action.active",
+                  backgroundColor: 'transparent',
+                  border: '2px solid',
+                  borderColor: 'action.active',
                 }}
               >
                 Sign Up as Employer
diff --git a/frontend/src/pages/HowItWorks.tsx b/frontend/src/pages/HowItWorks.tsx
index 058babe..96dc3e8 100644
--- a/frontend/src/pages/HowItWorks.tsx
+++ b/frontend/src/pages/HowItWorks.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Box,
   Button,
@@ -17,37 +17,37 @@ import {
   ButtonProps,
   useMediaQuery,
   useTheme,
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import AssessmentIcon from "@mui/icons-material/Assessment";
-import PersonIcon from "@mui/icons-material/Person";
-import WorkIcon from "@mui/icons-material/Work";
-import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
-import DescriptionIcon from "@mui/icons-material/Description";
-import professionalConversationPng from "assets/Conversation.png";
-import selectAJobPng from "assets/select-a-job.png";
-import selectJobAnalysisPng from "assets/select-job-analysis.png";
-import selectACandidatePng from "assets/select-a-candidate.png";
-import selectStartAnalysisPng from "assets/select-start-analysis.png";
-import waitPng from "assets/wait.png";
-import finalResumePng from "assets/final-resume.png";
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import PersonIcon from '@mui/icons-material/Person';
+import WorkIcon from '@mui/icons-material/Work';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import DescriptionIcon from '@mui/icons-material/Description';
+import professionalConversationPng from 'assets/Conversation.png';
+import selectAJobPng from 'assets/select-a-job.png';
+import selectJobAnalysisPng from 'assets/select-job-analysis.png';
+import selectACandidatePng from 'assets/select-a-candidate.png';
+import selectStartAnalysisPng from 'assets/select-start-analysis.png';
+import waitPng from 'assets/wait.png';
+import finalResumePng from 'assets/final-resume.png';
 
-import { Beta } from "components/ui/Beta";
+import { Beta } from 'components/ui/Beta';
 
 // Styled components matching HomePage patterns
 const HeroSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(3, 0),
   backgroundColor: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down('md')]: {
     padding: theme.spacing(2, 0),
   },
 }));
 
 const StepSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(6, 0),
-  "&:nth-of-type(even)": {
+  '&:nth-of-type(even)': {
     backgroundColor: theme.palette.background.default,
   },
 }));
@@ -55,25 +55,25 @@ const StepSection = styled(Box)(({ theme }) => ({
 const StepNumber = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.action.active,
   color: theme.palette.background.paper,
-  borderRadius: "50%",
+  borderRadius: '50%',
   width: 60,
   height: 60,
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  fontSize: "1.5rem",
-  fontWeight: "bold",
-  margin: "0 auto 1rem auto",
-  [theme.breakpoints.up("md")]: {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: '1.5rem',
+  fontWeight: 'bold',
+  margin: '0 auto 1rem auto',
+  [theme.breakpoints.up('md')]: {
     margin: 0,
   },
 }));
 
 const ImageContainer = styled(Box)(({ theme }) => ({
-  textAlign: "center",
-  "& img": {
-    maxWidth: "100%",
-    height: "auto",
+  textAlign: 'center',
+  '& img': {
+    maxWidth: '100%',
+    height: 'auto',
     borderRadius: theme.spacing(1),
     boxShadow: theme.shadows[3],
     border: `2px solid ${theme.palette.action.active}`,
@@ -81,22 +81,22 @@ const ImageContainer = styled(Box)(({ theme }) => ({
 }));
 
 const StepCard = styled(Card)(({ theme }) => ({
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
   border: `1px solid ${theme.palette.action.active}`,
-  "&:hover": {
+  '&:hover': {
     boxShadow: theme.shadows[4],
   },
 }));
 
 const steps = [
-  "Select Job Analysis",
-  "Choose a Job",
-  "Select a Candidate",
-  "Start Assessment",
-  "Review Results",
-  "Generate Resume",
+  'Select Job Analysis',
+  'Choose a Job',
+  'Select a Candidate',
+  'Start Assessment',
+  'Review Results',
+  'Generate Resume',
 ];
 
 interface StepContentProps {
@@ -126,24 +126,18 @@ const StepContent: React.FC<StepContentProps> = ({
 }) => {
   const textContent = (
     <Grid size={{ xs: 12, md: 6 }}>
-      <Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
         <StepNumber>{stepNumber}</StepNumber>
-        <Box
-          sx={{ ml: { xs: 0, md: 3 }, textAlign: { xs: "center", md: "left" } }}
-        >
-          <Typography
-            variant="h3"
-            component="h2"
-            sx={{ color: "primary.main", mb: 1 }}
-          >
+        <Box sx={{ ml: { xs: 0, md: 3 }, textAlign: { xs: 'center', md: 'left' } }}>
+          <Typography variant="h3" component="h2" sx={{ color: 'primary.main', mb: 1 }}>
             {title}
           </Typography>
           <Box
             sx={{
-              display: "flex",
+              display: 'flex',
               gap: 1,
-              alignItems: "center",
-              justifyContent: { xs: "center", md: "flex-start" },
+              alignItems: 'center',
+              justifyContent: { xs: 'center', md: 'flex-start' },
             }}
           >
             {icon}
@@ -162,13 +156,13 @@ const StepContent: React.FC<StepContentProps> = ({
         <Paper
           sx={{
             p: 2,
-            backgroundColor: "action.hover",
-            border: "1px solid",
-            borderColor: "action.active",
+            backgroundColor: 'action.hover',
+            border: '1px solid',
+            borderColor: 'action.active',
             mt: 2,
           }}
         >
-          <Typography variant="body2" sx={{ fontStyle: "italic" }}>
+          <Typography variant="body2" sx={{ fontStyle: 'italic' }}>
             <strong>Note:</strong> {note}
           </Typography>
         </Paper>
@@ -177,12 +171,12 @@ const StepContent: React.FC<StepContentProps> = ({
         <Paper
           sx={{
             p: 2,
-            backgroundColor: "secondary.main",
-            color: "secondary.contrastText",
+            backgroundColor: 'secondary.main',
+            color: 'secondary.contrastText',
             mt: 2,
           }}
         >
-          <Typography variant="body1" sx={{ fontWeight: "bold" }}>
+          <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
             🎉 {success}
           </Typography>
         </Paper>
@@ -233,7 +227,7 @@ const HeroButton = (props: HeroButtonProps) => {
     fontWeight: 500,
     backgroundColor: theme.palette.action.active,
     color: theme.palette.background.paper,
-    "&:hover": {
+    '&:hover': {
       backgroundColor: theme.palette.action.active,
       opacity: 0.9,
     },
@@ -248,26 +242,26 @@ const HeroButton = (props: HeroButtonProps) => {
 const HowItWorks: React.FC = () => {
   const navigate = useNavigate();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   const handleGetStarted = () => {
-    navigate("/job-analysis");
+    navigate('/job-analysis');
   };
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column" }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       {/* Hero Section */}
       {/* Hero Section */}
       <HeroSection>
         <Container>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: { xs: "column", md: "row" },
+              display: 'flex',
+              flexDirection: { xs: 'column', md: 'row' },
               gap: 4,
-              alignItems: "center",
+              alignItems: 'center',
               flexGrow: 1,
-              maxWidth: "1024px",
+              maxWidth: '1024px',
             }}
           >
             <Box sx={{ flex: 1, flexGrow: 1 }}>
@@ -276,23 +270,19 @@ const HowItWorks: React.FC = () => {
                 component="h1"
                 sx={{
                   fontWeight: 700,
-                  fontSize: { xs: "2rem", md: "3rem" },
+                  fontSize: { xs: '2rem', md: '3rem' },
                   mb: 2,
-                  color: "white",
+                  color: 'white',
                 }}
               >
                 Your complete professional story, beyond a single page
               </Typography>
               <Typography variant="h5" sx={{ mb: 3, fontWeight: 400 }}>
-                Let potential employers discover the depth of your experience
-                through interactive Q&A and tailored resumes
+                Let potential employers discover the depth of your experience through interactive
+                Q&A and tailored resumes
               </Typography>
-              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                <HeroButton
-                  variant="contained"
-                  size="large"
-                  path="/login/register"
-                >
+              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                <HeroButton variant="contained" size="large" path="/login/register">
                   Get Started as Candidate
                 </HeroButton>
                 {/* <HeroButton
@@ -310,8 +300,8 @@ const HowItWorks: React.FC = () => {
             </Box>
             <Box
               sx={{
-                justifyContent: "center",
-                display: { xs: "none", md: "block" },
+                justifyContent: 'center',
+                display: { xs: 'none', md: 'block' },
               }}
             >
               <Box
@@ -319,9 +309,9 @@ const HowItWorks: React.FC = () => {
                 src={professionalConversationPng}
                 alt="Professional conversation"
                 sx={{
-                  width: "100%",
+                  width: '100%',
                   maxWidth: 200,
-                  height: "auto",
+                  height: 'auto',
                   borderRadius: 2,
                   boxShadow: 3,
                 }}
@@ -332,22 +322,22 @@ const HowItWorks: React.FC = () => {
       </HeroSection>
       <HeroSection
         sx={{
-          display: "flex",
-          position: "relative",
-          overflow: "hidden",
-          border: "2px solid orange",
+          display: 'flex',
+          position: 'relative',
+          overflow: 'hidden',
+          border: '2px solid orange',
         }}
       >
-        <Beta adaptive={false} sx={{ left: "-90px" }} />
-        <Container sx={{ display: "flex", position: "relative" }}>
+        <Beta adaptive={false} sx={{ left: '-90px' }} />
+        <Container sx={{ display: 'flex', position: 'relative' }}>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              textAlign: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              textAlign: 'center',
               maxWidth: 800,
-              mx: "auto",
-              position: "relative",
+              mx: 'auto',
+              position: 'relative',
             }}
           >
             <Typography
@@ -355,9 +345,9 @@ const HowItWorks: React.FC = () => {
               component="h1"
               sx={{
                 fontWeight: 700,
-                fontSize: { xs: "2rem", md: "2.5rem" },
+                fontSize: { xs: '2rem', md: '2.5rem' },
                 mb: 2,
-                color: "white",
+                color: 'white',
               }}
             >
               Welcome to the Backstory Beta!
@@ -371,9 +361,9 @@ const HowItWorks: React.FC = () => {
 
       {/* Progress Overview */}
       <Container sx={{ py: 4 }}>
-        <Box sx={{ display: { xs: "none", md: "block" } }}>
+        <Box sx={{ display: { xs: 'none', md: 'block' } }}>
           <Stepper alternativeLabel sx={{ mb: 4 }}>
-            {steps.map((label) => (
+            {steps.map(label => (
               <Step key={label}>
                 <StepLabel>{label}</StepLabel>
               </Step>
@@ -389,7 +379,7 @@ const HowItWorks: React.FC = () => {
             stepNumber={1}
             title="Select Job Analysis"
             subtitle="Navigate to the main feature"
-            icon={<AssessmentIcon sx={{ color: "action.active" }} />}
+            icon={<AssessmentIcon sx={{ color: 'action.active' }} />}
             description={[
               "Select 'Job Analysis' from the menu. This takes you to the interactive Job Analysis page, where you will get to evaluate a candidate for a selected job.",
             ]}
@@ -406,9 +396,9 @@ const HowItWorks: React.FC = () => {
             stepNumber={2}
             title="Choose a Job"
             subtitle="Pick from existing job postings"
-            icon={<WorkIcon sx={{ color: "action.active" }} />}
+            icon={<WorkIcon sx={{ color: 'action.active' }} />}
             description={[
-              "Once on the Job Analysis Page, explore a little bit and then select one of the jobs. The requirements and information provided on Backstory are extracted from job postings that users have pasted as a job description or uploaded from a PDF.",
+              'Once on the Job Analysis Page, explore a little bit and then select one of the jobs. The requirements and information provided on Backstory are extracted from job postings that users have pasted as a job description or uploaded from a PDF.',
             ]}
             imageSrc={selectAJobPng}
             imageAlt="Select a job from the available options"
@@ -425,9 +415,9 @@ const HowItWorks: React.FC = () => {
             stepNumber={3}
             title="Select a Candidate"
             subtitle="Choose from available profiles"
-            icon={<PersonIcon sx={{ color: "action.active" }} />}
+            icon={<PersonIcon sx={{ color: 'action.active' }} />}
             description={[
-              "Now that you have a Job selected, you need to select a candidate. In addition to myself (James), there are several candidates which AI has generated. Each has a unique skillset and can be used to test out the system.",
+              'Now that you have a Job selected, you need to select a candidate. In addition to myself (James), there are several candidates which AI has generated. Each has a unique skillset and can be used to test out the system.',
             ]}
             imageSrc={selectACandidatePng}
             imageAlt="Select a candidate from the available profiles"
@@ -443,10 +433,10 @@ const HowItWorks: React.FC = () => {
             stepNumber={4}
             title="Start Assessment"
             subtitle="Begin the AI analysis"
-            icon={<PlayArrowIcon sx={{ color: "action.active" }} />}
+            icon={<PlayArrowIcon sx={{ color: 'action.active' }} />}
             description={[
-              "After selecting a candidate, you are ready to have Backstory perform the Job Analysis. During this phase, Backstory will take each of requirements extracted from the Job and match it against information about the selected candidate.",
-              "This could be as little as a simple resume, or as complete as a full work history. Backstory performs similarity searches to identify key elements from the candidate that pertain to a given skill and provides a graded response.",
+              'After selecting a candidate, you are ready to have Backstory perform the Job Analysis. During this phase, Backstory will take each of requirements extracted from the Job and match it against information about the selected candidate.',
+              'This could be as little as a simple resume, or as complete as a full work history. Backstory performs similarity searches to identify key elements from the candidate that pertain to a given skill and provides a graded response.',
               'To see that in action, click the "Start Skill Assessment" button.',
             ]}
             imageSrc={selectStartAnalysisPng}
@@ -463,10 +453,10 @@ const HowItWorks: React.FC = () => {
             stepNumber={5}
             title="Review Results"
             subtitle="Watch the magic happen"
-            icon={<AutoAwesomeIcon sx={{ color: "action.active" }} />}
+            icon={<AutoAwesomeIcon sx={{ color: 'action.active' }} />}
             description={[
-              "Once you begin that action, the Start Skill Assessment button will grey out and the page will begin updating as it collates information about the candidate. As Backstory performs its magic, you can monitor the progress and explore the different identified skills to see how or why a candidate does or does not have that skill.",
-              "Once it is done, you can see the final Overall Match. This is a weighted score based on amount of evidence a skill had, whether the skill was required or preferred, and other metrics.",
+              'Once you begin that action, the Start Skill Assessment button will grey out and the page will begin updating as it collates information about the candidate. As Backstory performs its magic, you can monitor the progress and explore the different identified skills to see how or why a candidate does or does not have that skill.',
+              'Once it is done, you can see the final Overall Match. This is a weighted score based on amount of evidence a skill had, whether the skill was required or preferred, and other metrics.',
             ]}
             imageSrc={waitPng}
             imageAlt="Wait for the analysis to complete and review results"
@@ -481,7 +471,7 @@ const HowItWorks: React.FC = () => {
             stepNumber={6}
             title="Generate Resume"
             subtitle="Create your tailored resume"
-            icon={<DescriptionIcon sx={{ color: "action.active" }} />}
+            icon={<DescriptionIcon sx={{ color: 'action.active' }} />}
             description={[
               'The final step is creating the custom resume for the Candidate tailored to the particular Job. On the bottom right you can click "Next" to have Backstory generate the custom resume.',
               "Note that the resume focuses on identifying key areas from the Candidate's work history that align with skills which were extracted from the original job posting.",
@@ -497,28 +487,23 @@ const HowItWorks: React.FC = () => {
       {/* CTA Section */}
       <Box
         sx={{
-          backgroundColor: "primary.main",
-          color: "primary.contrastText",
+          backgroundColor: 'primary.main',
+          color: 'primary.contrastText',
           py: 6,
         }}
       >
         <Container>
           <Box
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              textAlign: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
               maxWidth: 600,
-              mx: "auto",
+              mx: 'auto',
             }}
           >
-            <Typography
-              variant="h3"
-              component="h2"
-              gutterBottom
-              sx={{ color: "white" }}
-            >
+            <Typography variant="h3" component="h2" gutterBottom sx={{ color: 'white' }}>
               Ready to try Backstory?
             </Typography>
             <Typography variant="h6" sx={{ mb: 4 }}>
@@ -530,13 +515,13 @@ const HowItWorks: React.FC = () => {
               startIcon={<PlayArrowIcon />}
               onClick={handleGetStarted}
               sx={{
-                backgroundColor: "action.active",
-                color: "background.paper",
-                fontWeight: "bold",
+                backgroundColor: 'action.active',
+                color: 'background.paper',
+                fontWeight: 'bold',
                 px: 4,
                 py: 1.5,
-                "&:hover": {
-                  backgroundColor: "action.active",
+                '&:hover': {
+                  backgroundColor: 'action.active',
                   opacity: 0.9,
                 },
               }}
diff --git a/frontend/src/pages/JobAnalysisPage.tsx b/frontend/src/pages/JobAnalysisPage.tsx
index 01a43e9..bdbce8e 100644
--- a/frontend/src/pages/JobAnalysisPage.tsx
+++ b/frontend/src/pages/JobAnalysisPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import {
   Box,
   Stepper,
@@ -15,32 +15,28 @@ import {
   Avatar,
   useMediaQuery,
   Divider,
-} from "@mui/material";
-import { Add, WorkOutline } from "@mui/icons-material";
-import PersonIcon from "@mui/icons-material/Person";
-import WorkIcon from "@mui/icons-material/Work";
-import AssessmentIcon from "@mui/icons-material/Assessment";
-import { JobMatchAnalysis } from "components/JobMatchAnalysis";
-import { Candidate, Job, SkillAssessment } from "types/types";
-import { useNavigate } from "react-router-dom";
-import { BackstoryPageProps } from "components/BackstoryTab";
-import { useAuth } from "hooks/AuthContext";
-import {
-  useAppState,
-  useSelectedCandidate,
-  useSelectedJob,
-} from "hooks/GlobalContext";
-import { CandidateInfo } from "components/ui/CandidateInfo";
-import { ComingSoon } from "components/ui/ComingSoon";
-import { LoginRequired } from "components/ui/LoginRequired";
-import { Scrollable } from "components/Scrollable";
-import { CandidatePicker } from "components/ui/CandidatePicker";
-import { JobPicker } from "components/ui/JobPicker";
-import { JobCreator } from "components/JobCreator";
-import { LoginRestricted } from "components/ui/LoginRestricted";
-import JsonView from "@uiw/react-json-view";
-import { ResumeGenerator } from "components/ResumeGenerator";
-import { JobInfo } from "components/ui/JobInfo";
+} from '@mui/material';
+import { Add, WorkOutline } from '@mui/icons-material';
+import PersonIcon from '@mui/icons-material/Person';
+import WorkIcon from '@mui/icons-material/Work';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import { JobMatchAnalysis } from 'components/JobMatchAnalysis';
+import { Candidate, Job, SkillAssessment } from 'types/types';
+import { useNavigate } from 'react-router-dom';
+import { BackstoryPageProps } from 'components/BackstoryTab';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedCandidate, useSelectedJob } from 'hooks/GlobalContext';
+import { CandidateInfo } from 'components/ui/CandidateInfo';
+import { ComingSoon } from 'components/ui/ComingSoon';
+import { LoginRequired } from 'components/ui/LoginRequired';
+import { Scrollable } from 'components/Scrollable';
+import { CandidatePicker } from 'components/ui/CandidatePicker';
+import { JobPicker } from 'components/ui/JobPicker';
+import { JobCreator } from 'components/JobCreator';
+import { LoginRestricted } from 'components/ui/LoginRestricted';
+import JsonView from '@uiw/react-json-view';
+import { ResumeGenerator } from 'components/ResumeGenerator';
+import { JobInfo } from 'components/ui/JobInfo';
 
 function WorkAddIcon() {
   return (
@@ -48,19 +44,19 @@ function WorkAddIcon() {
       position="relative"
       display="inline-flex"
       sx={{
-        lineHeight: "30px",
-        mb: "6px",
+        lineHeight: '30px',
+        mb: '6px',
       }}
     >
       <WorkOutline sx={{ fontSize: 24 }} />
       <Add
         sx={{
-          position: "absolute",
+          position: 'absolute',
           bottom: -2,
           right: -2,
           fontSize: 14,
-          bgcolor: "background.paper",
-          borderRadius: "50%",
+          bgcolor: 'background.paper',
+          borderRadius: '50%',
           boxShadow: 1,
         }}
         color="primary"
@@ -93,20 +89,20 @@ const initialState: AnalysisState = {
 
 // Steps in our process
 const steps: Step[] = [
-  { requiredState: [], title: "Job Selection", icon: <WorkIcon /> },
-  { requiredState: ["job"], title: "Select Candidate", icon: <PersonIcon /> },
+  { requiredState: [], title: 'Job Selection', icon: <WorkIcon /> },
+  { requiredState: ['job'], title: 'Select Candidate', icon: <PersonIcon /> },
   {
-    requiredState: ["job", "candidate"],
-    title: "Job Analysis",
+    requiredState: ['job', 'candidate'],
+    title: 'Job Analysis',
     icon: <WorkIcon />,
   },
   {
-    requiredState: ["job", "candidate", "analysis"],
-    title: "Generated Resume",
+    requiredState: ['job', 'candidate', 'analysis'],
+    title: 'Generated Resume',
     icon: <AssessmentIcon />,
   },
 ].map((item, index) => {
-  return { ...item, index, label: item.title.toLowerCase().replace(/ /g, "-") };
+  return { ...item, index, label: item.title.toLowerCase().replace(/ /g, '-') };
 });
 
 const capitalize = (str: string) => {
@@ -114,9 +110,7 @@ const capitalize = (str: string) => {
 };
 
 // Main component
-const JobAnalysisPage: React.FC<BackstoryPageProps> = (
-  props: BackstoryPageProps
-) => {
+const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   const theme = useTheme();
   const { user, guest } = useAuth();
   const { selectedCandidate, setSelectedCandidate } = useSelectedCandidate();
@@ -124,22 +118,18 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
 
   const [activeStep, setActiveStep] = useState<Step>(steps[0]);
   const [error, setError] = useState<string | null>(null);
-  const [jobTab, setJobTab] = useState<string>("select");
-  const [analysisState, setAnalysisState] = useState<AnalysisState | null>(
-    null
-  );
+  const [jobTab, setJobTab] = useState<string>('select');
+  const [analysisState, setAnalysisState] = useState<AnalysisState | null>(null);
   const [canAdvance, setCanAdvance] = useState<boolean>(false);
   const scrollRef = useRef<HTMLDivElement>(null);
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const canAccessStep = useCallback(
     (step: Step) => {
       if (!analysisState) {
         return;
       }
-      const missing = step.requiredState.find(
-        (f) => !(analysisState as any)[f]
-      );
+      const missing = step.requiredState.find(f => !(analysisState as any)[f]);
       return missing;
     },
     [analysisState]
@@ -157,19 +147,13 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
     };
     setAnalysisState(analysis);
     for (let i = steps.length - 1; i >= 0; i--) {
-      const missing = steps[i].requiredState.find((f) => !(analysis as any)[f]);
+      const missing = steps[i].requiredState.find(f => !(analysis as any)[f]);
       if (!missing) {
         setActiveStep(steps[i]);
         return;
       }
     }
-  }, [
-    analysisState,
-    selectedCandidate,
-    selectedJob,
-    setActiveStep,
-    canAccessStep,
-  ]);
+  }, [analysisState, selectedCandidate, selectedJob, setActiveStep, canAccessStep]);
 
   useEffect(() => {
     if (activeStep.index === steps.length - 1) {
@@ -185,7 +169,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
     if (scrollRef.current) {
       scrollRef.current.scrollTo({
         top: 0,
-        behavior: "smooth",
+        behavior: 'smooth',
       });
     }
   }, [setCanAdvance, analysisState, activeStep]);
@@ -201,7 +185,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
     }
 
     if (activeStep.index < steps.length - 1) {
-      setActiveStep((prevActiveStep) => steps[prevActiveStep.index + 1]);
+      setActiveStep(prevActiveStep => steps[prevActiveStep.index + 1]);
     }
   };
 
@@ -210,7 +194,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
       return;
     }
 
-    setActiveStep((prevActiveStep) => steps[prevActiveStep.index - 1]);
+    setActiveStep(prevActiveStep => steps[prevActiveStep.index - 1]);
   };
 
   const moveToStep = (step: number) => {
@@ -254,17 +238,17 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
   // Render function for the job description step
   const renderJobDescription = () => {
     return (
-      <Box sx={{ mt: 3, width: "100%" }}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 3 }}>
+      <Box sx={{ mt: 3, width: '100%' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
           <Tabs value={jobTab} onChange={handleTabChange} centered>
             <Tab value="select" icon={<WorkOutline />} label="Select Job" />
             <Tab value="create" icon={<WorkAddIcon />} label="Create Job" />
           </Tabs>
         </Box>
 
-        {jobTab === "select" && <JobPicker onSelect={onJobSelect} />}
-        {jobTab === "create" && user && <JobCreator onSave={onJobSelect} />}
-        {jobTab === "create" && guest && (
+        {jobTab === 'select' && <JobPicker onSelect={onJobSelect} />}
+        {jobTab === 'create' && user && <JobCreator onSave={onJobSelect} />}
+        {jobTab === 'create' && guest && (
           <LoginRestricted>
             <JobCreator onSave={onJobSelect} />
           </LoginRestricted>
@@ -312,11 +296,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
     if (!analysisState) {
       return;
     }
-    if (
-      !analysisState.job ||
-      !analysisState.candidate ||
-      !analysisState.analysis
-    ) {
+    if (!analysisState.job || !analysisState.candidate || !analysisState.analysis) {
       return <></>;
     }
 
@@ -334,28 +314,24 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
   return (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        height: "100%" /* Restrict to main-container's height */,
-        width: "100%",
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%' /* Restrict to main-container's height */,
+        width: '100%',
         minHeight: 0 /* Prevent flex overflow */,
-        maxHeight: "min-content",
-        "& > *:not(.Scrollable)": {
+        maxHeight: 'min-content',
+        '& > *:not(.Scrollable)': {
           flexShrink: 0 /* Prevent shrinking */,
         },
-        position: "relative",
+        position: 'relative',
       }}
     >
       <Paper elevation={4} sx={{ m: 0, borderRadius: 0, mb: 1, p: 0, gap: 1 }}>
-        <Stepper
-          activeStep={activeStep.index}
-          alternativeLabel
-          sx={{ mt: 2, mb: 2 }}
-        >
+        <Stepper activeStep={activeStep.index} alternativeLabel sx={{ mt: 2, mb: 2 }}>
           {steps.map((step, index) => (
             <Step>
               <StepLabel
-                sx={{ cursor: "pointer" }}
+                sx={{ cursor: 'pointer' }}
                 onClick={() => {
                   moveToStep(index);
                 }}
@@ -368,7 +344,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
                           activeStep.index >= step.index
                             ? theme.palette.primary.main
                             : theme.palette.grey[300],
-                        color: "white",
+                        color: 'white',
                       }}
                     >
                       {step.icon}
@@ -381,18 +357,16 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
             </Step>
           ))}
         </Stepper>
-        <Box
-          sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}
-        >
+        <Box sx={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row' }}>
           {analysisState && analysisState.job && (
-            <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+            <Box sx={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
               {!isMobile && (
                 <Avatar
                   sx={{
                     ml: 1,
                     mt: 1,
                     bgcolor: theme.palette.primary.main,
-                    color: "white",
+                    color: 'white',
                   }}
                 >
                   <WorkIcon />
@@ -401,21 +375,11 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
               <JobInfo variant="minimal" job={analysisState.job} />
             </Box>
           )}
-          {isMobile && (
-            <Box
-              sx={{ display: "flex", borderBottom: "1px solid lightgrey" }}
-            />
-          )}
-          {!isMobile && (
-            <Box sx={{ display: "flex", borderLeft: "1px solid lightgrey" }} />
-          )}
+          {isMobile && <Box sx={{ display: 'flex', borderBottom: '1px solid lightgrey' }} />}
+          {!isMobile && <Box sx={{ display: 'flex', borderLeft: '1px solid lightgrey' }} />}
           {analysisState && analysisState.candidate && (
-            <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
-              <CandidateInfo
-                variant="minimal"
-                candidate={analysisState.candidate}
-                sx={{}}
-              />
+            <Box sx={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
+              <CandidateInfo variant="minimal" candidate={analysisState.candidate} sx={{}} />
             </Box>
           )}
         </Box>
@@ -423,22 +387,22 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
       <Scrollable
         ref={scrollRef}
         sx={{
-          position: "relative",
-          maxHeight: "100%",
-          width: "100%",
-          display: "flex",
+          position: 'relative',
+          maxHeight: '100%',
+          width: '100%',
+          display: 'flex',
           flexGrow: 1,
           flex: 1 /* Take remaining space in some-container */,
-          overflowY: "auto" /* Scroll if content overflows */,
+          overflowY: 'auto' /* Scroll if content overflows */,
         }}
       >
-        {activeStep.label === "job-selection" && renderJobDescription()}
-        {activeStep.label === "select-candidate" && renderCandidateSelection()}
-        {activeStep.label === "job-analysis" && renderAnalysis()}
-        {activeStep.label === "generated-resume" && renderResume()}
+        {activeStep.label === 'job-selection' && renderJobDescription()}
+        {activeStep.label === 'select-candidate' && renderCandidateSelection()}
+        {activeStep.label === 'job-analysis' && renderAnalysis()}
+        {activeStep.label === 'generated-resume' && renderResume()}
       </Scrollable>
 
-      <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
         <Button
           color="inherit"
           disabled={activeStep.index === steps[0].index}
@@ -447,7 +411,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
         >
           Back
         </Button>
-        <Box sx={{ flex: "1 1 auto" }} />
+        <Box sx={{ flex: '1 1 auto' }} />
 
         {activeStep.index === steps[steps.length - 1].index ? (
           <Button
@@ -460,12 +424,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
             Start New Analysis
           </Button>
         ) : (
-          <Button
-            disabled={!canAdvance}
-            onClick={handleNext}
-            variant="contained"
-          >
-            {activeStep.index === steps.length - 1 ? "Done" : "Next"}
+          <Button disabled={!canAdvance} onClick={handleNext} variant="contained">
+            {activeStep.index === steps.length - 1 ? 'Done' : 'Next'}
           </Button>
         )}
       </Box>
@@ -475,13 +435,9 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (
         open={!!error}
         autoHideDuration={6000}
         onClose={() => setError(null)}
-        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
       >
-        <Alert
-          onClose={() => setError(null)}
-          severity="error"
-          sx={{ width: "100%" }}
-        >
+        <Alert onClose={() => setError(null)} severity="error" sx={{ width: '100%' }}>
           {error}
         </Alert>
       </Snackbar>
diff --git a/frontend/src/pages/LoadingPage.tsx b/frontend/src/pages/LoadingPage.tsx
index 2170d10..0755e46 100644
--- a/frontend/src/pages/LoadingPage.tsx
+++ b/frontend/src/pages/LoadingPage.tsx
@@ -1,15 +1,15 @@
-import Box from "@mui/material/Box";
-import { BackstoryPageProps } from "../components/BackstoryTab";
-import { Message } from "../components/Message";
-import { ChatMessage } from "types/types";
+import Box from '@mui/material/Box';
+import { BackstoryPageProps } from '../components/BackstoryTab';
+import { Message } from '../components/Message';
+import { ChatMessage } from 'types/types';
 
 const LoadingPage = (props: BackstoryPageProps) => {
   const preamble: ChatMessage = {
-    role: "assistant",
-    type: "text",
-    status: "done",
-    sessionId: "",
-    content: "Please wait while connecting to Backstory...",
+    role: 'assistant',
+    type: 'text',
+    status: 'done',
+    sessionId: '',
+    content: 'Please wait while connecting to Backstory...',
     timestamp: new Date(),
     metadata: null as any,
   };
@@ -17,10 +17,10 @@ const LoadingPage = (props: BackstoryPageProps) => {
   return (
     <Box
       sx={{
-        display: "flex",
+        display: 'flex',
         flexGrow: 1,
-        maxWidth: "1024px",
-        margin: "0 auto",
+        maxWidth: '1024px',
+        margin: '0 auto',
       }}
     >
       <Message message={preamble} {...props} />
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 93d689a..d2a7955 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   Container,
@@ -11,36 +11,34 @@ import {
   CardContent,
   useMediaQuery,
   useTheme,
-} from "@mui/material";
-import { Person, PersonAdd } from "@mui/icons-material";
-import "react-phone-number-input/style.css";
-import "./LoginPage.css";
+} from '@mui/material';
+import { Person, PersonAdd } from '@mui/icons-material';
+import 'react-phone-number-input/style.css';
+import './LoginPage.css';
 
-import { useAuth } from "hooks/AuthContext";
-import { BackstoryLogo } from "components/ui/BackstoryLogo";
+import { useAuth } from 'hooks/AuthContext';
+import { BackstoryLogo } from 'components/ui/BackstoryLogo';
 
-import { BackstoryPageProps } from "components/BackstoryTab";
+import { BackstoryPageProps } from 'components/BackstoryTab';
 
-import { LoginForm } from "components/EmailVerificationComponents";
-import { CandidateRegistrationForm } from "pages/candidate/RegistrationForms";
-import { useNavigate, useParams } from "react-router-dom";
-import { useAppState } from "hooks/GlobalContext";
-import * as Types from "types/types";
+import { LoginForm } from 'components/EmailVerificationComponents';
+import { CandidateRegistrationForm } from 'pages/candidate/RegistrationForms';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useAppState } from 'hooks/GlobalContext';
+import * as Types from 'types/types';
 
 const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   const navigate = useNavigate();
   const { setSnack } = useAppState();
-  const [tabValue, setTabValue] = useState<string>("login");
+  const [tabValue, setTabValue] = useState<string>('login');
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState<string | null>(null);
   const { guest, user, login, isLoading, error } = useAuth();
   const name =
-    user?.userType === "candidate"
-      ? (user as Types.Candidate).username
-      : user?.email || "";
+    user?.userType === 'candidate' ? (user as Types.Candidate).username : user?.email || '';
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const showGuest = false;
   const { tab } = useParams();
 
@@ -50,10 +48,10 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
     }
     if (loading && error) {
       /* Remove 'HTTP .*: ' from error string */
-      const jsonStr = error.replace(/^[^{]*/, "");
+      const jsonStr = error.replace(/^[^{]*/, '');
       const data = JSON.parse(jsonStr);
       setErrorMessage(data.error.message);
-      setSnack(data.error.message, "error");
+      setSnack(data.error.message, 'error');
       setTimeout(() => {
         setErrorMessage(null);
         setLoading(false);
@@ -62,7 +60,7 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   }, [error, loading]);
 
   useEffect(() => {
-    if (tab === "register") {
+    if (tab === 'register') {
       setTabValue(tab);
     }
   }, [tab, setTabValue]);
@@ -74,7 +72,7 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
 
   // If user is logged in, navigate to the profile page
   if (user) {
-    navigate("/candidate/profile");
+    navigate('/candidate/profile');
     return <></>;
   }
 
@@ -83,7 +81,7 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
       <BackstoryLogo />
 
       {showGuest && guest && (
-        <Card sx={{ mb: 3, bgcolor: "grey.50" }} elevation={1}>
+        <Card sx={{ mb: 3, bgcolor: 'grey.50' }} elevation={1}>
           <CardContent>
             <Typography variant="h6" gutterBottom color="primary">
               Guest Session Active
@@ -98,7 +96,7 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
         </Card>
       )}
 
-      <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 2 }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
         <Tabs value={tabValue} onChange={handleTabChange} centered>
           <Tab value="login" icon={<Person />} label="Login" />
           <Tab value="register" icon={<PersonAdd />} label="Register" />
@@ -117,9 +115,9 @@ const LoginPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
         </Alert>
       )}
 
-      {tabValue === "login" && <LoginForm />}
+      {tabValue === 'login' && <LoginForm />}
 
-      {tabValue === "register" && <CandidateRegistrationForm />}
+      {tabValue === 'register' && <CandidateRegistrationForm />}
     </Paper>
   );
 };
diff --git a/frontend/src/pages/OldChatPage.tsx b/frontend/src/pages/OldChatPage.tsx
index d218eab..0df389e 100644
--- a/frontend/src/pages/OldChatPage.tsx
+++ b/frontend/src/pages/OldChatPage.tsx
@@ -1,27 +1,27 @@
-import React, { forwardRef, useEffect, useState } from "react";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import MuiMarkdown from "mui-markdown";
+import React, { forwardRef, useEffect, useState } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import MuiMarkdown from 'mui-markdown';
 
-import { BackstoryPageProps } from "../components/BackstoryTab";
-import { Conversation, ConversationHandle } from "../components/Conversation";
-import { BackstoryQuery } from "../components/BackstoryQuery";
-import { CandidateInfo } from "components/ui/CandidateInfo";
-import { useAuth } from "hooks/AuthContext";
-import { Candidate } from "types/types";
-import { useAppState } from "hooks/GlobalContext";
-import * as Types from "types/types";
+import { BackstoryPageProps } from '../components/BackstoryTab';
+import { Conversation, ConversationHandle } from '../components/Conversation';
+import { BackstoryQuery } from '../components/BackstoryQuery';
+import { CandidateInfo } from 'components/ui/CandidateInfo';
+import { useAuth } from 'hooks/AuthContext';
+import { Candidate } from 'types/types';
+import { useAppState } from 'hooks/GlobalContext';
+import * as Types from 'types/types';
 
 const ChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
   (props: BackstoryPageProps, ref) => {
     const { setSnack } = useAppState();
     const { user } = useAuth();
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const [questions, setQuestions] = useState<React.ReactElement[]>([]);
     const candidate: Candidate | null =
-      user?.userType === "candidate" ? (user as Types.Candidate) : null;
+      user?.userType === 'candidate' ? (user as Types.Candidate) : null;
 
     //  console.log("ChatPage candidate =>", candidate);
     useEffect(() => {
@@ -30,9 +30,7 @@ const ChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
       }
 
       setQuestions([
-        <Box
-          sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}
-        >
+        <Box sx={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row' }}>
           {candidate.questions?.map((q, i: number) => (
             <BackstoryQuery key={i} question={q} />
           ))}
@@ -50,17 +48,14 @@ const ChatPage = forwardRef<ConversationHandle, BackstoryPageProps>(
     }
     return (
       <Box>
-        <CandidateInfo
-          candidate={candidate}
-          action="Chat with Backstory AI about "
-        />
+        <CandidateInfo candidate={candidate} action="Chat with Backstory AI about " />
         <Conversation
           ref={ref}
           {...{
             multiline: true,
-            type: "chat",
+            type: 'chat',
             placeholder: `What would you like to know about ${candidate?.firstName}?`,
-            resetLabel: "chat",
+            resetLabel: 'chat',
             defaultPrompts: questions,
           }}
         />
diff --git a/frontend/src/pages/VectorVisualizerPage.tsx b/frontend/src/pages/VectorVisualizerPage.tsx
index a46bfe3..0976e04 100644
--- a/frontend/src/pages/VectorVisualizerPage.tsx
+++ b/frontend/src/pages/VectorVisualizerPage.tsx
@@ -1,18 +1,16 @@
-import React from "react";
+import React from 'react';
 
-import { VectorVisualizer } from "../components/VectorVisualizer";
-import { BackstoryPageProps } from "../components/BackstoryTab";
+import { VectorVisualizer } from '../components/VectorVisualizer';
+import { BackstoryPageProps } from '../components/BackstoryTab';
 
-import "./VectorVisualizerPage.css";
+import './VectorVisualizerPage.css';
 
 interface VectorVisualizerProps extends BackstoryPageProps {
   inline?: boolean;
   rag?: any;
 }
 
-const VectorVisualizerPage: React.FC<VectorVisualizerProps> = (
-  props: VectorVisualizerProps
-) => {
+const VectorVisualizerPage: React.FC<VectorVisualizerProps> = (props: VectorVisualizerProps) => {
   return <VectorVisualizer inline={false} {...props} />;
 };
 
diff --git a/frontend/src/pages/candidate/Dashboard.tsx b/frontend/src/pages/candidate/Dashboard.tsx
index 26457e2..bc0c1a1 100644
--- a/frontend/src/pages/candidate/Dashboard.tsx
+++ b/frontend/src/pages/candidate/Dashboard.tsx
@@ -1,13 +1,5 @@
-import React from "react";
-import {
-  Box,
-  Card,
-  CardContent,
-  Typography,
-  Button,
-  LinearProgress,
-  Stack,
-} from "@mui/material";
+import React from 'react';
+import { Box, Card, CardContent, Typography, Button, LinearProgress, Stack } from '@mui/material';
 import {
   Add as AddIcon,
   Visibility as VisibilityIcon,
@@ -15,13 +7,13 @@ import {
   ContactMail as ContactMailIcon,
   Edit as EditIcon,
   TipsAndUpdates as TipsIcon,
-} from "@mui/icons-material";
-import { useAuth } from "hooks/AuthContext";
-import { LoginRequired } from "components/ui/LoginRequired";
-import { BackstoryElementProps } from "components/BackstoryTab";
-import { useNavigate } from "react-router-dom";
-import { ComingSoon } from "components/ui/ComingSoon";
-import { useAppState } from "hooks/GlobalContext";
+} from '@mui/icons-material';
+import { useAuth } from 'hooks/AuthContext';
+import { LoginRequired } from 'components/ui/LoginRequired';
+import { BackstoryElementProps } from 'components/BackstoryTab';
+import { useNavigate } from 'react-router-dom';
+import { ComingSoon } from 'components/ui/ComingSoon';
+import { useAppState } from 'hooks/GlobalContext';
 
 type CandidateDashboardProps = BackstoryElementProps;
 
@@ -35,12 +27,12 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
     return <LoginRequired asset="candidate dashboard" />;
   }
 
-  if (user?.userType !== "candidate") {
+  if (user?.userType !== 'candidate') {
     setSnack(
       `The page you were on is only available for candidates (you are a ${user.userType}`,
-      "warning"
+      'warning'
     );
-    navigate("/");
+    navigate('/');
     return <></>;
   }
 
@@ -51,7 +43,7 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
         <Box sx={{ flex: 1, p: 3 }}>
           {/* Welcome Section */}
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
+            <Typography variant="h4" sx={{ mb: 2, fontWeight: 'bold' }}>
               Welcome back, {user.firstName}!
             </Typography>
 
@@ -65,9 +57,9 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
                 sx={{
                   height: 8,
                   borderRadius: 4,
-                  backgroundColor: "#e0e0e0",
-                  "& .MuiLinearProgress-bar": {
-                    backgroundColor: "#4caf50",
+                  backgroundColor: '#e0e0e0',
+                  '& .MuiLinearProgress-bar': {
+                    backgroundColor: '#4caf50',
                   },
                 }}
               />
@@ -77,9 +69,9 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
               variant="contained"
               color="primary"
               sx={{ mt: 1 }}
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
-                navigate("/candidate/profile");
+                navigate('/candidate/profile');
               }}
             >
               Complete Your Profile
@@ -87,21 +79,21 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
           </Box>
 
           {/* Cards Grid */}
-          <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
             {/* Top Row */}
-            <Box sx={{ display: "flex", gap: 3 }}>
+            <Box sx={{ display: 'flex', gap: 3 }}>
               {/* Resume Builder Card */}
               <Card sx={{ flex: 1, minHeight: 200 }}>
                 <CardContent>
-                  <Typography variant="h6" sx={{ mb: 2, fontWeight: "bold" }}>
+                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                     Resume Builder
                   </Typography>
 
-                  <Typography variant="body2" sx={{ mb: 1, color: "#666" }}>
+                  <Typography variant="body2" sx={{ mb: 1, color: '#666' }}>
                     3 custom resumes
                   </Typography>
 
-                  <Typography variant="body2" sx={{ mb: 3, color: "#666" }}>
+                  <Typography variant="body2" sx={{ mb: 3, color: '#666' }}>
                     Last created: May 15, 2025
                   </Typography>
 
@@ -114,25 +106,23 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
               {/* Recent Activity Card */}
               <Card sx={{ flex: 1, minHeight: 200 }}>
                 <CardContent>
-                  <Typography variant="h6" sx={{ mb: 2, fontWeight: "bold" }}>
+                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                     Recent Activity
                   </Typography>
 
                   <Stack spacing={1} sx={{ mb: 3 }}>
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <VisibilityIcon sx={{ fontSize: 16, color: "#666" }} />
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <VisibilityIcon sx={{ fontSize: 16, color: '#666' }} />
                       <Typography variant="body2">5 profile views</Typography>
                     </Box>
 
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <DownloadIcon sx={{ fontSize: 16, color: "#666" }} />
-                      <Typography variant="body2">
-                        2 resume downloads
-                      </Typography>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <DownloadIcon sx={{ fontSize: 16, color: '#666' }} />
+                      <Typography variant="body2">2 resume downloads</Typography>
                     </Box>
 
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <ContactMailIcon sx={{ fontSize: 16, color: "#666" }} />
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <ContactMailIcon sx={{ fontSize: 16, color: '#666' }} />
                       <Typography variant="body2">1 direct contact</Typography>
                     </Box>
                   </Stack>
@@ -145,31 +135,22 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
             </Box>
 
             {/* Bottom Row */}
-            <Box sx={{ display: "flex", gap: 3 }}>
+            <Box sx={{ display: 'flex', gap: 3 }}>
               {/* Complete Your Backstory Card */}
               <Card sx={{ flex: 1, minHeight: 200 }}>
                 <CardContent>
-                  <Typography variant="h6" sx={{ mb: 2, fontWeight: "bold" }}>
+                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                     Complete Your Backstory
                   </Typography>
 
                   <Stack spacing={1} sx={{ mb: 3 }}>
-                    <Typography
-                      variant="body2"
-                      sx={{ display: "flex", alignItems: "center" }}
-                    >
+                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                       • Add projects
                     </Typography>
-                    <Typography
-                      variant="body2"
-                      sx={{ display: "flex", alignItems: "center" }}
-                    >
+                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                       • Detail skills
                     </Typography>
-                    <Typography
-                      variant="body2"
-                      sx={{ display: "flex", alignItems: "center" }}
-                    >
+                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                       • Work history
                     </Typography>
                   </Stack>
@@ -183,21 +164,15 @@ const CandidateDashboard = (props: CandidateDashboardProps) => {
               {/* Improvement Suggestions Card */}
               <Card sx={{ flex: 1, minHeight: 200 }}>
                 <CardContent>
-                  <Typography variant="h6" sx={{ mb: 2, fontWeight: "bold" }}>
+                  <Typography variant="h6" sx={{ mb: 2, fontWeight: 'bold' }}>
                     Improvement Suggestions
                   </Typography>
 
                   <Stack spacing={1} sx={{ mb: 3 }}>
-                    <Typography
-                      variant="body2"
-                      sx={{ display: "flex", alignItems: "center" }}
-                    >
+                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                       • Add certifications
                     </Typography>
-                    <Typography
-                      variant="body2"
-                      sx={{ display: "flex", alignItems: "center" }}
-                    >
+                    <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
                       • Enhance your project details
                     </Typography>
                   </Stack>
diff --git a/frontend/src/pages/candidate/Profile.tsx b/frontend/src/pages/candidate/Profile.tsx
index b00bbc7..e06c2e2 100644
--- a/frontend/src/pages/candidate/Profile.tsx
+++ b/frontend/src/pages/candidate/Profile.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import CheckIcon from "@mui/icons-material/Check";
+import React, { useState, useEffect } from 'react';
+import CheckIcon from '@mui/icons-material/Check';
 import {
   Box,
   Button,
@@ -31,8 +31,8 @@ import {
   FormControlLabel,
   ToggleButton,
   Checkbox,
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
 import {
   PhotoCamera,
   Edit,
@@ -47,24 +47,24 @@ import {
   Phone,
   Email,
   AccountCircle,
-} from "@mui/icons-material";
-import { useTheme } from "@mui/material/styles";
-import { useAuth } from "hooks/AuthContext";
-import * as Types from "types/types";
-import { ComingSoon } from "components/ui/ComingSoon";
-import { BackstoryPageProps } from "components/BackstoryTab";
-import { useAppState } from "hooks/GlobalContext";
+} from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+import { useAuth } from 'hooks/AuthContext';
+import * as Types from 'types/types';
+import { ComingSoon } from 'components/ui/ComingSoon';
+import { BackstoryPageProps } from 'components/BackstoryTab';
+import { useAppState } from 'hooks/GlobalContext';
 
 // Styled components
-const VisuallyHiddenInput = styled("input")({
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
   height: 1,
-  overflow: "hidden",
-  position: "absolute",
+  overflow: 'hidden',
+  position: 'absolute',
   bottom: 0,
   left: 0,
-  whiteSpace: "nowrap",
+  whiteSpace: 'nowrap',
   width: 1,
 });
 
@@ -89,8 +89,8 @@ function TabPanel(props: TabPanelProps) {
         <Box
           sx={{
             p: { xs: 1, sm: 3 },
-            maxWidth: "100%",
-            overflow: "hidden",
+            maxWidth: '100%',
+            overflow: 'hidden',
           }}
         >
           {children}
@@ -100,18 +100,15 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-const CandidateProfile: React.FC<BackstoryPageProps> = (
-  props: BackstoryPageProps
-) => {
+const CandidateProfile: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
   const { setSnack } = useAppState();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const { user, updateUserData, apiClient } = useAuth();
   const [isPublic, setIsPublic] = React.useState(true);
 
   // Check if user is a candidate
-  const candidate =
-    user?.userType === "candidate" ? (user as Types.Candidate) : null;
+  const candidate = user?.userType === 'candidate' ? (user as Types.Candidate) : null;
 
   // State management
   const [tabValue, setTabValue] = useState(0);
@@ -120,16 +117,16 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
   const [snackbar, setSnackbar] = useState<{
     open: boolean;
     message: string;
-    severity: "success" | "error" | "info" | "warning";
+    severity: 'success' | 'error' | 'info' | 'warning';
   }>({
     open: false,
-    message: "",
-    severity: "success",
+    message: '',
+    severity: 'success',
   });
 
   // Form data state
   const [formData, setFormData] = useState<Partial<Types.Candidate>>({});
-  const [profileImage, setProfileImage] = useState<string>("");
+  const [profileImage, setProfileImage] = useState<string>('');
 
   // Dialog states
   const [skillDialog, setSkillDialog] = useState(false);
@@ -137,21 +134,19 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
 
   // New item states
   const [newSkill, setNewSkill] = useState<Partial<Types.Skill>>({
-    name: "",
-    category: "",
-    level: "beginner",
+    name: '',
+    category: '',
+    level: 'beginner',
     yearsOfExperience: 0,
   });
-  const [newExperience, setNewExperience] = useState<
-    Partial<Types.WorkExperience>
-  >({
-    companyName: "",
-    position: "",
+  const [newExperience, setNewExperience] = useState<Partial<Types.WorkExperience>>({
+    companyName: '',
+    position: '',
     startDate: new Date(),
     isCurrent: false,
-    description: "",
+    description: '',
     skills: [],
-    location: { city: "", country: "" },
+    location: { city: '', country: '' },
   });
 
   useEffect(() => {
@@ -160,7 +155,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
       if (candidate.profileImage) {
         setProfileImage(`/api/1.0/candidates/profile/${candidate.username}`);
       } else {
-        setProfileImage("");
+        setProfileImage('');
       }
       console.log({ isPublic: candidate.isPublic });
     }
@@ -169,9 +164,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
   if (!candidate) {
     return (
       <Container maxWidth="md" sx={{ mt: 4 }}>
-        <Alert severity="error">
-          Access denied. This page is only available for candidates.
-        </Alert>
+        <Alert severity="error">Access denied. This page is only available for candidates.</Alert>
       </Container>
     );
   }
@@ -196,27 +189,26 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
     }
 
     try {
-      console.log("Uploading profile image:", e.target.files[0]);
+      console.log('Uploading profile image:', e.target.files[0]);
       const success = await apiClient.uploadCandidateProfile(e.target.files[0]);
       if (success) {
         setProfileImage(URL.createObjectURL(e.target.files[0]));
-        candidate.profileImage =
-          "profile." + e.target.files[0].name.replace(/^.*\./, "");
+        candidate.profileImage = 'profile.' + e.target.files[0].name.replace(/^.*\./, '');
         console.log(`Set profile image to: ${candidate.profileImage}`);
         updateUserData(candidate);
       } else {
         setSnackbar({
           open: true,
-          message: "Failed to upload profile image. Please try again.",
-          severity: "error",
+          message: 'Failed to upload profile image. Please try again.',
+          severity: 'error',
         });
       }
     } catch (error) {
-      console.error("Error uploading profile image:", error);
+      console.error('Error uploading profile image:', error);
       setSnackbar({
         open: true,
-        message: "Failed to upload profile image. Please try again.",
-        severity: "error",
+        message: 'Failed to upload profile image. Please try again.',
+        severity: 'error',
       });
     }
   };
@@ -234,19 +226,16 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
     setLoading(true);
     try {
       if (candidate.id) {
-        const updatedCandidate = await apiClient.updateCandidate(
-          candidate.id,
-          formData
-        );
+        const updatedCandidate = await apiClient.updateCandidate(candidate.id, formData);
         updateUserData(updatedCandidate);
-        setSnack("Profile updated successfully!");
+        setSnack('Profile updated successfully!');
         toggleEditMode(section);
       }
     } catch (error) {
       setSnackbar({
         open: true,
-        message: "Failed to update profile. Please try again.",
-        severity: "error",
+        message: 'Failed to update profile. Please try again.',
+        severity: 'error',
       });
     } finally {
       setLoading(false);
@@ -262,15 +251,12 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
   // Add new skill
   const handleAddSkill = () => {
     if (newSkill.name && newSkill.category) {
-      const updatedSkills = [
-        ...(formData.skills || []),
-        newSkill as Types.Skill,
-      ];
+      const updatedSkills = [...(formData.skills || []), newSkill as Types.Skill];
       setFormData({ ...formData, skills: updatedSkills });
       setNewSkill({
-        name: "",
-        category: "",
-        level: "beginner",
+        name: '',
+        category: '',
+        level: 'beginner',
         yearsOfExperience: 0,
       });
       setSkillDialog(false);
@@ -292,13 +278,13 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
       ];
       setFormData({ ...formData, experience: updatedExperience });
       setNewExperience({
-        companyName: "",
-        position: "",
+        companyName: '',
+        position: '',
         startDate: new Date(),
         isCurrent: false,
-        description: "",
+        description: '',
         skills: [],
-        location: { city: "", country: "" },
+        location: { city: '', country: '' },
       });
       setExperienceDialog(false);
     }
@@ -306,9 +292,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
 
   // Remove work experience
   const handleRemoveExperience = (index: number) => {
-    const updatedExperience = (formData.experience || []).filter(
-      (_, i) => i !== index
-    );
+    const updatedExperience = (formData.experience || []).filter((_, i) => i !== index);
     setFormData({ ...formData, experience: updatedExperience });
   };
 
@@ -316,23 +300,23 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
   const renderBasicInfo = () => (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        "& .entry": {
-          flexDirection: "column",
-          fontSize: "0.9rem",
-          display: "flex",
+        display: 'flex',
+        flexDirection: 'column',
+        '& .entry': {
+          flexDirection: 'column',
+          fontSize: '0.9rem',
+          display: 'flex',
           mt: 1,
         },
-        "& .title": { display: "flex", fontWeight: "bold" },
+        '& .title': { display: 'flex', fontWeight: 'bold' },
       }}
     >
-      <Box sx={{ textAlign: "center", mb: { xs: 1, sm: 2 } }}>
+      <Box sx={{ textAlign: 'center', mb: { xs: 1, sm: 2 } }}>
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
           }}
         >
           <Avatar
@@ -344,9 +328,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
               border: `2px solid ${theme.palette.primary.main}`,
             }}
           >
-            {!profileImage && (
-              <AccountCircle sx={{ fontSize: { xs: 50, sm: 80 } }} />
-            )}
+            {!profileImage && <AccountCircle sx={{ fontSize: { xs: 50, sm: 80 } }} />}
           </Avatar>
           {editMode.basic && (
             <>
@@ -354,21 +336,17 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 color="primary"
                 aria-label="upload picture"
                 component="label"
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               >
                 <PhotoCamera />
-                <VisuallyHiddenInput
-                  type="file"
-                  accept="image/*"
-                  onChange={handleImageUpload}
-                />
+                <VisuallyHiddenInput type="file" accept="image/*" onChange={handleImageUpload} />
               </IconButton>
               <Typography
                 variant="caption"
                 color="textSecondary"
                 sx={{
-                  textAlign: "center",
-                  fontSize: { xs: "0.7rem", sm: "0.75rem" },
+                  textAlign: 'center',
+                  fontSize: { xs: '0.7rem', sm: '0.75rem' },
                 }}
               >
                 Update profile photo
@@ -381,34 +359,34 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
       <Box
         className="entry"
         sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignContent: "center",
+          display: 'flex',
+          justifyContent: 'center',
+          alignContent: 'center',
           gap: 1,
-          "& span": { mb: 0 },
+          '& span': { mb: 0 },
         }}
       >
         {editMode.basic ? (
           <FormControlLabel
-            sx={{ display: "flex" }}
+            sx={{ display: 'flex' }}
             control={
               <Switch
                 checked={formData.isPublic}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  handleInputChange("isPublic", event.target.checked)
+                  handleInputChange('isPublic', event.target.checked)
                 }
               />
             }
             label={
               formData.isPublic
-                ? "Your account will appear in candidate lists and searches on Backstory."
+                ? 'Your account will appear in candidate lists and searches on Backstory.'
                 : `Your account will not be listed as a candidate. You can still share your profile by users navigating to '/u/${candidate.username}'.`
             }
           />
         ) : (
           <>
             {candidate.isPublic
-              ? "Your account will appear in candidate lists and searches on Backstory."
+              ? 'Your account will appear in candidate lists and searches on Backstory.'
               : `Your account will not be listed as a candidate. You can still share your profile by users navigating to '/u/${candidate.username}'.`}
           </>
         )}
@@ -419,8 +397,8 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           <TextField
             fullWidth
             label="First Name"
-            value={formData.firstName || ""}
-            onChange={(e) => handleInputChange("firstName", e.target.value)}
+            value={formData.firstName || ''}
+            onChange={e => handleInputChange('firstName', e.target.value)}
             variant="outlined"
           />
         ) : (
@@ -436,8 +414,8 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           <TextField
             fullWidth
             label="Last Name"
-            value={formData.lastName || ""}
-            onChange={(e) => handleInputChange("lastName", e.target.value)}
+            value={formData.lastName || ''}
+            onChange={e => handleInputChange('lastName', e.target.value)}
             variant="outlined"
           />
         ) : (
@@ -454,14 +432,14 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
             fullWidth
             label="Email"
             type="email"
-            value={formData.email || ""}
-            onChange={(e) => handleInputChange("email", e.target.value)}
+            value={formData.email || ''}
+            onChange={e => handleInputChange('email', e.target.value)}
             variant="outlined"
           />
         ) : (
           <>
             <Box className="title">
-              <Email sx={{ mr: 1, verticalAlign: "middle" }} />
+              <Email sx={{ mr: 1, verticalAlign: 'middle' }} />
               Email
             </Box>
             <Box className="value">{candidate.email}</Box>
@@ -474,17 +452,17 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           <TextField
             fullWidth
             label="Phone"
-            value={formData.phone || ""}
-            onChange={(e) => handleInputChange("phone", e.target.value)}
+            value={formData.phone || ''}
+            onChange={e => handleInputChange('phone', e.target.value)}
             variant="outlined"
           />
         ) : (
           <>
             <Box className="title">
-              <Phone sx={{ mr: 1, verticalAlign: "middle" }} />
+              <Phone sx={{ mr: 1, verticalAlign: 'middle' }} />
               Phone
             </Box>
-            <Box className="value">{candidate.phone || "Not provided"}</Box>
+            <Box className="value">{candidate.phone || 'Not provided'}</Box>
           </>
         )}
       </Box>
@@ -496,16 +474,14 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
             multiline
             rows={3}
             label="Professional Summary"
-            value={formData.description || ""}
-            onChange={(e) => handleInputChange("description", e.target.value)}
+            value={formData.description || ''}
+            onChange={e => handleInputChange('description', e.target.value)}
             variant="outlined"
           />
         ) : (
           <>
             <Box className="title">Professional Summary</Box>
-            <Box className="value">
-              {candidate.description || "No summary provided"}
-            </Box>
+            <Box className="value">{candidate.description || 'No summary provided'}</Box>
           </>
         )}
       </Box>
@@ -515,9 +491,9 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           <TextField
             fullWidth
             label="Location"
-            value={formData.location?.city || ""}
-            onChange={(e) =>
-              handleInputChange("location", {
+            value={formData.location?.city || ''}
+            onChange={e =>
+              handleInputChange('location', {
                 ...formData.location,
                 city: e.target.value,
               })
@@ -528,12 +504,11 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
         ) : (
           <>
             <Box className="title">
-              <LocationOn sx={{ mr: 1, verticalAlign: "middle" }} />
+              <LocationOn sx={{ mr: 1, verticalAlign: 'middle' }} />
               Location
             </Box>
             <Box className="value">
-              {candidate.location?.city || "Not specified"}{" "}
-              {candidate.location?.country || ""}
+              {candidate.location?.city || 'Not specified'} {candidate.location?.country || ''}
             </Box>
           </>
         )}
@@ -542,9 +517,9 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
       <Box className="entry">
         <Box
           sx={{
-            display: "flex",
-            flexDirection: { xs: "column", sm: "row" },
-            justifyContent: "flex-end",
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            justifyContent: 'flex-end',
             gap: 2,
             mt: { xs: 2, sm: 0 },
           }}
@@ -553,7 +528,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
             <>
               <Button
                 variant="outlined"
-                onClick={() => handleCancel("basic")}
+                onClick={() => handleCancel('basic')}
                 startIcon={<Cancel />}
                 fullWidth={isMobile}
               >
@@ -561,14 +536,8 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
               </Button>
               <Button
                 variant="contained"
-                onClick={() => handleSave("basic")}
-                startIcon={
-                  loading ? (
-                    <CircularProgress size={20} color="inherit" />
-                  ) : (
-                    <Save />
-                  )
-                }
+                onClick={() => handleSave('basic')}
+                startIcon={loading ? <CircularProgress size={20} color="inherit" /> : <Save />}
                 disabled={loading}
                 fullWidth={isMobile}
               >
@@ -578,7 +547,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           ) : (
             <Button
               variant="outlined"
-              onClick={() => toggleEditMode("basic")}
+              onClick={() => toggleEditMode('basic')}
               startIcon={<Edit />}
               fullWidth={isMobile}
             >
@@ -595,47 +564,45 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
     <Box>
       <Box
         sx={{
-          display: "flex",
-          flexDirection: { xs: "column", sm: "row" },
-          justifyContent: "space-between",
-          alignItems: { xs: "stretch", sm: "center" },
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          justifyContent: 'space-between',
+          alignItems: { xs: 'stretch', sm: 'center' },
           mb: { xs: 2, sm: 3 },
           gap: { xs: 1, sm: 0 },
         }}
       >
-        <Typography variant={isMobile ? "subtitle1" : "h6"}>
-          Skills & Expertise
-        </Typography>
+        <Typography variant={isMobile ? 'subtitle1' : 'h6'}>Skills & Expertise</Typography>
         <Button
           variant="outlined"
           startIcon={<Add />}
           onClick={() => setSkillDialog(true)}
           fullWidth={isMobile}
-          size={isMobile ? "small" : "medium"}
+          size={isMobile ? 'small' : 'medium'}
         >
           Add Skill
         </Button>
       </Box>
 
-      <Grid container spacing={{ xs: 1, sm: 2 }} sx={{ maxWidth: "100%" }}>
+      <Grid container spacing={{ xs: 1, sm: 2 }} sx={{ maxWidth: '100%' }}>
         {(formData.skills || []).map((skill, index) => (
           <Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
-            <Card variant="outlined" sx={{ height: "100%" }}>
+            <Card variant="outlined" sx={{ height: '100%' }}>
               <CardContent sx={{ p: { xs: 1.5, sm: 3 } }}>
                 <Box
                   sx={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start",
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
                   }}
                 >
                   <Box sx={{ flex: 1, minWidth: 0 }}>
                     <Typography
-                      variant={isMobile ? "subtitle2" : "h6"}
+                      variant={isMobile ? 'subtitle2' : 'h6'}
                       component="div"
                       sx={{
-                        fontSize: { xs: "0.9rem", sm: "1.25rem" },
-                        wordBreak: "break-word",
+                        fontSize: { xs: '0.9rem', sm: '1.25rem' },
+                        wordBreak: 'break-word',
                       }}
                     >
                       {skill.name}
@@ -644,8 +611,8 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                       variant="body2"
                       color="text.secondary"
                       sx={{
-                        wordBreak: "break-word",
-                        fontSize: { xs: "0.75rem", sm: "0.875rem" },
+                        wordBreak: 'break-word',
+                        fontSize: { xs: '0.75rem', sm: '0.875rem' },
                       }}
                     >
                       {skill.category}
@@ -657,7 +624,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                       variant="outlined"
                       sx={{
                         mt: 1,
-                        fontSize: { xs: "0.65rem", sm: "0.75rem" },
+                        fontSize: { xs: '0.65rem', sm: '0.75rem' },
                         height: { xs: 20, sm: 24 },
                       }}
                     />
@@ -665,7 +632,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                       <Typography
                         variant="caption"
                         display="block"
-                        sx={{ fontSize: { xs: "0.65rem", sm: "0.75rem" } }}
+                        sx={{ fontSize: { xs: '0.65rem', sm: '0.75rem' } }}
                       >
                         {skill.yearsOfExperience} years experience
                       </Typography>
@@ -687,11 +654,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
       </Grid>
 
       {(!formData.skills || formData.skills.length === 0) && (
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{ textAlign: "center", py: 4 }}
-        >
+        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
           No skills added yet. Click "Add Skill" to get started.
         </Typography>
       )}
@@ -703,47 +666,45 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
     <Box>
       <Box
         sx={{
-          display: "flex",
-          flexDirection: { xs: "column", sm: "row" },
-          justifyContent: "space-between",
-          alignItems: { xs: "stretch", sm: "center" },
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          justifyContent: 'space-between',
+          alignItems: { xs: 'stretch', sm: 'center' },
           mb: { xs: 2, sm: 3 },
           gap: { xs: 1, sm: 0 },
         }}
       >
-        <Typography variant={isMobile ? "subtitle1" : "h6"}>
-          Work Experience
-        </Typography>
+        <Typography variant={isMobile ? 'subtitle1' : 'h6'}>Work Experience</Typography>
         <Button
           variant="outlined"
           startIcon={<Add />}
           onClick={() => setExperienceDialog(true)}
           fullWidth={isMobile}
-          size={isMobile ? "small" : "medium"}
+          size={isMobile ? 'small' : 'medium'}
         >
           Add Experience
         </Button>
       </Box>
 
       {(formData.experience || []).map((exp, index) => (
-        <Card key={index} sx={{ mb: { xs: 1.5, sm: 2 }, overflow: "hidden" }}>
+        <Card key={index} sx={{ mb: { xs: 1.5, sm: 2 }, overflow: 'hidden' }}>
           <CardContent sx={{ p: { xs: 1.5, sm: 3 } }}>
             <Box
               sx={{
-                display: "flex",
-                flexDirection: { xs: "column", sm: "row" },
-                justifyContent: "space-between",
-                alignItems: "flex-start",
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
                 gap: { xs: 1, sm: 0 },
               }}
             >
               <Box sx={{ flex: 1, minWidth: 0 }}>
                 <Typography
-                  variant={isMobile ? "subtitle1" : "h6"}
+                  variant={isMobile ? 'subtitle1' : 'h6'}
                   component="div"
                   sx={{
-                    fontSize: { xs: "1rem", sm: "1.25rem" },
-                    wordBreak: "break-word",
+                    fontSize: { xs: '1rem', sm: '1.25rem' },
+                    wordBreak: 'break-word',
                   }}
                 >
                   {exp.position}
@@ -752,8 +713,8 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                   variant="subtitle1"
                   color="primary"
                   sx={{
-                    wordBreak: "break-word",
-                    fontSize: { xs: "0.9rem", sm: "1rem" },
+                    wordBreak: 'break-word',
+                    fontSize: { xs: '0.9rem', sm: '1rem' },
                   }}
                 >
                   {exp.companyName}
@@ -761,19 +722,17 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 <Typography
                   variant="body2"
                   color="text.secondary"
-                  sx={{ fontSize: { xs: "0.8rem", sm: "0.875rem" } }}
+                  sx={{ fontSize: { xs: '0.8rem', sm: '0.875rem' } }}
                 >
-                  {exp.startDate?.toLocaleDateString()} -{" "}
-                  {exp.isCurrent
-                    ? "Present"
-                    : exp.endDate?.toLocaleDateString()}
+                  {exp.startDate?.toLocaleDateString()} -{' '}
+                  {exp.isCurrent ? 'Present' : exp.endDate?.toLocaleDateString()}
                 </Typography>
                 <Typography
                   variant="body2"
                   sx={{
                     mt: 1,
-                    wordBreak: "break-word",
-                    fontSize: { xs: "0.8rem", sm: "0.875rem" },
+                    wordBreak: 'break-word',
+                    fontSize: { xs: '0.8rem', sm: '0.875rem' },
                   }}
                 >
                   {exp.description}
@@ -788,7 +747,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                         sx={{
                           mr: 0.5,
                           mb: 0.5,
-                          fontSize: { xs: "0.65rem", sm: "0.75rem" },
+                          fontSize: { xs: '0.65rem', sm: '0.75rem' },
                           height: { xs: 20, sm: 24 },
                         }}
                       />
@@ -801,7 +760,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 color="error"
                 size="small"
                 sx={{
-                  alignSelf: { xs: "flex-end", sm: "flex-start" },
+                  alignSelf: { xs: 'flex-end', sm: 'flex-start' },
                   ml: { sm: 1 },
                 }}
               >
@@ -817,9 +776,9 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           variant="body2"
           color="text.secondary"
           sx={{
-            textAlign: "center",
+            textAlign: 'center',
             py: { xs: 2, sm: 4 },
-            fontSize: { xs: "0.8rem", sm: "0.875rem" },
+            fontSize: { xs: '0.8rem', sm: '0.875rem' },
           }}
         >
           No work experience added yet. Click "Add Experience" to get started.
@@ -832,22 +791,20 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
     <Box>
       <Box
         sx={{
-          display: "flex",
-          flexDirection: { xs: "column", sm: "row" },
-          justifyContent: "space-between",
-          alignItems: { xs: "stretch", sm: "center" },
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          justifyContent: 'space-between',
+          alignItems: { xs: 'stretch', sm: 'center' },
           mb: { xs: 2, sm: 3 },
           gap: { xs: 1, sm: 0 },
         }}
       >
-        <Typography variant={isMobile ? "subtitle1" : "h6"}>
-          Education
-        </Typography>
+        <Typography variant={isMobile ? 'subtitle1' : 'h6'}>Education</Typography>
         <Button
           variant="outlined"
           startIcon={<Add />}
           fullWidth={isMobile}
-          size={isMobile ? "small" : "medium"}
+          size={isMobile ? 'small' : 'medium'}
         >
           Add Education
         </Button>
@@ -858,9 +815,9 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           variant="body2"
           color="text.secondary"
           sx={{
-            textAlign: "center",
+            textAlign: 'center',
             py: { xs: 2, sm: 4 },
-            fontSize: { xs: "0.8rem", sm: "0.875rem" },
+            fontSize: { xs: '0.8rem', sm: '0.875rem' },
           }}
         >
           No work experience added yet. Click "Add Experience" to get started.
@@ -881,11 +838,11 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
       <Paper
         elevation={3}
         sx={{
-          overflow: "hidden",
+          overflow: 'hidden',
           mx: { xs: 0, sm: 0 },
         }}
       >
-        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs
             value={tabValue}
             onChange={handleTabChange}
@@ -893,35 +850,35 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
             scrollButtons="auto"
             allowScrollButtonsMobile
             sx={{
-              "& .MuiTabs-flexContainer": {
-                justifyContent: isMobile ? "flex-start" : "center",
+              '& .MuiTabs-flexContainer': {
+                justifyContent: isMobile ? 'flex-start' : 'center',
               },
-              "& .MuiTab-root": {
-                fontSize: { xs: "0.75rem", sm: "0.875rem" },
+              '& .MuiTab-root': {
+                fontSize: { xs: '0.75rem', sm: '0.875rem' },
                 minWidth: { xs: 60, sm: 120 },
-                padding: { xs: "6px 8px", sm: "12px 16px" },
+                padding: { xs: '6px 8px', sm: '12px 16px' },
               },
             }}
           >
             <Tab
-              label={isMobile ? "Info" : "Basic Info"}
+              label={isMobile ? 'Info' : 'Basic Info'}
               icon={<AccountCircle sx={{ fontSize: { xs: 18, sm: 24 } }} />}
-              iconPosition={isMobile ? "top" : "start"}
+              iconPosition={isMobile ? 'top' : 'start'}
             />
             <Tab
               label="Skills"
               icon={<EmojiEvents sx={{ fontSize: { xs: 18, sm: 24 } }} />}
-              iconPosition={isMobile ? "top" : "start"}
+              iconPosition={isMobile ? 'top' : 'start'}
             />
             <Tab
-              label={isMobile ? "Work" : "Experience"}
+              label={isMobile ? 'Work' : 'Experience'}
               icon={<Work sx={{ fontSize: { xs: 18, sm: 24 } }} />}
-              iconPosition={isMobile ? "top" : "start"}
+              iconPosition={isMobile ? 'top' : 'start'}
             />
             <Tab
-              label={isMobile ? "Edu" : "Education"}
+              label={isMobile ? 'Edu' : 'Education'}
               icon={<School sx={{ fontSize: { xs: 18, sm: 24 } }} />}
-              iconPosition={isMobile ? "top" : "start"}
+              iconPosition={isMobile ? 'top' : 'start'}
             />
           </Tabs>
         </Box>
@@ -954,9 +911,9 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           sx: {
             ...(isMobile && {
               margin: 0,
-              width: "100%",
-              height: "100%",
-              maxHeight: "100%",
+              width: '100%',
+              height: '100%',
+              maxHeight: '100%',
             }),
           },
         }}
@@ -964,44 +921,36 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
         <DialogTitle sx={{ pb: { xs: 1, sm: 2 } }}>Add New Skill</DialogTitle>
         <DialogContent
           sx={{
-            overflow: "auto",
+            overflow: 'auto',
             pt: { xs: 1, sm: 2 },
           }}
         >
-          <Grid
-            container
-            spacing={{ xs: 1.5, sm: 2 }}
-            sx={{ mt: 0.5, maxWidth: "100%" }}
-          >
+          <Grid container spacing={{ xs: 1.5, sm: 2 }} sx={{ mt: 0.5, maxWidth: '100%' }}>
             <Grid size={{ xs: 12 }}>
               <TextField
                 fullWidth
                 label="Skill Name"
-                value={newSkill.name || ""}
-                onChange={(e) =>
-                  setNewSkill({ ...newSkill, name: e.target.value })
-                }
-                size={isMobile ? "small" : "medium"}
+                value={newSkill.name || ''}
+                onChange={e => setNewSkill({ ...newSkill, name: e.target.value })}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
             <Grid size={{ xs: 12 }}>
               <TextField
                 fullWidth
                 label="Category"
-                value={newSkill.category || ""}
-                onChange={(e) =>
-                  setNewSkill({ ...newSkill, category: e.target.value })
-                }
+                value={newSkill.category || ''}
+                onChange={e => setNewSkill({ ...newSkill, category: e.target.value })}
                 placeholder="e.g., Programming, Design, Marketing"
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
             <Grid size={{ xs: 12, sm: 6 }}>
-              <FormControl fullWidth size={isMobile ? "small" : "medium"}>
+              <FormControl fullWidth size={isMobile ? 'small' : 'medium'}>
                 <InputLabel>Proficiency Level</InputLabel>
                 <Select
-                  value={newSkill.level || "beginner"}
-                  onChange={(e) =>
+                  value={newSkill.level || 'beginner'}
+                  onChange={e =>
                     setNewSkill({
                       ...newSkill,
                       level: e.target.value as Types.SkillLevel,
@@ -1022,13 +971,13 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 type="number"
                 label="Years of Experience"
                 value={newSkill.yearsOfExperience || 0}
-                onChange={(e) =>
+                onChange={e =>
                   setNewSkill({
                     ...newSkill,
                     yearsOfExperience: parseInt(e.target.value) || 0,
                   })
                 }
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
           </Grid>
@@ -1036,14 +985,14 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
         <DialogActions
           sx={{
             p: { xs: 1.5, sm: 3 },
-            flexDirection: { xs: "column", sm: "row" },
+            flexDirection: { xs: 'column', sm: 'row' },
             gap: { xs: 1, sm: 0 },
           }}
         >
           <Button
             onClick={() => setSkillDialog(false)}
             fullWidth={isMobile}
-            size={isMobile ? "small" : "medium"}
+            size={isMobile ? 'small' : 'medium'}
           >
             Cancel
           </Button>
@@ -1051,7 +1000,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
             onClick={handleAddSkill}
             variant="contained"
             fullWidth={isMobile}
-            size={isMobile ? "small" : "medium"}
+            size={isMobile ? 'small' : 'medium'}
           >
             Add Skill
           </Button>
@@ -1069,53 +1018,47 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
           sx: {
             ...(isMobile && {
               margin: 0,
-              width: "100%",
-              height: "100%",
-              maxHeight: "100%",
+              width: '100%',
+              height: '100%',
+              maxHeight: '100%',
             }),
           },
         }}
       >
-        <DialogTitle sx={{ pb: { xs: 1, sm: 2 } }}>
-          Add Work Experience
-        </DialogTitle>
+        <DialogTitle sx={{ pb: { xs: 1, sm: 2 } }}>Add Work Experience</DialogTitle>
         <DialogContent
           sx={{
-            overflow: "auto",
+            overflow: 'auto',
             pt: { xs: 1, sm: 2 },
           }}
         >
-          <Grid
-            container
-            spacing={{ xs: 1.5, sm: 2 }}
-            sx={{ mt: 0.5, maxWidth: "100%" }}
-          >
+          <Grid container spacing={{ xs: 1.5, sm: 2 }} sx={{ mt: 0.5, maxWidth: '100%' }}>
             <Grid size={{ xs: 12, sm: 6 }}>
               <TextField
                 fullWidth
                 label="Company Name"
-                value={newExperience.companyName || ""}
-                onChange={(e) =>
+                value={newExperience.companyName || ''}
+                onChange={e =>
                   setNewExperience({
                     ...newExperience,
                     companyName: e.target.value,
                   })
                 }
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
             <Grid size={{ xs: 12, sm: 6 }}>
               <TextField
                 fullWidth
                 label="Position/Title"
-                value={newExperience.position || ""}
-                onChange={(e) =>
+                value={newExperience.position || ''}
+                onChange={e =>
                   setNewExperience({
                     ...newExperience,
                     position: e.target.value,
                   })
                 }
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
             <Grid size={{ xs: 12, sm: 6 }}>
@@ -1123,17 +1066,15 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 fullWidth
                 type="date"
                 label="Start Date"
-                value={
-                  newExperience.startDate?.toISOString().split("T")[0] || ""
-                }
-                onChange={(e) =>
+                value={newExperience.startDate?.toISOString().split('T')[0] || ''}
+                onChange={e =>
                   setNewExperience({
                     ...newExperience,
                     startDate: new Date(e.target.value),
                   })
                 }
                 InputLabelProps={{ shrink: true }}
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
             <Grid size={{ xs: 12, sm: 6 }}>
@@ -1141,19 +1082,19 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 control={
                   <Switch
                     checked={newExperience.isCurrent || false}
-                    onChange={(e) =>
+                    onChange={e =>
                       setNewExperience({
                         ...newExperience,
                         isCurrent: e.target.checked,
                       })
                     }
-                    size={isMobile ? "small" : "medium"}
+                    size={isMobile ? 'small' : 'medium'}
                   />
                 }
                 label="Currently working here"
                 sx={{
-                  "& .MuiFormControlLabel-label": {
-                    fontSize: { xs: "0.875rem", sm: "1rem" },
+                  '& .MuiFormControlLabel-label': {
+                    fontSize: { xs: '0.875rem', sm: '1rem' },
                   },
                 }}
               />
@@ -1164,15 +1105,15 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
                 multiline
                 rows={isMobile ? 3 : 4}
                 label="Job Description"
-                value={newExperience.description || ""}
-                onChange={(e) =>
+                value={newExperience.description || ''}
+                onChange={e =>
                   setNewExperience({
                     ...newExperience,
                     description: e.target.value,
                   })
                 }
                 placeholder="Describe your responsibilities and achievements..."
-                size={isMobile ? "small" : "medium"}
+                size={isMobile ? 'small' : 'medium'}
               />
             </Grid>
           </Grid>
@@ -1180,14 +1121,14 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
         <DialogActions
           sx={{
             p: { xs: 1.5, sm: 3 },
-            flexDirection: { xs: "column", sm: "row" },
+            flexDirection: { xs: 'column', sm: 'row' },
             gap: { xs: 1, sm: 0 },
           }}
         >
           <Button
             onClick={() => setExperienceDialog(false)}
             fullWidth={isMobile}
-            size={isMobile ? "small" : "medium"}
+            size={isMobile ? 'small' : 'medium'}
           >
             Cancel
           </Button>
@@ -1195,7 +1136,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
             onClick={handleAddExperience}
             variant="contained"
             fullWidth={isMobile}
-            size={isMobile ? "small" : "medium"}
+            size={isMobile ? 'small' : 'medium'}
           >
             Add Experience
           </Button>
@@ -1211,7 +1152,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (
         <Alert
           onClose={() => setSnackbar({ ...snackbar, open: false })}
           severity={snackbar.severity}
-          sx={{ width: "100%" }}
+          sx={{ width: '100%' }}
         >
           {snackbar.message}
         </Alert>
diff --git a/frontend/src/pages/candidate/ProfileWizard.tsx b/frontend/src/pages/candidate/ProfileWizard.tsx
index c08c5c7..d85a423 100644
--- a/frontend/src/pages/candidate/ProfileWizard.tsx
+++ b/frontend/src/pages/candidate/ProfileWizard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   Box,
   Button,
@@ -16,10 +16,10 @@ import {
   CircularProgress,
   Snackbar,
   Alert,
-} from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { CloudUpload, PhotoCamera } from "@mui/icons-material";
-import { useTheme } from "@mui/material/styles";
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { CloudUpload, PhotoCamera } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 // import { Beta } from '../components/Beta';
 
 // Interfaces
@@ -34,21 +34,21 @@ interface ProfileFormData {
 }
 
 // Styled components
-const VisuallyHiddenInput = styled("input")({
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
   height: 1,
-  overflow: "hidden",
-  position: "absolute",
+  overflow: 'hidden',
+  position: 'absolute',
   bottom: 0,
   left: 0,
-  whiteSpace: "nowrap",
+  whiteSpace: 'nowrap',
   width: 1,
 });
 
 const CreateProfilePage: React.FC = () => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   // State management
   const [activeStep, setActiveStep] = useState<number>(0);
@@ -58,29 +58,25 @@ const CreateProfilePage: React.FC = () => {
   const [snackbar, setSnackbar] = useState<{
     open: boolean;
     message: string;
-    severity: "success" | "error";
+    severity: 'success' | 'error';
   }>({
     open: false,
-    message: "",
-    severity: "success",
+    message: '',
+    severity: 'success',
   });
 
   const [formData, setFormData] = useState<ProfileFormData>({
-    firstName: "",
-    lastName: "",
-    email: "",
-    phoneNumber: "",
-    jobTitle: "",
-    location: "",
-    bio: "",
+    firstName: '',
+    lastName: '',
+    email: '',
+    phoneNumber: '',
+    jobTitle: '',
+    location: '',
+    bio: '',
   });
 
   // Steps for the profile creation process
-  const steps = [
-    "Personal Information",
-    "Professional Details",
-    "Resume Upload",
-  ];
+  const steps = ['Personal Information', 'Professional Details', 'Resume Upload'];
 
   // Handle form input changes
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,7 +91,7 @@ const CreateProfilePage: React.FC = () => {
   const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const reader = new FileReader();
-      reader.onload = (event) => {
+      reader.onload = event => {
         if (event.target?.result) {
           setProfileImage(event.target.result.toString());
         }
@@ -111,7 +107,7 @@ const CreateProfilePage: React.FC = () => {
       setSnackbar({
         open: true,
         message: `Resume uploaded: ${e.target.files[0].name}`,
-        severity: "success",
+        severity: 'success',
       });
     }
   };
@@ -121,12 +117,12 @@ const CreateProfilePage: React.FC = () => {
     if (activeStep === steps.length - 1) {
       handleSubmit();
     } else {
-      setActiveStep((prevStep) => prevStep + 1);
+      setActiveStep(prevStep => prevStep + 1);
     }
   };
 
   const handleBack = () => {
-    setActiveStep((prevStep) => prevStep - 1);
+    setActiveStep(prevStep => prevStep - 1);
   };
 
   // Form submission
@@ -138,8 +134,8 @@ const CreateProfilePage: React.FC = () => {
       setLoading(false);
       setSnackbar({
         open: true,
-        message: "Profile created successfully! Redirecting to dashboard...",
-        severity: "success",
+        message: 'Profile created successfully! Redirecting to dashboard...',
+        severity: 'success',
       });
 
       // Redirect would happen here in a real application
@@ -152,12 +148,12 @@ const CreateProfilePage: React.FC = () => {
     switch (activeStep) {
       case 0:
         return (
-          formData.firstName.trim() !== "" &&
-          formData.lastName.trim() !== "" &&
-          formData.email.trim() !== ""
+          formData.firstName.trim() !== '' &&
+          formData.lastName.trim() !== '' &&
+          formData.email.trim() !== ''
         );
       case 1:
-        return formData.jobTitle.trim() !== "";
+        return formData.jobTitle.trim() !== '';
       case 2:
         return resumeFile !== null;
       default:
@@ -171,16 +167,16 @@ const CreateProfilePage: React.FC = () => {
       case 0:
         return (
           <Grid container spacing={3}>
-            <Grid size={{ xs: 12 }} sx={{ textAlign: "center", mb: 2 }}>
+            <Grid size={{ xs: 12 }} sx={{ textAlign: 'center', mb: 2 }}>
               <Box
                 sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
                 }}
               >
                 <Avatar
-                  src={profileImage || ""}
+                  src={profileImage || ''}
                   sx={{
                     width: 120,
                     height: 120,
@@ -188,17 +184,9 @@ const CreateProfilePage: React.FC = () => {
                     border: `2px solid ${theme.palette.primary.main}`,
                   }}
                 />
-                <IconButton
-                  color="primary"
-                  aria-label="upload picture"
-                  component="label"
-                >
+                <IconButton color="primary" aria-label="upload picture" component="label">
                   <PhotoCamera />
-                  <VisuallyHiddenInput
-                    type="file"
-                    accept="image/*"
-                    onChange={handleImageUpload}
-                  />
+                  <VisuallyHiddenInput type="file" accept="image/*" onChange={handleImageUpload} />
                 </IconButton>
                 <Typography variant="caption" color="textSecondary">
                   Add profile photo
@@ -296,11 +284,10 @@ const CreateProfilePage: React.FC = () => {
           <Grid container spacing={3}>
             <Grid size={{ xs: 12 }}>
               <Typography variant="body1" component="p">
-                Upload your resume to complete your profile. We'll analyze it to
-                better understand your skills and experience. (Supported
-                formats: .pdf, .docx, .md, and .txt)
+                Upload your resume to complete your profile. We'll analyze it to better understand
+                your skills and experience. (Supported formats: .pdf, .docx, .md, and .txt)
               </Typography>
-              <Box sx={{ textAlign: "center", mt: 2 }}>
+              <Box sx={{ textAlign: 'center', mt: 2 }}>
                 <Button
                   component="label"
                   variant="contained"
@@ -316,11 +303,7 @@ const CreateProfilePage: React.FC = () => {
                 </Button>
 
                 {resumeFile && (
-                  <Typography
-                    variant="body2"
-                    color="textSecondary"
-                    sx={{ mt: 1 }}
-                  >
+                  <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
                     File uploaded: {resumeFile.name}
                   </Typography>
                 )}
@@ -329,7 +312,7 @@ const CreateProfilePage: React.FC = () => {
           </Grid>
         );
       default:
-        return "Unknown step";
+        return 'Unknown step';
     }
   };
 
@@ -350,10 +333,10 @@ const CreateProfilePage: React.FC = () => {
         <Stepper
           activeStep={activeStep}
           alternativeLabel={!isMobile}
-          orientation={isMobile ? "vertical" : "horizontal"}
+          orientation={isMobile ? 'vertical' : 'horizontal'}
           sx={{ mt: 3, mb: 5 }}
         >
-          {steps.map((label) => (
+          {steps.map(label => (
             <Step key={label}>
               <StepLabel>{label}</StepLabel>
             </Step>
@@ -362,23 +345,17 @@ const CreateProfilePage: React.FC = () => {
 
         <Box sx={{ mt: 2, mb: 4 }}>{getStepContent(activeStep)}</Box>
 
-        <Box sx={{ display: "flex", justifyContent: "space-between", mt: 4 }}>
-          <Button
-            disabled={activeStep === 0}
-            onClick={handleBack}
-            variant="outlined"
-          >
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
+          <Button disabled={activeStep === 0} onClick={handleBack} variant="outlined">
             Back
           </Button>
           <Button
             variant="contained"
             onClick={handleNext}
             disabled={!isStepValid() || loading}
-            startIcon={
-              loading ? <CircularProgress size={20} color="inherit" /> : null
-            }
+            startIcon={loading ? <CircularProgress size={20} color="inherit" /> : null}
           >
-            {activeStep === steps.length - 1 ? "Create Profile" : "Next"}
+            {activeStep === steps.length - 1 ? 'Create Profile' : 'Next'}
           </Button>
         </Box>
       </Paper>
@@ -391,7 +368,7 @@ const CreateProfilePage: React.FC = () => {
         <Alert
           onClose={() => setSnackbar({ ...snackbar, open: false })}
           severity={snackbar.severity}
-          sx={{ width: "100%" }}
+          sx={{ width: '100%' }}
         >
           {snackbar.message}
         </Alert>
diff --git a/frontend/src/pages/candidate/RegistrationForms.tsx b/frontend/src/pages/candidate/RegistrationForms.tsx
index 2ae3f19..67f99b1 100644
--- a/frontend/src/pages/candidate/RegistrationForms.tsx
+++ b/frontend/src/pages/candidate/RegistrationForms.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   Paper,
   Box,
@@ -22,28 +22,28 @@ import {
   useTheme,
   IconButton,
   InputAdornment,
-} from "@mui/material";
-import { Visibility, VisibilityOff } from "@mui/icons-material";
-import { ApiClient } from "services/api-client";
-import { RegistrationSuccessDialog } from "components/EmailVerificationComponents";
-import { useAuth } from "hooks/AuthContext";
-import { useNavigate } from "react-router-dom";
+} from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { ApiClient } from 'services/api-client';
+import { RegistrationSuccessDialog } from 'components/EmailVerificationComponents';
+import { useAuth } from 'hooks/AuthContext';
+import { useNavigate } from 'react-router-dom';
 
 // Candidate Registration Form
 const CandidateRegistrationForm = () => {
   const { apiClient } = useAuth();
   const navigate = useNavigate();
   const [formData, setFormData] = useState({
-    email: "",
-    username: "",
-    password: "",
-    confirmPassword: "",
-    firstName: "",
-    lastName: "",
-    phone: "",
+    email: '',
+    username: '',
+    password: '',
+    confirmPassword: '',
+    firstName: '',
+    lastName: '',
+    phone: '',
   });
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
@@ -60,50 +60,46 @@ const CandidateRegistrationForm = () => {
     // Email validation
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!formData.email) {
-      newErrors.email = "Email is required";
+      newErrors.email = 'Email is required';
     } else if (!emailRegex.test(formData.email)) {
-      newErrors.email = "Please enter a valid email address";
+      newErrors.email = 'Please enter a valid email address';
     }
 
     // Username validation
     if (!formData.username) {
-      newErrors.username = "Username is required";
+      newErrors.username = 'Username is required';
     } else if (formData.username.length < 3) {
-      newErrors.username = "Username must be at least 3 characters";
+      newErrors.username = 'Username must be at least 3 characters';
     } else if (!/^[a-zA-Z0-9_]+$/.test(formData.username)) {
-      newErrors.username =
-        "Username can only contain letters, numbers, and underscores";
+      newErrors.username = 'Username can only contain letters, numbers, and underscores';
     }
 
     // Password validation
     if (!formData.password) {
-      newErrors.password = "Password is required";
+      newErrors.password = 'Password is required';
     } else {
       const passwordErrors = validatePassword(formData.password);
       if (passwordErrors.length > 0) {
-        newErrors.password = passwordErrors.join(", ");
+        newErrors.password = passwordErrors.join(', ');
       }
     }
 
     // Confirm password
     if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = "Passwords do not match";
+      newErrors.confirmPassword = 'Passwords do not match';
     }
 
     // Name validation
     if (!formData.firstName.trim()) {
-      newErrors.firstName = "First name is required";
+      newErrors.firstName = 'First name is required';
     }
     if (!formData.lastName.trim()) {
-      newErrors.lastName = "Last name is required";
+      newErrors.lastName = 'Last name is required';
     }
 
     // Phone validation (optional but must be valid if provided)
-    if (
-      formData.phone &&
-      !/^[+]?[1-9][\d]{0,15}$/.test(formData.phone.replace(/\s/g, ""))
-    ) {
-      newErrors.phone = "Please enter a valid phone number";
+    if (formData.phone && !/^[+]?[1-9][\d]{0,15}$/.test(formData.phone.replace(/\s/g, ''))) {
+      newErrors.phone = 'Please enter a valid phone number';
     }
 
     setErrors(newErrors);
@@ -114,32 +110,30 @@ const CandidateRegistrationForm = () => {
     const errors: string[] = [];
 
     if (password.length < 8) {
-      errors.push("at least 8 characters");
+      errors.push('at least 8 characters');
     }
     if (!/[a-z]/.test(password)) {
-      errors.push("one lowercase letter");
+      errors.push('one lowercase letter');
     }
     if (!/[A-Z]/.test(password)) {
-      errors.push("one uppercase letter");
+      errors.push('one uppercase letter');
     }
     if (!/\d/.test(password)) {
-      errors.push("one number");
+      errors.push('one number');
     }
     if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
-      errors.push("one special character");
+      errors.push('one special character');
     }
 
-    return errors.length > 0
-      ? [`Password must contain ${errors.join(", ")}`]
-      : [];
+    return errors.length > 0 ? [`Password must contain ${errors.join(', ')}`] : [];
   };
 
   const handleInputChange = (field: string, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+    setFormData(prev => ({ ...prev, [field]: value }));
 
     // Clear error when user starts typing
     if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
+      setErrors(prev => ({ ...prev, [field]: '' }));
     }
   };
 
@@ -165,15 +159,15 @@ const CandidateRegistrationForm = () => {
       setRegistrationResult(result);
       setShowSuccess(true);
     } catch (error: any) {
-      if (error.message.includes("already exists")) {
-        if (error.message.includes("email")) {
-          setErrors({ email: "An account with this email already exists" });
-        } else if (error.message.includes("username")) {
-          setErrors({ username: "This username is already taken" });
+      if (error.message.includes('already exists')) {
+        if (error.message.includes('email')) {
+          setErrors({ email: 'An account with this email already exists' });
+        } else if (error.message.includes('username')) {
+          setErrors({ username: 'This username is already taken' });
         }
       } else {
         setErrors({
-          general: error.message || "Registration failed. Please try again.",
+          general: error.message || 'Registration failed. Please try again.',
         });
       }
     } finally {
@@ -192,18 +186,16 @@ const CandidateRegistrationForm = () => {
 
     const strength = validations.filter(Boolean).length;
 
-    if (strength < 2) return { level: "weak", color: "error", value: 20 };
-    if (strength < 4) return { level: "medium", color: "warning", value: 60 };
-    return { level: "strong", color: "success", value: 100 };
+    if (strength < 2) return { level: 'weak', color: 'error', value: 20 };
+    if (strength < 4) return { level: 'medium', color: 'warning', value: 60 };
+    return { level: 'strong', color: 'success', value: 100 };
   };
 
-  const passwordStrength = formData.password
-    ? getPasswordStrength(formData.password)
-    : null;
+  const passwordStrength = formData.password ? getPasswordStrength(formData.password) : null;
 
   return (
     <Box sx={{ p: isMobile ? 1 : 5 }}>
-      <Box sx={{ textAlign: "center", mb: 4 }}>
+      <Box sx={{ textAlign: 'center', mb: 4 }}>
         <Typography variant="h4" component="h1" sx={{ mb: 1 }}>
           Join as a Candidate
         </Typography>
@@ -218,7 +210,7 @@ const CandidateRegistrationForm = () => {
           label="Email Address"
           type="email"
           value={formData.email}
-          onChange={(e) => handleInputChange("email", e.target.value)}
+          onChange={e => handleInputChange('email', e.target.value)}
           placeholder="your.email@example.com"
           error={!!errors.email}
           helperText={errors.email}
@@ -229,9 +221,7 @@ const CandidateRegistrationForm = () => {
           fullWidth
           label="Username"
           value={formData.username}
-          onChange={(e) =>
-            handleInputChange("username", e.target.value.toLowerCase())
-          }
+          onChange={e => handleInputChange('username', e.target.value.toLowerCase())}
           placeholder="johndoe123"
           error={!!errors.username}
           helperText={errors.username}
@@ -243,7 +233,7 @@ const CandidateRegistrationForm = () => {
             fullWidth
             label="First Name"
             value={formData.firstName}
-            onChange={(e) => handleInputChange("firstName", e.target.value)}
+            onChange={e => handleInputChange('firstName', e.target.value)}
             placeholder="John"
             error={!!errors.firstName}
             helperText={errors.firstName}
@@ -253,7 +243,7 @@ const CandidateRegistrationForm = () => {
             fullWidth
             label="Last Name"
             value={formData.lastName}
-            onChange={(e) => handleInputChange("lastName", e.target.value)}
+            onChange={e => handleInputChange('lastName', e.target.value)}
             placeholder="Doe"
             error={!!errors.lastName}
             helperText={errors.lastName}
@@ -266,19 +256,19 @@ const CandidateRegistrationForm = () => {
           label="Phone Number"
           type="tel"
           value={formData.phone}
-          onChange={(e) => handleInputChange("phone", e.target.value)}
+          onChange={e => handleInputChange('phone', e.target.value)}
           placeholder="+1 (555) 123-4567"
           error={!!errors.phone}
-          helperText={errors.phone || "Optional"}
+          helperText={errors.phone || 'Optional'}
         />
 
         <Box>
           <TextField
             fullWidth
             label="Password"
-            type={showPassword ? "text" : "password"}
+            type={showPassword ? 'text' : 'password'}
             value={formData.password}
-            onChange={(e) => handleInputChange("password", e.target.value)}
+            onChange={e => handleInputChange('password', e.target.value)}
             placeholder="Create a strong password"
             error={!!errors.password}
             helperText={errors.password}
@@ -289,7 +279,7 @@ const CandidateRegistrationForm = () => {
                   <IconButton
                     aria-label="toggle password visibility"
                     onClick={() => setShowPassword(!showPassword)}
-                    onMouseDown={(e) => e.preventDefault()}
+                    onMouseDown={e => e.preventDefault()}
                     edge="end"
                   >
                     {showPassword ? <VisibilityOff /> : <Visibility />}
@@ -309,7 +299,7 @@ const CandidateRegistrationForm = () => {
               <Typography
                 variant="caption"
                 color={`${passwordStrength.color}.main`}
-                sx={{ mt: 0.5, display: "block", textTransform: "capitalize" }}
+                sx={{ mt: 0.5, display: 'block', textTransform: 'capitalize' }}
               >
                 Password strength: {passwordStrength.level}
               </Typography>
@@ -320,9 +310,9 @@ const CandidateRegistrationForm = () => {
         <TextField
           fullWidth
           label="Confirm Password"
-          type={showConfirmPassword ? "text" : "password"}
+          type={showConfirmPassword ? 'text' : 'password'}
           value={formData.confirmPassword}
-          onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
+          onChange={e => handleInputChange('confirmPassword', e.target.value)}
           placeholder="Confirm your password"
           error={!!errors.confirmPassword}
           helperText={errors.confirmPassword}
@@ -333,7 +323,7 @@ const CandidateRegistrationForm = () => {
                 <IconButton
                   aria-label="toggle confirm password visibility"
                   onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseDown={e => e.preventDefault()}
                   edge="end"
                 >
                   {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
@@ -359,18 +349,18 @@ const CandidateRegistrationForm = () => {
               <Typography>Creating Account...</Typography>
             </Stack>
           ) : (
-            "Create Account"
+            'Create Account'
           )}
         </Button>
 
-        <Box sx={{ textAlign: "center" }}>
+        <Box sx={{ textAlign: 'center' }}>
           <Typography variant="body2" color="text.secondary">
-            Already have an account?{" "}
+            Already have an account?{' '}
             <Link
               component="button"
-              onClick={(e) => {
+              onClick={e => {
                 e.preventDefault();
-                navigate("/login");
+                navigate('/login');
               }}
               sx={{ fontWeight: 600 }}
             >
@@ -394,16 +384,16 @@ const CandidateRegistrationForm = () => {
 // Employer Registration Form
 const EmployerRegistrationForm = () => {
   const [formData, setFormData] = useState({
-    email: "",
-    username: "",
-    password: "",
-    confirmPassword: "",
-    companyName: "",
-    industry: "",
-    companySize: "",
-    companyDescription: "",
-    websiteUrl: "",
-    phone: "",
+    email: '',
+    username: '',
+    password: '',
+    confirmPassword: '',
+    companyName: '',
+    industry: '',
+    companySize: '',
+    companyDescription: '',
+    websiteUrl: '',
+    phone: '',
   });
 
   const [loading, setLoading] = useState(false);
@@ -418,26 +408,26 @@ const EmployerRegistrationForm = () => {
   const apiClient = new ApiClient();
 
   const industryOptions = [
-    "Technology",
-    "Healthcare",
-    "Finance",
-    "Education",
-    "Manufacturing",
-    "Retail",
-    "Consulting",
-    "Media",
-    "Non-profit",
-    "Government",
-    "Other",
+    'Technology',
+    'Healthcare',
+    'Finance',
+    'Education',
+    'Manufacturing',
+    'Retail',
+    'Consulting',
+    'Media',
+    'Non-profit',
+    'Government',
+    'Other',
   ];
 
   const companySizeOptions = [
-    "1-10 employees",
-    "11-50 employees",
-    "51-200 employees",
-    "201-500 employees",
-    "501-1000 employees",
-    "1000+ employees",
+    '1-10 employees',
+    '11-50 employees',
+    '51-200 employees',
+    '201-500 employees',
+    '501-1000 employees',
+    '1000+ employees',
   ];
 
   const validateForm = () => {
@@ -446,48 +436,47 @@ const EmployerRegistrationForm = () => {
     // Email validation
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!formData.email) {
-      newErrors.email = "Email is required";
+      newErrors.email = 'Email is required';
     } else if (!emailRegex.test(formData.email)) {
-      newErrors.email = "Please enter a valid email address";
+      newErrors.email = 'Please enter a valid email address';
     }
 
     // Username validation
     if (!formData.username) {
-      newErrors.username = "Username is required";
+      newErrors.username = 'Username is required';
     } else if (formData.username.length < 3) {
-      newErrors.username = "Username must be at least 3 characters";
+      newErrors.username = 'Username must be at least 3 characters';
     }
 
     // Password validation
     if (!formData.password) {
-      newErrors.password = "Password is required";
+      newErrors.password = 'Password is required';
     } else {
       const passwordErrors = validatePassword(formData.password);
       if (passwordErrors.length > 0) {
-        newErrors.password = passwordErrors.join(", ");
+        newErrors.password = passwordErrors.join(', ');
       }
     }
 
     // Confirm password
     if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = "Passwords do not match";
+      newErrors.confirmPassword = 'Passwords do not match';
     }
 
     // Company validation
     if (!formData.companyName.trim()) {
-      newErrors.companyName = "Company name is required";
+      newErrors.companyName = 'Company name is required';
     }
     if (!formData.industry) {
-      newErrors.industry = "Industry is required";
+      newErrors.industry = 'Industry is required';
     }
     if (!formData.companySize) {
-      newErrors.companySize = "Company size is required";
+      newErrors.companySize = 'Company size is required';
     }
     if (!formData.companyDescription.trim()) {
-      newErrors.companyDescription = "Company description is required";
+      newErrors.companyDescription = 'Company description is required';
     } else if (formData.companyDescription.length < 50) {
-      newErrors.companyDescription =
-        "Company description must be at least 50 characters";
+      newErrors.companyDescription = 'Company description must be at least 50 characters';
     }
 
     // Website URL validation (optional but must be valid if provided)
@@ -495,7 +484,7 @@ const EmployerRegistrationForm = () => {
       try {
         new URL(formData.websiteUrl);
       } catch {
-        newErrors.websiteUrl = "Please enter a valid website URL";
+        newErrors.websiteUrl = 'Please enter a valid website URL';
       }
     }
 
@@ -507,32 +496,30 @@ const EmployerRegistrationForm = () => {
     const errors: string[] = [];
 
     if (password.length < 8) {
-      errors.push("at least 8 characters");
+      errors.push('at least 8 characters');
     }
     if (!/[a-z]/.test(password)) {
-      errors.push("one lowercase letter");
+      errors.push('one lowercase letter');
     }
     if (!/[A-Z]/.test(password)) {
-      errors.push("one uppercase letter");
+      errors.push('one uppercase letter');
     }
     if (!/\d/.test(password)) {
-      errors.push("one number");
+      errors.push('one number');
     }
     if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
-      errors.push("one special character");
+      errors.push('one special character');
     }
 
-    return errors.length > 0
-      ? [`Password must contain ${errors.join(", ")}`]
-      : [];
+    return errors.length > 0 ? [`Password must contain ${errors.join(', ')}`] : [];
   };
 
   const handleInputChange = (field: string, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+    setFormData(prev => ({ ...prev, [field]: value }));
 
     // Clear error when user starts typing
     if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: "" }));
+      setErrors(prev => ({ ...prev, [field]: '' }));
     }
   };
 
@@ -561,15 +548,15 @@ const EmployerRegistrationForm = () => {
       setRegistrationResult(result);
       setShowSuccess(true);
     } catch (error: any) {
-      if (error.message.includes("already exists")) {
-        if (error.message.includes("email")) {
-          setErrors({ email: "An account with this email already exists" });
-        } else if (error.message.includes("username")) {
-          setErrors({ username: "This username is already taken" });
+      if (error.message.includes('already exists')) {
+        if (error.message.includes('email')) {
+          setErrors({ email: 'An account with this email already exists' });
+        } else if (error.message.includes('username')) {
+          setErrors({ username: 'This username is already taken' });
         }
       } else {
         setErrors({
-          general: error.message || "Registration failed. Please try again.",
+          general: error.message || 'Registration failed. Please try again.',
         });
       }
     } finally {
@@ -580,7 +567,7 @@ const EmployerRegistrationForm = () => {
   return (
     <Paper elevation={3}>
       <Box sx={{ p: 5 }}>
-        <Box sx={{ textAlign: "center", mb: 4 }}>
+        <Box sx={{ textAlign: 'center', mb: 4 }}>
           <Typography variant="h4" component="h1" sx={{ mb: 1 }}>
             Join as an Employer
           </Typography>
@@ -591,7 +578,7 @@ const EmployerRegistrationForm = () => {
 
         <Stack spacing={4}>
           {/* Account Information Section */}
-          <Box sx={{ bgcolor: "grey.50", p: 3, borderRadius: 2 }}>
+          <Box sx={{ bgcolor: 'grey.50', p: 3, borderRadius: 2 }}>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Account Information
             </Typography>
@@ -603,7 +590,7 @@ const EmployerRegistrationForm = () => {
                   label="Email Address"
                   type="email"
                   value={formData.email}
-                  onChange={(e) => handleInputChange("email", e.target.value)}
+                  onChange={e => handleInputChange('email', e.target.value)}
                   placeholder="company@example.com"
                   error={!!errors.email}
                   helperText={errors.email}
@@ -613,9 +600,7 @@ const EmployerRegistrationForm = () => {
                   fullWidth
                   label="Username"
                   value={formData.username}
-                  onChange={(e) =>
-                    handleInputChange("username", e.target.value.toLowerCase())
-                  }
+                  onChange={e => handleInputChange('username', e.target.value.toLowerCase())}
                   placeholder="company123"
                   error={!!errors.username}
                   helperText={errors.username}
@@ -627,11 +612,9 @@ const EmployerRegistrationForm = () => {
                 <TextField
                   fullWidth
                   label="Password"
-                  type={showPassword ? "text" : "password"}
+                  type={showPassword ? 'text' : 'password'}
                   value={formData.password}
-                  onChange={(e) =>
-                    handleInputChange("password", e.target.value)
-                  }
+                  onChange={e => handleInputChange('password', e.target.value)}
                   placeholder="Create a strong password"
                   error={!!errors.password}
                   helperText={errors.password}
@@ -642,7 +625,7 @@ const EmployerRegistrationForm = () => {
                         <IconButton
                           aria-label="toggle password visibility"
                           onClick={() => setShowPassword(!showPassword)}
-                          onMouseDown={(e) => e.preventDefault()}
+                          onMouseDown={e => e.preventDefault()}
                           edge="end"
                         >
                           {showPassword ? <VisibilityOff /> : <Visibility />}
@@ -654,11 +637,9 @@ const EmployerRegistrationForm = () => {
                 <TextField
                   fullWidth
                   label="Confirm Password"
-                  type={showConfirmPassword ? "text" : "password"}
+                  type={showConfirmPassword ? 'text' : 'password'}
                   value={formData.confirmPassword}
-                  onChange={(e) =>
-                    handleInputChange("confirmPassword", e.target.value)
-                  }
+                  onChange={e => handleInputChange('confirmPassword', e.target.value)}
                   placeholder="Confirm your password"
                   error={!!errors.confirmPassword}
                   helperText={errors.confirmPassword}
@@ -668,17 +649,11 @@ const EmployerRegistrationForm = () => {
                       <InputAdornment position="end">
                         <IconButton
                           aria-label="toggle confirm password visibility"
-                          onClick={() =>
-                            setShowConfirmPassword(!showConfirmPassword)
-                          }
-                          onMouseDown={(e) => e.preventDefault()}
+                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                          onMouseDown={e => e.preventDefault()}
                           edge="end"
                         >
-                          {showConfirmPassword ? (
-                            <VisibilityOff />
-                          ) : (
-                            <Visibility />
-                          )}
+                          {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
                         </IconButton>
                       </InputAdornment>
                     ),
@@ -689,7 +664,7 @@ const EmployerRegistrationForm = () => {
           </Box>
 
           {/* Company Information Section */}
-          <Box sx={{ bgcolor: "primary.50", p: 3, borderRadius: 2 }}>
+          <Box sx={{ bgcolor: 'primary.50', p: 3, borderRadius: 2 }}>
             <Typography variant="h6" sx={{ mb: 2 }}>
               Company Information
             </Typography>
@@ -699,9 +674,7 @@ const EmployerRegistrationForm = () => {
                 fullWidth
                 label="Company Name"
                 value={formData.companyName}
-                onChange={(e) =>
-                  handleInputChange("companyName", e.target.value)
-                }
+                onChange={e => handleInputChange('companyName', e.target.value)}
                 placeholder="Your Company Inc."
                 error={!!errors.companyName}
                 helperText={errors.companyName}
@@ -713,40 +686,32 @@ const EmployerRegistrationForm = () => {
                   <InputLabel>Industry</InputLabel>
                   <Select
                     value={formData.industry}
-                    onChange={(e) =>
-                      handleInputChange("industry", e.target.value)
-                    }
+                    onChange={e => handleInputChange('industry', e.target.value)}
                     label="Industry"
                   >
-                    {industryOptions.map((industry) => (
+                    {industryOptions.map(industry => (
                       <MenuItem key={industry} value={industry}>
                         {industry}
                       </MenuItem>
                     ))}
                   </Select>
-                  {errors.industry && (
-                    <FormHelperText>{errors.industry}</FormHelperText>
-                  )}
+                  {errors.industry && <FormHelperText>{errors.industry}</FormHelperText>}
                 </FormControl>
 
                 <FormControl fullWidth error={!!errors.companySize} required>
                   <InputLabel>Company Size</InputLabel>
                   <Select
                     value={formData.companySize}
-                    onChange={(e) =>
-                      handleInputChange("companySize", e.target.value)
-                    }
+                    onChange={e => handleInputChange('companySize', e.target.value)}
                     label="Company Size"
                   >
-                    {companySizeOptions.map((size) => (
+                    {companySizeOptions.map(size => (
                       <MenuItem key={size} value={size}>
                         {size}
                       </MenuItem>
                     ))}
                   </Select>
-                  {errors.companySize && (
-                    <FormHelperText>{errors.companySize}</FormHelperText>
-                  )}
+                  {errors.companySize && <FormHelperText>{errors.companySize}</FormHelperText>}
                 </FormControl>
               </Stack>
 
@@ -757,9 +722,7 @@ const EmployerRegistrationForm = () => {
                   multiline
                   rows={4}
                   value={formData.companyDescription}
-                  onChange={(e) =>
-                    handleInputChange("companyDescription", e.target.value)
-                  }
+                  onChange={e => handleInputChange('companyDescription', e.target.value)}
                   placeholder="Tell us about your company, what you do, your mission, and what makes you unique..."
                   error={!!errors.companyDescription}
                   helperText={
@@ -776,22 +739,20 @@ const EmployerRegistrationForm = () => {
                   label="Website URL"
                   type="url"
                   value={formData.websiteUrl}
-                  onChange={(e) =>
-                    handleInputChange("websiteUrl", e.target.value)
-                  }
+                  onChange={e => handleInputChange('websiteUrl', e.target.value)}
                   placeholder="https://www.yourcompany.com"
                   error={!!errors.websiteUrl}
-                  helperText={errors.websiteUrl || "Optional"}
+                  helperText={errors.websiteUrl || 'Optional'}
                 />
                 <TextField
                   fullWidth
                   label="Phone Number"
                   type="tel"
                   value={formData.phone}
-                  onChange={(e) => handleInputChange("phone", e.target.value)}
+                  onChange={e => handleInputChange('phone', e.target.value)}
                   placeholder="+1 (555) 123-4567"
                   error={!!errors.phone}
-                  helperText={errors.phone || "Optional"}
+                  helperText={errors.phone || 'Optional'}
                 />
               </Stack>
             </Stack>
@@ -813,13 +774,13 @@ const EmployerRegistrationForm = () => {
                 <Typography>Creating Company Account...</Typography>
               </Stack>
             ) : (
-              "Create Company Account"
+              'Create Company Account'
             )}
           </Button>
 
-          <Box sx={{ textAlign: "center" }}>
+          <Box sx={{ textAlign: 'center' }}>
             <Typography variant="body2" color="text.secondary">
-              Already have an account?{" "}
+              Already have an account?{' '}
               <Link href="/login" sx={{ fontWeight: 600 }}>
                 Sign in here
               </Link>
@@ -845,7 +806,7 @@ export function RegistrationTypeSelector() {
   return (
     <Paper elevation={3}>
       <Box sx={{ p: 5 }}>
-        <Box sx={{ textAlign: "center", mb: 5 }}>
+        <Box sx={{ textAlign: 'center', mb: 5 }}>
           <Typography variant="h3" component="h1" sx={{ mb: 2 }}>
             Join Backstory
           </Typography>
@@ -859,18 +820,18 @@ export function RegistrationTypeSelector() {
           <Card
             sx={{
               flex: 1,
-              cursor: "pointer",
-              transition: "all 0.3s ease",
-              border: "2px solid transparent",
-              "&:hover": {
-                transform: "translateY(-4px)",
+              cursor: 'pointer',
+              transition: 'all 0.3s ease',
+              border: '2px solid transparent',
+              '&:hover': {
+                transform: 'translateY(-4px)',
                 boxShadow: 6,
-                borderColor: "primary.main",
+                borderColor: 'primary.main',
               },
             }}
-            onClick={() => (window.location.href = "/register/candidate")}
+            onClick={() => (window.location.href = '/register/candidate')}
           >
-            <CardContent sx={{ textAlign: "center", py: 4 }}>
+            <CardContent sx={{ textAlign: 'center', py: 4 }}>
               <Typography variant="h1" sx={{ mb: 2 }}>
                 👤
               </Typography>
@@ -881,7 +842,7 @@ export function RegistrationTypeSelector() {
                 Create a candidate profile to find your next opportunity
               </Typography>
             </CardContent>
-            <CardActions sx={{ justifyContent: "center", pb: 3 }}>
+            <CardActions sx={{ justifyContent: 'center', pb: 3 }}>
               <Button variant="contained" size="large">
                 Join as Candidate
               </Button>
@@ -892,18 +853,18 @@ export function RegistrationTypeSelector() {
           <Card
             sx={{
               flex: 1,
-              cursor: "pointer",
-              transition: "all 0.3s ease",
-              border: "2px solid transparent",
-              "&:hover": {
-                transform: "translateY(-4px)",
+              cursor: 'pointer',
+              transition: 'all 0.3s ease',
+              border: '2px solid transparent',
+              '&:hover': {
+                transform: 'translateY(-4px)',
                 boxShadow: 6,
-                borderColor: "primary.main",
+                borderColor: 'primary.main',
               },
             }}
-            onClick={() => (window.location.href = "/register/employer")}
+            onClick={() => (window.location.href = '/register/employer')}
           >
-            <CardContent sx={{ textAlign: "center", py: 4 }}>
+            <CardContent sx={{ textAlign: 'center', py: 4 }}>
               <Typography variant="h1" sx={{ mb: 2 }}>
                 🏢
               </Typography>
@@ -914,7 +875,7 @@ export function RegistrationTypeSelector() {
                 Create a company account to find and hire talent
               </Typography>
             </CardContent>
-            <CardActions sx={{ justifyContent: "center", pb: 3 }}>
+            <CardActions sx={{ justifyContent: 'center', pb: 3 }}>
               <Button variant="contained" size="large">
                 Join as Employer
               </Button>
@@ -922,9 +883,9 @@ export function RegistrationTypeSelector() {
           </Card>
         </Stack>
 
-        <Box sx={{ textAlign: "center", mt: 4 }}>
+        <Box sx={{ textAlign: 'center', mt: 4 }}>
           <Typography variant="body2" color="text.secondary">
-            Already have an account?{" "}
+            Already have an account?{' '}
             <Link href="/login" sx={{ fontWeight: 600 }}>
               Sign in here
             </Link>
diff --git a/frontend/src/pages/candidate/Settings.tsx b/frontend/src/pages/candidate/Settings.tsx
index d261afd..e10e9c9 100644
--- a/frontend/src/pages/candidate/Settings.tsx
+++ b/frontend/src/pages/candidate/Settings.tsx
@@ -1,23 +1,23 @@
-import React, { useState, useEffect, ReactElement } from "react";
+import React, { useState, useEffect, ReactElement } from 'react';
 // import FormGroup from '@mui/material/FormGroup';
 // import FormControlLabel from '@mui/material/FormControlLabel';
 // import Switch from '@mui/material/Switch';
 // import Divider from '@mui/material/Divider';
 // import TextField from '@mui/material/TextField';
-import Accordion from "@mui/material/Accordion";
-import AccordionActions from "@mui/material/AccordionActions";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import Typography from "@mui/material/Typography";
+import Accordion from '@mui/material/Accordion';
+import AccordionActions from '@mui/material/AccordionActions';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
 // import Button from '@mui/material/Button';
 // import Box from '@mui/material/Box';
 // import ResetIcon from '@mui/icons-material/History';
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-import { BackstoryPageProps } from "../../components/BackstoryTab";
-import { useAppState } from "hooks/GlobalContext";
-import { useAuth } from "hooks/AuthContext";
-import * as Types from "types/types";
+import { BackstoryPageProps } from '../../components/BackstoryTab';
+import { useAppState } from 'hooks/GlobalContext';
+import { useAuth } from 'hooks/AuthContext';
+import * as Types from 'types/types';
 
 // interface ServerTunables {
 //   system_prompt: string,
@@ -41,9 +41,9 @@ const SystemInfoComponent: React.FC<{
 
   const convertToSymbols = (text: string) => {
     return text
-      .replace(/\(R\)/g, "®") // Replace (R) with the ® symbol
-      .replace(/\(C\)/g, "©") // Replace (C) with the © symbol
-      .replace(/\(TM\)/g, "™"); // Replace (TM) with the ™ symbol
+      .replace(/\(R\)/g, '®') // Replace (R) with the ® symbol
+      .replace(/\(C\)/g, '©') // Replace (C) with the © symbol
+      .replace(/\(TM\)/g, '™'); // Replace (TM) with the ™ symbol
   };
 
   useEffect(() => {
@@ -59,10 +59,10 @@ const SystemInfoComponent: React.FC<{
               {convertToSymbols(k)} {index}
             </div>
             <div>
-              {convertToSymbols(card.name)}{" "}
+              {convertToSymbols(card.name)}{' '}
               {card.discrete
                 ? `w/ ${Math.round(card.memory / (1024 * 1024 * 1024))}GB RAM`
-                : "(integrated)"}
+                : '(integrated)'}
             </div>
           </div>
         ));
@@ -87,9 +87,7 @@ const Settings = (props: BackstoryPageProps) => {
   const { apiClient } = useAuth();
   const { setSnack } = useAppState();
   // const [editSystemPrompt, setEditSystemPrompt] = useState<string>("");
-  const [systemInfo, setSystemInfo] = useState<Types.SystemInfo | undefined>(
-    undefined
-  );
+  const [systemInfo, setSystemInfo] = useState<Types.SystemInfo | undefined>(undefined);
   // const [tools, setTools] = useState<Tool[]>([]);
   // const [rags, setRags] = useState<Tool[]>([]);
   // const [systemPrompt, setSystemPrompt] = useState<string>("");
@@ -183,8 +181,8 @@ const Settings = (props: BackstoryPageProps) => {
         const response: Types.SystemInfo = await apiClient.getSystemInfo();
         setSystemInfo(response);
       } catch (error) {
-        console.error("Error obtaining system information:", error);
-        setSnack("Unable to obtain system information.", "error");
+        console.error('Error obtaining system information:', error);
+        setSnack('Unable to obtain system information.', 'error');
       }
     };
 
@@ -397,9 +395,7 @@ const Settings = (props: BackstoryPageProps) => {
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography component="span">System Information</Typography>
         </AccordionSummary>
-        <AccordionDetails>
-          The server is running on the following hardware:
-        </AccordionDetails>
+        <AccordionDetails>The server is running on the following hardware:</AccordionDetails>
         <AccordionActions>
           <SystemInfoComponent systemInfo={systemInfo} />
         </AccordionActions>
diff --git a/frontend/src/routes/CandidateRoute.tsx b/frontend/src/routes/CandidateRoute.tsx
index acadca5..cf507cf 100644
--- a/frontend/src/routes/CandidateRoute.tsx
+++ b/frontend/src/routes/CandidateRoute.tsx
@@ -1,21 +1,19 @@
-import React, { useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { Box } from "@mui/material";
+import React, { useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Box } from '@mui/material';
 
-import { SetSnackType } from "../components/Snack";
-import { LoadingComponent } from "../components/LoadingComponent";
-import { User, Guest, Candidate } from "types/types";
-import { useAuth } from "hooks/AuthContext";
-import { useAppState, useSelectedCandidate } from "hooks/GlobalContext";
+import { SetSnackType } from '../components/Snack';
+import { LoadingComponent } from '../components/LoadingComponent';
+import { User, Guest, Candidate } from 'types/types';
+import { useAuth } from 'hooks/AuthContext';
+import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
 
 interface CandidateRouteProps {
   guest?: Guest | null;
   user?: User | null;
 }
 
-const CandidateRoute: React.FC<CandidateRouteProps> = (
-  props: CandidateRouteProps
-) => {
+const CandidateRoute: React.FC<CandidateRouteProps> = (props: CandidateRouteProps) => {
   const { apiClient } = useAuth();
   const { selectedCandidate, setSelectedCandidate } = useSelectedCandidate();
   const { setSnack } = useAppState();
@@ -30,22 +28,15 @@ const CandidateRoute: React.FC<CandidateRouteProps> = (
       try {
         const result: Candidate = await apiClient.getCandidate(reference);
         setSelectedCandidate(result);
-        navigate("/chat");
+        navigate('/chat');
       } catch {
-        setSnack(`Unable to obtain information for ${username}.`, "error");
-        navigate("/");
+        setSnack(`Unable to obtain information for ${username}.`, 'error');
+        navigate('/');
       }
     };
 
     getCandidate(username);
-  }, [
-    setSelectedCandidate,
-    selectedCandidate,
-    username,
-    navigate,
-    setSnack,
-    apiClient,
-  ]);
+  }, [setSelectedCandidate, selectedCandidate, username, navigate, setSnack, apiClient]);
 
   if (selectedCandidate?.username !== username) {
     return (
diff --git a/frontend/src/services/api-client.ts b/frontend/src/services/api-client.ts
index b84d8d8..328dfc6 100644
--- a/frontend/src/services/api-client.ts
+++ b/frontend/src/services/api-client.ts
@@ -7,7 +7,7 @@
  */
 
 // Import generated types (from running generate_types.py)
-import * as Types from "types/types";
+import * as Types from 'types/types';
 import {
   formatApiRequest,
   parseApiResponse,
@@ -21,26 +21,26 @@ import {
   PaginatedResponse,
   PaginatedRequest,
   toSnakeCase,
-} from "types/conversion";
+} from 'types/conversion';
 
 // Import generated date conversion functions
-import { convertFromApi, convertArrayFromApi } from "types/types";
+import { convertFromApi, convertArrayFromApi } from 'types/types';
 
 const TOKEN_STORAGE = {
-  ACCESS_TOKEN: "accessToken",
-  REFRESH_TOKEN: "refreshToken",
-  USER_DATA: "userData",
-  TOKEN_EXPIRY: "tokenExpiry",
-  USER_TYPE: "userType",
-  IS_GUEST: "isGuest",
-  PENDING_VERIFICATION_EMAIL: "pendingVerificationEmail",
+  ACCESS_TOKEN: 'accessToken',
+  REFRESH_TOKEN: 'refreshToken',
+  USER_DATA: 'userData',
+  TOKEN_EXPIRY: 'tokenExpiry',
+  USER_TYPE: 'userType',
+  IS_GUEST: 'isGuest',
+  PENDING_VERIFICATION_EMAIL: 'pendingVerificationEmail',
 } as const;
 
 // ============================
 // Streaming Types and Interfaces
 // ============================
 export interface GuestConversionRequest extends CreateCandidateRequest {
-  accountType: "candidate";
+  accountType: 'candidate';
 }
 
 export class RateLimitError extends Error {
@@ -50,7 +50,7 @@ export class RateLimitError extends Error {
     public remainingRequests: Record<string, number>
   ) {
     super(message);
-    this.name = "RateLimitError";
+    this.name = 'RateLimitError';
   }
 }
 interface StreamingOptions<T = Types.ChatMessage> {
@@ -139,12 +139,12 @@ class ApiClient {
   constructor(accessToken?: string) {
     const loc = window.location;
     if (!loc.host.match(/.*battle-linux.*/)) {
-      this.baseUrl = loc.protocol + "//" + loc.host + "/api/1.0";
+      this.baseUrl = loc.protocol + '//' + loc.host + '/api/1.0';
     } else {
-      this.baseUrl = loc.protocol + "//battle-linux.ketrenos.com:8912/api/1.0";
+      this.baseUrl = loc.protocol + '//battle-linux.ketrenos.com:8912/api/1.0';
     }
     this.defaultHeaders = {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
       ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
     };
   }
@@ -206,11 +206,9 @@ class ApiClient {
   /**
    * Create candidate with email verification
    */
-  async createCandidate(
-    candidate: CreateCandidateRequest
-  ): Promise<RegistrationResponse> {
+  async createCandidate(candidate: CreateCandidateRequest): Promise<RegistrationResponse> {
     const response = await fetch(`${this.baseUrl}/candidates`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(candidate)),
     });
@@ -218,11 +216,9 @@ class ApiClient {
     return handleApiResponse<RegistrationResponse>(response);
   }
 
-  async createCandidateAI(
-    userMessage: Types.ChatMessageUser
-  ): Promise<CreateCandidateAIResponse> {
+  async createCandidateAI(userMessage: Types.ChatMessageUser): Promise<CreateCandidateAIResponse> {
     const response = await fetch(`${this.baseUrl}/candidates/ai`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(userMessage)),
     });
@@ -230,10 +226,7 @@ class ApiClient {
     const result = await handleApiResponse<CreateCandidateAIResponse>(response);
     return {
       message: result.message,
-      candidate: convertFromApi<Types.CandidateAI>(
-        result.candidate,
-        "CandidateAI"
-      ),
+      candidate: convertFromApi<Types.CandidateAI>(result.candidate, 'CandidateAI'),
       resume: result.resume,
     };
   }
@@ -245,7 +238,7 @@ class ApiClient {
     employer: CreateEmployerRequest
   ): Promise<RegistrationResponse> {
     const response = await fetch(`${this.baseUrl}/employers`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(employer)),
     });
@@ -256,11 +249,9 @@ class ApiClient {
   /**
    * Verify email address
    */
-  async verifyEmail(
-    request: EmailVerificationRequest
-  ): Promise<EmailVerificationResponse> {
+  async verifyEmail(request: EmailVerificationRequest): Promise<EmailVerificationResponse> {
     const response = await fetch(`${this.baseUrl}/auth/verify-email`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(request)),
     });
@@ -271,11 +262,9 @@ class ApiClient {
   /**
    * Resend verification email
    */
-  async resendVerificationEmail(
-    request: ResendVerificationRequest
-  ): Promise<{ message: string }> {
+  async resendVerificationEmail(request: ResendVerificationRequest): Promise<{ message: string }> {
     const response = await fetch(`${this.baseUrl}/auth/resend-verification`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(request)),
     });
@@ -288,7 +277,7 @@ class ApiClient {
    */
   async requestMFA(request: MFARequest): Promise<Types.MFARequestResponse> {
     const response = await fetch(`${this.baseUrl}/auth/mfa/request`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(request)),
     });
@@ -299,12 +288,10 @@ class ApiClient {
   /**
    * Verify MFA code
    */
-  async verifyMFA(
-    request: Types.MFAVerifyRequest
-  ): Promise<Types.AuthResponse> {
+  async verifyMFA(request: Types.MFAVerifyRequest): Promise<Types.AuthResponse> {
     const formattedRequest = formatApiRequest(request);
     const response = await fetch(`${this.baseUrl}/auth/mfa/verify`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formattedRequest),
     });
@@ -315,18 +302,14 @@ class ApiClient {
   /**
    * login with device detection
    */
-  async login(
-    auth: Types.LoginRequest
-  ): Promise<Types.AuthResponse | Types.MFARequestResponse> {
+  async login(auth: Types.LoginRequest): Promise<Types.AuthResponse | Types.MFARequestResponse> {
     const response = await fetch(`${this.baseUrl}/auth/login`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(auth)),
     });
 
-    return handleApiResponse<Types.AuthResponse | Types.MFARequestResponse>(
-      response
-    );
+    return handleApiResponse<Types.AuthResponse | Types.MFARequestResponse>(response);
   }
 
   /**
@@ -337,7 +320,7 @@ class ApiClient {
     refreshToken: string
   ): Promise<{ message: string; tokensRevoked: any }> {
     const response = await fetch(`${this.baseUrl}/auth/logout`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(
         formatApiRequest({
@@ -355,7 +338,7 @@ class ApiClient {
    */
   async logoutAllDevices(): Promise<{ message: string }> {
     const response = await fetch(`${this.baseUrl}/auth/logout-all`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
     });
 
@@ -381,13 +364,10 @@ class ApiClient {
    * Remove trusted device
    */
   async removeTrustedDevice(deviceId: string): Promise<{ message: string }> {
-    const response = await fetch(
-      `${this.baseUrl}/auth/trusted-devices/${deviceId}`,
-      {
-        method: "DELETE",
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/auth/trusted-devices/${deviceId}`, {
+      method: 'DELETE',
+      headers: this.defaultHeaders,
+    });
 
     return handleApiResponse<{ message: string }>(response);
   }
@@ -396,12 +376,9 @@ class ApiClient {
    * Get security log for current user
    */
   async getSecurityLog(days = 7): Promise<SecurityEvent[]> {
-    const response = await fetch(
-      `${this.baseUrl}/auth/security-log?days=${days}`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/auth/security-log?days=${days}`, {
+      headers: this.defaultHeaders,
+    });
 
     return handleApiResponse<SecurityEvent[]>(response);
   }
@@ -414,12 +391,9 @@ class ApiClient {
    * Get pending user verifications (admin only)
    */
   async getPendingVerifications(): Promise<PendingVerification[]> {
-    const response = await fetch(
-      `${this.baseUrl}/admin/pending-verifications`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/admin/pending-verifications`, {
+      headers: this.defaultHeaders,
+    });
 
     return handleApiResponse<PendingVerification[]>(response);
   }
@@ -427,18 +401,12 @@ class ApiClient {
   /**
    * Manually verify user (admin only)
    */
-  async manuallyVerifyUser(
-    userId: string,
-    reason: string
-  ): Promise<{ message: string }> {
-    const response = await fetch(
-      `${this.baseUrl}/admin/verify-user/${userId}`,
-      {
-        method: "POST",
-        headers: this.defaultHeaders,
-        body: JSON.stringify(formatApiRequest({ reason })),
-      }
-    );
+  async manuallyVerifyUser(userId: string, reason: string): Promise<{ message: string }> {
+    const response = await fetch(`${this.baseUrl}/admin/verify-user/${userId}`, {
+      method: 'POST',
+      headers: this.defaultHeaders,
+      body: JSON.stringify(formatApiRequest({ reason })),
+    });
 
     return handleApiResponse<{ message: string }>(response);
   }
@@ -446,10 +414,7 @@ class ApiClient {
   /**
    * Get user security events (admin only)
    */
-  async getUserSecurityEvents(
-    userId: string,
-    days = 30
-  ): Promise<SecurityEvent[]> {
+  async getUserSecurityEvents(userId: string, days = 30): Promise<SecurityEvent[]> {
     const response = await fetch(
       `${this.baseUrl}/admin/users/${userId}/security-events?days=${days}`,
       {
@@ -469,21 +434,21 @@ class ApiClient {
    */
   generateDeviceFingerprint(): string {
     // Create a basic device fingerprint
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
     if (ctx) {
-      ctx.textBaseline = "top";
-      ctx.font = "14px Arial";
-      ctx.fillText("Device fingerprint", 2, 2);
+      ctx.textBaseline = 'top';
+      ctx.font = '14px Arial';
+      ctx.fillText('Device fingerprint', 2, 2);
     }
 
     const fingerprint =
-      (canvas.toDataURL() || "") +
+      (canvas.toDataURL() || '') +
       navigator.userAgent +
       navigator.language +
       // screen.width + 'x' + screen.height +
       // (navigator.platform || '') +
-      (navigator.cookieEnabled ? "1" : "0");
+      (navigator.cookieEnabled ? '1' : '0');
 
     // Create a hash-like string from the fingerprint
     let hash = 0;
@@ -502,27 +467,27 @@ class ApiClient {
   getDeviceName(): string {
     const ua = navigator.userAgent;
 
-    const browser = ua.includes("Chrome")
-      ? "Chrome"
-      : ua.includes("Firefox")
-      ? "Firefox"
-      : ua.includes("Safari")
-      ? "Safari"
-      : ua.includes("Edge")
-      ? "Edge"
-      : "Browser";
+    const browser = ua.includes('Chrome')
+      ? 'Chrome'
+      : ua.includes('Firefox')
+      ? 'Firefox'
+      : ua.includes('Safari')
+      ? 'Safari'
+      : ua.includes('Edge')
+      ? 'Edge'
+      : 'Browser';
 
-    const os = ua.includes("Windows")
-      ? "Windows"
-      : ua.includes("Mac")
-      ? "macOS"
-      : ua.includes("Linux")
-      ? "Linux"
-      : ua.includes("Android")
-      ? "Android"
-      : ua.includes("iOS")
-      ? "iOS"
-      : "Unknown OS";
+    const os = ua.includes('Windows')
+      ? 'Windows'
+      : ua.includes('Mac')
+      ? 'macOS'
+      : ua.includes('Linux')
+      ? 'Linux'
+      : ua.includes('Android')
+      ? 'Android'
+      : ua.includes('iOS')
+      ? 'iOS'
+      : 'Unknown OS';
 
     return `${browser} on ${os}`;
   }
@@ -531,7 +496,7 @@ class ApiClient {
    * Check if email verification is pending
    */
   isEmailVerificationPending(): boolean {
-    return localStorage.getItem("pendingEmailVerification") === "true";
+    return localStorage.getItem('pendingEmailVerification') === 'true';
   }
 
   /**
@@ -539,11 +504,11 @@ class ApiClient {
    */
   setPendingEmailVerification(email: string, pending = true): void {
     if (pending) {
-      localStorage.setItem("pendingEmailVerification", "true");
-      localStorage.setItem("pendingVerificationEmail", email);
+      localStorage.setItem('pendingEmailVerification', 'true');
+      localStorage.setItem('pendingVerificationEmail', email);
     } else {
-      localStorage.removeItem("pendingEmailVerification");
-      localStorage.removeItem("pendingVerificationEmail");
+      localStorage.removeItem('pendingEmailVerification');
+      localStorage.removeItem('pendingVerificationEmail');
     }
   }
 
@@ -551,7 +516,7 @@ class ApiClient {
    * Get pending verification email
    */
   getPendingVerificationEmail(): string | null {
-    return localStorage.getItem("pendingVerificationEmail");
+    return localStorage.getItem('pendingVerificationEmail');
   }
 
   // ============================
@@ -559,7 +524,7 @@ class ApiClient {
   // ============================
   async refreshToken(refreshToken: string): Promise<Types.AuthResponse> {
     const response = await fetch(`${this.baseUrl}/auth/refresh`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest({ refreshToken })),
     });
@@ -577,32 +542,23 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handleApiResponseWithConversion<Types.Candidate>(
-      response,
-      "Candidate"
-    );
+    return this.handleApiResponseWithConversion<Types.Candidate>(response, 'Candidate');
   }
 
-  async updateCandidate(
-    id: string,
-    updates: Partial<Types.Candidate>
-  ): Promise<Types.Candidate> {
+  async updateCandidate(id: string, updates: Partial<Types.Candidate>): Promise<Types.Candidate> {
     const request = formatApiRequest(updates);
     const response = await fetch(`${this.baseUrl}/candidates/${id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       headers: this.defaultHeaders,
       body: JSON.stringify(request),
     });
 
-    return this.handleApiResponseWithConversion<Types.Candidate>(
-      response,
-      "Candidate"
-    );
+    return this.handleApiResponseWithConversion<Types.Candidate>(response, 'Candidate');
   }
 
   async deleteCandidate(id: string): Promise<DeleteResponse> {
     const response = await fetch(`${this.baseUrl}/candidates/${id}`, {
-      method: "DELETE",
+      method: 'DELETE',
       headers: this.defaultHeaders,
       body: JSON.stringify({ id }),
     });
@@ -612,7 +568,7 @@ class ApiClient {
 
   async deleteJob(id: string): Promise<DeleteResponse> {
     const response = await fetch(`${this.baseUrl}/jobs/${id}`, {
-      method: "DELETE",
+      method: 'DELETE',
       headers: this.defaultHeaders,
       body: JSON.stringify({ id }),
     });
@@ -622,14 +578,14 @@ class ApiClient {
 
   async uploadCandidateProfile(file: File): Promise<boolean> {
     const formData = new FormData();
-    formData.append("file", file);
-    formData.append("filename", file.name);
+    formData.append('file', file);
+    formData.append('filename', file.name);
 
     const response = await fetch(`${this.baseUrl}/candidates/profile/upload`, {
-      method: "POST",
+      method: 'POST',
       headers: {
         // Don't set Content-Type - browser will set it automatically with boundary
-        Authorization: this.defaultHeaders["Authorization"],
+        Authorization: this.defaultHeaders['Authorization'],
       },
       body: formData,
     });
@@ -649,10 +605,7 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handlePaginatedApiResponseWithConversion<Types.Candidate>(
-      response,
-      "Candidate"
-    );
+    return this.handlePaginatedApiResponseWithConversion<Types.Candidate>(response, 'Candidate');
   }
 
   async searchCandidates(
@@ -667,36 +620,25 @@ class ApiClient {
     };
 
     const params = toUrlParams(formatApiRequest(searchRequest));
-    const response = await fetch(
-      `${this.baseUrl}/candidates/search?${params}`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/candidates/search?${params}`, {
+      headers: this.defaultHeaders,
+    });
 
-    return this.handlePaginatedApiResponseWithConversion<Types.Candidate>(
-      response,
-      "Candidate"
-    );
+    return this.handlePaginatedApiResponseWithConversion<Types.Candidate>(response, 'Candidate');
   }
 
   // ============================
   // Employer Methods with Date Conversion
   // ============================
 
-  async createEmployer(
-    request: CreateEmployerRequest
-  ): Promise<Types.Employer> {
+  async createEmployer(request: CreateEmployerRequest): Promise<Types.Employer> {
     const response = await fetch(`${this.baseUrl}/employers`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(request)),
     });
 
-    return this.handleApiResponseWithConversion<Types.Employer>(
-      response,
-      "Employer"
-    );
+    return this.handleApiResponseWithConversion<Types.Employer>(response, 'Employer');
   }
 
   async getEmployer(id: string): Promise<Types.Employer> {
@@ -704,26 +646,17 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handleApiResponseWithConversion<Types.Employer>(
-      response,
-      "Employer"
-    );
+    return this.handleApiResponseWithConversion<Types.Employer>(response, 'Employer');
   }
 
-  async updateEmployer(
-    id: string,
-    updates: Partial<Types.Employer>
-  ): Promise<Types.Employer> {
+  async updateEmployer(id: string, updates: Partial<Types.Employer>): Promise<Types.Employer> {
     const response = await fetch(`${this.baseUrl}/employers/${id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(updates)),
     });
 
-    return this.handleApiResponseWithConversion<Types.Employer>(
-      response,
-      "Employer"
-    );
+    return this.handleApiResponseWithConversion<Types.Employer>(response, 'Employer');
   }
 
   // ============================
@@ -731,12 +664,12 @@ class ApiClient {
   // ============================
   async updateJob(id: string, updates: Partial<Types.Job>): Promise<Types.Job> {
     const response = await fetch(`${this.baseUrl}/jobs/${id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(updates)),
     });
 
-    return this.handleApiResponseWithConversion<Types.Job>(response, "Job");
+    return this.handleApiResponseWithConversion<Types.Job>(response, 'Job');
   }
 
   createJobFromDescription(
@@ -745,24 +678,24 @@ class ApiClient {
   ): StreamingResponse<Types.JobRequirementsMessage> {
     const body = JSON.stringify(job_description);
     return this.streamify<Types.JobRequirementsMessage>(
-      "/jobs/from-content",
+      '/jobs/from-content',
       body,
       streamingOptions,
-      "JobRequirementsMessage"
+      'JobRequirementsMessage'
     );
   }
 
   async createJob(
-    job: Omit<Types.Job, "id" | "datePosted" | "views" | "applicationCount">
+    job: Omit<Types.Job, 'id' | 'datePosted' | 'views' | 'applicationCount'>
   ): Promise<Types.Job> {
     const body = JSON.stringify(formatApiRequest(job));
     const response = await fetch(`${this.baseUrl}/jobs`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: body,
     });
 
-    return this.handleApiResponseWithConversion<Types.Job>(response, "Job");
+    return this.handleApiResponseWithConversion<Types.Job>(response, 'Job');
   }
 
   saveResume(
@@ -776,7 +709,7 @@ class ApiClient {
       `/resumes/${candidate_id}/${job_id}`,
       body,
       streamingOptions,
-      "Resume"
+      'Resume'
     );
   }
 
@@ -797,23 +730,17 @@ class ApiClient {
     }>(response);
   }
 
-  async getResume(
-    resumeId: string
-  ): Promise<{ success: boolean; resume: Types.Resume }> {
+  async getResume(resumeId: string): Promise<{ success: boolean; resume: Types.Resume }> {
     const response = await fetch(`${this.baseUrl}/resumes/${resumeId}`, {
       headers: this.defaultHeaders,
     });
 
-    return handleApiResponse<{ success: boolean; resume: Types.Resume }>(
-      response
-    );
+    return handleApiResponse<{ success: boolean; resume: Types.Resume }>(response);
   }
 
-  async deleteResume(
-    resumeId: string
-  ): Promise<{ success: boolean; message: string }> {
+  async deleteResume(resumeId: string): Promise<{ success: boolean; message: string }> {
     const response = await fetch(`${this.baseUrl}/resumes/${resumeId}`, {
-      method: "DELETE",
+      method: 'DELETE',
       headers: this.defaultHeaders,
     });
 
@@ -826,12 +753,9 @@ class ApiClient {
     resumes: Types.Resume[];
     count: number;
   }> {
-    const response = await fetch(
-      `${this.baseUrl}/resumes/candidate/${candidateId}`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/resumes/candidate/${candidateId}`, {
+      headers: this.defaultHeaders,
+    });
 
     return handleApiResponse<{
       success: boolean;
@@ -888,15 +812,12 @@ class ApiClient {
 
   async updateResume(resumeId: string, content: string): Promise<Types.Resume> {
     const response = await fetch(`${this.baseUrl}/resumes/${resumeId}`, {
-      method: "PUT",
+      method: 'PUT',
       headers: this.defaultHeaders,
       body: JSON.stringify(content),
     });
 
-    return this.handleApiResponseWithConversion<Types.Resume>(
-      response,
-      "Resume"
-    );
+    return this.handleApiResponseWithConversion<Types.Resume>(response, 'Resume');
   }
 
   async getJob(id: string): Promise<Types.Job> {
@@ -904,12 +825,10 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handleApiResponseWithConversion<Types.Job>(response, "Job");
+    return this.handleApiResponseWithConversion<Types.Job>(response, 'Job');
   }
 
-  async getJobs(
-    request: Partial<PaginatedRequest> = {}
-  ): Promise<PaginatedResponse<Types.Job>> {
+  async getJobs(request: Partial<PaginatedRequest> = {}): Promise<PaginatedResponse<Types.Job>> {
     const paginatedRequest = createPaginatedRequest(request);
     const params = toUrlParams(formatApiRequest(paginatedRequest));
 
@@ -917,10 +836,7 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handlePaginatedApiResponseWithConversion<Types.Job>(
-      response,
-      "Job"
-    );
+    return this.handlePaginatedApiResponseWithConversion<Types.Job>(response, 'Job');
   }
 
   async getJobsByEmployer(
@@ -930,17 +846,11 @@ class ApiClient {
     const paginatedRequest = createPaginatedRequest(request);
     const params = toUrlParams(formatApiRequest(paginatedRequest));
 
-    const response = await fetch(
-      `${this.baseUrl}/employers/${employerId}/jobs?${params}`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/employers/${employerId}/jobs?${params}`, {
+      headers: this.defaultHeaders,
+    });
 
-    return this.handlePaginatedApiResponseWithConversion<Types.Job>(
-      response,
-      "Job"
-    );
+    return this.handlePaginatedApiResponseWithConversion<Types.Job>(response, 'Job');
   }
 
   async searchJobs(
@@ -959,10 +869,7 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handlePaginatedApiResponseWithConversion<Types.Job>(
-      response,
-      "Job"
-    );
+    return this.handlePaginatedApiResponseWithConversion<Types.Job>(response, 'Job');
   }
 
   // ============================
@@ -970,21 +877,15 @@ class ApiClient {
   // ============================
 
   async applyToJob(
-    application: Omit<
-      Types.JobApplication,
-      "id" | "appliedDate" | "updatedDate" | "status"
-    >
+    application: Omit<Types.JobApplication, 'id' | 'appliedDate' | 'updatedDate' | 'status'>
   ): Promise<Types.JobApplication> {
     const response = await fetch(`${this.baseUrl}/job-applications`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(application)),
     });
 
-    return this.handleApiResponseWithConversion<Types.JobApplication>(
-      response,
-      "JobApplication"
-    );
+    return this.handleApiResponseWithConversion<Types.JobApplication>(response, 'JobApplication');
   }
 
   async getJobApplication(id: string): Promise<Types.JobApplication> {
@@ -992,10 +893,7 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handleApiResponseWithConversion<Types.JobApplication>(
-      response,
-      "JobApplication"
-    );
+    return this.handleApiResponseWithConversion<Types.JobApplication>(response, 'JobApplication');
   }
 
   async getJobApplications(
@@ -1010,7 +908,7 @@ class ApiClient {
 
     return this.handlePaginatedApiResponseWithConversion<Types.JobApplication>(
       response,
-      "JobApplication"
+      'JobApplication'
     );
   }
 
@@ -1018,19 +916,13 @@ class ApiClient {
     id: string,
     status: Types.ApplicationStatus
   ): Promise<Types.JobApplication> {
-    const response = await fetch(
-      `${this.baseUrl}/job-applications/${id}/status`,
-      {
-        method: "PATCH",
-        headers: this.defaultHeaders,
-        body: JSON.stringify(formatApiRequest({ status })),
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/job-applications/${id}/status`, {
+      method: 'PATCH',
+      headers: this.defaultHeaders,
+      body: JSON.stringify(formatApiRequest({ status })),
+    });
 
-    return this.handleApiResponseWithConversion<Types.JobApplication>(
-      response,
-      "JobApplication"
-    );
+    return this.handleApiResponseWithConversion<Types.JobApplication>(response, 'JobApplication');
   }
 
   // ============================
@@ -1044,15 +936,12 @@ class ApiClient {
     request: CreateChatSessionRequest
   ): Promise<Types.ChatSession> {
     const response = await fetch(`${this.baseUrl}/chat/sessions`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(request)),
     });
 
-    return this.handleApiResponseWithConversion<Types.ChatSession>(
-      response,
-      "ChatSession"
-    );
+    return this.handleApiResponseWithConversion<Types.ChatSession>(response, 'ChatSession');
   }
 
   /**
@@ -1065,24 +954,18 @@ class ApiClient {
     const paginatedRequest = createPaginatedRequest(request);
     const params = toUrlParams(formatApiRequest(paginatedRequest));
 
-    const response = await fetch(
-      `${this.baseUrl}/candidates/${username}/chat-sessions?${params}`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/candidates/${username}/chat-sessions?${params}`, {
+      headers: this.defaultHeaders,
+    });
 
     // Handle the nested sessions with date conversion
-    const result =
-      await this.handleApiResponseWithConversion<CandidateSessionsResponse>(
-        response
-      );
+    const result = await this.handleApiResponseWithConversion<CandidateSessionsResponse>(response);
 
     // Convert the nested sessions array
     if (result.sessions && result.sessions.data) {
       result.sessions.data = convertArrayFromApi<Types.ChatSession>(
         result.sessions.data,
-        "ChatSession"
+        'ChatSession'
       );
     }
 
@@ -1096,22 +979,16 @@ class ApiClient {
   ): Promise<Types.ChatSession> {
     const result = await this.getCandidateChatSessions(candidate.username);
     /* Find the 'candidate_chat' session if it exists, otherwise create it */
-    let session = result.sessions.data.find(
-      (session) => session.title === title
-    );
+    let session = result.sessions.data.find(session => session.title === title);
     if (!session) {
-      session = await this.createCandidateChatSession(
-        candidate.username,
-        context_type,
-        title
-      );
+      session = await this.createCandidateChatSession(candidate.username, context_type, title);
     }
     return session;
   }
 
   async getSystemInfo(): Promise<Types.SystemInfo> {
     const response = await fetch(`${this.baseUrl}/system-info`, {
-      method: "GET",
+      method: 'GET',
       headers: this.defaultHeaders,
     });
 
@@ -1120,11 +997,9 @@ class ApiClient {
     return result;
   }
 
-  async getCandidateSimilarContent(
-    query: string
-  ): Promise<Types.ChromaDBGetResponse> {
+  async getCandidateSimilarContent(query: string): Promise<Types.ChromaDBGetResponse> {
     const response = await fetch(`${this.baseUrl}/candidates/rag-search`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(query),
     });
@@ -1134,11 +1009,9 @@ class ApiClient {
     return result;
   }
 
-  async getCandidateVectors(
-    dimensions: number
-  ): Promise<Types.ChromaDBGetResponse> {
+  async getCandidateVectors(dimensions: number): Promise<Types.ChromaDBGetResponse> {
     const response = await fetch(`${this.baseUrl}/candidates/rag-vectors`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(dimensions),
     });
@@ -1148,11 +1021,9 @@ class ApiClient {
     return result;
   }
 
-  async getCandidateRAGContent(
-    documentId: string
-  ): Promise<Types.RagContentResponse> {
+  async getCandidateRAGContent(documentId: string): Promise<Types.RagContentResponse> {
     const response = await fetch(`${this.baseUrl}/candidates/rag-content`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify({ id: documentId }),
     });
@@ -1178,21 +1049,21 @@ class ApiClient {
   ): StreamingResponse<Types.DocumentMessage> {
     const convertedOptions = toSnakeCase(options);
     const formData = new FormData();
-    formData.append("file", file);
-    formData.append("filename", file.name);
-    formData.append("options", JSON.stringify(convertedOptions));
+    formData.append('file', file);
+    formData.append('filename', file.name);
+    formData.append('options', JSON.stringify(convertedOptions));
     streamingOptions = {
       ...streamingOptions,
       headers: {
         // Don't set Content-Type - browser will set it automatically with boundary
-        Authorization: this.defaultHeaders["Authorization"],
+        Authorization: this.defaultHeaders['Authorization'],
       },
     };
     return this.streamify<Types.DocumentMessage>(
-      "/candidates/documents/upload",
+      '/candidates/documents/upload',
       formData,
       streamingOptions,
-      "DocumentMessage"
+      'DocumentMessage'
     );
   }
 
@@ -1201,20 +1072,20 @@ class ApiClient {
     streamingOptions?: StreamingOptions<Types.JobRequirementsMessage>
   ): StreamingResponse<Types.JobRequirementsMessage> {
     const formData = new FormData();
-    formData.append("file", file);
-    formData.append("filename", file.name);
+    formData.append('file', file);
+    formData.append('filename', file.name);
     streamingOptions = {
       ...streamingOptions,
       headers: {
         // Don't set Content-Type - browser will set it automatically with boundary
-        Authorization: this.defaultHeaders["Authorization"],
+        Authorization: this.defaultHeaders['Authorization'],
       },
     };
     return this.streamify<Types.JobRequirementsMessage>(
-      "/jobs/upload",
+      '/jobs/upload',
       formData,
       streamingOptions,
-      "JobRequirementsMessage"
+      'JobRequirementsMessage'
     );
   }
 
@@ -1230,7 +1101,7 @@ class ApiClient {
       `/jobs/requirements/${jobId}`,
       null,
       streamingOptions,
-      "DocumentMessage"
+      'DocumentMessage'
     );
   }
 
@@ -1247,7 +1118,7 @@ class ApiClient {
       `/candidates/${candidateId}/${jobId}/generate-resume`,
       null,
       streamingOptions,
-      "ChatMessageResume"
+      'ChatMessageResume'
     );
   }
 
@@ -1265,25 +1136,20 @@ class ApiClient {
       `/candidates/${candidate_id}/skill-match`,
       body,
       streamingOptions,
-      "ChatMessageSkillAssessment"
+      'ChatMessageSkillAssessment'
     );
   }
 
-  async updateCandidateDocument(
-    document: Types.Document
-  ): Promise<Types.Document> {
+  async updateCandidateDocument(document: Types.Document): Promise<Types.Document> {
     const request: Types.DocumentUpdateRequest = {
       filename: document.filename,
       options: document.options,
     };
-    const response = await fetch(
-      `${this.baseUrl}/candidates/documents/${document.id}`,
-      {
-        method: "PATCH",
-        headers: this.defaultHeaders,
-        body: JSON.stringify(formatApiRequest(request)),
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/candidates/documents/${document.id}`, {
+      method: 'PATCH',
+      headers: this.defaultHeaders,
+      body: JSON.stringify(formatApiRequest(request)),
+    });
 
     const result = await handleApiResponse<Types.Document>(response);
 
@@ -1291,13 +1157,10 @@ class ApiClient {
   }
 
   async deleteCandidateDocument(document: Types.Document): Promise<boolean> {
-    const response = await fetch(
-      `${this.baseUrl}/candidates/documents/${document.id}`,
-      {
-        method: "DELETE",
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/candidates/documents/${document.id}`, {
+      method: 'DELETE',
+      headers: this.defaultHeaders,
+    });
 
     const result = await handleApiResponse<boolean>(response);
 
@@ -1309,26 +1172,17 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    const result = await handleApiResponse<Types.DocumentListResponse>(
-      response
-    );
+    const result = await handleApiResponse<Types.DocumentListResponse>(response);
 
     return result;
   }
 
-  async getCandidateDocumentText(
-    document: Types.Document
-  ): Promise<Types.DocumentContentResponse> {
-    const response = await fetch(
-      `${this.baseUrl}/candidates/documents/${document.id}/content`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+  async getCandidateDocumentText(document: Types.Document): Promise<Types.DocumentContentResponse> {
+    const response = await fetch(`${this.baseUrl}/candidates/documents/${document.id}/content`, {
+      headers: this.defaultHeaders,
+    });
 
-    const result = await handleApiResponse<Types.DocumentContentResponse>(
-      response
-    );
+    const result = await handleApiResponse<Types.DocumentContentResponse>(response);
 
     return result;
   }
@@ -1338,7 +1192,7 @@ class ApiClient {
    */
   async createCandidateChatSession(
     username: string,
-    chatType: Types.ChatContextType = "candidate_chat",
+    chatType: Types.ChatContextType = 'candidate_chat',
     title?: string
   ): Promise<Types.ChatSession> {
     const request: CreateChatSessionRequest = {
@@ -1353,19 +1207,14 @@ class ApiClient {
     return this.createChatSessionWithCandidate(request);
   }
 
-  async createChatSession(
-    context: Types.ChatContext
-  ): Promise<Types.ChatSession> {
+  async createChatSession(context: Types.ChatContext): Promise<Types.ChatSession> {
     const response = await fetch(`${this.baseUrl}/chat/sessions`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest({ context })),
     });
 
-    return this.handleApiResponseWithConversion<Types.ChatSession>(
-      response,
-      "ChatSession"
-    );
+    return this.handleApiResponseWithConversion<Types.ChatSession>(response, 'ChatSession');
   }
 
   async getChatSession(id: string): Promise<Types.ChatSession> {
@@ -1373,10 +1222,7 @@ class ApiClient {
       headers: this.defaultHeaders,
     });
 
-    return this.handleApiResponseWithConversion<Types.ChatSession>(
-      response,
-      "ChatSession"
-    );
+    return this.handleApiResponseWithConversion<Types.ChatSession>(response, 'ChatSession');
   }
 
   /**
@@ -1387,25 +1233,20 @@ class ApiClient {
     updates: UpdateChatSessionRequest
   ): Promise<Types.ChatSession> {
     const response = await fetch(`${this.baseUrl}/chat/sessions/${id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(updates)),
     });
 
-    return this.handleApiResponseWithConversion<Types.ChatSession>(
-      response,
-      "ChatSession"
-    );
+    return this.handleApiResponseWithConversion<Types.ChatSession>(response, 'ChatSession');
   }
 
   /**
    * Delete a chat session
    */
-  async deleteChatSession(
-    id: string
-  ): Promise<{ success: boolean; message: string }> {
+  async deleteChatSession(id: string): Promise<{ success: boolean; message: string }> {
     const response = await fetch(`${this.baseUrl}/chat/sessions/${id}`, {
-      method: "DELETE",
+      method: 'DELETE',
       headers: this.defaultHeaders,
     });
 
@@ -1421,15 +1262,15 @@ class ApiClient {
    */
   async createGuestSession(): Promise<Types.AuthResponse> {
     const response = await fetch(`${this.baseUrl}/auth/guest`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
     });
 
     const result = await handleApiResponse<Types.AuthResponse>(response);
 
     // Convert guest data if needed
-    if (result.user && result.user.userType === "guest") {
-      result.user = convertFromApi<Types.Guest>(result.user, "Guest");
+    if (result.user && result.user.userType === 'guest') {
+      result.user = convertFromApi<Types.Guest>(result.user, 'Guest');
     }
 
     return result;
@@ -1439,14 +1280,14 @@ class ApiClient {
    * Convert guest account to permanent user account
    */
   async convertGuestToUser(
-    registrationData: CreateCandidateRequest & { accountType: "candidate" }
+    registrationData: CreateCandidateRequest & { accountType: 'candidate' }
   ): Promise<{
     message: string;
     auth: Types.AuthResponse;
     conversionType: string;
   }> {
     const response = await fetch(`${this.baseUrl}/auth/guest/convert`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify(formatApiRequest(registrationData)),
     });
@@ -1459,10 +1300,7 @@ class ApiClient {
 
     // Convert the auth user data
     if (result.auth?.user) {
-      result.auth.user = convertFromApi<Types.Candidate>(
-        result.auth.user,
-        "Candidate"
-      );
+      result.auth.user = convertFromApi<Types.Candidate>(result.auth.user, 'Candidate');
     }
 
     return result;
@@ -1476,7 +1314,7 @@ class ApiClient {
       const userDataStr = localStorage.getItem(TOKEN_STORAGE.USER_DATA);
       if (userDataStr) {
         const userData = JSON.parse(userDataStr);
-        return userData.userType === "guest";
+        return userData.userType === 'guest';
       }
       return false;
     } catch {
@@ -1492,8 +1330,8 @@ class ApiClient {
       const userDataStr = localStorage.getItem(TOKEN_STORAGE.USER_DATA);
       if (userDataStr) {
         const userData = JSON.parse(userDataStr);
-        if (userData.userType === "guest") {
-          return convertFromApi<Types.Guest>(userData, "Guest");
+        if (userData.userType === 'guest') {
+          return convertFromApi<Types.Guest>(userData, 'Guest');
         }
       }
       return null;
@@ -1548,7 +1386,7 @@ class ApiClient {
     cleaned_count: number;
   }> {
     const response = await fetch(`${this.baseUrl}/admin/guests/cleanup`, {
-      method: "POST",
+      method: 'POST',
       headers: this.defaultHeaders,
       body: JSON.stringify({ inactive_hours: inactiveHours }),
     });
@@ -1566,16 +1404,14 @@ class ApiClient {
   /**
    * Enhanced API response handler with rate limit handling
    */
-  private async handleApiResponseWithRateLimit<T>(
-    response: Response
-  ): Promise<T> {
+  private async handleApiResponseWithRateLimit<T>(response: Response): Promise<T> {
     if (response.status === 429) {
       const rateLimitData = await response.json();
-      const retryAfter = response.headers.get("Retry-After");
+      const retryAfter = response.headers.get('Retry-After');
 
       throw new RateLimitError(
-        rateLimitData.detail?.message || "Rate limit exceeded",
-        parseInt(retryAfter || "60"),
+        rateLimitData.detail?.message || 'Rate limit exceeded',
+        parseInt(retryAfter || '60'),
         rateLimitData.detail?.remaining || {}
       );
     }
@@ -1583,11 +1419,9 @@ class ApiClient {
     return this.handleApiResponseWithConversion<T>(response);
   }
 
-  async resetChatSession(
-    id: string
-  ): Promise<{ success: boolean; message: string }> {
+  async resetChatSession(id: string): Promise<{ success: boolean; message: string }> {
     const response = await fetch(`${this.baseUrl}/chat/sessions/${id}/reset`, {
-      method: "PATCH",
+      method: 'PATCH',
       headers: this.defaultHeaders,
     });
 
@@ -1610,9 +1444,9 @@ class ApiClient {
     const abortController = new AbortController();
     const signal = options.signal || abortController.signal;
     const headers = options.headers || null;
-    const method = options.method || "POST";
+    const method = options.method || 'POST';
 
-    const messageId = "";
+    const messageId = '';
     let finalMessage: T | null = null;
     const promise = new Promise<T>(async (resolve, reject) => {
       try {
@@ -1620,8 +1454,8 @@ class ApiClient {
           method,
           headers: headers || {
             ...this.defaultHeaders,
-            Accept: "text/event-stream",
-            "Cache-Control": "no-cache",
+            Accept: 'text/event-stream',
+            'Cache-Control': 'no-cache',
           },
           body: data,
           signal,
@@ -1633,11 +1467,11 @@ class ApiClient {
 
         const reader = response.body?.getReader();
         if (!reader) {
-          throw new Error("Response body is not readable");
+          throw new Error('Response body is not readable');
         }
 
         const decoder = new TextDecoder();
-        let buffer = "";
+        let buffer = '';
         let streamingMessage: Types.ChatMessageStreaming | null = null;
         try {
           while (true) {
@@ -1651,63 +1485,58 @@ class ApiClient {
             buffer += decoder.decode(value, { stream: true });
 
             // Process complete lines
-            const lines = buffer.split("\n");
-            buffer = lines.pop() || ""; // Keep incomplete line in buffer
+            const lines = buffer.split('\n');
+            buffer = lines.pop() || ''; // Keep incomplete line in buffer
 
             for (const line of lines) {
-              if (line.trim() === "") continue; // Skip blank lines between SSEs
+              if (line.trim() === '') continue; // Skip blank lines between SSEs
 
               try {
-                if (line.startsWith("data: ")) {
+                if (line.startsWith('data: ')) {
                   const data = line.slice(5).trim();
                   const incoming: any = JSON.parse(data);
 
                   // Handle different status types
                   switch (incoming.status) {
-                    case "streaming":
-                      const streaming =
-                        Types.convertChatMessageStreamingFromApi(incoming);
+                    case 'streaming':
+                      const streaming = Types.convertChatMessageStreamingFromApi(incoming);
                       if (streamingMessage === null) {
                         streamingMessage = { ...streaming };
                       } else {
                         // Can't do a simple += as typescript thinks .content might not be there
                         streamingMessage.content =
-                          (streamingMessage?.content || "") + streaming.content;
+                          (streamingMessage?.content || '') + streaming.content;
                         // Update timestamp to latest
                         streamingMessage.timestamp = streaming.timestamp;
                       }
                       options.onStreaming?.(streamingMessage);
                       break;
 
-                    case "status":
-                      const status =
-                        Types.convertChatMessageStatusFromApi(incoming);
+                    case 'status':
+                      const status = Types.convertChatMessageStatusFromApi(incoming);
                       options.onStatus?.(status);
                       break;
 
-                    case "error":
-                      const error =
-                        Types.convertChatMessageErrorFromApi(incoming);
+                    case 'error':
+                      const error = Types.convertChatMessageErrorFromApi(incoming);
                       options.onError?.(error);
                       break;
 
-                    case "done":
+                    case 'done':
                       const message = (
-                        modelType
-                          ? convertFromApi<T>(incoming, modelType)
-                          : incoming
+                        modelType ? convertFromApi<T>(incoming, modelType) : incoming
                       ) as T;
                       finalMessage = message;
                       try {
                         options.onMessage?.(message);
                       } catch (error) {
-                        console.error("onMessage handler failed: ", error);
+                        console.error('onMessage handler failed: ', error);
                       }
                       break;
                   }
                 }
               } catch (error) {
-                console.warn("Failed to process SSE:", error);
+                console.warn('Failed to process SSE:', error);
                 if (error instanceof Error) {
                   options.onWarn?.(error.message);
                 }
@@ -1724,13 +1553,13 @@ class ApiClient {
       } catch (error) {
         if (signal.aborted) {
           options.onComplete?.();
-          reject(new Error("Request was aborted"));
+          reject(new Error('Request was aborted'));
         } else {
           console.error(error);
           options.onError?.({
-            sessionId: "",
-            status: "error",
-            type: "text",
+            sessionId: '',
+            status: 'error',
+            type: 'text',
             content: (error as Error).message,
           });
           options.onComplete?.();
@@ -1754,12 +1583,7 @@ class ApiClient {
     options: StreamingOptions = {}
   ): StreamingResponse {
     const body = JSON.stringify(formatApiRequest(chatMessage));
-    return this.streamify(
-      `/chat/sessions/messages/stream`,
-      body,
-      options,
-      "ChatMessage"
-    );
+    return this.streamify(`/chat/sessions/messages/stream`, body, options, 'ChatMessage');
   }
 
   /**
@@ -1775,16 +1599,13 @@ class ApiClient {
     });
     const params = toUrlParams(formatApiRequest(paginatedRequest));
 
-    const response = await fetch(
-      `${this.baseUrl}/chat/sessions/${sessionId}/messages?${params}`,
-      {
-        headers: this.defaultHeaders,
-      }
-    );
+    const response = await fetch(`${this.baseUrl}/chat/sessions/${sessionId}/messages?${params}`, {
+      headers: this.defaultHeaders,
+    });
 
     return this.handlePaginatedApiResponseWithConversion<Types.ChatMessage>(
       response,
-      "ChatMessage"
+      'ChatMessage'
     );
   }
 
@@ -1792,32 +1613,22 @@ class ApiClient {
   // Password Reset Methods
   // ============================
 
-  async requestPasswordReset(
-    request: PasswordResetRequest
-  ): Promise<{ message: string }> {
-    const response = await fetch(
-      `${this.baseUrl}/auth/password-reset/request`,
-      {
-        method: "POST",
-        headers: this.defaultHeaders,
-        body: JSON.stringify(formatApiRequest(request)),
-      }
-    );
+  async requestPasswordReset(request: PasswordResetRequest): Promise<{ message: string }> {
+    const response = await fetch(`${this.baseUrl}/auth/password-reset/request`, {
+      method: 'POST',
+      headers: this.defaultHeaders,
+      body: JSON.stringify(formatApiRequest(request)),
+    });
 
     return handleApiResponse<{ message: string }>(response);
   }
 
-  async confirmPasswordReset(
-    request: PasswordResetConfirm
-  ): Promise<{ message: string }> {
-    const response = await fetch(
-      `${this.baseUrl}/auth/password-reset/confirm`,
-      {
-        method: "POST",
-        headers: this.defaultHeaders,
-        body: JSON.stringify(formatApiRequest(request)),
-      }
-    );
+  async confirmPasswordReset(request: PasswordResetConfirm): Promise<{ message: string }> {
+    const response = await fetch(`${this.baseUrl}/auth/password-reset/confirm`, {
+      method: 'POST',
+      headers: this.defaultHeaders,
+      body: JSON.stringify(formatApiRequest(request)),
+    });
 
     return handleApiResponse<{ message: string }>(response);
   }
@@ -1833,24 +1644,24 @@ class ApiClient {
     const issues: string[] = [];
 
     if (password.length < 8) {
-      issues.push("Password must be at least 8 characters long");
+      issues.push('Password must be at least 8 characters long');
     }
 
     if (!/[A-Z]/.test(password)) {
-      issues.push("Password must contain at least one uppercase letter");
+      issues.push('Password must contain at least one uppercase letter');
     }
 
     if (!/[a-z]/.test(password)) {
-      issues.push("Password must contain at least one lowercase letter");
+      issues.push('Password must contain at least one lowercase letter');
     }
 
     if (!/\d/.test(password)) {
-      issues.push("Password must contain at least one digit");
+      issues.push('Password must contain at least one digit');
     }
 
-    const specialChars = "!@#$%^&*()_+-=[]{}|;:,.<>?/~`\"'\\";
-    if (!password.split("").some((char) => specialChars.includes(char))) {
-      issues.push("Password must contain at least one special character");
+    const specialChars = '!@#$%^&*()_+-=[]{}|;:,.<>?/~`"\'\\';
+    if (!password.split('').some(char => specialChars.includes(char))) {
+      issues.push('Password must contain at least one special character');
     }
 
     return {
@@ -1868,17 +1679,15 @@ class ApiClient {
     const issues: string[] = [];
 
     if (username.length < 3) {
-      issues.push("Username must be at least 3 characters long");
+      issues.push('Username must be at least 3 characters long');
     }
 
     if (username.length > 30) {
-      issues.push("Username must be no more than 30 characters long");
+      issues.push('Username must be no more than 30 characters long');
     }
 
     if (!/^[a-zA-Z0-9_-]+$/.test(username)) {
-      issues.push(
-        "Username can only contain letters, numbers, underscores, and hyphens"
-      );
+      issues.push('Username can only contain letters, numbers, underscores, and hyphens');
     }
 
     return {
@@ -1890,15 +1699,12 @@ class ApiClient {
   // ============================
   // Error Handling Helper
   // ============================
-  async handleRequest<T>(
-    requestFn: () => Promise<Response>,
-    modelType?: string
-  ): Promise<T> {
+  async handleRequest<T>(requestFn: () => Promise<Response>, modelType?: string): Promise<T> {
     try {
       const response = await requestFn();
       return await this.handleApiResponseWithConversion<T>(response, modelType);
     } catch (error) {
-      console.error("API request failed:", error);
+      console.error('API request failed:', error);
       throw error;
     }
   }
@@ -1908,11 +1714,11 @@ class ApiClient {
   // ============================
 
   setAuthToken(token: string): void {
-    this.defaultHeaders["Authorization"] = `Bearer ${token}`;
+    this.defaultHeaders['Authorization'] = `Bearer ${token}`;
   }
 
   clearAuthToken(): void {
-    delete this.defaultHeaders["Authorization"];
+    delete this.defaultHeaders['Authorization'];
   }
 
   getBaseUrl(): string {
@@ -1992,14 +1798,14 @@ export interface SecurityEvent {
   timestamp: string;
   userId: string;
   eventType:
-    | "login"
-    | "logout"
-    | "mfa_request"
-    | "mfa_verify"
-    | "password_change"
-    | "email_verify"
-    | "device_add"
-    | "device_remove";
+    | 'login'
+    | 'logout'
+    | 'mfa_request'
+    | 'mfa_verify'
+    | 'password_change'
+    | 'email_verify'
+    | 'device_add'
+    | 'device_remove';
   details: {
     ipAddress?: string;
     deviceName?: string;
@@ -2012,7 +1818,7 @@ export interface SecurityEvent {
 export interface PendingVerification {
   id: string;
   email: string;
-  userType: "candidate" | "employer";
+  userType: 'candidate' | 'employer';
   createdAt: string;
   expiresAt: string;
   attempts: number;
diff --git a/frontend/src/types/conversion.ts b/frontend/src/types/conversion.ts
index 42ad4a6..6e78cb7 100644
--- a/frontend/src/types/conversion.ts
+++ b/frontend/src/types/conversion.ts
@@ -12,13 +12,11 @@
 /**
  * Converts a camelCase object to snake_case for sending to the Python backend
  */
-export function toSnakeCase<T extends Record<string, any>>(
-  obj: T
-): Record<string, any> {
-  if (!obj || typeof obj !== "object") return obj;
+export function toSnakeCase<T extends Record<string, any>>(obj: T): Record<string, any> {
+  if (!obj || typeof obj !== 'object') return obj;
 
   if (Array.isArray(obj)) {
-    return obj.map((item) => toSnakeCase(item));
+    return obj.map(item => toSnakeCase(item));
   }
 
   const result: Record<string, any> = {};
@@ -29,13 +27,13 @@ export function toSnakeCase<T extends Record<string, any>>(
     if (value === null || value === undefined) {
       result[snakeCaseKey] = value;
     } else if (Array.isArray(value)) {
-      result[snakeCaseKey] = value.map((item) =>
-        typeof item === "object" && item !== null ? toSnakeCase(item) : item
+      result[snakeCaseKey] = value.map(item =>
+        typeof item === 'object' && item !== null ? toSnakeCase(item) : item
       );
     } else if (value instanceof Date) {
       // Convert Date to ISO string for Python datetime
       result[snakeCaseKey] = value.toISOString();
-    } else if (typeof value === "object") {
+    } else if (typeof value === 'object') {
       result[snakeCaseKey] = toSnakeCase(value);
     } else {
       result[snakeCaseKey] = value;
@@ -49,10 +47,10 @@ export function toSnakeCase<T extends Record<string, any>>(
  * Converts a snake_case object to camelCase for TypeScript/JavaScript
  */
 export function toCamelCase<T>(obj: Record<string, any>): T {
-  if (!obj || typeof obj !== "object") return obj as T;
+  if (!obj || typeof obj !== 'object') return obj as T;
 
   if (Array.isArray(obj)) {
-    return obj.map((item) => toCamelCase(item)) as T;
+    return obj.map(item => toCamelCase(item)) as T;
   }
 
   const result: Record<string, any> = {};
@@ -63,13 +61,13 @@ export function toCamelCase<T>(obj: Record<string, any>): T {
     if (value === null || value === undefined) {
       result[camelCaseKey] = value;
     } else if (Array.isArray(value)) {
-      result[camelCaseKey] = value.map((item) =>
-        typeof item === "object" && item !== null ? toCamelCase(item) : item
+      result[camelCaseKey] = value.map(item =>
+        typeof item === 'object' && item !== null ? toCamelCase(item) : item
       );
-    } else if (typeof value === "string" && isIsoDateString(value)) {
+    } else if (typeof value === 'string' && isIsoDateString(value)) {
       // Convert ISO date string to Date object
       result[camelCaseKey] = new Date(value);
-    } else if (typeof value === "object") {
+    } else if (typeof value === 'object') {
       result[camelCaseKey] = toCamelCase(value);
     } else {
       result[camelCaseKey] = value;
@@ -83,7 +81,7 @@ export function toCamelCase<T>(obj: Record<string, any>): T {
  * Helper function to convert camelCase to snake_case
  */
 function camelToSnake(str: string): string {
-  return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+  return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
 }
 
 /**
@@ -97,10 +95,8 @@ function snakeToCamel(str: string): string {
  * Checks if a string is an ISO date format
  */
 function isIsoDateString(value: string): boolean {
-  if (typeof value !== "string") return false;
-  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?$/.test(
-    value
-  );
+  if (typeof value !== 'string') return false;
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?$/.test(value);
 }
 
 // ============================
@@ -110,9 +106,7 @@ function isIsoDateString(value: string): boolean {
 /**
  * Format data for API requests (converts to format expected by Python backend)
  */
-export function formatApiRequest<T extends Record<string, any>>(
-  data: T
-): Record<string, any> {
+export function formatApiRequest<T extends Record<string, any>>(data: T): Record<string, any> {
   if (!data) return data;
 
   // Create a new object to avoid mutating the original
@@ -123,15 +117,15 @@ export function formatApiRequest<T extends Record<string, any>>(
     if (value instanceof Date) {
       formatted[key] = value.toISOString();
     } else if (Array.isArray(value)) {
-      formatted[key] = value.map((item) => {
+      formatted[key] = value.map(item => {
         if (item instanceof Date) {
           return item.toISOString();
-        } else if (typeof item === "object" && item !== null) {
+        } else if (typeof item === 'object' && item !== null) {
           return formatApiRequest(item);
         }
         return item;
       });
-    } else if (typeof value === "object" && value !== null) {
+    } else if (typeof value === 'object' && value !== null) {
       formatted[key] = formatApiRequest(value);
     } else {
       formatted[key] = value;
@@ -145,12 +139,12 @@ export function formatApiRequest<T extends Record<string, any>>(
  * Parse API responses and convert to TypeScript format
  */
 export function parseApiResponse<T>(data: any): ApiResponse<T> {
-  if (!data || typeof data !== "object") {
+  if (!data || typeof data !== 'object') {
     return {
       success: false,
       error: {
-        code: "INVALID_RESPONSE",
-        message: "Invalid response format",
+        code: 'INVALID_RESPONSE',
+        message: 'Invalid response format',
       },
     };
   }
@@ -204,12 +198,12 @@ export function toUrlParams(obj: Record<string, any>): URLSearchParams {
     if (value !== null && value !== undefined) {
       if (Array.isArray(value)) {
         // Handle arrays by adding multiple params with same key
-        value.forEach((item) => {
+        value.forEach(item => {
           params.append(key, String(item));
         });
       } else if (value instanceof Date) {
         params.append(key, value.toISOString());
-      } else if (typeof value === "object") {
+      } else if (typeof value === 'object') {
         // For nested objects, we could flatten or JSON stringify
         params.append(key, JSON.stringify(value));
       } else {
@@ -228,17 +222,15 @@ export function toUrlParams(obj: Record<string, any>): URLSearchParams {
 /**
  * Check if response is a successful API response
  */
-export function isSuccessResponse<T>(
-  response: any
-): response is SuccessApiResponse<T> {
-  return response && typeof response === "object" && response.success === true;
+export function isSuccessResponse<T>(response: any): response is SuccessApiResponse<T> {
+  return response && typeof response === 'object' && response.success === true;
 }
 
 /**
  * Check if response is an error API response
  */
 export function isErrorResponse(response: any): response is ErrorApiResponse {
-  return response && typeof response === "object" && response.success === false;
+  return response && typeof response === 'object' && response.success === false;
 }
 
 /**
@@ -250,8 +242,8 @@ export function extractApiData<T>(response: ApiResponse<T>): T {
   }
 
   const errorMessage = isErrorResponse(response)
-    ? response.error?.message || "Unknown API error"
-    : "Invalid API response format";
+    ? response.error?.message || 'Unknown API error'
+    : 'Invalid API response format';
 
   throw new Error(errorMessage);
 }
@@ -298,7 +290,7 @@ export interface PaginatedRequest {
   page?: number;
   limit?: number;
   sortBy?: string;
-  sortOrder?: "asc" | "desc";
+  sortOrder?: 'asc' | 'desc';
   filters?: Record<string, any>;
 }
 
@@ -309,13 +301,11 @@ export interface PaginatedRequest {
 /**
  * Create a paginated request with defaults
  */
-export function createPaginatedRequest(
-  params: Partial<PaginatedRequest> = {}
-): PaginatedRequest {
+export function createPaginatedRequest(params: Partial<PaginatedRequest> = {}): PaginatedRequest {
   return {
     page: 1,
     limit: 20,
-    sortOrder: "desc",
+    sortOrder: 'desc',
     ...params,
   };
 }
@@ -360,12 +350,12 @@ export async function handlePaginatedApiResponse<T>(
 /**
  * Log conversion for debugging
  */
-export function debugConversion<T>(obj: T, label = "Object"): T {
-  if (process.env.NODE_ENV === "development") {
+export function debugConversion<T>(obj: T, label = 'Object'): T {
+  if (process.env.NODE_ENV === 'development') {
     console.group(`🔄 ${label} Conversion`);
-    console.log("Original:", obj);
-    if (typeof obj === "object" && obj !== null) {
-      console.log("Formatted for API:", formatApiRequest(obj as any));
+    console.log('Original:', obj);
+    if (typeof obj === 'object' && obj !== null) {
+      console.log('Formatted for API:', formatApiRequest(obj as any));
     }
     console.groupEnd();
   }
diff --git a/frontend/src/types/navigation.ts b/frontend/src/types/navigation.ts
index b16af59..b208d41 100644
--- a/frontend/src/types/navigation.ts
+++ b/frontend/src/types/navigation.ts
@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement } from 'react';
 
 export interface NavigationItem {
   id: string;
@@ -7,12 +7,12 @@ export interface NavigationItem {
   icon?: ReactElement;
   children?: NavigationItem[];
   component?: ReactElement;
-  userTypes?: ("candidate" | "employer" | "guest" | "admin")[];
+  userTypes?: ('candidate' | 'employer' | 'guest' | 'admin')[];
   exact?: boolean;
   divider?: boolean;
   showInNavigation?: boolean; // Controls if item appears in main navigation
   showInUserMenu?: boolean; // Controls if item appears in user menu
-  userMenuGroup?: "profile" | "account" | "system" | "admin"; // Groups items in user menu
+  userMenuGroup?: 'profile' | 'account' | 'system' | 'admin'; // Groups items in user menu
 }
 
 export interface NavigationConfig {
diff --git a/frontend/src/types/theme.d.ts b/frontend/src/types/theme.d.ts
index af3d4d8..c212a97 100644
--- a/frontend/src/types/theme.d.ts
+++ b/frontend/src/types/theme.d.ts
@@ -1,6 +1,6 @@
-import { Palette, PaletteOptions } from "@mui/material/styles";
+import { Palette, PaletteOptions } from '@mui/material/styles';
 
-declare module "@mui/material/styles" {
+declare module '@mui/material/styles' {
   interface Palette {
     custom: {
       highlight: string;
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 95d6850..dab9d52 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -7,164 +7,131 @@
 // Enums
 // ============================
 
-export type AIModelType = "qwen2.5" | "flux-schnell";
+export type AIModelType = 'qwen2.5' | 'flux-schnell';
 
 export type ActivityType =
-  | "login"
-  | "search"
-  | "view_job"
-  | "apply_job"
-  | "message"
-  | "update_profile"
-  | "chat";
+  | 'login'
+  | 'search'
+  | 'view_job'
+  | 'apply_job'
+  | 'message'
+  | 'update_profile'
+  | 'chat';
 
 export type ApiActivityType =
-  | "system"
-  | "info"
-  | "searching"
-  | "thinking"
-  | "generating"
-  | "converting"
-  | "generating_image"
-  | "tooling"
-  | "heartbeat";
+  | 'system'
+  | 'info'
+  | 'searching'
+  | 'thinking'
+  | 'generating'
+  | 'converting'
+  | 'generating_image'
+  | 'tooling'
+  | 'heartbeat';
 
-export type ApiMessageType = "binary" | "text" | "json";
+export type ApiMessageType = 'binary' | 'text' | 'json';
 
-export type ApiStatusType = "streaming" | "status" | "done" | "error";
+export type ApiStatusType = 'streaming' | 'status' | 'done' | 'error';
 
 export type ApplicationStatus =
-  | "applied"
-  | "reviewing"
-  | "interview"
-  | "offer"
-  | "rejected"
-  | "accepted"
-  | "withdrawn";
+  | 'applied'
+  | 'reviewing'
+  | 'interview'
+  | 'offer'
+  | 'rejected'
+  | 'accepted'
+  | 'withdrawn';
 
 export type ChatContextType =
-  | "job_search"
-  | "job_requirements"
-  | "candidate_chat"
-  | "interview_prep"
-  | "resume_review"
-  | "general"
-  | "generate_persona"
-  | "generate_profile"
-  | "generate_resume"
-  | "generate_image"
-  | "rag_search"
-  | "skill_match";
+  | 'job_search'
+  | 'job_requirements'
+  | 'candidate_chat'
+  | 'interview_prep'
+  | 'resume_review'
+  | 'general'
+  | 'generate_persona'
+  | 'generate_profile'
+  | 'generate_resume'
+  | 'generate_image'
+  | 'rag_search'
+  | 'skill_match';
 
-export type ChatSenderType =
-  | "user"
-  | "assistant"
-  | "system"
-  | "information"
-  | "warning"
-  | "error";
+export type ChatSenderType = 'user' | 'assistant' | 'system' | 'information' | 'warning' | 'error';
 
-export type ColorBlindMode =
-  | "protanopia"
-  | "deuteranopia"
-  | "tritanopia"
-  | "none";
+export type ColorBlindMode = 'protanopia' | 'deuteranopia' | 'tritanopia' | 'none';
 
-export type DataSourceType =
-  | "document"
-  | "website"
-  | "api"
-  | "database"
-  | "internal";
+export type DataSourceType = 'document' | 'website' | 'api' | 'database' | 'internal';
 
-export type DocumentType = "pdf" | "docx" | "txt" | "markdown" | "image";
+export type DocumentType = 'pdf' | 'docx' | 'txt' | 'markdown' | 'image';
 
-export type EmploymentType =
-  | "full-time"
-  | "part-time"
-  | "contract"
-  | "internship"
-  | "freelance";
+export type EmploymentType = 'full-time' | 'part-time' | 'contract' | 'internship' | 'freelance';
 
-export type FontSize = "small" | "medium" | "large";
+export type FontSize = 'small' | 'medium' | 'large';
 
-export type InterviewRecommendation =
-  | "strong_hire"
-  | "hire"
-  | "no_hire"
-  | "strong_no_hire";
+export type InterviewRecommendation = 'strong_hire' | 'hire' | 'no_hire' | 'strong_no_hire';
 
-export type InterviewType =
-  | "phone"
-  | "video"
-  | "onsite"
-  | "technical"
-  | "behavioral";
+export type InterviewType = 'phone' | 'video' | 'onsite' | 'technical' | 'behavioral';
 
-export type LanguageProficiency =
-  | "basic"
-  | "conversational"
-  | "fluent"
-  | "native";
+export type LanguageProficiency = 'basic' | 'conversational' | 'fluent' | 'native';
 
-export type MFAMethod = "app" | "sms" | "email";
+export type MFAMethod = 'app' | 'sms' | 'email';
 
-export type NotificationType = "email" | "push" | "in_app";
+export type NotificationType = 'email' | 'push' | 'in_app';
 
 export type ProcessingStepType =
-  | "extract"
-  | "transform"
-  | "chunk"
-  | "embed"
-  | "filter"
-  | "summarize";
+  | 'extract'
+  | 'transform'
+  | 'chunk'
+  | 'embed'
+  | 'filter'
+  | 'summarize';
 
-export type SalaryPeriod = "hour" | "day" | "month" | "year";
+export type SalaryPeriod = 'hour' | 'day' | 'month' | 'year';
 
-export type SearchType = "similarity" | "mmr" | "hybrid" | "keyword";
+export type SearchType = 'similarity' | 'mmr' | 'hybrid' | 'keyword';
 
-export type SkillLevel = "beginner" | "intermediate" | "advanced" | "expert";
+export type SkillLevel = 'beginner' | 'intermediate' | 'advanced' | 'expert';
 
-export type SkillStatus = "pending" | "complete" | "waiting" | "error";
+export type SkillStatus = 'pending' | 'complete' | 'waiting' | 'error';
 
-export type SkillStrength = "strong" | "moderate" | "weak" | "none";
+export type SkillStrength = 'strong' | 'moderate' | 'weak' | 'none';
 
 export type SocialPlatform =
-  | "linkedin"
-  | "twitter"
-  | "github"
-  | "dribbble"
-  | "behance"
-  | "website"
-  | "other";
+  | 'linkedin'
+  | 'twitter'
+  | 'github'
+  | 'dribbble'
+  | 'behance'
+  | 'website'
+  | 'other';
 
-export type SortOrder = "asc" | "desc";
+export type SortOrder = 'asc' | 'desc';
 
-export type ThemePreference = "light" | "dark" | "system";
+export type ThemePreference = 'light' | 'dark' | 'system';
 
-export type UserGender = "female" | "male";
+export type UserGender = 'female' | 'male';
 
-export type UserStatus = "active" | "inactive" | "pending" | "banned";
+export type UserStatus = 'active' | 'inactive' | 'pending' | 'banned';
 
-export type UserType = "candidate" | "employer" | "guest";
+export type UserType = 'candidate' | 'employer' | 'guest';
 
-export type VectorStoreType = "chroma";
+export type VectorStoreType = 'chroma';
 
 // ============================
 // Interfaces
 // ============================
 
 export interface AccessibilitySettings {
-  fontSize: "small" | "medium" | "large";
+  fontSize: 'small' | 'medium' | 'large';
   highContrast: boolean;
   reduceMotion: boolean;
   screenReader: boolean;
-  colorBlindMode?: "protanopia" | "deuteranopia" | "tritanopia" | "none";
+  colorBlindMode?: 'protanopia' | 'deuteranopia' | 'tritanopia' | 'none';
 }
 
 export interface Analytics {
   id?: string;
-  entityType: "job" | "candidate" | "chat" | "system" | "employer";
+  entityType: 'job' | 'candidate' | 'chat' | 'system' | 'employer';
   entityId: string;
   metricType: string;
   value: number;
@@ -177,8 +144,8 @@ export interface ApiMessage {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
 }
 
@@ -190,7 +157,7 @@ export interface ApiResponse {
 }
 
 export interface ApplicationDecision {
-  status: "accepted" | "rejected";
+  status: 'accepted' | 'rejected';
   reason?: string;
   date: Date;
   by: string;
@@ -226,14 +193,14 @@ export interface Authentication {
   resetPasswordExpiry?: Date;
   lastPasswordChange: Date;
   mfaEnabled: boolean;
-  mfaMethod?: "app" | "sms" | "email";
+  mfaMethod?: 'app' | 'sms' | 'email';
   mfaSecret?: string;
   loginAttempts: number;
   lockedUntil?: Date;
 }
 
 export interface BaseUser {
-  userType: "candidate" | "employer" | "guest";
+  userType: 'candidate' | 'employer' | 'guest';
   id?: string;
   lastActivity?: Date;
   email: string;
@@ -246,18 +213,18 @@ export interface BaseUser {
   updatedAt?: Date;
   lastLogin?: Date;
   profileImage?: string;
-  status: "active" | "inactive" | "pending" | "banned";
+  status: 'active' | 'inactive' | 'pending' | 'banned';
   isAdmin: boolean;
 }
 
 export interface BaseUserWithType {
-  userType: "candidate" | "employer" | "guest";
+  userType: 'candidate' | 'employer' | 'guest';
   id?: string;
   lastActivity?: Date;
 }
 
 export interface Candidate {
-  userType: "candidate" | "employer" | "guest";
+  userType: 'candidate' | 'employer' | 'guest';
   id?: string;
   lastActivity?: Date;
   email: string;
@@ -270,7 +237,7 @@ export interface Candidate {
   updatedAt?: Date;
   lastLogin?: Date;
   profileImage?: string;
-  status: "active" | "inactive" | "pending" | "banned";
+  status: 'active' | 'inactive' | 'pending' | 'banned';
   isAdmin: boolean;
   username: string;
   description?: string;
@@ -279,9 +246,7 @@ export interface Candidate {
   experience?: Array<WorkExperience>;
   questions?: Array<CandidateQuestion>;
   education?: Array<Education>;
-  preferredJobTypes?: Array<
-    "full-time" | "part-time" | "contract" | "internship" | "freelance"
-  >;
+  preferredJobTypes?: Array<'full-time' | 'part-time' | 'contract' | 'internship' | 'freelance'>;
   desiredSalary?: DesiredSalary;
   availabilityDate?: Date;
   summary?: string;
@@ -294,7 +259,7 @@ export interface Candidate {
 }
 
 export interface CandidateAI {
-  userType: "candidate" | "employer" | "guest";
+  userType: 'candidate' | 'employer' | 'guest';
   id?: string;
   lastActivity?: Date;
   email: string;
@@ -307,7 +272,7 @@ export interface CandidateAI {
   updatedAt?: Date;
   lastLogin?: Date;
   profileImage?: string;
-  status: "active" | "inactive" | "pending" | "banned";
+  status: 'active' | 'inactive' | 'pending' | 'banned';
   isAdmin: boolean;
   username: string;
   description?: string;
@@ -316,9 +281,7 @@ export interface CandidateAI {
   experience?: Array<WorkExperience>;
   questions?: Array<CandidateQuestion>;
   education?: Array<Education>;
-  preferredJobTypes?: Array<
-    "full-time" | "part-time" | "contract" | "internship" | "freelance"
-  >;
+  preferredJobTypes?: Array<'full-time' | 'part-time' | 'contract' | 'internship' | 'freelance'>;
   desiredSalary?: DesiredSalary;
   availabilityDate?: Date;
   summary?: string;
@@ -330,7 +293,7 @@ export interface CandidateAI {
   isPublic: boolean;
   isAI: boolean;
   age?: number;
-  gender?: "female" | "male";
+  gender?: 'female' | 'male';
   ethnicity?: string;
 }
 
@@ -370,20 +333,20 @@ export interface Certification {
 
 export interface ChatContext {
   type:
-    | "job_search"
-    | "job_requirements"
-    | "candidate_chat"
-    | "interview_prep"
-    | "resume_review"
-    | "general"
-    | "generate_persona"
-    | "generate_profile"
-    | "generate_resume"
-    | "generate_image"
-    | "rag_search"
-    | "skill_match";
+    | 'job_search'
+    | 'job_requirements'
+    | 'candidate_chat'
+    | 'interview_prep'
+    | 'resume_review'
+    | 'general'
+    | 'generate_persona'
+    | 'generate_profile'
+    | 'generate_resume'
+    | 'generate_image'
+    | 'rag_search'
+    | 'skill_match';
   relatedEntityId?: string;
-  relatedEntityType?: "job" | "candidate" | "employer";
+  relatedEntityType?: 'job' | 'candidate' | 'employer';
   additionalContext?: Record<string, any>;
 }
 
@@ -391,10 +354,10 @@ export interface ChatMessage {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
-  role: "user" | "assistant" | "system" | "information" | "warning" | "error";
+  role: 'user' | 'assistant' | 'system' | 'information' | 'warning' | 'error';
   content: string;
   tunables?: Tunables;
   metadata: ChatMessageMetaData;
@@ -404,14 +367,14 @@ export interface ChatMessageError {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
   content: string;
 }
 
 export interface ChatMessageMetaData {
-  model: "qwen2.5" | "flux-schnell";
+  model: 'qwen2.5' | 'flux-schnell';
   temperature: number;
   maxTokens: number;
   topP: number;
@@ -433,8 +396,8 @@ export interface ChatMessageRagSearch {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
   dimensions: number;
   content: Array<ChromaDBGetResponse>;
@@ -444,10 +407,10 @@ export interface ChatMessageResume {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
-  role: "user" | "assistant" | "system" | "information" | "warning" | "error";
+  role: 'user' | 'assistant' | 'system' | 'information' | 'warning' | 'error';
   content: string;
   tunables?: Tunables;
   metadata: ChatMessageMetaData;
@@ -460,10 +423,10 @@ export interface ChatMessageSkillAssessment {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
-  role: "user" | "assistant" | "system" | "information" | "warning" | "error";
+  role: 'user' | 'assistant' | 'system' | 'information' | 'warning' | 'error';
   content: string;
   tunables?: Tunables;
   metadata: ChatMessageMetaData;
@@ -474,19 +437,19 @@ export interface ChatMessageStatus {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
   activity:
-    | "system"
-    | "info"
-    | "searching"
-    | "thinking"
-    | "generating"
-    | "converting"
-    | "generating_image"
-    | "tooling"
-    | "heartbeat";
+    | 'system'
+    | 'info'
+    | 'searching'
+    | 'thinking'
+    | 'generating'
+    | 'converting'
+    | 'generating_image'
+    | 'tooling'
+    | 'heartbeat';
   content: any;
 }
 
@@ -494,8 +457,8 @@ export interface ChatMessageStreaming {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
   content: string;
 }
@@ -504,10 +467,10 @@ export interface ChatMessageUser {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
-  role: "user" | "assistant" | "system" | "information" | "warning" | "error";
+  role: 'user' | 'assistant' | 'system' | 'information' | 'warning' | 'error';
   content: string;
   tunables?: Tunables;
 }
@@ -580,12 +543,12 @@ export interface DataSourceConfiguration {
   id?: string;
   ragConfigId: string;
   name: string;
-  sourceType: "document" | "website" | "api" | "database" | "internal";
+  sourceType: 'document' | 'website' | 'api' | 'database' | 'internal';
   connectionDetails: Record<string, any>;
   processingPipeline: Array<ProcessingStep>;
   refreshSchedule?: string;
   lastRefreshed?: Date;
-  status: "active" | "pending" | "error" | "processing";
+  status: 'active' | 'pending' | 'error' | 'processing';
   errorDetails?: string;
   metadata?: Record<string, any>;
 }
@@ -593,7 +556,7 @@ export interface DataSourceConfiguration {
 export interface DesiredSalary {
   amount: number;
   currency: string;
-  period: "hour" | "day" | "month" | "year";
+  period: 'hour' | 'day' | 'month' | 'year';
 }
 
 export interface Document {
@@ -601,7 +564,7 @@ export interface Document {
   ownerId: string;
   filename: string;
   originalName: string;
-  type: "pdf" | "docx" | "txt" | "markdown" | "image";
+  type: 'pdf' | 'docx' | 'txt' | 'markdown' | 'image';
   size: number;
   uploadDate?: Date;
   options?: DocumentOptions;
@@ -611,7 +574,7 @@ export interface Document {
 export interface DocumentContentResponse {
   documentId: string;
   filename: string;
-  type: "pdf" | "docx" | "txt" | "markdown" | "image";
+  type: 'pdf' | 'docx' | 'txt' | 'markdown' | 'image';
   content: string;
   size: number;
 }
@@ -625,8 +588,8 @@ export interface DocumentMessage {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
   document: Document;
   content?: string;
@@ -668,7 +631,7 @@ export interface EmailVerificationRequest {
 }
 
 export interface Employer {
-  userType: "candidate" | "employer" | "guest";
+  userType: 'candidate' | 'employer' | 'guest';
   id?: string;
   lastActivity?: Date;
   email: string;
@@ -681,7 +644,7 @@ export interface Employer {
   updatedAt?: Date;
   lastLogin?: Date;
   profileImage?: string;
-  status: "active" | "inactive" | "pending" | "banned";
+  status: 'active' | 'inactive' | 'pending' | 'banned';
   isAdmin: boolean;
   companyName: string;
   industry: string;
@@ -721,7 +684,7 @@ export interface GPUInfo {
 }
 
 export interface Guest {
-  userType: "candidate" | "employer" | "guest";
+  userType: 'candidate' | 'employer' | 'guest';
   id?: string;
   lastActivity?: Date;
   email: string;
@@ -734,7 +697,7 @@ export interface Guest {
   updatedAt?: Date;
   lastLogin?: Date;
   profileImage?: string;
-  status: "active" | "inactive" | "pending" | "banned";
+  status: 'active' | 'inactive' | 'pending' | 'banned';
   isAdmin: boolean;
   sessionId: string;
   username: string;
@@ -750,7 +713,7 @@ export interface GuestCleanupRequest {
 }
 
 export interface GuestConversionRequest {
-  accountType: "candidate" | "employer";
+  accountType: 'candidate' | 'employer';
   email: string;
   username: string;
   password: string;
@@ -769,7 +732,7 @@ export interface GuestSessionResponse {
   refreshToken: string;
   user: Guest;
   expiresAt: number;
-  userType: "guest";
+  userType: 'guest';
   isGuest: boolean;
 }
 
@@ -791,7 +754,7 @@ export interface InterviewFeedback {
   overallScore: number;
   strengths: Array<string>;
   weaknesses: Array<string>;
-  recommendation: "strong_hire" | "hire" | "no_hire" | "strong_no_hire";
+  recommendation: 'strong_hire' | 'hire' | 'no_hire' | 'strong_no_hire';
   comments: string;
   createdAt?: Date;
   updatedAt?: Date;
@@ -804,19 +767,19 @@ export interface InterviewSchedule {
   applicationId: string;
   scheduledDate: Date;
   endDate: Date;
-  interviewType: "phone" | "video" | "onsite" | "technical" | "behavioral";
+  interviewType: 'phone' | 'video' | 'onsite' | 'technical' | 'behavioral';
   interviewers: Array<string>;
   location?: string | Location;
   notes?: string;
   feedback?: InterviewFeedback;
-  status: "scheduled" | "completed" | "cancelled" | "rescheduled";
+  status: 'scheduled' | 'completed' | 'cancelled' | 'rescheduled';
   meetingLink?: string;
 }
 
 export interface Job {
   id?: string;
   ownerId: string;
-  ownerType: "candidate" | "employer" | "guest";
+  ownerType: 'candidate' | 'employer' | 'guest';
   owner?: BaseUser;
   title?: string;
   summary?: string;
@@ -832,14 +795,7 @@ export interface JobApplication {
   id?: string;
   jobId: string;
   candidateId: string;
-  status:
-    | "applied"
-    | "reviewing"
-    | "interview"
-    | "offer"
-    | "rejected"
-    | "accepted"
-    | "withdrawn";
+  status: 'applied' | 'reviewing' | 'interview' | 'offer' | 'rejected' | 'accepted' | 'withdrawn';
   appliedDate: Date;
   updatedDate: Date;
   resumeVersion: string;
@@ -854,12 +810,7 @@ export interface JobApplication {
 export interface JobDetails {
   location: Location;
   salaryRange?: SalaryRange;
-  employmentType:
-    | "full-time"
-    | "part-time"
-    | "contract"
-    | "internship"
-    | "freelance";
+  employmentType: 'full-time' | 'part-time' | 'contract' | 'internship' | 'freelance';
   datePosted?: Date;
   applicationDeadline?: Date;
   isActive: boolean;
@@ -895,8 +846,8 @@ export interface JobRequirementsMessage {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
   job: Job;
 }
@@ -910,7 +861,7 @@ export interface JobResponse {
 
 export interface Language {
   language: string;
-  proficiency: "basic" | "conversational" | "fluent" | "native";
+  proficiency: 'basic' | 'conversational' | 'fluent' | 'native';
 }
 
 export interface Location {
@@ -965,7 +916,7 @@ export interface MessageReaction {
 }
 
 export interface NotificationPreference {
-  type: "email" | "push" | "in_app";
+  type: 'email' | 'push' | 'in_app';
   events: Array<string>;
   isEnabled: boolean;
 }
@@ -974,7 +925,7 @@ export interface PaginatedRequest {
   page: number;
   limit: number;
   sortBy?: string;
-  sortOrder?: "asc" | "desc";
+  sortOrder?: 'asc' | 'desc';
   filters?: Record<string, any>;
 }
 
@@ -996,7 +947,7 @@ export interface PointOfContact {
 
 export interface ProcessingStep {
   id?: string;
-  type: "extract" | "transform" | "chunk" | "embed" | "filter" | "summarize";
+  type: 'extract' | 'transform' | 'chunk' | 'embed' | 'filter' | 'summarize';
   parameters: Record<string, any>;
   order: number;
   dependsOn?: Array<string>;
@@ -1009,7 +960,7 @@ export interface RAGConfiguration {
   description?: string;
   dataSourceConfigurations: Array<DataSourceConfiguration>;
   embeddingModel: string;
-  vectorStoreType: "chroma";
+  vectorStoreType: 'chroma';
   retrievalParameters: RetrievalParameters;
   createdAt?: Date;
   updatedAt?: Date;
@@ -1099,17 +1050,17 @@ export interface ResumeMessage {
   id?: string;
   sessionId: string;
   senderId?: string;
-  status: "streaming" | "status" | "done" | "error";
-  type: "binary" | "text" | "json";
+  status: 'streaming' | 'status' | 'done' | 'error';
+  type: 'binary' | 'text' | 'json';
   timestamp?: Date;
-  role: "user" | "assistant" | "system" | "information" | "warning" | "error";
+  role: 'user' | 'assistant' | 'system' | 'information' | 'warning' | 'error';
   content: string;
   tunables?: Tunables;
   resume: Resume;
 }
 
 export interface RetrievalParameters {
-  searchType: "similarity" | "mmr" | "hybrid" | "keyword";
+  searchType: 'similarity' | 'mmr' | 'hybrid' | 'keyword';
   topK: number;
   similarityThreshold?: number;
   rerankerModel?: string;
@@ -1122,7 +1073,7 @@ export interface SalaryRange {
   min: number;
   max: number;
   currency: string;
-  period: "hour" | "day" | "month" | "year";
+  period: 'hour' | 'day' | 'month' | 'year';
   isVisible: boolean;
 }
 
@@ -1132,14 +1083,14 @@ export interface SearchQuery {
   page: number;
   limit: number;
   sortBy?: string;
-  sortOrder?: "asc" | "desc";
+  sortOrder?: 'asc' | 'desc';
 }
 
 export interface Skill {
   id?: string;
   name: string;
   category: string;
-  level: "beginner" | "intermediate" | "advanced" | "expert";
+  level: 'beginner' | 'intermediate' | 'advanced' | 'expert';
   yearsOfExperience?: number;
 }
 
@@ -1148,7 +1099,7 @@ export interface SkillAssessment {
   skill: string;
   skillModified?: string;
   evidenceFound: boolean;
-  evidenceStrength: "strong" | "moderate" | "weak" | "none";
+  evidenceStrength: 'strong' | 'moderate' | 'weak' | 'none';
   assessment: string;
   description: string;
   evidenceDetails?: Array<EvidenceDetail>;
@@ -1158,14 +1109,7 @@ export interface SkillAssessment {
 }
 
 export interface SocialLink {
-  platform:
-    | "linkedin"
-    | "twitter"
-    | "github"
-    | "dribbble"
-    | "behance"
-    | "website"
-    | "other";
+  platform: 'linkedin' | 'twitter' | 'github' | 'dribbble' | 'behance' | 'website' | 'other';
   url: string;
 }
 
@@ -1189,13 +1133,13 @@ export interface UserActivity {
   userId?: string;
   guestId?: string;
   activityType:
-    | "login"
-    | "search"
-    | "view_job"
-    | "apply_job"
-    | "message"
-    | "update_profile"
-    | "chat";
+    | 'login'
+    | 'search'
+    | 'view_job'
+    | 'apply_job'
+    | 'message'
+    | 'update_profile'
+    | 'chat';
   timestamp: Date;
   metadata: Record<string, any>;
   ipAddress?: string;
@@ -1205,13 +1149,13 @@ export interface UserActivity {
 
 export interface UserPreference {
   userId: string;
-  theme: "light" | "dark" | "system";
+  theme: 'light' | 'dark' | 'system';
   notifications: Array<NotificationPreference>;
   accessibility: AccessibilitySettings;
   dashboardLayout?: Record<string, any>;
   language: string;
   timezone: string;
-  emailFrequency: "immediate" | "daily" | "weekly" | "never";
+  emailFrequency: 'immediate' | 'daily' | 'weekly' | 'never';
 }
 
 export interface WorkExperience {
@@ -1264,9 +1208,7 @@ export function convertApiMessageFromApi(data: any): ApiMessage {
  * Convert ApplicationDecision from API response
  * Date fields: date
  */
-export function convertApplicationDecisionFromApi(
-  data: any
-): ApplicationDecision {
+export function convertApplicationDecisionFromApi(data: any): ApplicationDecision {
   if (!data) return data;
 
   return {
@@ -1312,17 +1254,13 @@ export function convertAuthenticationFromApi(data: any): Authentication {
   return {
     ...data,
     // Convert resetPasswordExpiry from ISO string to Date
-    resetPasswordExpiry: data.resetPasswordExpiry
-      ? new Date(data.resetPasswordExpiry)
-      : undefined,
+    resetPasswordExpiry: data.resetPasswordExpiry ? new Date(data.resetPasswordExpiry) : undefined,
     // Convert lastPasswordChange from ISO string to Date
     lastPasswordChange: new Date(data.lastPasswordChange),
     // Convert lockedUntil from ISO string to Date
     lockedUntil: data.lockedUntil ? new Date(data.lockedUntil) : undefined,
     // Convert nested RefreshToken model
-    refreshTokens: data.refreshTokens.map((item: any) =>
-      convertRefreshTokenFromApi(item)
-    ),
+    refreshTokens: data.refreshTokens.map((item: any) => convertRefreshTokenFromApi(item)),
   };
 }
 /**
@@ -1376,17 +1314,11 @@ export function convertCandidateFromApi(data: any): Candidate {
     // Convert lastLogin from ISO string to Date
     lastLogin: data.lastLogin ? new Date(data.lastLogin) : undefined,
     // Convert availabilityDate from ISO string to Date
-    availabilityDate: data.availabilityDate
-      ? new Date(data.availabilityDate)
-      : undefined,
+    availabilityDate: data.availabilityDate ? new Date(data.availabilityDate) : undefined,
     // Convert nested WorkExperience model
-    experience: data.experience
-      ? convertWorkExperienceFromApi(data.experience)
-      : undefined,
+    experience: data.experience ? convertWorkExperienceFromApi(data.experience) : undefined,
     // Convert nested Education model
-    education: data.education
-      ? convertEducationFromApi(data.education)
-      : undefined,
+    education: data.education ? convertEducationFromApi(data.education) : undefined,
     // Convert nested Certification model
     certifications: data.certifications
       ? convertCertificationFromApi(data.certifications)
@@ -1416,17 +1348,11 @@ export function convertCandidateAIFromApi(data: any): CandidateAI {
     // Convert lastLogin from ISO string to Date
     lastLogin: data.lastLogin ? new Date(data.lastLogin) : undefined,
     // Convert availabilityDate from ISO string to Date
-    availabilityDate: data.availabilityDate
-      ? new Date(data.availabilityDate)
-      : undefined,
+    availabilityDate: data.availabilityDate ? new Date(data.availabilityDate) : undefined,
     // Convert nested WorkExperience model
-    experience: data.experience
-      ? convertWorkExperienceFromApi(data.experience)
-      : undefined,
+    experience: data.experience ? convertWorkExperienceFromApi(data.experience) : undefined,
     // Convert nested Education model
-    education: data.education
-      ? convertEducationFromApi(data.education)
-      : undefined,
+    education: data.education ? convertEducationFromApi(data.education) : undefined,
     // Convert nested Certification model
     certifications: data.certifications
       ? convertCertificationFromApi(data.certifications)
@@ -1437,9 +1363,7 @@ export function convertCandidateAIFromApi(data: any): CandidateAI {
  * Convert CandidateListResponse from API response
  * Nested models: data (Candidate)
  */
-export function convertCandidateListResponseFromApi(
-  data: any
-): CandidateListResponse {
+export function convertCandidateListResponseFromApi(data: any): CandidateListResponse {
   if (!data) return data;
 
   return {
@@ -1473,9 +1397,7 @@ export function convertCertificationFromApi(data: any): Certification {
     // Convert issueDate from ISO string to Date
     issueDate: new Date(data.issueDate),
     // Convert expirationDate from ISO string to Date
-    expirationDate: data.expirationDate
-      ? new Date(data.expirationDate)
-      : undefined,
+    expirationDate: data.expirationDate ? new Date(data.expirationDate) : undefined,
   };
 }
 /**
@@ -1508,9 +1430,7 @@ export function convertChatMessageErrorFromApi(data: any): ChatMessageError {
  * Convert ChatMessageRagSearch from API response
  * Date fields: timestamp
  */
-export function convertChatMessageRagSearchFromApi(
-  data: any
-): ChatMessageRagSearch {
+export function convertChatMessageRagSearchFromApi(data: any): ChatMessageRagSearch {
   if (!data) return data;
 
   return {
@@ -1537,9 +1457,7 @@ export function convertChatMessageResumeFromApi(data: any): ChatMessageResume {
  * Date fields: timestamp
  * Nested models: skillAssessment (SkillAssessment)
  */
-export function convertChatMessageSkillAssessmentFromApi(
-  data: any
-): ChatMessageSkillAssessment {
+export function convertChatMessageSkillAssessmentFromApi(data: any): ChatMessageSkillAssessment {
   if (!data) return data;
 
   return {
@@ -1567,9 +1485,7 @@ export function convertChatMessageStatusFromApi(data: any): ChatMessageStatus {
  * Convert ChatMessageStreaming from API response
  * Date fields: timestamp
  */
-export function convertChatMessageStreamingFromApi(
-  data: any
-): ChatMessageStreaming {
+export function convertChatMessageStreamingFromApi(data: any): ChatMessageStreaming {
   if (!data) return data;
 
   return {
@@ -1610,17 +1526,13 @@ export function convertChatSessionFromApi(data: any): ChatSession {
  * Convert DataSourceConfiguration from API response
  * Date fields: lastRefreshed
  */
-export function convertDataSourceConfigurationFromApi(
-  data: any
-): DataSourceConfiguration {
+export function convertDataSourceConfigurationFromApi(data: any): DataSourceConfiguration {
   if (!data) return data;
 
   return {
     ...data,
     // Convert lastRefreshed from ISO string to Date
-    lastRefreshed: data.lastRefreshed
-      ? new Date(data.lastRefreshed)
-      : undefined,
+    lastRefreshed: data.lastRefreshed ? new Date(data.lastRefreshed) : undefined,
   };
 }
 /**
@@ -1640,9 +1552,7 @@ export function convertDocumentFromApi(data: any): Document {
  * Convert DocumentListResponse from API response
  * Nested models: documents (Document)
  */
-export function convertDocumentListResponseFromApi(
-  data: any
-): DocumentListResponse {
+export function convertDocumentListResponseFromApi(data: any): DocumentListResponse {
   if (!data) return data;
 
   return {
@@ -1753,9 +1663,7 @@ export function convertGuestFromApi(data: any): Guest {
  * Convert GuestSessionResponse from API response
  * Nested models: user (Guest)
  */
-export function convertGuestSessionResponseFromApi(
-  data: any
-): GuestSessionResponse {
+export function convertGuestSessionResponseFromApi(data: any): GuestSessionResponse {
   if (!data) return data;
 
   return {
@@ -1799,9 +1707,7 @@ export function convertInterviewScheduleFromApi(data: any): InterviewSchedule {
     // Convert endDate from ISO string to Date
     endDate: new Date(data.endDate),
     // Convert nested InterviewFeedback model
-    feedback: data.feedback
-      ? convertInterviewFeedbackFromApi(data.feedback)
-      : undefined,
+    feedback: data.feedback ? convertInterviewFeedbackFromApi(data.feedback) : undefined,
   };
 }
 /**
@@ -1843,9 +1749,7 @@ export function convertJobApplicationFromApi(data: any): JobApplication {
       ? convertInterviewScheduleFromApi(data.interviewSchedules)
       : undefined,
     // Convert nested ApplicationDecision model
-    decision: data.decision
-      ? convertApplicationDecisionFromApi(data.decision)
-      : undefined,
+    decision: data.decision ? convertApplicationDecisionFromApi(data.decision) : undefined,
   };
 }
 /**
@@ -1860,13 +1764,9 @@ export function convertJobDetailsFromApi(data: any): JobDetails {
     // Convert datePosted from ISO string to Date
     datePosted: data.datePosted ? new Date(data.datePosted) : undefined,
     // Convert applicationDeadline from ISO string to Date
-    applicationDeadline: data.applicationDeadline
-      ? new Date(data.applicationDeadline)
-      : undefined,
+    applicationDeadline: data.applicationDeadline ? new Date(data.applicationDeadline) : undefined,
     // Convert featuredUntil from ISO string to Date
-    featuredUntil: data.featuredUntil
-      ? new Date(data.featuredUntil)
-      : undefined,
+    featuredUntil: data.featuredUntil ? new Date(data.featuredUntil) : undefined,
   };
 }
 /**
@@ -1887,9 +1787,7 @@ export function convertJobListResponseFromApi(data: any): JobListResponse {
  * Date fields: timestamp
  * Nested models: job (Job)
  */
-export function convertJobRequirementsMessageFromApi(
-  data: any
-): JobRequirementsMessage {
+export function convertJobRequirementsMessageFromApi(data: any): JobRequirementsMessage {
   if (!data) return data;
 
   return {
@@ -2002,9 +1900,7 @@ export function convertResumeFromApi(data: any): Resume {
     // Convert nested Job model
     job: data.job ? convertJobFromApi(data.job) : undefined,
     // Convert nested Candidate model
-    candidate: data.candidate
-      ? convertCandidateFromApi(data.candidate)
-      : undefined,
+    candidate: data.candidate ? convertCandidateFromApi(data.candidate) : undefined,
   };
 }
 /**
@@ -2075,105 +1971,105 @@ export function convertFromApi<T>(data: any, modelType: string): T {
   if (!data) return data;
 
   switch (modelType) {
-    case "Analytics":
+    case 'Analytics':
       return convertAnalyticsFromApi(data) as T;
-    case "ApiMessage":
+    case 'ApiMessage':
       return convertApiMessageFromApi(data) as T;
-    case "ApplicationDecision":
+    case 'ApplicationDecision':
       return convertApplicationDecisionFromApi(data) as T;
-    case "Attachment":
+    case 'Attachment':
       return convertAttachmentFromApi(data) as T;
-    case "AuthResponse":
+    case 'AuthResponse':
       return convertAuthResponseFromApi(data) as T;
-    case "Authentication":
+    case 'Authentication':
       return convertAuthenticationFromApi(data) as T;
-    case "BaseUser":
+    case 'BaseUser':
       return convertBaseUserFromApi(data) as T;
-    case "BaseUserWithType":
+    case 'BaseUserWithType':
       return convertBaseUserWithTypeFromApi(data) as T;
-    case "Candidate":
+    case 'Candidate':
       return convertCandidateFromApi(data) as T;
-    case "CandidateAI":
+    case 'CandidateAI':
       return convertCandidateAIFromApi(data) as T;
-    case "CandidateListResponse":
+    case 'CandidateListResponse':
       return convertCandidateListResponseFromApi(data) as T;
-    case "CandidateResponse":
+    case 'CandidateResponse':
       return convertCandidateResponseFromApi(data) as T;
-    case "Certification":
+    case 'Certification':
       return convertCertificationFromApi(data) as T;
-    case "ChatMessage":
+    case 'ChatMessage':
       return convertChatMessageFromApi(data) as T;
-    case "ChatMessageError":
+    case 'ChatMessageError':
       return convertChatMessageErrorFromApi(data) as T;
-    case "ChatMessageRagSearch":
+    case 'ChatMessageRagSearch':
       return convertChatMessageRagSearchFromApi(data) as T;
-    case "ChatMessageResume":
+    case 'ChatMessageResume':
       return convertChatMessageResumeFromApi(data) as T;
-    case "ChatMessageSkillAssessment":
+    case 'ChatMessageSkillAssessment':
       return convertChatMessageSkillAssessmentFromApi(data) as T;
-    case "ChatMessageStatus":
+    case 'ChatMessageStatus':
       return convertChatMessageStatusFromApi(data) as T;
-    case "ChatMessageStreaming":
+    case 'ChatMessageStreaming':
       return convertChatMessageStreamingFromApi(data) as T;
-    case "ChatMessageUser":
+    case 'ChatMessageUser':
       return convertChatMessageUserFromApi(data) as T;
-    case "ChatSession":
+    case 'ChatSession':
       return convertChatSessionFromApi(data) as T;
-    case "DataSourceConfiguration":
+    case 'DataSourceConfiguration':
       return convertDataSourceConfigurationFromApi(data) as T;
-    case "Document":
+    case 'Document':
       return convertDocumentFromApi(data) as T;
-    case "DocumentListResponse":
+    case 'DocumentListResponse':
       return convertDocumentListResponseFromApi(data) as T;
-    case "DocumentMessage":
+    case 'DocumentMessage':
       return convertDocumentMessageFromApi(data) as T;
-    case "EditHistory":
+    case 'EditHistory':
       return convertEditHistoryFromApi(data) as T;
-    case "Education":
+    case 'Education':
       return convertEducationFromApi(data) as T;
-    case "Employer":
+    case 'Employer':
       return convertEmployerFromApi(data) as T;
-    case "EmployerResponse":
+    case 'EmployerResponse':
       return convertEmployerResponseFromApi(data) as T;
-    case "Guest":
+    case 'Guest':
       return convertGuestFromApi(data) as T;
-    case "GuestSessionResponse":
+    case 'GuestSessionResponse':
       return convertGuestSessionResponseFromApi(data) as T;
-    case "InterviewFeedback":
+    case 'InterviewFeedback':
       return convertInterviewFeedbackFromApi(data) as T;
-    case "InterviewSchedule":
+    case 'InterviewSchedule':
       return convertInterviewScheduleFromApi(data) as T;
-    case "Job":
+    case 'Job':
       return convertJobFromApi(data) as T;
-    case "JobApplication":
+    case 'JobApplication':
       return convertJobApplicationFromApi(data) as T;
-    case "JobDetails":
+    case 'JobDetails':
       return convertJobDetailsFromApi(data) as T;
-    case "JobListResponse":
+    case 'JobListResponse':
       return convertJobListResponseFromApi(data) as T;
-    case "JobRequirementsMessage":
+    case 'JobRequirementsMessage':
       return convertJobRequirementsMessageFromApi(data) as T;
-    case "JobResponse":
+    case 'JobResponse':
       return convertJobResponseFromApi(data) as T;
-    case "MessageReaction":
+    case 'MessageReaction':
       return convertMessageReactionFromApi(data) as T;
-    case "RAGConfiguration":
+    case 'RAGConfiguration':
       return convertRAGConfigurationFromApi(data) as T;
-    case "RateLimitResult":
+    case 'RateLimitResult':
       return convertRateLimitResultFromApi(data) as T;
-    case "RateLimitStatus":
+    case 'RateLimitStatus':
       return convertRateLimitStatusFromApi(data) as T;
-    case "RefreshToken":
+    case 'RefreshToken':
       return convertRefreshTokenFromApi(data) as T;
-    case "Resume":
+    case 'Resume':
       return convertResumeFromApi(data) as T;
-    case "ResumeMessage":
+    case 'ResumeMessage':
       return convertResumeMessageFromApi(data) as T;
-    case "SkillAssessment":
+    case 'SkillAssessment':
       return convertSkillAssessmentFromApi(data) as T;
-    case "UserActivity":
+    case 'UserActivity':
       return convertUserActivityFromApi(data) as T;
-    case "WorkExperience":
+    case 'WorkExperience':
       return convertWorkExperienceFromApi(data) as T;
     default:
       return data as T;
@@ -2185,7 +2081,7 @@ export function convertFromApi<T>(data: any, modelType: string): T {
  */
 export function convertArrayFromApi<T>(data: any[], modelType: string): T[] {
   if (!data || !Array.isArray(data)) return data;
-  return data.map((item) => convertFromApi<T>(item, modelType));
+  return data.map(item => convertFromApi<T>(item, modelType));
 }
 // ============================
 // Union Types