diff --git a/src/front/App.tsx b/src/front/App.tsx
index 76a6dff..678b046 100644
--- a/src/front/App.tsx
+++ b/src/front/App.tsx
@@ -2,9 +2,8 @@ import "mdui/components/layout";
 import "mdui/components/layout-main";
 
 import NavigationBar from "./components/NavigationBar";
-import TopAppBar from "./components/TopAppBar";
-
 import About from "./components/pages/About";
+import TopAppBar from "./components/TopAppBar";
 
 export default () => {
 	return (
diff --git a/src/front/components/Hyperate/index.tsx b/src/front/components/Hyperate/index.tsx
index ca59e65..b85653b 100644
--- a/src/front/components/Hyperate/index.tsx
+++ b/src/front/components/Hyperate/index.tsx
@@ -22,7 +22,9 @@ export default () => {
 	});
 	return (
 		<div>
-			<p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p>
+			<p class="heartbeat" ref={paragraph}>
+				❤️ 0 BPM
+			</p>
 		</div>
 	);
 };
diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx
index 67b7f79..3c04d2c 100644
--- a/src/front/components/Lanyard/index.tsx
+++ b/src/front/components/Lanyard/index.tsx
@@ -1,6 +1,6 @@
 import { highlightElement } from "@speed-highlight/core";
-import { artist } from "../../utilities/artist";
 import { createRef } from "tsx-dom";
+import { artist } from "../../utilities/artist";
 import socket from "../../utilities/socket";
 
 const colorMap = {
@@ -39,7 +39,6 @@ export default () => {
 			document.body.style.removeProperty("--lanyard-display");
 		}
 
-
 		if (container.current) {
 			container.current.textContent = JSON.stringify(
 				{
diff --git a/src/front/components/NavigationBar/index.tsx b/src/front/components/NavigationBar/index.tsx
index 3d67f2f..a4bf269 100644
--- a/src/front/components/NavigationBar/index.tsx
+++ b/src/front/components/NavigationBar/index.tsx
@@ -8,13 +8,13 @@ import "@mdui/icons/person--rounded";
 import "@mdui/icons/more-vert--rounded";
 
 export default () => {
-    return (
-        <mdui-navigation-bar value="about">
-            <mdui-navigation-bar-item value="about">
-                <mdui-icon-person--outlined slot="icon" />
-                <mdui-icon-person--rounded slot="active-icon" />
-                About
-            </mdui-navigation-bar-item>
-        </mdui-navigation-bar>
-    );
+	return (
+		<mdui-navigation-bar value="about">
+			<mdui-navigation-bar-item value="about">
+				<mdui-icon-person--outlined slot="icon" />
+				<mdui-icon-person--rounded slot="active-icon" />
+				About
+			</mdui-navigation-bar-item>
+		</mdui-navigation-bar>
+	);
 };
diff --git a/src/front/components/TopAppBar/index.tsx b/src/front/components/TopAppBar/index.tsx
index 2f02785..ccd279d 100644
--- a/src/front/components/TopAppBar/index.tsx
+++ b/src/front/components/TopAppBar/index.tsx
@@ -3,10 +3,10 @@ import "mdui/components/top-app-bar-title";
 import "mdui/components/button-icon";
 
 export default () => {
-    return (
-        // @ts-ignore // variant is not in the types for some reason?
-        <mdui-top-app-bar variant="center-aligned" scroll-behavior="elevate">
-            <mdui-top-app-bar-title>IPv4.ARMY</mdui-top-app-bar-title>
-        </mdui-top-app-bar>
-    );
+	return (
+		// @ts-ignore // variant is not in the types for some reason?
+		<mdui-top-app-bar variant="center-aligned" scroll-behavior="elevate">
+			<mdui-top-app-bar-title>IPv4.ARMY</mdui-top-app-bar-title>
+		</mdui-top-app-bar>
+	);
 };
diff --git a/src/front/components/pages/About/index.tsx b/src/front/components/pages/About/index.tsx
index f4d6181..67b28a4 100644
--- a/src/front/components/pages/About/index.tsx
+++ b/src/front/components/pages/About/index.tsx
@@ -1,99 +1,122 @@
-import 'mdui/components/card';
-import 'mdui/components/avatar';
+import "mdui/components/card";
+import "mdui/components/avatar";
 
-import 'mdui/components/segmented-button-group';
-import 'mdui/components/segmented-button';
+import "mdui/components/segmented-button-group";
+import "mdui/components/segmented-button";
 
-import { getColorFromImage } from 'mdui/functions/getColorFromImage';
-import { artist } from '../../../utilities/artist';
-import Lanyard from '../../Lanyard';
-import Hyperate from '../../Hyperate';
+import { getColorFromImage } from "mdui/functions/getColorFromImage";
+import { artist } from "../../../utilities/artist";
+import Hyperate from "../../Hyperate";
+import Lanyard from "../../Lanyard";
 
 const Abyssinian = new Image();
 Abyssinian.src = "/public/Abyssinian/default.png";
 Abyssinian.onload = async () => {
-    const profilePicture = document.getElementById("profilePicture") as HTMLElement;
+	const profilePicture = document.getElementById(
+		"profilePicture",
+	) as HTMLElement;
 
-    artist(await getColorFromImage(Abyssinian), profilePicture);
+	artist(await getColorFromImage(Abyssinian), profilePicture);
 
-    profilePicture.setAttribute("src", Abyssinian.src);
-    profilePicture.innerText = "";
+	profilePicture.setAttribute("src", Abyssinian.src);
+	profilePicture.innerText = "";
 };
 
 export default () => {
-    return (
-        <div style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            flexDirection: "column",
-            height: "100%",
-        }}>
-            <mdui-card variant="filled" style={{
-                width: "90%",
-                padding: ".5rem",
-                // center the contents
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
+	return (
+		<div
+			style={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				flexDirection: "column",
+				height: "100%",
+			}}
+		>
+			<mdui-card
+				variant="filled"
+				style={{
+					width: "90%",
+					padding: ".5rem",
+					// center the contents
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					flexDirection: "column",
 
-                textAlign: "center",
-            }}>
-                <mdui-avatar style={{
-                    width: "5rem",
-                    height: "inherit",
-                    border: "2px solid rgb(var(--status-color))",
-                }} id="profilePicture">S</mdui-avatar>
-                <h1>Seth</h1>
-                {/* make important text bold */}
-                <p>
-                    A <strong>Dedicated</strong> Backend Developer, with many <strong>passions</strong>.
-                    <br />
-                    <br />
-                    <mdui-segmented-button-group full-width>
-                        <mdui-segmented-button>high-fidelity audio</mdui-segmented-button>
-                        <mdui-segmented-button>gaming</mdui-segmented-button>
-                        <mdui-segmented-button>development</mdui-segmented-button>
-                    </mdui-segmented-button-group>
-                </p>
-            </mdui-card>
+					textAlign: "center",
+				}}
+			>
+				<mdui-avatar
+					style={{
+						width: "5rem",
+						height: "inherit",
+						border: "2px solid rgb(var(--status-color))",
+					}}
+					id="profilePicture"
+				>
+					S
+				</mdui-avatar>
+				<h1>Seth</h1>
+				{/* make important text bold */}
+				<p>
+					A <strong>Dedicated</strong> Backend Developer, with many{" "}
+					<strong>passions</strong>.
+					<br />
+					<br />
+					<mdui-segmented-button-group full-width>
+						<mdui-segmented-button>high-fidelity audio</mdui-segmented-button>
+						<mdui-segmented-button>gaming</mdui-segmented-button>
+						<mdui-segmented-button>development</mdui-segmented-button>
+					</mdui-segmented-button-group>
+				</p>
+			</mdui-card>
 
-            <br style={{
-                display: "var(--lanyard-display)",
-            }} />
+			<br
+				style={{
+					display: "var(--lanyard-display)",
+				}}
+			/>
 
-            <mdui-card variant="filled" style={{
-                width: "90%",
-                padding: ".5rem",
-                // center the contents
-                display: "var(--lanyard-display, flex)",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
+			<mdui-card
+				variant="filled"
+				style={{
+					width: "90%",
+					padding: ".5rem",
+					// center the contents
+					display: "var(--lanyard-display, flex)",
+					justifyContent: "center",
+					alignItems: "center",
+					flexDirection: "column",
 
-                //textAlign: "center",
-            }}>
-                <Lanyard />
-            </mdui-card>
+					//textAlign: "center",
+				}}
+			>
+				<Lanyard />
+			</mdui-card>
 
-            <br style={{
-                display: "var(--hyperate-display)",
-            }} />
+			<br
+				style={{
+					display: "var(--hyperate-display)",
+				}}
+			/>
 
-            <mdui-card variant="filled" style={{
-                width: "90%",
-                padding: ".5rem",
-                // center the contents
-                display: "var(--hyperate-display, flex)",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
+			<mdui-card
+				variant="filled"
+				style={{
+					width: "90%",
+					padding: ".5rem",
+					// center the contents
+					display: "var(--hyperate-display, flex)",
+					justifyContent: "center",
+					alignItems: "center",
+					flexDirection: "column",
 
-                //textAlign: "center",
-            }}>
-                <Hyperate />
-            </mdui-card>
-        </div >
-    );
+					//textAlign: "center",
+				}}
+			>
+				<Hyperate />
+			</mdui-card>
+		</div>
+	);
 };
diff --git a/src/front/index.css b/src/front/index.css
index 282d7f0..4956481 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -49,12 +49,12 @@ body {
 	background: #bdf5;
 }
 
-[class*="shj-lang-"]>div {
+[class*="shj-lang-"] > div {
 	display: flex;
 	overflow: auto;
 }
 
-[class*="shj-lang-"]>div :last-child {
+[class*="shj-lang-"] > div :last-child {
 	outline: none;
 	flex: 1;
 }
@@ -201,4 +201,4 @@ body {
 	100% {
 		transform: scale(1);
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/utilities/artist/index.ts b/src/front/utilities/artist/index.ts
index c922c54..077c9a4 100644
--- a/src/front/utilities/artist/index.ts
+++ b/src/front/utilities/artist/index.ts
@@ -1,13 +1,18 @@
 import { setColorScheme } from "mdui/functions/setColorScheme";
 
 export const artist = (color?: string, element?: HTMLElement) => {
-    if (color?.startsWith("#")) {
-        setColorScheme(color, {
-            target: element || document.documentElement,
-        });
-    } else {
-        setColorScheme("#FFF");
-    }
+	if (color?.startsWith("#")) {
+		setColorScheme(color, {
+			target: element || document.documentElement,
+		});
+	} else {
+		setColorScheme("#FFF");
+	}
 
-    document.body.style.setProperty("--status-color", getComputedStyle(document.documentElement).getPropertyValue("--mdui-color-primary"));
+	document.body.style.setProperty(
+		"--status-color",
+		getComputedStyle(document.documentElement).getPropertyValue(
+			"--mdui-color-primary",
+		),
+	);
 };
diff --git a/src/front/utilities/clicker/index.ts b/src/front/utilities/clicker/index.ts
index 3926628..90ef4bd 100644
--- a/src/front/utilities/clicker/index.ts
+++ b/src/front/utilities/clicker/index.ts
@@ -5,18 +5,18 @@ effectTick.volume = 0.1;
 const whitelistedTags = ["button", "icon", "item"];
 
 document.onclick = (event: MouseEvent) => {
-    const target = event.target as HTMLElement;
+	const target = event.target as HTMLElement;
 
-    if (!target) return;
+	if (!target) return;
 
-    const tagName = target.tagName.toLowerCase();
-    const isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
+	const tagName = target.tagName.toLowerCase();
+	const isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
 
-    console.log(tagName, isWhitelisted);
+	console.log(tagName, isWhitelisted);
 
-    if (!isWhitelisted) return;
+	if (!isWhitelisted) return;
 
-    ("vibrate" in navigator && navigator.vibrate(1));
-    effectTick.currentTime = 0;
-    effectTick.play();
+	"vibrate" in navigator && navigator.vibrate(1);
+	effectTick.currentTime = 0;
+	effectTick.play();
 };