diff --git a/client/src/components/ErrorCard.tsx b/client/src/components/ErrorCard.tsx
index 59c8cda..a8307c4 100644
--- a/client/src/components/ErrorCard.tsx
+++ b/client/src/components/ErrorCard.tsx
@@ -1,10 +1,12 @@
 import { Card, CardContent, Typography } from '@mui/material';
+import { useThemeModeContext } from '../context/ThemeContext';
 
 type ErrorCardProps = { error: string };
 
 export default function ErrorCard({ error }: ErrorCardProps) {
+  const { themeMode } = useThemeModeContext();
   return (
-    <Card className="mb-2">
+    <Card className="mb-2" raised={themeMode === 'light'}>
       <CardContent className="p-4">
         <Typography align="center" variant="h6">
           ¯\_(ツ)_/¯
diff --git a/client/src/components/SearchServers.tsx b/client/src/components/SearchServers.tsx
index b788fb5..15ff51a 100644
--- a/client/src/components/SearchServers.tsx
+++ b/client/src/components/SearchServers.tsx
@@ -1,5 +1,6 @@
 import {
   Container,
+  Divider,
   Grid,
   Input,
   Slider,
@@ -150,299 +151,302 @@ export default function SearchServers({
   };
 
   return (
-    <Container
-      ref={containerRef}
-      className="overflow-hidden"
-      sx={{
-        transition: 'all 0.3s ease',
-        maxHeight: showSearchServer ? contentHeight : 0,
-        backgroundColor: (theme) =>
-          theme.palette.mode === 'dark'
-            ? 'rgba(255, 255, 255, .06)'
-            : 'rgba(0, 0, 0, .06)',
-      }}
-    >
-      <Grid container spacing={2} className="py-2">
-        {/* Name */}
-        <Grid item xs={12}>
-          <TextField
-            value={searchState.name}
-            onChange={handleSearchName}
-            variant="standard"
-            autoComplete="false"
-            fullWidth
-            label="Name"
-            size="small"
-            className="pb-2"
-          />
-        </Grid>
-        {/* Max Level */}
-        <Grid
-          item
-          xs={12}
-          className="pt-0"
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Typography id="max-level" variant="caption">
-            Max Level
-          </Typography>
-        </Grid>
-        <Grid item xs={12} className="flex pt-0">
-          <Input
-            value={searchState.maxLevel[0]}
-            size="small"
-            onChange={handleSearchMaxLevelMin}
-            // onBlur={handleBlur}
-            inputProps={{
-              name: 'max-level-min',
-              step: 1,
-              min: 1,
-              max: 99,
-              type: 'number',
-              'aria-labelledby': 'max-level',
-            }}
-          />
-          <Slider
-            aria-labelledby="max-level"
-            value={searchState.maxLevel}
-            onChange={handleSearchMaxLevel}
-            valueLabelDisplay="auto"
-            disableSwap
-            className="mx-4"
-            size="small"
-            min={1}
-            max={99}
-          />
-          <Input
-            value={searchState.maxLevel[1]}
-            size="small"
-            onChange={handleSearchMaxLevelMax}
-            // onBlur={handleBlur}
-            inputProps={{
-              name: 'max-level-max',
-              step: 1,
-              min: 1,
-              max: 99,
-              type: 'number',
-              'aria-labelledby': 'max-level',
-            }}
-          />
-        </Grid>
-        {/* Expansion */}
-        <Grid
-          item
-          xs={12}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Tooltip
-            title="Enabled expansions, exact match."
-            arrow
-            disableInteractive
-            placement="top"
+    <>
+      <Container
+        ref={containerRef}
+        className="overflow-hidden"
+        sx={{
+          transition: 'all 0.3s ease',
+          maxHeight: showSearchServer ? contentHeight : 0,
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'dark'
+              ? 'rgba(255, 255, 255, .06)'
+              : 'rgba(0, 0, 0, .06)',
+        }}
+      >
+        <Grid container spacing={2} className="py-2">
+          {/* Name */}
+          <Grid item xs={12}>
+            <TextField
+              value={searchState.name}
+              onChange={handleSearchName}
+              variant="standard"
+              autoComplete="false"
+              fullWidth
+              label="Name"
+              size="small"
+              className="pb-2"
+            />
+          </Grid>
+          {/* Max Level */}
+          <Grid
+            item
+            xs={12}
+            className="pt-0"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
           >
-            <Typography id="expansions-button-group" variant="caption">
-              Expansions
+            <Typography id="max-level" variant="caption">
+              Max Level
             </Typography>
-          </Tooltip>
-          <ToggleButtonGroup
-            value={searchState.expansions}
-            onChange={handleSearchExpansions}
-            size="small"
-            aria-labelledby="expansions-button-group"
-            sx={{
-              display: 'flex',
-              width: '100%',
-            }}
+          </Grid>
+          <Grid item xs={12} className="flex pt-0">
+            <Input
+              value={searchState.maxLevel[0]}
+              size="small"
+              onChange={handleSearchMaxLevelMin}
+              // onBlur={handleBlur}
+              inputProps={{
+                name: 'max-level-min',
+                step: 1,
+                min: 1,
+                max: 99,
+                type: 'number',
+                'aria-labelledby': 'max-level',
+              }}
+            />
+            <Slider
+              aria-labelledby="max-level"
+              value={searchState.maxLevel}
+              onChange={handleSearchMaxLevel}
+              valueLabelDisplay="auto"
+              disableSwap
+              className="mx-4"
+              size="small"
+              min={1}
+              max={99}
+            />
+            <Input
+              value={searchState.maxLevel[1]}
+              size="small"
+              onChange={handleSearchMaxLevelMax}
+              // onBlur={handleBlur}
+              inputProps={{
+                name: 'max-level-max',
+                step: 1,
+                min: 1,
+                max: 99,
+                type: 'number',
+                'aria-labelledby': 'max-level',
+              }}
+            />
+          </Grid>
+          {/* Expansion */}
+          <Grid
+            item
+            xs={12}
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
           >
-            <ToggleButton
-              key="none"
-              value="none"
-              aria-label="none-enabled"
-              className="py-0"
-              sx={{ width: '20%' }}
+            <Tooltip
+              title="Enabled expansions, exact match."
+              arrow
+              disableInteractive
+              placement="top"
             >
-              None
-            </ToggleButton>
-            <ToggleButton
-              key="rotz"
-              value="rotz"
-              aria-label="rotz-enabled"
-              className="py-0"
-              sx={{ width: '20%' }}
+              <Typography id="expansions-button-group" variant="caption">
+                Expansions
+              </Typography>
+            </Tooltip>
+            <ToggleButtonGroup
+              value={searchState.expansions}
+              onChange={handleSearchExpansions}
+              size="small"
+              aria-labelledby="expansions-button-group"
+              sx={{
+                display: 'flex',
+                width: '100%',
+              }}
             >
-              RotZ
-            </ToggleButton>
-            <ToggleButton
-              key="cop"
-              value="cop"
-              aria-label="cop-enabled"
-              className="py-0"
-              sx={{ width: '20%' }}
-            >
-              CoP
-            </ToggleButton>
-            <ToggleButton
-              key="toau"
-              value="toau"
-              aria-label="toau-enabled"
-              className="py-0"
-              sx={{ width: '20%' }}
-            >
-              ToAU
-            </ToggleButton>
-            <ToggleButton
-              key="wotg"
-              value="wotg"
-              aria-label="wotg-enabled"
-              className="py-0"
-              sx={{ width: '20%' }}
-            >
-              WotG
-            </ToggleButton>
-            <ToggleButton
-              key="soa"
-              value="soa"
-              aria-label="soa-enabled"
-              className="py-0"
-              sx={{ width: '20%' }}
-            >
-              SoA
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
-        {/* Multiboxing */}
-        <Grid
-          item
-          xs={12}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Typography id="multibox-button-group" variant="caption">
-            Multiboxing
-          </Typography>
-          <ToggleButtonGroup
-            value={searchState.multibox}
-            onChange={handleSearchMultibox}
-            size="small"
-            aria-labelledby="multibox-button-group"
-            sx={{
-              display: 'flex',
-              width: '100%',
-            }}
-            exclusive
+              <ToggleButton
+                key="none"
+                value="none"
+                aria-label="none-enabled"
+                className="py-0"
+                sx={{ width: '20%' }}
+              >
+                None
+              </ToggleButton>
+              <ToggleButton
+                key="rotz"
+                value="rotz"
+                aria-label="rotz-enabled"
+                className="py-0"
+                sx={{ width: '20%' }}
+              >
+                RotZ
+              </ToggleButton>
+              <ToggleButton
+                key="cop"
+                value="cop"
+                aria-label="cop-enabled"
+                className="py-0"
+                sx={{ width: '20%' }}
+              >
+                CoP
+              </ToggleButton>
+              <ToggleButton
+                key="toau"
+                value="toau"
+                aria-label="toau-enabled"
+                className="py-0"
+                sx={{ width: '20%' }}
+              >
+                ToAU
+              </ToggleButton>
+              <ToggleButton
+                key="wotg"
+                value="wotg"
+                aria-label="wotg-enabled"
+                className="py-0"
+                sx={{ width: '20%' }}
+              >
+                WotG
+              </ToggleButton>
+              <ToggleButton
+                key="soa"
+                value="soa"
+                aria-label="soa-enabled"
+                className="py-0"
+                sx={{ width: '20%' }}
+              >
+                SoA
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid>
+          {/* Multiboxing */}
+          <Grid
+            item
+            xs={12}
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
           >
-            <ToggleButton
-              value="none"
-              aria-label="no multiboxing"
-              className="py-0"
-              sx={{ width: '33.33%' }}
+            <Typography id="multibox-button-group" variant="caption">
+              Multiboxing
+            </Typography>
+            <ToggleButtonGroup
+              value={searchState.multibox}
+              onChange={handleSearchMultibox}
+              size="small"
+              aria-labelledby="multibox-button-group"
+              sx={{
+                display: 'flex',
+                width: '100%',
+              }}
+              exclusive
             >
-              None
-            </ToggleButton>
-            <ToggleButton
-              value="limited"
-              aria-label="limited multiboxing"
-              className="py-0"
-              sx={{ width: '33.33%' }}
-            >
-              Limited
-            </ToggleButton>
-            <ToggleButton
-              value="unlimited"
-              aria-label="unlimited multiboxing"
-              className="py-0"
-              sx={{ width: '33.33%' }}
-            >
-              Unlimited
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
-        {/* Trusts */}
-        <Grid
-          item
-          xs={6}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Typography id="trust-button-group" variant="caption">
-            Trusts
-          </Typography>
-          <ToggleButtonGroup
-            value={searchState.trusts}
-            onChange={handleSearchTrusts}
-            size="small"
-            aria-labelledby="trust-button-group"
-            exclusive
-            sx={{
-              display: 'flex',
-              width: '100%',
-            }}
+              <ToggleButton
+                value="none"
+                aria-label="no multiboxing"
+                className="py-0"
+                sx={{ width: '33.33%' }}
+              >
+                None
+              </ToggleButton>
+              <ToggleButton
+                value="limited"
+                aria-label="limited multiboxing"
+                className="py-0"
+                sx={{ width: '33.33%' }}
+              >
+                Limited
+              </ToggleButton>
+              <ToggleButton
+                value="unlimited"
+                aria-label="unlimited multiboxing"
+                className="py-0"
+                sx={{ width: '33.33%' }}
+              >
+                Unlimited
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid>
+          {/* Trusts */}
+          <Grid
+            item
+            xs={6}
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
           >
-            <ToggleButton
-              value="disabled"
-              aria-label="trust disabled"
-              className="py-0"
-              sx={{ width: '50%' }}
+            <Typography id="trust-button-group" variant="caption">
+              Trusts
+            </Typography>
+            <ToggleButtonGroup
+              value={searchState.trusts}
+              onChange={handleSearchTrusts}
+              size="small"
+              aria-labelledby="trust-button-group"
+              exclusive
+              sx={{
+                display: 'flex',
+                width: '100%',
+              }}
             >
-              Disabled
-            </ToggleButton>
-            <ToggleButton
-              value="enabled"
-              aria-label="trust enabled"
-              className="py-0"
-              sx={{ width: '50%' }}
-            >
-              Enabled
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
-        {/* Level Sync */}
-        <Grid
-          item
-          xs={6}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Typography id="level-sync-button-group" variant="caption">
-            Level Sync
-          </Typography>
-          <ToggleButtonGroup
-            value={searchState.levelSync}
-            onChange={handleSearchLevelSync}
-            size="small"
-            aria-labelledby="level-sync-button-group"
-            exclusive
-            sx={{
-              display: 'flex',
-              width: '100%',
-            }}
+              <ToggleButton
+                value="disabled"
+                aria-label="trust disabled"
+                className="py-0"
+                sx={{ width: '50%' }}
+              >
+                Disabled
+              </ToggleButton>
+              <ToggleButton
+                value="enabled"
+                aria-label="trust enabled"
+                className="py-0"
+                sx={{ width: '50%' }}
+              >
+                Enabled
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid>
+          {/* Level Sync */}
+          <Grid
+            item
+            xs={6}
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
           >
-            <ToggleButton
-              value="disabled"
-              aria-label="level-sync-disabled"
-              className="py-0"
-              sx={{ width: '50%' }}
+            <Typography id="level-sync-button-group" variant="caption">
+              Level Sync
+            </Typography>
+            <ToggleButtonGroup
+              value={searchState.levelSync}
+              onChange={handleSearchLevelSync}
+              size="small"
+              aria-labelledby="level-sync-button-group"
+              exclusive
+              sx={{
+                display: 'flex',
+                width: '100%',
+              }}
             >
-              Disabled
-            </ToggleButton>
-            <ToggleButton
-              value="enabled"
-              aria-label="level-sync-enabled"
-              className="py-0"
-              sx={{ width: '50%' }}
-            >
-              Enabled
-            </ToggleButton>
-          </ToggleButtonGroup>
+              <ToggleButton
+                value="disabled"
+                aria-label="level-sync-disabled"
+                className="py-0"
+                sx={{ width: '50%' }}
+              >
+                Disabled
+              </ToggleButton>
+              <ToggleButton
+                value="enabled"
+                aria-label="level-sync-enabled"
+                className="py-0"
+                sx={{ width: '50%' }}
+              >
+                Enabled
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid>
         </Grid>
-      </Grid>
-    </Container>
+      </Container>
+      {contentHeight > 0 && <Divider />}
+    </>
   );
 }
diff --git a/client/src/components/Server/SettingsChipCloud.tsx b/client/src/components/Server/SettingsChipCloud.tsx
index 276b402..4dde241 100644
--- a/client/src/components/Server/SettingsChipCloud.tsx
+++ b/client/src/components/Server/SettingsChipCloud.tsx
@@ -64,7 +64,7 @@ export default function SettingsChipCloud({ server }: SettingsChipCloudProps) {
             '&> .MuiChip-label': {
               paddingRight: 0.5,
             },
-            boxShadow: '0px 3px 3px rgba(0, 0, 0, .25)',
+            boxShadow: 1,
           }}
         />
       </Tooltip>
diff --git a/client/src/components/ServerCard.tsx b/client/src/components/ServerCard.tsx
index 6992314..8bcaafa 100644
--- a/client/src/components/ServerCard.tsx
+++ b/client/src/components/ServerCard.tsx
@@ -26,6 +26,7 @@ import {
   useState,
 } from 'react';
 import { Link } from 'react-router-dom';
+import { useThemeModeContext } from '../context/ThemeContext';
 import { ServerData } from '../data/ServerData';
 import CopyImageIcon from '../images/copy-image.png';
 import ExpansionBar from './Server/ExpansionsBar';
@@ -46,6 +47,7 @@ type ServerCardProps = {
 };
 
 export default function ServerCard({ server, children }: ServerCardProps) {
+  const { themeMode } = useThemeModeContext();
   const [clipboardTooltip, setClipboardTooltip] = useState('Copy server URL.');
   const [clipboardTooltipOpen, setClipboardTooltipOpen] = useState(false);
   const handleClipboardTooltipClose = () => {
@@ -110,7 +112,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
   };
 
   return (
-    <Card className="mb-2">
+    <Card className="mb-2" raised={themeMode === 'light'}>
       <Accordion
         className="my-0"
         defaultExpanded={isSettingsDataGridChild}
diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx
index 603a6aa..5d8dfb3 100644
--- a/client/src/pages/About.tsx
+++ b/client/src/pages/About.tsx
@@ -6,16 +6,18 @@ import {
   Box,
   Card,
   CardContent,
-  Paper,
   Typography,
   alpha,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
+import { useThemeModeContext } from '../context/ThemeContext';
 
 export default function About() {
+  const { themeMode } = useThemeModeContext();
+
   return (
     <>
-      <Card className="mb-3">
+      <Card className="mb-2" raised={themeMode === 'light'}>
         <CardContent>
           <Box className="mb-3">
             <Typography align="center" variant="h6">
@@ -148,7 +150,7 @@ export default function About() {
           </Box>
         </CardContent>
       </Card>
-      <Card>
+      <Card className="mb-2" raised={themeMode === 'light'}>
         <Accordion className="my-0">
           <AccordionSummary expandIcon={<ExpandMore />}>
             <Typography variant="h5">For server owners:</Typography>
@@ -203,8 +205,8 @@ export default function About() {
               >
                 Create a new file <b>settings/api.lua</b> in your server
                 directory.
-                <Paper elevation={2}>
-                  <pre className="m-0 p-2">
+                <Card className="bg-neutral-500/50">
+                  <pre className="m-0 select-text p-2">
                     <code>
                       {`xi = xi or {}
 xi.settings = xi.settings or {}
@@ -216,7 +218,7 @@ xi.settings.api =
 }`}
                     </code>
                   </pre>
-                </Paper>
+                </Card>
                 The world server needs to be restarted after any changes to any
                 of the settings. If you set <b>DO_NOT_TRACK</b> to <b>true</b>,
                 your server will be removed on the next hourly update.