diff --git a/client/src/components/AppThemeProvider.jsx b/client/src/components/AppThemeProvider.jsx
index be1f45f5..f14dacc8 100644
--- a/client/src/components/AppThemeProvider.jsx
+++ b/client/src/components/AppThemeProvider.jsx
@@ -1,7 +1,5 @@
-import React from "react";
-import { ThemeProvider, createTheme } from "@mui/material";
 import "@fontsource/russo-one";
-import { color, fontWeight } from "@mui/system";
+import { ThemeProvider, createTheme } from "@mui/material";
 
 /**
  * A centralized MUI theme for the web app.
@@ -137,6 +135,10 @@ export const appTheme = createTheme({
           fontWeight: "regular",
           fontFamily: "'Russo One', 'sans-serif'",
         },
+        h6: {
+          fontWeight: "regular",
+          fontFamily: "'Russo One', 'sans-serif'",
+        },
         h7: {
           fontWeight: "regular",
           fontFamily: "'Russo One', 'sans-serif'",
@@ -150,7 +152,6 @@ export const appTheme = createTheme({
         disableRowSelectionOnClick: true,
         autoHeight: false,
         density: "standard",
-        autoHeight: false,
       },
       styleOverrides: {
         root: {
diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index 8a9d3eb4..283ac71e 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -1,40 +1,35 @@
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import Menu from "@mui/material/Menu";
-import { useNavigate, useLocation } from "react-router-dom";
-import MenuItem from "@mui/material/MenuItem";
-import { useContext, useState } from "react";
-import logo from "../assets/WellAiLogoTR.png";
 import {
+  Backdrop,
   Drawer,
+  IconButton,
   List,
   ListItemButton,
-  IconButton,
   Tooltip,
-  ClickAwayListener,
-  Backdrop,
 } from "@mui/material";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import { useContext, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import logo from "../assets/WellAiLogoTR.png";
 import { UserContext } from "../utils/UserContext";
-import PrivacyNotice from "./dialog/PrivacyNotice";
 import DisclaimerPolicy from "./dialog/DisclaimerPolicy";
+import PrivacyNotice from "./dialog/PrivacyNotice";
 
 // Icons
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import DashboardIcon from "@mui/icons-material/Dashboard";
-import RestorePageIcon from "@mui/icons-material/RestorePage";
-import TimelineIcon from "@mui/icons-material/Timeline";
-import HistoryIcon from "@mui/icons-material/History";
-import SettingsIcon from "@mui/icons-material/Settings";
-import LogoutIcon from "@mui/icons-material/Logout";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
 import GroupIcon from "@mui/icons-material/Group";
+import HistoryIcon from "@mui/icons-material/History";
 import HowToRegIcon from "@mui/icons-material/HowToReg";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
+import LogoutIcon from "@mui/icons-material/Logout";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import MenuIcon from "@mui/icons-material/Menu";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import RestorePageIcon from "@mui/icons-material/RestorePage";
+import SettingsIcon from "@mui/icons-material/Settings";
+import TimelineIcon from "@mui/icons-material/Timeline";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
@@ -54,7 +49,7 @@ const NavBar = ({ role }) => {
     // User Pages
     "/user-landing": "Dashboard",
     "/generate-report": "Generate Report",
-    "/ai-health-prediction": "Report History",
+    "/report-history": "Report History",
     "/health-analytics": "Health Analytics",
     "/user-settings": "Settings",
 
@@ -115,9 +110,6 @@ const NavBar = ({ role }) => {
     { icon: <LogoutIcon sx={{ color: "#ff4f4f" }} />, title: "Logout" },
   ];
 
-  // Check if settings menu is open
-  const [openMenu, setOpenMenu] = useState(null);
-
   // User Logout
   async function logout() {
     await fetch(`${API_BASE}/logout`, {
@@ -169,11 +161,9 @@ const NavBar = ({ role }) => {
       navigate("/health-analytics");
     }
     if (page === "Settings") {
-      handleCloseSettings();
       navigate("/user-settings");
     }
     if (page === "Logout") {
-      handleCloseSettings();
       logout();
     }
     if (page === "Users") {
@@ -196,15 +186,6 @@ const NavBar = ({ role }) => {
     }
   }
 
-  function handleOpenSettings(e) {
-    setOpenMenu(e.currentTarget);
-    console.log(openMenu);
-  }
-
-  function handleCloseSettings() {
-    setOpenMenu(null);
-  }
-
   // Navigation Bar for standard user type
   if (role === "standard_user")
     return (
diff --git a/client/src/components/administrator/AccountApprovalTable.js b/client/src/components/administrator/AccountApprovalTable.js
index 9d2ae3b8..92d97590 100644
--- a/client/src/components/administrator/AccountApprovalTable.js
+++ b/client/src/components/administrator/AccountApprovalTable.js
@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
-import { Paper, Button, Box } from "@mui/material";
+import { Box, Button, Paper } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
+import { useEffect, useState } from "react";
 import ConfirmationDialog from "../dialog/confirmationDialog";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -10,7 +10,7 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  *
  * @returns {@mui.material.Box}
  */
-const AccountApprovalTable = ({}) => {
+const AccountApprovalTable = () => {
   const [userData, setUserData] = useState([]); // Stores user data
   const [selectedUser, setselectedUser] = useState(); // Stores the selected user
   const [dialogOpen, setDialogOpen] = useState(false); // Stores dialog state
diff --git a/client/src/components/administrator/AuditLogSearchBar.js b/client/src/components/administrator/AuditLogSearchBar.js
index b98af4f3..f26e9740 100644
--- a/client/src/components/administrator/AuditLogSearchBar.js
+++ b/client/src/components/administrator/AuditLogSearchBar.js
@@ -1,5 +1,5 @@
 import SearchIcon from "@mui/icons-material/Search";
-import { TextField, InputAdornment, Box } from "@mui/material";
+import { Box, InputAdornment, TextField } from "@mui/material";
 import { memo, useEffect, useState } from "react";
 
 /**
diff --git a/client/src/components/administrator/AuditLogTable.js b/client/src/components/administrator/AuditLogTable.js
index 7e4c241e..0fb6e367 100644
--- a/client/src/components/administrator/AuditLogTable.js
+++ b/client/src/components/administrator/AuditLogTable.js
@@ -1,14 +1,14 @@
-import { useCallback, useEffect, useState } from "react";
-import { DataGrid } from "@mui/x-data-grid";
 import {
-  Paper,
   Box,
-  Select,
-  MenuItem,
-  InputLabel,
-  FormControl,
   Divider,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
 } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { useCallback, useEffect, useState } from "react";
 import AuditLogSearchBar from "./AuditLogSearchBar";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -53,8 +53,9 @@ const AuditLogTable = () => {
   const [userEmail, setUserEmail] = useState("");
   const [eventType, setEventType] = useState("");
 
-  const fetchLogs = () => {
+  const fetchLogs = useCallback(() => {
     setLoading(true);
+
     const params = new URLSearchParams({
       skip: paginationModel.page * paginationModel.pageSize,
       limit: paginationModel.pageSize,
@@ -62,12 +63,15 @@ const AuditLogTable = () => {
 
     if (userEmail) params.append("user_email", userEmail);
     if (eventType) params.append("event_type", eventType);
+
     if (sortModel.length > 0) {
       params.append("sort_by", sortModel[0].field);
       params.append("sort_order", sortModel[0].sort || "desc");
     }
 
-    fetch(`${API_BASE}/logs?${params.toString()}`, { credentials: "include" })
+    fetch(`${API_BASE}/logs?${params.toString()}`, {
+      credentials: "include",
+    })
       .then((response) => {
         if (!response.ok) {
           throw new Error(response.status);
@@ -83,10 +87,6 @@ const AuditLogTable = () => {
         console.log(err);
         setLoading(false);
       });
-  };
-
-  useEffect(() => {
-    fetchLogs();
   }, [
     paginationModel.page,
     paginationModel.pageSize,
@@ -95,6 +95,10 @@ const AuditLogTable = () => {
     sortModel,
   ]);
 
+  useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+
   const handleEmailSearchChange = useCallback((value) => {
     setPaginationModel((prev) => ({ ...prev, page: 0 }));
     setUserEmail(value);
diff --git a/client/src/components/administrator/UserManagementTable.js b/client/src/components/administrator/UserManagementTable.js
index 4c28ac26..127045f6 100644
--- a/client/src/components/administrator/UserManagementTable.js
+++ b/client/src/components/administrator/UserManagementTable.js
@@ -1,18 +1,10 @@
-import {
-  Paper,
-  Box,
-  Snackbar,
-  Alert,
-  Stack,
-  Typography,
-  Divider,
-} from "@mui/material";
+import { Alert, Box, Divider, Paper, Snackbar } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
-import { useState, useEffect, useCallback } from "react";
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
 import ConfirmationDialog from "../dialog/confirmationDialog";
 import UserSearchBar from "./UserSearchBar";
 import UserToolBar from "./UserToolBar";
-import * as React from "react";
 
 /**
  * A table listing all the user accounts in the system with tools to search
@@ -52,15 +44,18 @@ const UserManagementTable = () => {
 
   const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
-  const fetchUsers = () => {
+  const fetchUsers = useCallback(() => {
     setLoading(true);
+
     const params = new URLSearchParams({
       skip: paginationModel.page * paginationModel.pageSize,
       limit: paginationModel.pageSize,
     });
+
     if (debouncedSearchQuery) {
       params.append("search", debouncedSearchQuery);
     }
+
     if (selectedClinic) {
       params.append("clinic_id", selectedClinic);
     }
@@ -87,10 +82,6 @@ const UserManagementTable = () => {
         console.log(err);
         setLoading(false);
       });
-  };
-
-  useEffect(() => {
-    fetchUsers();
   }, [
     API_BASE,
     paginationModel.page,
@@ -100,6 +91,10 @@ const UserManagementTable = () => {
     sortModel,
   ]);
 
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
   useEffect(() => {
     setPaginationModel((prev) => ({ ...prev, page: 0 }));
   }, [API_BASE]);
diff --git a/client/src/components/administrator/UserSearchBar.js b/client/src/components/administrator/UserSearchBar.js
index bc72c3ed..595f84e3 100644
--- a/client/src/components/administrator/UserSearchBar.js
+++ b/client/src/components/administrator/UserSearchBar.js
@@ -1,7 +1,7 @@
 import SearchIcon from "@mui/icons-material/Search";
-import { TextField, Box } from "@mui/material";
+import { Box, TextField } from "@mui/material";
 import InputAdornment from "@mui/material/InputAdornment";
-import { useEffect, useState, memo } from "react";
+import { memo, useEffect, useState } from "react";
 
 /**
  * A search bar that is used as an element in the UserManagementTable to
diff --git a/client/src/components/administrator/UserToolBar.js b/client/src/components/administrator/UserToolBar.js
index e57404a7..495d0a69 100644
--- a/client/src/components/administrator/UserToolBar.js
+++ b/client/src/components/administrator/UserToolBar.js
@@ -1,5 +1,5 @@
-import { Box, Select, Button, MenuItem } from "@mui/material";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { Box, Button, MenuItem, Select } from "@mui/material";
 
 /**
  * A tool bar to that provides the controls for modifying and filtering user
diff --git a/client/src/components/administrator/analytics/ActiveMerchantsAnalytics.js b/client/src/components/administrator/analytics/ActiveMerchantsAnalytics.js
index cec30903..37ba18b6 100644
--- a/client/src/components/administrator/analytics/ActiveMerchantsAnalytics.js
+++ b/client/src/components/administrator/analytics/ActiveMerchantsAnalytics.js
@@ -1,12 +1,4 @@
-import {
-  Card,
-  CardContent,
-  Container,
-  Divider,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Card, CardContent, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/components/administrator/analytics/ActiveUsersAnalytics.js b/client/src/components/administrator/analytics/ActiveUsersAnalytics.js
index 782c02bc..079e8ab5 100644
--- a/client/src/components/administrator/analytics/ActiveUsersAnalytics.js
+++ b/client/src/components/administrator/analytics/ActiveUsersAnalytics.js
@@ -1,12 +1,4 @@
-import {
-  Card,
-  CardContent,
-  Container,
-  Divider,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Card, CardContent, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/components/administrator/analytics/AverageRiskSeriesAnalytics.js b/client/src/components/administrator/analytics/AverageRiskSeriesAnalytics.js
index b2351026..f5810a31 100644
--- a/client/src/components/administrator/analytics/AverageRiskSeriesAnalytics.js
+++ b/client/src/components/administrator/analytics/AverageRiskSeriesAnalytics.js
@@ -1,23 +1,21 @@
 import {
   Card,
   CardContent,
-  Container,
-  Paper,
-  Typography,
-  Select,
-  MenuItem,
+  FormControl,
   Grid,
   InputLabel,
-  FormControl,
+  MenuItem,
+  Select,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import { Stack } from "@mui/system";
-import { useEffect, useState } from "react";
-import { LineChart } from "@mui/x-charts/LineChart";
 import Divider from "@mui/material/Divider";
+import { LineChart } from "@mui/x-charts/LineChart";
 import dayjs from "dayjs";
+import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
-const DEFAULT_YEAR = 2026;
 
 /**
  * A card that displays the average progression for stroke, diabetes,
@@ -26,6 +24,9 @@ const DEFAULT_YEAR = 2026;
  * @returns {@mui.material.Card}
  */
 const AverageRiskSeriesAnalytics = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const [availableYears, setAvailableYears] = useState([]);
   const [year, setYear] = useState("");
   const [xAxisData, setXAxisData] = useState([]);
@@ -73,10 +74,6 @@ const AverageRiskSeriesAnalytics = () => {
       });
   }, [year]);
 
-  function extractXAxisData(rawData) {
-    return rawData.map((d) => new Date(d.date));
-  }
-
   return (
     <Card sx={{ p: "5px" }}>
       <CardContent>
@@ -99,7 +96,7 @@ const AverageRiskSeriesAnalytics = () => {
               Average Disease Risk (%)
             </Typography>
           </Grid>
-          <Grid size={2}>
+          <Grid size={isMobile ? 12 : 2}>
             <FormControl>
               <InputLabel id="year-label-id">Year</InputLabel>
               <Select
diff --git a/client/src/components/administrator/analytics/LoginActivityAnalytics.js b/client/src/components/administrator/analytics/LoginActivityAnalytics.js
index 32b816a3..8240027a 100644
--- a/client/src/components/administrator/analytics/LoginActivityAnalytics.js
+++ b/client/src/components/administrator/analytics/LoginActivityAnalytics.js
@@ -1,21 +1,14 @@
-import dayjs from "dayjs";
 import {
   Box,
   Card,
   CardContent,
-  Container,
-  FormControl,
+  Divider,
   Grid,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  Stack,
   Typography,
-  Divider,
 } from "@mui/material";
-import { useEffect, useState } from "react";
 import { BarChart } from "@mui/x-charts";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 const TIMESPAN_IN_DAYS = 7;
diff --git a/client/src/components/administrator/analytics/PendingMerchantsAnalytics.js b/client/src/components/administrator/analytics/PendingMerchantsAnalytics.js
index 0af169c0..8a43387b 100644
--- a/client/src/components/administrator/analytics/PendingMerchantsAnalytics.js
+++ b/client/src/components/administrator/analytics/PendingMerchantsAnalytics.js
@@ -1,14 +1,6 @@
-import {
-  Card,
-  CardContent,
-  Container,
-  Divider,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
-import { useEffect, useState } from "react";
 import ErrorIcon from "@mui/icons-material/Error";
+import { Card, CardContent, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
diff --git a/client/src/components/administrator/analytics/RecentReportsGeneratedAnalytics.js b/client/src/components/administrator/analytics/RecentReportsGeneratedAnalytics.js
index 8981e19b..8ab2e2d9 100644
--- a/client/src/components/administrator/analytics/RecentReportsGeneratedAnalytics.js
+++ b/client/src/components/administrator/analytics/RecentReportsGeneratedAnalytics.js
@@ -1,12 +1,4 @@
-import {
-  Card,
-  CardContent,
-  Container,
-  Divider,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Card, CardContent, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/components/administrator/analytics/UnvalidatedAccountAnalytics.js b/client/src/components/administrator/analytics/UnvalidatedAccountAnalytics.js
index cc5b4d90..68154c49 100644
--- a/client/src/components/administrator/analytics/UnvalidatedAccountAnalytics.js
+++ b/client/src/components/administrator/analytics/UnvalidatedAccountAnalytics.js
@@ -1,12 +1,4 @@
-import {
-  Card,
-  CardContent,
-  Container,
-  Divider,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Card, CardContent, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/components/administrator/analytics/UserAccountAnalytics.js b/client/src/components/administrator/analytics/UserAccountAnalytics.js
index 48d41840..ac4917e9 100644
--- a/client/src/components/administrator/analytics/UserAccountAnalytics.js
+++ b/client/src/components/administrator/analytics/UserAccountAnalytics.js
@@ -1,13 +1,4 @@
-import {
-  Card,
-  CardContent,
-  Container,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Card, CardContent, Grid, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/components/authentication/CreatePatientForm.js b/client/src/components/authentication/CreatePatientForm.js
index ee30e215..d58c925b 100644
--- a/client/src/components/authentication/CreatePatientForm.js
+++ b/client/src/components/authentication/CreatePatientForm.js
@@ -1,23 +1,23 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import {
-  Container,
-  Paper,
-  Stack,
-  TextField,
-  Button,
   Alert,
+  Button,
+  Container,
   Dialog,
-  DialogTitle,
   DialogActions,
+  DialogTitle,
   Divider,
+  FormControl,
+  FormHelperText,
   InputLabel,
   MenuItem,
-  FormControl,
+  Paper,
   Select,
-  FormHelperText,
+  Stack,
+  TextField,
   Typography,
 } from "@mui/material";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 const FULL_NAME_MAX_LENGTH = 255;
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/components/authentication/EmailInputField.js b/client/src/components/authentication/EmailInputField.js
index 6a992aec..509d8aff 100644
--- a/client/src/components/authentication/EmailInputField.js
+++ b/client/src/components/authentication/EmailInputField.js
@@ -1,5 +1,5 @@
-import { useState } from "react";
 import { TextField } from "@mui/material";
+import { useState } from "react";
 import validator from "validator";
 
 /**
diff --git a/client/src/components/authentication/ForgotPasswordForm.js b/client/src/components/authentication/ForgotPasswordForm.js
index a4ca8fa6..35209cf6 100644
--- a/client/src/components/authentication/ForgotPasswordForm.js
+++ b/client/src/components/authentication/ForgotPasswordForm.js
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import ForwardToInboxOutlinedIcon from "@mui/icons-material/ForwardToInboxOutlined";
+import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
 import {
   Box,
   Button,
@@ -9,10 +9,10 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import ForwardToInboxOutlinedIcon from "@mui/icons-material/ForwardToInboxOutlined";
-import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
-import EmailInputField from "./EmailInputField";
+import { useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import Logo from "../../assets/WellAiLogoTR.png";
+import EmailInputField from "./EmailInputField";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
diff --git a/client/src/components/authentication/LoginForm.js b/client/src/components/authentication/LoginForm.js
index 4a2e187b..6699f1f1 100644
--- a/client/src/components/authentication/LoginForm.js
+++ b/client/src/components/authentication/LoginForm.js
@@ -1,20 +1,17 @@
-import { useNavigate, useLocation, Link as RouterLink } from "react-router-dom";
-import { useContext, useState } from "react";
 import {
   Alert,
-  Box,
   Button,
-  Container,
   Card,
   CardContent,
   Divider,
-  Link,
   Stack,
   Typography,
 } from "@mui/material";
+import { useContext, useState } from "react";
+import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
+import { UserContext } from "../../utils/UserContext";
 import EmailInputField from "../authentication/EmailInputField";
 import PasswordInputField from "../authentication/PasswordInputField";
-import { UserContext } from "../../utils/UserContext";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
diff --git a/client/src/components/authentication/PhoneInputField.js b/client/src/components/authentication/PhoneInputField.js
index ce9358ab..b2fb7601 100644
--- a/client/src/components/authentication/PhoneInputField.js
+++ b/client/src/components/authentication/PhoneInputField.js
@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { TextField, FormControl, Grid, Box, Autocomplete } from "@mui/material";
+import { Autocomplete, Box, FormControl, TextField } from "@mui/material";
 import {
   getCountries,
-  parsePhoneNumberFromString,
   getCountryCallingCode,
+  parsePhoneNumberFromString,
 } from "libphonenumber-js";
+import { useState } from "react";
 
 /**
  * An input field that provides basic validation for phone numbers and a
@@ -46,20 +46,6 @@ const PhoneInputField = ({ onChange, value }) => {
       .sort((a, b) => a - b);
   }
 
-  /**
-   * Creates an array containing all unique dialing codes.
-   * @returns Array of possible dialing codes.
-   */
-  function getUniqueDialingCodes() {
-    return Array.from(
-      new Set(
-        getCountries()
-          .map((country) => getCountryCallingCode(country))
-          .sort((a, b) => a - b),
-      ),
-    );
-  }
-
   function updateDialingCode(_, value) {
     if (value !== null) {
       value = value.code;
@@ -109,36 +95,37 @@ const PhoneInputField = ({ onChange, value }) => {
   }
 
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={2}>
-        <Grid size={7}>
-          <FormControl sx={{ width: "100%" }}>
-            <Autocomplete
-              options={getDialingCodeDropdownOptions()}
-              getOptionLabel={(option) => option.label}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label="Dialing Code"
-                  error={!isValidDialingCode}
-                />
-              )}
-              onChange={updateDialingCode}
+    <Box
+      sx={{
+        display: "grid",
+        gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+        gap: 2,
+      }}
+    >
+      <FormControl sx={{ width: "100%" }}>
+        <Autocomplete
+          options={getDialingCodeDropdownOptions()}
+          getOptionLabel={(option) => option.label}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Dialing Code"
+              error={!isValidDialingCode}
             />
-          </FormControl>
-        </Grid>
-        <Grid size={5}>
-          <TextField
-            error={!isValid}
-            id="outlined-input"
-            name="phone"
-            label="Phone"
-            value={value}
-            onChange={updatePhoneNumber}
-            sx={{ width: "100%" }}
-          ></TextField>
-        </Grid>
-      </Grid>
+          )}
+          onChange={updateDialingCode}
+        />
+      </FormControl>
+
+      <TextField
+        error={!isValid}
+        id="outlined-input"
+        name="phone"
+        label="Phone"
+        value={value}
+        onChange={updatePhoneNumber}
+        sx={{ width: "100%" }}
+      />
     </Box>
   );
 };
diff --git a/client/src/components/authentication/RegistrationForm.js b/client/src/components/authentication/RegistrationForm.js
index 748feac8..9a9742c7 100644
--- a/client/src/components/authentication/RegistrationForm.js
+++ b/client/src/components/authentication/RegistrationForm.js
@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { useNavigate, Link as RouterLink } from "react-router-dom";
+import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import {
   Alert,
   Box,
@@ -7,9 +7,9 @@ import {
   Card,
   CardContent,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
-  DialogActions,
   Divider,
   FormControl,
   FormHelperText,
@@ -20,12 +20,12 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
-import PasswordInputField from "../authentication/PasswordInputField";
+import { useEffect, useState } from "react";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import Logo from "../../assets/WellAiLogoTR.png";
 import EmailInputField from "../authentication/EmailInputField";
+import PasswordInputField from "../authentication/PasswordInputField";
 import PhoneInputField from "../authentication/PhoneInputField";
-import Logo from "../../assets/WellAiLogoTR.png";
 
 const FULL_NAME_MAX_LENGTH = 255;
 const ACCOUNT_TYPES = Object.freeze({
diff --git a/client/src/components/authentication/ResetPasswordForm.js b/client/src/components/authentication/ResetPasswordForm.js
index 22e84d10..51f19108 100644
--- a/client/src/components/authentication/ResetPasswordForm.js
+++ b/client/src/components/authentication/ResetPasswordForm.js
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import CheckIcon from "@mui/icons-material/Check";
+import LockResetIcon from "@mui/icons-material/LockReset";
 import {
   Box,
   Button,
@@ -9,9 +10,8 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import { useParams, Link as RouterLink } from "react-router-dom";
-import CheckIcon from "@mui/icons-material/Check";
-import LockResetIcon from "@mui/icons-material/LockReset";
+import { useState } from "react";
+import { Link as RouterLink, useParams } from "react-router-dom";
 import Logo from "../../assets/WellAiLogoTR.png";
 import PasswordInputField from "../authentication/PasswordInputField";
 
diff --git a/client/src/components/dialog/DisclaimerPolicy.js b/client/src/components/dialog/DisclaimerPolicy.js
index e0f3716b..7cd331fa 100644
--- a/client/src/components/dialog/DisclaimerPolicy.js
+++ b/client/src/components/dialog/DisclaimerPolicy.js
@@ -1,10 +1,10 @@
 import {
-  Typography,
+  Box,
+  Button,
   Dialog,
   DialogContent,
   DialogTitle,
-  Box,
-  Button,
+  Typography,
 } from "@mui/material";
 
 /**
diff --git a/client/src/components/dialog/PrivacyNotice.js b/client/src/components/dialog/PrivacyNotice.js
index d28f6c2e..36aa251c 100644
--- a/client/src/components/dialog/PrivacyNotice.js
+++ b/client/src/components/dialog/PrivacyNotice.js
@@ -1,10 +1,10 @@
 import {
-  Typography,
+  Box,
+  Button,
   Dialog,
   DialogContent,
   DialogTitle,
-  Box,
-  Button,
+  Typography,
 } from "@mui/material";
 
 /**
diff --git a/client/src/components/dialog/confirmationDialog.js b/client/src/components/dialog/confirmationDialog.js
index 4084f58c..af768655 100644
--- a/client/src/components/dialog/confirmationDialog.js
+++ b/client/src/components/dialog/confirmationDialog.js
@@ -1,10 +1,10 @@
 import {
+  Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Button,
 } from "@mui/material";
 
 /**
diff --git a/client/src/components/healthReport/BloodReportUpload.js b/client/src/components/healthReport/BloodReportUpload.js
index cecdfffa..97cfb0fb 100644
--- a/client/src/components/healthReport/BloodReportUpload.js
+++ b/client/src/components/healthReport/BloodReportUpload.js
@@ -73,6 +73,10 @@ const BloodReportUpload = ({ onChange }) => {
       variant="contained"
       tabIndex={-1}
       startIcon={<FileUploadIcon />}
+      sx={{
+        justifyContent: "center",
+        textAlign: "center",
+      }}
     >
       Upload Blood Report
       <HiddenInput type="file" onChange={processBloodReport} />
diff --git a/client/src/components/healthReport/GenerateReportForm.js b/client/src/components/healthReport/GenerateReportForm.js
index 65070815..1616864c 100644
--- a/client/src/components/healthReport/GenerateReportForm.js
+++ b/client/src/components/healthReport/GenerateReportForm.js
@@ -1,23 +1,24 @@
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import {
-  Card,
-  CardHeader,
-  CardContent,
   Box,
-  Typography,
-  TextField,
   Button,
+  Card,
+  CardContent,
+  FormControl,
+  FormHelperText,
   InputLabel,
+  ListItemText,
   MenuItem,
   OutlinedInput,
-  FormControl,
-  ListItemText,
   Select,
-  FormHelperText,
+  TextField,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import BloodReportUpload from "./BloodReportUpload";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -30,6 +31,8 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  */
 const GenerateReportForm = () => {
   const navigate = useNavigate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   // Options for each drop down input. This can be modified as required to change the input for each selection
   const healthConditions = [
@@ -68,7 +71,6 @@ const GenerateReportForm = () => {
   };
 
   const [condition, setCondition] = useState([]);
-  const [lifeStyle, setLifeStyle] = useState([]);
 
   const [weight, setWeight] = useState(null);
   const [alertWeightRequired, setAlertWeightRequired] = useState(false);
@@ -134,32 +136,6 @@ const GenerateReportForm = () => {
     setCondition(typeof value === "string" ? value.split(",") : value);
   }
 
-  function handleChangeLifeStyle(e) {
-    const {
-      target: { value },
-    } = e;
-
-    let newValues = typeof value === "string" ? value.split(",") : value;
-    const lastSelected = newValues[newValues.length - 1];
-
-    // Remove former smoker if the user selects they are a current smoker
-    if (
-      lastSelected === "Current Smoker" &&
-      newValues.includes("Former Smoker")
-    ) {
-      newValues = newValues.filter((smoker) => smoker !== "Former Smoker");
-    }
-
-    // Remove current smoker if the user selects they are a former smoker
-    if (
-      lastSelected === "Former Smoker" &&
-      newValues.includes("Current Smoker")
-    ) {
-      newValues = newValues.filter((smoker) => smoker !== "Current Smoker");
-    }
-    setLifeStyle(newValues);
-  }
-
   function updateAge(e) {
     const ageValue = Number(e.target.value);
     const isAgeValid =
@@ -282,7 +258,7 @@ const GenerateReportForm = () => {
 
   // Fills in fields with information found in the blood reports.
   async function readBloodReport(e) {
-    if (e.aveBloodGlucose !== NaN) {
+    if (!isNaN(e.aveBloodGlucose)) {
       // Value needs to be in a specific dictionary format to be validated and set.
       updateBloodGlucose({ target: { value: e.aveBloodGlucose.toString() } });
     }
@@ -376,7 +352,7 @@ const GenerateReportForm = () => {
       }}
     >
       <Typography
-        variant="h2"
+        variant={isMobile ? "h4" : "h2"}
         sx={{
           mb: 2,
           mt: 2,
@@ -414,10 +390,11 @@ const GenerateReportForm = () => {
         <Box component="form" onSubmit={handleSubmit}>
           {/* Age & Physique Section */}
           <Typography
-            variant="h4"
+            variant={isMobile ? "h5" : "h4"}
             sx={{
               mb: 2,
               mt: 2,
+              textAlign: isMobile ? "center" : "left",
             }}
           >
             Age & Physique
@@ -490,10 +467,11 @@ const GenerateReportForm = () => {
           </Box>
           {/* Fitness Section */}
           <Typography
-            variant="h4"
+            variant={isMobile ? "h5" : "h4"}
             sx={{
               mb: 2,
               mt: 2,
+              textAlign: isMobile ? "center" : "left",
             }}
           >
             Health & Fitness
@@ -586,10 +564,11 @@ const GenerateReportForm = () => {
             />
           </Box>
           <Typography
-            variant="h4"
+            variant={isMobile ? "h5" : "h4"}
             sx={{
               mb: 2,
               mt: 2,
+              textAlign: isMobile ? "center" : "left",
             }}
           >
             Life Style
@@ -718,7 +697,7 @@ const GenerateReportForm = () => {
             </FormControl>
           </Box>
 
-          <Box sx={{ display: "flex", justifyContent: "end" }}>
+          <Box sx={{ display: "flex", justifyContent: "end", mt: 3 }}>
             <Button
               loading={isLoading}
               variant="contained"
diff --git a/client/src/components/healthReport/MerchantReportForm.js b/client/src/components/healthReport/MerchantReportForm.js
index 21512891..7aa7e4ad 100644
--- a/client/src/components/healthReport/MerchantReportForm.js
+++ b/client/src/components/healthReport/MerchantReportForm.js
@@ -1,27 +1,28 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-import { useNavigate, useLocation } from "react-router-dom";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
 import {
+  Autocomplete,
+  Box,
+  Button,
   Card,
-  CardHeader,
   CardContent,
-  Box,
-  Typography,
   TextField,
-  Button,
-  Autocomplete,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
 import ListItemText from "@mui/material/ListItemText";
+import MenuItem from "@mui/material/MenuItem";
+import OutlinedInput from "@mui/material/OutlinedInput";
 import Select from "@mui/material/Select";
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import FormHelperText from "@mui/material/FormHelperText";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
 import { styled } from "@mui/material/styles";
+import { useLocation, useNavigate } from "react-router-dom";
 import BloodReportUpload from "./BloodReportUpload";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -35,6 +36,10 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 const MerchantReportForm = () => {
   const navigate = useNavigate();
   const location = useLocation();
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const pageData = location.state;
   const defaultSelectedPatient =
     pageData && pageData["patientID"] ? pageData["patientID"] : null;
@@ -53,9 +58,8 @@ const MerchantReportForm = () => {
     "High Cholesterol",
     "Stroke",
   ];
-  // List of lifestyle choices
-  const lifeStyleChoices = ["Drink Alcohol", "Current Smoker", "Former Smoker"];
 
+  // List of lifestyle choices
   const smokerOptions = ["No", "Yes", "Former smoker"];
 
   const maritalStatusOptions = ["Single", "Married", "Widow", "Divorced"];
@@ -83,7 +87,6 @@ const MerchantReportForm = () => {
   };
   // List variables from multiselect lists
   const [condition, setCondition] = useState([]);
-  const [lifeStyle, setLifeStyle] = useState([]);
 
   // Form Variables and alerts for input validation
   const [weight, setWeight] = useState(null);
@@ -130,13 +133,13 @@ const MerchantReportForm = () => {
         setPatientList(data);
         if (defaultSelectedPatient) {
           const name = data.find(
-            (item) => item.patientId == defaultSelectedPatient,
+            (item) => item.patientId === defaultSelectedPatient,
           );
           setPatientName(name.name);
         }
       })
       .catch((err) => console.log(err));
-  }, []);
+  }, [defaultSelectedPatient]);
 
   function handleChangeCondition(e) {
     const {
@@ -176,32 +179,6 @@ const MerchantReportForm = () => {
     fetchPatientData();
   }, [selectedPatient]);
 
-  function handleChangeLifeStyle(e) {
-    const {
-      target: { value },
-    } = e;
-
-    let newValues = typeof value === "string" ? value.split(",") : value;
-    const lastSelected = newValues[newValues.length - 1];
-
-    // Remove former smoker if the user selects they are a current smoker
-    if (
-      lastSelected === "Current Smoker" &&
-      newValues.includes("Former Smoker")
-    ) {
-      newValues = newValues.filter((smoker) => smoker !== "Former Smoker");
-    }
-
-    // Remove current smoker if the user selects they are a former smoker
-    if (
-      lastSelected === "Former Smoker" &&
-      newValues.includes("Current Smoker")
-    ) {
-      newValues = newValues.filter((smoker) => smoker !== "Current Smoker");
-    }
-    setLifeStyle(newValues);
-  }
-
   function updateAge(e) {
     const ageValue = Number(e.target.value);
     const isAgeValid =
@@ -291,48 +268,40 @@ const MerchantReportForm = () => {
 
   function isAllInputsValid() {
     return (
-      weight !== null &&
-      weight.isValid &&
-      age !== null &&
-      age.isValid &&
-      height !== null &&
-      height.isValid &&
-      gender !== null &&
-      bloodGlucose !== null &&
-      bloodGlucose.isValid &&
-      apLow !== null &&
-      apLow.isValid &&
-      apHigh !== null &&
-      apHigh.isValid &&
-      maritalStatus !== "" &&
-      workingStatus !== "" &&
-      race !== "" &&
-      smoker !== "" &&
-      alcohol !== "" &&
-      selectedPatient !== null
+      weight?.isValid &&
+      age?.isValid &&
+      height?.isValid &&
+      gender != null &&
+      bloodGlucose?.isValid &&
+      apLow?.isValid &&
+      apHigh?.isValid &&
+      maritalStatus &&
+      workingStatus &&
+      race &&
+      smoker &&
+      alcohol &&
+      selectedPatient != null
     );
   }
   function updateAllInputFieldAlerts() {
-    setAlertWeightRequired(weight === null || !weight.isValid);
-    setAlertAgeRequired(age === null || !age.isValid);
-    setAlertHeightRequired(height === null || !height.isValid);
-    setAlertGenderRequired(gender === null);
-    setAlertBloodGlucoseRequired(
-      bloodGlucose === null || !bloodGlucose.isValid,
-    );
-    setAlertApLowRequired(apLow === null || !apLow.isValid);
-    setAlertApHighRequired(apHigh === null || !apHigh.isValid);
-    setAlertMaritalStatusRequired(maritalStatus === "");
-    setAlertWorkingStatusRequired(workingStatus === "");
-    setAlertPatientRequired(selectedPatient === null);
-    setAlertSmokerRequired(smoker === "");
-    setAlertAlcoholRequired(alcohol === "");
-    setAlertRaceRequired(race === "");
+    setAlertWeightRequired(!weight?.isValid);
+    setAlertAgeRequired(!age?.isValid);
+    setAlertHeightRequired(!height?.isValid);
+    setAlertGenderRequired(!gender);
+    setAlertBloodGlucoseRequired(!bloodGlucose?.isValid);
+    setAlertApLowRequired(!apLow?.isValid);
+    setAlertApHighRequired(!apHigh?.isValid);
+    setAlertMaritalStatusRequired(!maritalStatus);
+    setAlertWorkingStatusRequired(!workingStatus);
+    setAlertPatientRequired(!selectedPatient);
+    setAlertSmokerRequired(!smoker);
+    setAlertAlcoholRequired(!alcohol);
+    setAlertRaceRequired(!race);
   }
 
   // Fills in fields with information found in the blood reports.
   async function readBloodReport(e) {
-    if (e.aveBloodGlucose !== NaN) {
+    if (!isNaN(e.aveBloodGlucose)) {
       // Value needs to be in a specific dictionary format to be validated and set.
       updateBloodGlucose({ target: { value: e.aveBloodGlucose.toString() } });
     }
@@ -468,7 +437,7 @@ const MerchantReportForm = () => {
       }}
     >
       <Typography
-        variant="h2"
+        variant={isMobile ? "h4" : "h2"}
         sx={{
           mb: 2,
           mt: 2,
@@ -568,10 +537,11 @@ const MerchantReportForm = () => {
           </Box>
           {/* Age & Physique Section */}
           <Typography
-            variant="h4"
+            variant={isMobile ? "h5" : "h4"}
             sx={{
               mb: 2,
               mt: 2,
+              textAlign: isMobile ? "center" : "left",
             }}
           >
             Age & Physique
@@ -644,10 +614,11 @@ const MerchantReportForm = () => {
           </Box>
           {/* Fitness Section */}
           <Typography
-            variant="h4"
+            variant={isMobile ? "h5" : "h4"}
             sx={{
               mb: 2,
               mt: 2,
+              textAlign: isMobile ? "center" : "left",
             }}
           >
             Health & Fitness
@@ -743,10 +714,11 @@ const MerchantReportForm = () => {
           {/*Multi-select LifeStyle Habits */}
 
           <Typography
-            variant="h4"
+            variant={isMobile ? "h5" : "h4"}
             sx={{
               mb: 2,
               mt: 2,
+              textAlign: isMobile ? "center" : "left",
             }}
           >
             Life Style
diff --git a/client/src/components/healthReport/ReportTemplate.js b/client/src/components/healthReport/ReportTemplate.js
index c7a7dc2b..45e397b6 100644
--- a/client/src/components/healthReport/ReportTemplate.js
+++ b/client/src/components/healthReport/ReportTemplate.js
@@ -1,14 +1,10 @@
 import {
   Box,
-  Typography,
-  List,
-  ListItem,
-  ListItemText,
-  Divider,
   Card,
   Paper,
-  useTheme,
+  Typography,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
 
 /**
@@ -154,7 +150,9 @@ const ReportTemplate = ({ report, date }) => {
             mx: "auto",
           }}
         >
-          Generated on: {new Date(date).toLocaleDateString("en-AU")}{" at "}{`${new Date(date).toLocaleTimeString("en-AU")}`}
+          Generated on: {new Date(date).toLocaleDateString("en-AU")}
+          {" at "}
+          {`${new Date(date).toLocaleTimeString("en-AU")}`}
         </Typography>
       </Paper>
 
@@ -265,7 +263,7 @@ const ReportTemplate = ({ report, date }) => {
         }}
       >
         <Typography
-          variant={isMobile ? "h5" : "h3"}
+          variant={isMobile ? "h6" : "h3"}
           sx={{
             mx: 2,
             mt: 3,
@@ -281,10 +279,9 @@ const ReportTemplate = ({ report, date }) => {
             p: 2,
           }}
         >
-
           {/* Exercise */}
           <Box>
-            <Typography variant={isMobile ? "h5" : "h4"} sx={{ mb: 1 }}>
+            <Typography variant={isMobile ? "h6" : "h4"} sx={{ mb: 1 }}>
               Exercise Recommendations
             </Typography>
             <Typography variant="body1">
@@ -295,7 +292,7 @@ const ReportTemplate = ({ report, date }) => {
 
           {/* Diet */}
           <Box>
-            <Typography variant={isMobile ? "h5" : "h4"} sx={{ mb: 1 }}>
+            <Typography variant={isMobile ? "h6" : "h4"} sx={{ mb: 1 }}>
               Diet Recommendations
             </Typography>
             <Typography variant="body1">
@@ -305,7 +302,7 @@ const ReportTemplate = ({ report, date }) => {
 
           {/* Lifestyle */}
           <Box>
-            <Typography variant={isMobile ? "h5" : "h4"} sx={{ mb: 1 }}>
+            <Typography variant={isMobile ? "h6" : "h4"} sx={{ mb: 1 }}>
               Lifestyle Recommendations
             </Typography>
             <Typography variant="body1">
@@ -316,7 +313,7 @@ const ReportTemplate = ({ report, date }) => {
 
           {/* Diet to Avoid */}
           <Box>
-            <Typography variant={isMobile ? "h5" : "h4"} sx={{ mb: 1 }}>
+            <Typography variant={isMobile ? "h6" : "h4"} sx={{ mb: 1 }}>
               Diet to Avoid
             </Typography>
             <Typography variant="body1">
diff --git a/client/src/components/patientAccessRequest/AcceptRequestForm.js b/client/src/components/patientAccessRequest/AcceptRequestForm.js
index 84cc0337..c3213736 100644
--- a/client/src/components/patientAccessRequest/AcceptRequestForm.js
+++ b/client/src/components/patientAccessRequest/AcceptRequestForm.js
@@ -1,17 +1,16 @@
-import { useState, useEffect } from "react";
-import { useParams, Link as RouterLink } from "react-router-dom";
 import {
   Box,
-  Container,
-  Stack,
   Button,
-  Typography,
-  Link,
+  Card,
+  Divider,
   List,
   ListItem,
   ListItemText,
-  Divider,
+  Stack,
+  Typography,
 } from "@mui/material";
+import { useState } from "react";
+import { Link as RouterLink, useParams } from "react-router-dom";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
@@ -56,14 +55,11 @@ const AcceptRequestForm = () => {
   }
 
   return (
-    <Container
+    <Card
       sx={{
-        borderRadius: { xs: 0, sm: 2 },
-        padding: "40px",
         alignItems: "center",
-        boxShadow: 24,
-        backgroundColor: "#ffffff",
         width: { xs: "auto", sm: "500px" },
+        minHeight: { xs: "100vh", sm: "auto" },
         flexGrow: { xs: 1, sm: 0 },
       }}
     >
@@ -77,7 +73,7 @@ const AcceptRequestForm = () => {
           style={{ justifyContent: "center" }}
         >
           <Stack direction="column" spacing={{ xs: 2 }}>
-            <Typography variant="h4" fontWeight={600}>
+            <Typography variant="h4" align="center">
               Partner Access Request
             </Typography>
             <Typography align="start">
@@ -159,7 +155,7 @@ const AcceptRequestForm = () => {
           </Button>
         </Stack>
       )}
-    </Container>
+    </Card>
   );
 };
 
diff --git a/client/src/components/patientAccessRequest/RequestPatientAccessForm.js b/client/src/components/patientAccessRequest/RequestPatientAccessForm.js
index 8c8e2dc0..e417a84a 100644
--- a/client/src/components/patientAccessRequest/RequestPatientAccessForm.js
+++ b/client/src/components/patientAccessRequest/RequestPatientAccessForm.js
@@ -1,14 +1,6 @@
+import { Box, Button, Card, Divider, Stack, Typography } from "@mui/material";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import {
-  Box,
-  Container,
-  Stack,
-  Button,
-  Typography,
-  Link,
-  Divider,
-} from "@mui/material";
 import EmailInputField from "../authentication/EmailInputField";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -65,14 +57,11 @@ const RequestPatientAccessForm = () => {
   }
 
   return (
-    <Container
+    <Card
       sx={{
-        borderRadius: { xs: 0, sm: 2 },
-        padding: "40px",
         alignItems: "center",
-        boxShadow: 24,
-        backgroundColor: "#ffffff",
         width: { xs: "auto", sm: "500px" },
+        minHeight: { xs: "100vh", sm: "auto" },
         flexGrow: { xs: 1, sm: 0 },
       }}
     >
@@ -86,8 +75,10 @@ const RequestPatientAccessForm = () => {
           style={{ justifyContent: "center" }}
         >
           <Stack direction="column" spacing={{ xs: 2 }}>
-            <h1>Request Access to Existing Patient Record</h1>
-            <Typography align="start" style={{ color: "#777777" }}>
+            <Typography variant="h4" align="center">
+              Request Access to Existing Patient Record{" "}
+            </Typography>
+            <Typography variant="subtle" align="start">
               Enter the email of the patient you are requesting access for.
             </Typography>
             {errorMessage && (
@@ -156,7 +147,7 @@ const RequestPatientAccessForm = () => {
           </Button>
         </Stack>
       )}
-    </Container>
+    </Card>
   );
 };
 
diff --git a/client/src/index.js b/client/src/index.js
index f3f78875..c4084df1 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import App from "./App";
+
 import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
diff --git a/client/src/routes/admin/AdministratorApproval.js b/client/src/routes/admin/AdministratorApproval.js
index e7bf8030..1ef24148 100644
--- a/client/src/routes/admin/AdministratorApproval.js
+++ b/client/src/routes/admin/AdministratorApproval.js
@@ -1,5 +1,5 @@
+import { Box, Container, Divider, Stack, Typography } from "@mui/material";
 import AccountApprovalTable from "../../components/administrator/AccountApprovalTable";
-import { Box, Typography, Divider, Stack, Container } from "@mui/material";
 
 /**
  * A route that displays the merchant approval table where administrators
diff --git a/client/src/routes/admin/AdministratorDashboard.js b/client/src/routes/admin/AdministratorDashboard.js
index c2e1c8e4..28314012 100644
--- a/client/src/routes/admin/AdministratorDashboard.js
+++ b/client/src/routes/admin/AdministratorDashboard.js
@@ -1,15 +1,11 @@
 import {
   Box,
-  Card,
-  CardContent,
   Container,
   Divider,
   Grid,
   Stack,
   Typography,
 } from "@mui/material";
-import { BarChart } from "@mui/x-charts/BarChart";
-import { useEffect, useState } from "react";
 import ActiveMerchantsAnalytics from "../../components/administrator/analytics/ActiveMerchantsAnalytics";
 import ActiveUsersAnalytics from "../../components/administrator/analytics/ActiveUsersAnalytics";
 import AverageRiskSeriesAnalytics from "../../components/administrator/analytics/AverageRiskSeriesAnalytics";
@@ -19,8 +15,6 @@ import RecentReportsGeneratedAnalytics from "../../components/administrator/anal
 import UnvalidatedAccountAnalytics from "../../components/administrator/analytics/UnvalidatedAccountAnalytics";
 import UserAccountAnalytics from "../../components/administrator/analytics/UserAccountAnalytics";
 
-const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
-
 /**
  * A route that displays a collection of metrics describing the current
  * state of the system, it's users, and the health reports generated.
diff --git a/client/src/routes/admin/AdministratorLogs.js b/client/src/routes/admin/AdministratorLogs.js
index 2a58ecc7..3d5d68f4 100644
--- a/client/src/routes/admin/AdministratorLogs.js
+++ b/client/src/routes/admin/AdministratorLogs.js
@@ -1,6 +1,5 @@
+import { Box, Container, Divider, Stack, Typography } from "@mui/material";
 import AuditLogTable from "../../components/administrator/AuditLogTable";
-import { Box, Typography, Divider, Stack, Container } from "@mui/material";
-import AdministratorApproval from "./AdministratorApproval";
 
 /**
  * A route that provides tools to filter through and audit the systems logs.
diff --git a/client/src/routes/admin/AdministratorUsers.js b/client/src/routes/admin/AdministratorUsers.js
index 45e469e9..bf233254 100644
--- a/client/src/routes/admin/AdministratorUsers.js
+++ b/client/src/routes/admin/AdministratorUsers.js
@@ -1,5 +1,5 @@
+import { Box, Container, Divider, Stack, Typography } from "@mui/material";
 import UserManagementTable from "../../components/administrator/UserManagementTable";
-import { Box, Typography, Divider, Stack, Container } from "@mui/material";
 
 /**
  * A route that provides tools to manage, filter and search through the users of the
diff --git a/client/src/routes/merchant/MerchantGenerateReport.js b/client/src/routes/merchant/MerchantGenerateReport.js
index f9dc16a4..8af05ac5 100644
--- a/client/src/routes/merchant/MerchantGenerateReport.js
+++ b/client/src/routes/merchant/MerchantGenerateReport.js
@@ -1,6 +1,5 @@
-import { Container, ButtonGroup, Button, Box } from "@mui/material";
+import { Box } from "@mui/material";
 import MerchantReportForm from "../../components/healthReport/MerchantReportForm";
-import { useState } from "react";
 
 /**
  * A page that provides the health report form for merchants to generate
@@ -8,9 +7,7 @@ import { useState } from "react";
  *
  * @returns {@mui.material.Container}
  */
-const MerchantGenerateReport = ({}) => {
-  const [page, setPage] = useState("manual");
-
+const MerchantGenerateReport = () => {
   return (
     <Box
       sx={{
diff --git a/client/src/routes/merchant/MerchantLanding.js b/client/src/routes/merchant/MerchantLanding.js
index 045f1584..66442eb5 100644
--- a/client/src/routes/merchant/MerchantLanding.js
+++ b/client/src/routes/merchant/MerchantLanding.js
@@ -1,5 +1,11 @@
-import { Box, Typography, Card, CardContent } from "@mui/material";
-import { grid } from "@mui/system";
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import { useEffect, useState } from "react";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -13,18 +19,9 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  */
 const MerchantLanding = () => {
   const [data, setData] = useState({});
-  const [name, setName] = useState("");
 
-  useEffect(() => {
-    fetch(`${API_BASE}/user/me`, {
-      method: "GET",
-      credentials: "include",
-    })
-      .then((response) => response.json())
-      .then((user) => {
-        setName(user.name);
-      });
-  }, []);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   useEffect(() => {
     fetch(`${API_BASE}/merchant-dashboard`, {
@@ -56,14 +53,6 @@ const MerchantLanding = () => {
     },
   ];
 
-  function relativeTime(date) {
-    const diff = (Date.now() - new Date(date)) / 1000;
-    if (diff < 60) return "just now";
-    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-    return `${Math.floor(diff / 86400)}d ago`;
-  }
-
   return (
     <Box
       sx={{
@@ -77,7 +66,9 @@ const MerchantLanding = () => {
       }}
     >
       <Box sx={{ borderBottom: "1px solid #d6d6d6", mb: 4, py: 3 }}>
-        <Typography variant="h2">Patient Overview</Typography>
+        <Typography variant={isMobile ? "h4" : "h2"}>
+          Patient Overview
+        </Typography>
       </Box>
 
       {/* Stat cards */}
@@ -115,7 +106,10 @@ const MerchantLanding = () => {
       >
         {/* Condition risk graph */}
         <Card sx={{ flex: 1, borderRadius: "10px", p: 2 }}>
-          <Typography variant="h4" sx={{ mb: 2 }}>
+          <Typography
+            variant={isMobile ? "h5" : "h4"}
+            sx={{ mb: 2, textAlign: isMobile ? "center" : "left" }}
+          >
             Risk Distribution
           </Typography>
           {["stroke", "cvd", "diabetes"].map((condition) => {
@@ -194,7 +188,10 @@ const MerchantLanding = () => {
             p: 2,
           }}
         >
-          <Typography variant="h4" sx={{ mb: 2 }}>
+          <Typography
+            variant={isMobile ? "h5" : "h4"}
+            sx={{ mb: 2, textAlign: isMobile ? "center" : "left" }}
+          >
             Report Activity
           </Typography>
           <Box sx={{ maxHeight: 380, overflowY: "auto" }}>
diff --git a/client/src/routes/merchant/MerchantReports.js b/client/src/routes/merchant/MerchantReports.js
index 8f4a19fa..fd61a682 100644
--- a/client/src/routes/merchant/MerchantReports.js
+++ b/client/src/routes/merchant/MerchantReports.js
@@ -1,32 +1,28 @@
-import ReportTemplate from "../../components/healthReport/ReportTemplate";
-import DownloadReportButton from "../../components/healthReport/DownloadReportButton";
 import CloseIcon from "@mui/icons-material/Close";
-import IconButton from "@mui/material/IconButton";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import ConfirmationDialog from "../../components/dialog/confirmationDialog";
-import PDFHealthChart from "../../components/healthReport/PDFHealthChart";
-import React, { useState, useEffect, useRef } from "react";
-import { useLocation } from "react-router-dom";
 import {
+  Autocomplete,
   Box,
-  Typography,
+  Button,
+  FormControl,
+  InputLabel,
   List,
   ListItem,
   ListItemText,
   MenuItem,
-  FormControl,
-  InputLabel,
+  Paper,
   Select,
-  Button,
-  Autocomplete,
   TextField,
-  Drawer,
-  Stack,
-  useTheme,
+  Typography,
   useMediaQuery,
-  Paper,
+  useTheme,
 } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import PDFHealthChart from "../../components/healthReport/PDFHealthChart";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useLocation } from "react-router-dom";
+import ConfirmationDialog from "../../components/dialog/confirmationDialog";
+import DownloadReportButton from "../../components/healthReport/DownloadReportButton";
+import ReportTemplate from "../../components/healthReport/ReportTemplate";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
@@ -36,7 +32,7 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  *
  * @returns {@mui.material.Box}
  */
-const MerchantReports = ({}) => {
+const MerchantReports = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const location = useLocation();
@@ -56,7 +52,7 @@ const MerchantReports = ({}) => {
   const chartRef = useRef(null);
   const [chartData, setChartData] = useState([]);
 
-  function fetchMerchantReports() {
+  const fetchMerchantReports = useCallback(() => {
     fetch(`${API_BASE}/merchants/reports`, {
       credentials: "include",
     })
@@ -69,9 +65,11 @@ const MerchantReports = ({}) => {
       .then((data) => {
         if (data.length > 0) {
           setReports(data);
+
           // Creates an array of distinct patient names
           let distinctPatientNames = [...new Set(data.map((r) => r.name))];
           setPatients(distinctPatientNames);
+
           setSelectedPatient(defaultSelectedPatientId);
           setSelectedDate(null);
 
@@ -79,6 +77,7 @@ const MerchantReports = ({}) => {
             const selectedReports = data.filter(
               (r) => r.name === defaultSelectedPatientId,
             );
+
             setReportDates(selectedReports);
             setSelectedDate(selectedReports[0]); // Select first report
           }
@@ -86,13 +85,13 @@ const MerchantReports = ({}) => {
       })
       .catch((err) => {
         console.log(err);
-      }, []);
-  }
+      });
+  }, [defaultSelectedPatientId]);
 
   // Fetch the merchant reports
   useEffect(() => {
     fetchMerchantReports();
-  }, []);
+  }, [fetchMerchantReports]);
 
   // Fetch report data
   useEffect(() => {
@@ -141,12 +140,15 @@ const MerchantReports = ({}) => {
     if (!selectedDate) {
       return;
     }
-    fetch(`${API_BASE}/health-analytics?health_data_id=${selectedDate.healthDataId}`, {
-      credentials: "include",
-    })
-    .then((r) => r.json())
-    .then(setChartData)
-    .catch(console.error);
+    fetch(
+      `${API_BASE}/health-analytics?health_data_id=${selectedDate.healthDataId}`,
+      {
+        credentials: "include",
+      },
+    )
+      .then((r) => r.json())
+      .then(setChartData)
+      .catch(console.error);
   }, [selectedDate]);
 
   // Extract and sort month and years for drop down.
@@ -187,15 +189,7 @@ const MerchantReports = ({}) => {
     setReportDates(selectedReports);
     setSelectedDate(selectedReports[0]);
   }
-  const [isOpen, setIsOpen] = useState(false);
 
-  function openBar() {
-    if (isOpen === true) {
-      setIsOpen(false);
-      return;
-    }
-    setIsOpen(true);
-  }
   return (
     <Box
       sx={{
@@ -205,8 +199,18 @@ const MerchantReports = ({}) => {
         mt: "80px",
       }}
     >
-      <div style={{ position: "fixed", top: -9999, left: -9999, pointerEvents: "none", overflow: "hidden", width: 0, height: 0 }}>
-          <PDFHealthChart ref={chartRef} healthData={chartData} />
+      <div
+        style={{
+          position: "fixed",
+          top: -9999,
+          left: -9999,
+          pointerEvents: "none",
+          overflow: "hidden",
+          width: 0,
+          height: 0,
+        }}
+      >
+        <PDFHealthChart ref={chartRef} healthData={chartData} />
       </div>
 
       <Box
@@ -321,7 +325,7 @@ const MerchantReports = ({}) => {
                         variant="h7"
                         sx={{
                           fontWeight:
-                            selectedDate.healthDataId === item.healthDataId
+                            selectedDate?.healthDataId === item.healthDataId
                               ? 400
                               : 0,
                         }}
diff --git a/client/src/routes/merchant/PatientDetails.js b/client/src/routes/merchant/PatientDetails.js
index 4eb54050..68936e77 100644
--- a/client/src/routes/merchant/PatientDetails.js
+++ b/client/src/routes/merchant/PatientDetails.js
@@ -1,15 +1,16 @@
 import {
   Box,
-  Typography,
+  Button,
   Card,
   CardContent,
-  Button,
-  useTheme,
+  Divider,
+  Typography,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
 import { BarChart } from "@mui/x-charts/BarChart";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 
 // AppBar height: 56px toolbar + 2px border on mobile (xs), 64px + 2px on desktop (sm+)
 const APPBAR_HEIGHT = { xs: "58px", sm: "66px" };
@@ -44,7 +45,7 @@ const PatientDetails = () => {
       .then((data) => {
         setPatientData(data);
       });
-  }, []);
+  }, [API_BASE, patientID, navigate]);
 
   const chartData = (patientData?.risks?.dates ?? [])
     .map((date, i) => ({
@@ -81,7 +82,7 @@ const PatientDetails = () => {
       >
         <Card sx={{ p: 2 }}>
           <Typography
-            variant="h3"
+            variant={isMobile ? "h4" : "h3"}
             sx={{
               textAlign: "center",
               mb: 2,
@@ -89,97 +90,103 @@ const PatientDetails = () => {
           >
             Patient Details
           </Typography>
-          <hr />
+
           <Box
             sx={{
               display: "grid",
               gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 3,
+              p: 3,
             }}
           >
-            <Typography sx={{ mb: 1 }}>
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Given Name:
-              </Box>
-              {" " + patientData?.patientInfo?.givenNames}
+              </Box>{" "}
+              {patientData?.patientInfo?.givenNames}
             </Typography>
 
-            <Typography sx={{ mb: 1 }}>
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Last Name:
-              </Box>
-              {" " + patientData?.patientInfo?.familyName}
+              </Box>{" "}
+              {patientData?.patientInfo?.familyName}
             </Typography>
 
-            <Typography sx={{ mb: 1 }}>
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Date Of Birth:
-              </Box>
-              {" " + patientData?.patientInfo?.dateOfBirth}
+              </Box>{" "}
+              {patientData?.patientInfo?.dateOfBirth}
             </Typography>
 
-            <Typography sx={{ mb: 1 }}>
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Age:
-              </Box>
-              {" " + patientData?.patientInfo?.age}
+              </Box>{" "}
+              {patientData?.patientInfo?.age}
             </Typography>
 
-            <Typography sx={{ mb: 1 }}>
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Gender:
               </Box>{" "}
-              {patientData?.patientInfo?.gender == 1 ? "Male" : "Female"}
+              {patientData?.patientInfo?.gender === 1 ? "Male" : "Female"}
             </Typography>
-            <Typography sx={{ mb: 1 }}>
+
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Weight:
-              </Box>
-              {" " + patientData?.patientInfo?.weight} kg
+              </Box>{" "}
+              {patientData?.patientInfo?.weight} kg
             </Typography>
-            <Typography sx={{ mb: 1 }}>
+
+            <Typography sx={{ borderBottom: "1px solid #E0E0E0", pb: 1.5 }}>
               <Box
                 component="span"
-                sx={{ color: "primary.main", fontWeight: 600 }}
+                sx={{ color: "#888", textTransform: "uppercase", fontSize: 12 }}
               >
                 Height:
-              </Box>
-              {" " + patientData?.patientInfo?.height} cm
+              </Box>{" "}
+              {patientData?.patientInfo?.height} cm
             </Typography>
           </Box>
-          <hr />
-          <Typography variant="h5" sx={{ mb: 1 }}>
-            It has been {patientData?.days} days since{" "}
-            {patientData?.patientInfo?.givenNames}'s last health report
-          </Typography>
+          <Divider sx={{ borderColor: "#E0E0E0" }} />
+          <Box sx={{ ml: 2 }}>
+            <Typography variant={isMobile ? "h6" : "h5"} sx={{ mt: 2 }}>
+              It has been {patientData?.days} days since{" "}
+              {patientData?.patientInfo?.givenNames}'s last health report
+            </Typography>
 
-          <Button
-            variant="contained"
-            onClick={(e) =>
-              navigate("/merchant-generate-report", {
-                state: { patientID: patientID },
-              })
-            }
-          >
-            Generate Report
-          </Button>
+            <Button
+              variant="contained"
+              onClick={(e) =>
+                navigate("/merchant-generate-report", {
+                  state: { patientID: patientID },
+                })
+              }
+            >
+              Generate Report
+            </Button>
+          </Box>
         </Card>
       </Box>
 
@@ -206,7 +213,7 @@ const PatientDetails = () => {
             sx={{
               display: "flex",
               gap: { xs: 1, sm: 2 },
-              flexDirection: "row",
+              flexDirection: isMobile ? "column" : "row",
             }}
           >
             {["stroke", "diabetes", "cvd"].map((key) => (
@@ -231,7 +238,13 @@ const PatientDetails = () => {
                   >
                     {key.toUpperCase()}
                   </Typography>
-                  <Typography sx={{ fontSize: { xs: "1.4rem", sm: "2.125rem" }, fontWeight: 400, lineHeight: 1.2 }}>
+                  <Typography
+                    sx={{
+                      fontSize: { xs: "1.4rem", sm: "2.125rem" },
+                      fontWeight: 400,
+                      lineHeight: 1.2,
+                    }}
+                  >
                     {patientData?.risks?.[key]?.[0] ?? 0}%
                   </Typography>
                   <Box
@@ -293,7 +306,7 @@ const PatientDetails = () => {
               height: { xs: "auto", md: "95%" },
             }}
           >
-            <Typography variant="h5" sx={{ mb: 2 }}>
+            <Typography variant={isMobile ? "h6" : "h5"} sx={{ mb: 2 }}>
               Latest Recommendations
             </Typography>
             <Box>
@@ -311,7 +324,10 @@ const PatientDetails = () => {
                             : "none",
                       }}
                     >
-                      <Typography variant="h6" sx={{ mb: 1 }}>
+                      <Typography
+                        variant={isMobile ? "h7" : "h6"}
+                        sx={{ mb: 1 }}
+                      >
                         {key.toUpperCase()}
                       </Typography>
                       <Typography sx={{ whiteSpace: "pre-line" }}>
diff --git a/client/src/routes/merchant/PatientManagement.js b/client/src/routes/merchant/PatientManagement.js
index fbf6a874..5604a512 100644
--- a/client/src/routes/merchant/PatientManagement.js
+++ b/client/src/routes/merchant/PatientManagement.js
@@ -1,25 +1,27 @@
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import ConfirmationDialog from "../../components/dialog/confirmationDialog";
-import InputAdornment from "@mui/material/InputAdornment";
 import {
   Box,
-  Typography,
   Button,
-  Paper,
-  TextField,
+  Divider,
   Menu,
   MenuItem,
-  Divider,
+  Paper,
   Stack,
+  TextField,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
+import InputAdornment from "@mui/material/InputAdornment";
 import { DataGrid } from "@mui/x-data-grid";
+import { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import ConfirmationDialog from "../../components/dialog/confirmationDialog";
 
 // Icons
 import DeleteIcon from "@mui/icons-material/Delete";
-import VisibilityIcon from "@mui/icons-material/Visibility";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import SearchIcon from "@mui/icons-material/Search";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 
 /**
  * A page used to display a list of all patients for a merchant user.
@@ -30,13 +32,15 @@ const PatientManagement = () => {
   const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
   const navigate = useNavigate();
 
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const [patientData, setPatientData] = useState([]);
   const [paginationModel, setPaginationModel] = useState({
     page: 0,
     pageSize: 25,
   });
   const [totalPatients, setTotalPatients] = useState(0);
-  const [loading, setLoading] = useState(false);
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [selectedPatientID, setSelectedPatientID] = useState(null);
@@ -108,38 +112,7 @@ const PatientManagement = () => {
       ),
     },
   ];
-
-  useEffect(() => {
-    fetchPatients();
-  }, [
-    paginationModel.page,
-    paginationModel.pageSize,
-    givenNameInput,
-    familyNameInput,
-  ]);
-
-  // Debounce given name input
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      // resetting page to 0 when filter changes
-      setPaginationModel((prev) => ({ ...prev, page: 0 }));
-      setGivenNameInput(givenNameInput);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [givenNameInput]);
-
-  // Debounce last name input
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      // resetting page to 0 when filter changes
-      setPaginationModel((prev) => ({ ...prev, page: 0 }));
-      setFamilyNameInput(familyNameInput);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [familyNameInput]);
-
-  const fetchPatients = () => {
-    setLoading(true);
+  const fetchPatients = useCallback(() => {
     const params = new URLSearchParams({
       skip: paginationModel.page * paginationModel.pageSize,
       limit: paginationModel.pageSize,
@@ -156,13 +129,17 @@ const PatientManagement = () => {
       .then((data) => {
         setPatientData(data.patients || []);
         setTotalPatients(data.totalPatients || 0);
-        setLoading(false);
       })
       .catch((err) => {
         console.log("An error has occurred");
-        setLoading(false);
       });
-  };
+  }, [
+    API_BASE,
+    paginationModel.page,
+    paginationModel.pageSize,
+    givenNameInput,
+    familyNameInput,
+  ]);
 
   async function handleDelete(patientID) {
     await fetch(`${API_BASE}/remove-patient/${patientID}`, {
@@ -177,6 +154,30 @@ const PatientManagement = () => {
     setDeleteDialogOpen(false);
   }
 
+  useEffect(() => {
+    fetchPatients();
+  }, [fetchPatients]);
+
+  // Debounce given name input
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // resetting page to 0 when filter changes
+      setPaginationModel((prev) => ({ ...prev, page: 0 }));
+      setGivenNameInput(givenNameInput);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [givenNameInput]);
+
+  // Debounce last name input
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // resetting page to 0 when filter changes
+      setPaginationModel((prev) => ({ ...prev, page: 0 }));
+      setFamilyNameInput(familyNameInput);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [familyNameInput]);
+
   return (
     <Box
       sx={{
@@ -198,10 +199,7 @@ const PatientManagement = () => {
         }}
       >
         <Stack spacing={1} sx={{ width: "100%", mb: 3 }}>
-          <Typography
-            variant="h3"
-            sx={{ fontSize: { xs: "2em", sm: "2em", md: "3em" } }}
-          >
+          <Typography variant={isMobile ? "h5" : "h3"}>
             Patient Management
           </Typography>
           <Divider />
diff --git a/client/src/routes/merchant/RequestPatientAccess.js b/client/src/routes/merchant/RequestPatientAccess.js
index 7c8e2a6b..0cfeb7ef 100644
--- a/client/src/routes/merchant/RequestPatientAccess.js
+++ b/client/src/routes/merchant/RequestPatientAccess.js
@@ -1,13 +1,4 @@
-import {
-  Box,
-  Container,
-  Stack,
-  Typography,
-  Button,
-  Link,
-  Divider,
-} from "@mui/material";
-import ForgotPasswordForm from "../../components/authentication/ForgotPasswordForm";
+import { Box, Container } from "@mui/material";
 import RequestPatientAccessForm from "../../components/patientAccessRequest/RequestPatientAccessForm";
 
 /**
@@ -17,23 +8,32 @@ import RequestPatientAccessForm from "../../components/patientAccessRequest/Requ
  */
 const RequestPatientAccess = () => {
   return (
-    <Container
-      variant="gradient"
-      maxWidth={false}
+    <Box
       sx={{
-        width: "100vw",
-        minHeight: "100vh",
-        padding: "0",
-        margin: "0",
+        bgcolor: "#f5f5f5",
         display: "flex",
-        alignItems: { xs: "flex-start", sm: "center" },
-        justifyContent: "center",
+        ml: "65px",
+        mt: "66px",
       }}
     >
-      <Box variant="gradient">
-        <RequestPatientAccessForm />
-      </Box>
-    </Container>
+      <Container
+        variant="gradient"
+        maxWidth={false}
+        sx={{
+          width: "100vw",
+          minHeight: "100vh",
+          padding: "0",
+          margin: "0",
+          display: "flex",
+          alignItems: { xs: "flex-start", sm: "center" },
+          justifyContent: "center",
+        }}
+      >
+        <Box variant="gradient">
+          <RequestPatientAccessForm />
+        </Box>
+      </Container>
+    </Box>
   );
 };
 
diff --git a/client/src/routes/public/ErrorPage.js b/client/src/routes/public/ErrorPage.js
index c4ca9e26..0fc4ab8c 100644
--- a/client/src/routes/public/ErrorPage.js
+++ b/client/src/routes/public/ErrorPage.js
@@ -1,6 +1,5 @@
-import { Typography, Button, Box, Stack } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import Logo from "../../assets/WellAiLogoTR.png";
 
 /**
  * A page that is displayed when a user tried to navigate a non-existent
diff --git a/client/src/routes/public/Login.js b/client/src/routes/public/Login.js
index bde537d5..1f3ed332 100644
--- a/client/src/routes/public/Login.js
+++ b/client/src/routes/public/Login.js
@@ -1,6 +1,5 @@
-import { Box, Container, Stack, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import LoginForm from "../../components/authentication/LoginForm";
-import Logo from "../../assets/WellAiLogoTR.png";
 import WelcomePanel from "../../components/WelcomePanel";
 
 /**
diff --git a/client/src/routes/standardUser/AcceptAccessRequest.js b/client/src/routes/standardUser/AcceptAccessRequest.js
index 853b6927..1508e057 100644
--- a/client/src/routes/standardUser/AcceptAccessRequest.js
+++ b/client/src/routes/standardUser/AcceptAccessRequest.js
@@ -1,12 +1,4 @@
-import {
-  Box,
-  Container,
-  Stack,
-  Typography,
-  Button,
-  Link,
-  Divider,
-} from "@mui/material";
+import { Box, Container } from "@mui/material";
 import AcceptRequestForm from "../../components/patientAccessRequest/AcceptRequestForm";
 
 /**
@@ -17,23 +9,32 @@ import AcceptRequestForm from "../../components/patientAccessRequest/AcceptReque
  */
 const AcceptAccessRequest = () => {
   return (
-    <Container
-      variant="gradient"
-      maxWidth={false}
+    <Box
       sx={{
-        width: "100vw",
-        minHeight: "100vh",
-        padding: "0",
-        margin: "0",
+        bgcolor: "#f5f5f5",
         display: "flex",
-        alignItems: { xs: "flex-start", sm: "center" },
-        justifyContent: "center",
+        ml: "65px",
+        mt: "66px",
       }}
     >
-      <Box variant="gradient">
-        <AcceptRequestForm />
-      </Box>
-    </Container>
+      <Container
+        variant="gradient"
+        maxWidth={false}
+        sx={{
+          width: "100vw",
+          minHeight: "100vh",
+          padding: "0",
+          margin: "0",
+          display: "flex",
+          alignItems: { xs: "flex-start", sm: "center" },
+          justifyContent: "center",
+        }}
+      >
+        <Box variant="gradient">
+          <AcceptRequestForm />
+        </Box>
+      </Container>
+    </Box>
   );
 };
 
diff --git a/client/src/routes/standardUser/GenerateReport.js b/client/src/routes/standardUser/GenerateReport.js
index 2b49cb83..25f95b28 100644
--- a/client/src/routes/standardUser/GenerateReport.js
+++ b/client/src/routes/standardUser/GenerateReport.js
@@ -1,12 +1,12 @@
-import GenerateReportForm from "../../components/healthReport/GenerateReportForm";
 import { Box } from "@mui/material";
+import GenerateReportForm from "../../components/healthReport/GenerateReportForm";
 
 /**
  * A page that provides the form for user's to generate a health report.
  *
  * @returns {@mui.material.Box}
  */
-const GenerateReport = ({}) => {
+const GenerateReport = () => {
   return (
     <Box
       sx={{
diff --git a/client/src/routes/standardUser/HealthAnalytics.js b/client/src/routes/standardUser/HealthAnalytics.js
index db46f3d5..e104c0bd 100644
--- a/client/src/routes/standardUser/HealthAnalytics.js
+++ b/client/src/routes/standardUser/HealthAnalytics.js
@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useMemo } from "react";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Box,
-  Container,
-  Typography,
+  Button,
   Card,
   CardContent,
-  Stack,
+  Checkbox,
+  Collapse,
+  Container,
   FormControl,
-  FormGroup,
   FormControlLabel,
-  Checkbox,
-  Button,
-  useTheme,
-  useMediaQuery,
+  FormGroup,
   IconButton,
-  Collapse,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import { LineChart } from "@mui/x-charts/LineChart";
+import { useEffect, useMemo, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
 
 const formatXAxisLabel = (label, index, total, isMobile) => {
   if (!label) {
@@ -107,7 +107,10 @@ const HealthAnalytics = () => {
   };
 
   // Helpers for aggregation and y-axis scaling
-  const colors = [theme.palette.primary.main, "#ff7043", "#42a5f5"];
+  const colors = useMemo(
+    () => [theme.palette.primary.main, "#ff7043", "#42a5f5"],
+    [theme.palette.primary.main],
+  );
 
   const cardWrapperSx = useMemo(
     () => ({
@@ -290,16 +293,12 @@ const HealthAnalytics = () => {
           boxSizing: "border-box",
         }}
       >
-        <Stack spacing={1.5} sx={{ mb: 3 }}>
-          <Typography
-            variant={isMobile ? "h5" : "h4"}
-            component="h1"
-            color="primary"
-            sx={{ fontWeight: 600 }}
-          >
-            Health Analytics
-          </Typography>
-        </Stack>
+        <Typography
+          variant={isMobile ? "h4" : "h2"}
+          sx={{ textAlign: "center", mb: 2 }}
+        >
+          Health Analytics
+        </Typography>
 
         <Card sx={cardWrapperSx}>
           <CardContent sx={cardContentSx}>
@@ -311,9 +310,10 @@ const HealthAnalytics = () => {
                 mb: showSettings ? 2 : 0,
               }}
             >
-              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              <Typography variant={isMobile ? "h5" : "h4"}>
                 Probability Metrics Selection
               </Typography>
+
               {isMobile && (
                 <IconButton
                   onClick={() => setShowSettings(!showSettings)}
@@ -377,11 +377,7 @@ const HealthAnalytics = () => {
 
         <Card sx={cardWrapperSx}>
           <CardContent sx={chartCardContentSx}>
-            <Typography
-              variant="h6"
-              gutterBottom
-              sx={{ fontWeight: 600, mb: 2 }}
-            >
+            <Typography variant={isMobile ? "h5" : "h4"}>
               Health Risk Trends Over Time
             </Typography>
             {chartSeries.length > 0 && healthData.length > 0 ? (
@@ -468,7 +464,8 @@ const HealthAnalytics = () => {
             >
               <Button
                 variant="outlined"
-                href="/report-history"
+                component={RouterLink}
+                to="/report-history"
                 sx={{
                   width: isMobile ? "100%" : "auto",
                   py: { xs: "0.8rem", sm: "0.6rem" },
@@ -480,7 +477,8 @@ const HealthAnalytics = () => {
               </Button>
               <Button
                 variant="contained"
-                href="/generate-report"
+                component={RouterLink}
+                to="/generate-report"
                 sx={{
                   width: isMobile ? "100%" : "auto",
                   py: { xs: "0.8rem", sm: "0.6rem" },
diff --git a/client/src/routes/standardUser/ReportHistory.js b/client/src/routes/standardUser/ReportHistory.js
index 43cc8911..4347e366 100644
--- a/client/src/routes/standardUser/ReportHistory.js
+++ b/client/src/routes/standardUser/ReportHistory.js
@@ -1,29 +1,26 @@
-import ReportTemplate from "../../components/healthReport/ReportTemplate";
-import DownloadReportButton from "../../components/healthReport/DownloadReportButton";
 import CloseIcon from "@mui/icons-material/Close";
 import IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
+import { useEffect, useState, useCallback, useRef } from "react";
 import ConfirmationDialog from "../../components/dialog/confirmationDialog";
-import Stack from "@mui/material/Stack";
-import React, { useState, useEffect, useRef } from "react";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import DownloadReportButton from "../../components/healthReport/DownloadReportButton";
+import ReportTemplate from "../../components/healthReport/ReportTemplate";
+import { Link as RouterLink } from "react-router-dom";
 import PDFHealthChart from "../../components/healthReport/PDFHealthChart";
 
 import {
   Box,
-  Typography,
+  Button,
+  FormControl,
+  InputLabel,
   List,
   ListItem,
   ListItemText,
-  FormControl,
-  InputLabel,
-  Select,
   MenuItem,
-  Button,
-  useTheme,
-  useMediaQuery,
   Paper,
+  Select,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
@@ -33,7 +30,7 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  *
  * @returns {@mui.material.Container}
  */
-const AIHealthPrediction = ({}) => {
+const AIHealthPrediction = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
@@ -41,22 +38,12 @@ const AIHealthPrediction = ({}) => {
   const [selectedDate, setSelectedDate] = useState();
   const [reportData, setReportData] = useState();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [openSideBar, setOpenSideBar] = useState(false);
   const [selectedMonth, setSelectedMonth] = useState(null);
   const [selectedYear, setSelectedYear] = useState(null);
-  const [isOpen, setIsOpen] = useState(false);
   const chartRef = useRef(null);
   const [chartData, setChartData] = useState([]);
 
-  function openBar() {
-    if (isOpen === true) {
-      setIsOpen(false);
-      return;
-    }
-    setIsOpen(true);
-  }
-
-  function fetchReportDates() {
+  const fetchReportDates = useCallback(() => {
     fetch(`${API_BASE}/get-health-data-dates`, {
       method: "GET",
       credentials: "include",
@@ -64,20 +51,18 @@ const AIHealthPrediction = ({}) => {
       .then((response) => response.json())
       .then((data) => {
         setReportDates(data);
+
         if (data.length > 0) {
           setSelectedDate(data[0]);
-          console.log("The selected date is: " + selectedDate);
+          console.log("The selected date is:", data[0]);
         }
       })
-      .catch((err) => {
-        console.log(err);
-      });
-  }
+      .catch((err) => console.log(err));
+  }, []);
 
-  // Fetch the users health data ID and Dates
   useEffect(() => {
     fetchReportDates();
-  }, []);
+  }, [fetchReportDates]);
 
   // Fetch report data
   useEffect(() => {
@@ -120,9 +105,9 @@ const AIHealthPrediction = ({}) => {
     fetch(`${API_BASE}/health-analytics`, {
       credentials: "include",
     })
-    .then((r) => r.json())
-    .then(setChartData)
-    .catch(console.error);
+      .then((r) => r.json())
+      .then(setChartData)
+      .catch(console.error);
   }, []);
 
   // Extract and sort month and years for drop down.
@@ -131,8 +116,14 @@ const AIHealthPrediction = ({}) => {
   ].sort((a, b) => a - b);
 
   const months = [
-    ...new Set(reportDates.filter((r) => !selectedYear || new Date(r.date).getFullYear() === selectedYear,)
-    .map((r) => new Date(r.date).getMonth() + 1),),
+    ...new Set(
+      reportDates
+        .filter(
+          (r) =>
+            !selectedYear || new Date(r.date).getFullYear() === selectedYear,
+        )
+        .map((r) => new Date(r.date).getMonth() + 1),
+    ),
   ].sort((a, b) => a - b);
 
   // Filters reports based on selected year and month if any.
@@ -155,15 +146,38 @@ const AIHealthPrediction = ({}) => {
       <Box
         sx={{
           minHeight: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
           bgcolor: "background.default",
+          ml: "65px",
+          mt: "80px",
         }}
       >
-        <Typography variant="h5" sx={{ color: "text.secondary" }}>
-          No Health Prediction Reports Available
-        </Typography>
+        <Box
+          sx={{
+            minHeight: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            bgcolor: "background.default",
+            flexDirection: "column",
+          }}
+        >
+          <Typography variant="h5" sx={{ color: "text.secondary" }}>
+            No Health Prediction Reports Available
+          </Typography>
+          <Button
+            variant="contained"
+            component={RouterLink}
+            to="/generate-report"
+            sx={{
+              width: isMobile ? "100%" : "auto",
+              py: { xs: "0.8rem", sm: "0.6rem" },
+              fontSize: { xs: "1rem", sm: "0.875rem" },
+              fontWeight: 500,
+            }}
+          >
+            Generate Report
+          </Button>
+        </Box>
       </Box>
     );
   } else {
@@ -176,10 +190,20 @@ const AIHealthPrediction = ({}) => {
           mt: "80px",
         }}
       >
-        <div style={{ position: "fixed", top: -9999, left: -9999, pointerEvents: "none", overflow: "hidden", width: 0, height: 0 }}>
+        <div
+          style={{
+            position: "fixed",
+            top: -9999,
+            left: -9999,
+            pointerEvents: "none",
+            overflow: "hidden",
+            width: 0,
+            height: 0,
+          }}
+        >
           <PDFHealthChart ref={chartRef} healthData={chartData} />
         </div>
-        
+
         <Paper variant="report-section">
           <Box sx={{ p: 3, borderBottom: "1px solid #e0e0e0" }}>
             <Typography
diff --git a/client/src/routes/standardUser/UserLanding.js b/client/src/routes/standardUser/UserLanding.js
index 8a5fccac..d6774339 100644
--- a/client/src/routes/standardUser/UserLanding.js
+++ b/client/src/routes/standardUser/UserLanding.js
@@ -1,15 +1,14 @@
 import {
+  Box,
   Card,
   CardContent,
-  Box,
   Divider,
   Typography,
-  useTheme,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import { useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
 import { BarChart } from "@mui/x-charts/BarChart";
+import { useEffect, useState } from "react";
 
 // AppBar height: 56px toolbar + 2px border on mobile (xs), 64px + 2px on desktop (sm+)
 const APPBAR_HEIGHT = { xs: "58px", sm: "66px" };
@@ -21,8 +20,7 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  *
  * @returns {@mui.material.Box}
  */
-const UserLanding = ({}) => {
-  const navigate = useNavigate();
+const UserLanding = () => {
   const [name, setName] = useState(null);
   const [data, setData] = useState({});
 
@@ -118,7 +116,7 @@ const UserLanding = ({}) => {
       <Box
         sx={{
           display: "flex",
-          flexDirection: { xs: "column", md: "row" },
+          flexDirection: isMobile ? "column" : "row",
           gap: 3,
         }}
       >
@@ -137,7 +135,7 @@ const UserLanding = ({}) => {
             sx={{
               display: "flex",
               gap: { xs: 1, sm: 2 },
-              flexDirection: "row",
+              flexDirection: isMobile ? "column" : "row",
             }}
           >
             {["stroke", "diabetes", "cvd"].map((key) => (
@@ -228,7 +226,7 @@ const UserLanding = ({}) => {
               height: { xs: "auto", md: "95%" },
             }}
           >
-            <Typography variant="h5" sx={{ mb: 2 }}>
+            <Typography variant={isMobile ? "h6" : "h5"} sx={{ mb: 2 }}>
               Latest Recommendations
             </Typography>
             <Box>
@@ -246,7 +244,10 @@ const UserLanding = ({}) => {
                             : "none",
                       }}
                     >
-                      <Typography variant="h6" sx={{ mb: 1 }}>
+                      <Typography
+                        variant={isMobile ? "h7" : "h6"}
+                        sx={{ mb: 1 }}
+                      >
                         {key.toUpperCase()}
                       </Typography>
                       <Typography sx={{ whiteSpace: "pre-line" }}>
diff --git a/client/src/routes/standardUser/UserSettings.js b/client/src/routes/standardUser/UserSettings.js
index 866d0f85..f0a44f98 100644
--- a/client/src/routes/standardUser/UserSettings.js
+++ b/client/src/routes/standardUser/UserSettings.js
@@ -1,27 +1,27 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
 import {
+  Alert,
   Box,
-  Typography,
-  List,
-  ListItem,
-  ListItemText,
-  TextField,
   Button,
   FormControl,
   InputLabel,
-  Select,
+  List,
+  ListItem,
+  ListItemText,
   MenuItem,
-  Alert,
+  Select,
   Stack,
-  useTheme,
-  useMediaQuery,
-  Tabs,
   Tab,
+  Tabs,
+  TextField,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import ConfirmationDialog from "../../components/dialog/confirmationDialog";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { UserContext } from "../../utils/UserContext";
 import PhoneInputField from "../../components/authentication/PhoneInputField";
+import ConfirmationDialog from "../../components/dialog/confirmationDialog";
+import { UserContext } from "../../utils/UserContext";
 
 /**
  * A page that provides the tools for a user to securely update their
@@ -261,8 +261,8 @@ const UserSettings = () => {
   const AccountDetails = () => (
     <Box>
       <Typography
-        variant="h5"
-        sx={{ mb: 3, color: "primary.main", fontWeight: 600 }}
+        variant={isMobile ? "h5" : "h4"}
+        sx={{ mb: 3, textAlign: isMobile ? "center" : "left" }}
       >
         Account Details
       </Typography>
@@ -320,6 +320,7 @@ const UserSettings = () => {
               justifyContent: "space-between",
               gap: 1,
               flexWrap: "wrap",
+              flexDirection: isMobile ? "column" : "row",
             }}
           >
             <Button
@@ -327,17 +328,7 @@ const UserSettings = () => {
               color="error"
               disabled={!isUserLoggedIn || deleteBusy}
               onClick={() => setDeleteDialogOpen(true)}
-              sx={{
-                mt: 0,
-                minWidth: "auto",
-                width: "auto",
-                px: { xs: 1.75, sm: 2.25 },
-                py: { xs: "0.45rem", sm: "0.5rem" },
-                fontSize: { xs: "0.82rem", sm: "0.85rem" },
-                lineHeight: 1.2,
-                borderRadius: 1.5,
-                fontWeight: 600,
-              }}
+              sx={{ width: isMobile ? "100%" : "auto" }}
             >
               {deleteBusy ? "Deleting…" : "Delete Account"}
             </Button>
@@ -371,7 +362,6 @@ const UserSettings = () => {
               width: { xs: "min(260px, 100%)", sm: "auto" },
               py: { xs: "0.7rem", sm: "0.6rem" },
               fontSize: { xs: "0.95rem", sm: "0.875rem" },
-              fontWeight: 500,
             }}
           >
             {accountSaving ? "Saving…" : "Save Changes"}
@@ -404,8 +394,8 @@ const UserSettings = () => {
   const Profile = () => (
     <Box>
       <Typography
-        variant="h5"
-        sx={{ mb: 3, color: "primary.main", fontWeight: 600 }}
+        variant={isMobile ? "h5" : "h4"}
+        sx={{ mb: 3, textAlign: isMobile ? "center" : "left" }}
       >
         Profile Settings
       </Typography>
@@ -420,15 +410,6 @@ const UserSettings = () => {
         </Alert>
       )}
 
-      <Box sx={{ mb: 4 }}>
-        <Typography variant="h6">
-          {user?.given_names || ""} {user?.family_name || ""}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {user?.email || ""}
-        </Typography>
-      </Box>
-
       <Box
         sx={{
           display: "grid",
@@ -523,8 +504,8 @@ const UserSettings = () => {
     return (
       <Box>
         <Typography
-          variant="h5"
-          sx={{ mb: 3, color: "primary.main", fontWeight: 600 }}
+          variant={isMobile ? "h5" : "h4"}
+          sx={{ mb: 3, textAlign: isMobile ? "center" : "left" }}
         >
           Change Password
         </Typography>
diff --git a/client/src/utils/LandingRoute.js b/client/src/utils/LandingRoute.js
index 388e2b30..7a72b836 100644
--- a/client/src/utils/LandingRoute.js
+++ b/client/src/utils/LandingRoute.js
@@ -1,5 +1,5 @@
-import { Navigate } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { Navigate } from "react-router-dom";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
diff --git a/client/src/utils/ProtectedRoutes.js b/client/src/utils/ProtectedRoutes.js
index bf1ca4be..9dff833a 100644
--- a/client/src/utils/ProtectedRoutes.js
+++ b/client/src/utils/ProtectedRoutes.js
@@ -1,5 +1,5 @@
-import { Outlet, Navigate, useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 import NavBar from "../components/Navbar";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
diff --git a/client/src/utils/PublicOnlyRoutes.js b/client/src/utils/PublicOnlyRoutes.js
index ef0b560d..77a87c94 100644
--- a/client/src/utils/PublicOnlyRoutes.js
+++ b/client/src/utils/PublicOnlyRoutes.js
@@ -1,6 +1,5 @@
-import { Outlet, Navigate } from "react-router-dom";
 import { useEffect, useState } from "react";
-import NavBar from "../components/Navbar";
+import { Navigate, Outlet } from "react-router-dom";
 
 const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
 
@@ -12,7 +11,6 @@ const API_BASE = process.env.REACT_APP_API_URL || "http://localhost:8000";
  */
 const PublicOnlyRoutes = () => {
   const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     fetch(`${API_BASE}/user/me`, {
diff --git a/client/src/utils/UserContext.js b/client/src/utils/UserContext.js
index 13c738af..66835553 100644
--- a/client/src/utils/UserContext.js
+++ b/client/src/utils/UserContext.js
@@ -1,9 +1,9 @@
 import {
   createContext,
-  useState,
+  useCallback,
   useEffect,
   useMemo,
-  useCallback,
+  useState,
 } from "react";
 
 export const UserContext = createContext(null);
diff --git a/server/routers/users.py b/server/routers/users.py
index 09d09d91..da9b8d6e 100644
--- a/server/routers/users.py
+++ b/server/routers/users.py
@@ -1182,6 +1182,7 @@ async def get_merchant_patient_data(patient_id: int, request: Request, db_conn:
         "age": get_age(patient.DateOfBirth),
         "maritalStatus": patient.get_marital_status(),
         "workingStatus": patient.get_working_status(),
+        "race": patient.get_race()
     }
 
     return result