Themes modal udpated

2024-08-15 17:07:48 -05:00
parent a47f201fff
commit a37ab84f65
45 changed files with 1480 additions and 1177 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -2,17 +2,17 @@ module.exports = {
 	root: true,
 	env: { browser: true, es2020: true },
 	extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react-hooks/recommended",
 	],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+	ignorePatterns: ["dist", ".eslintrc.cjs"],
+	parser: "@typescript-eslint/parser",
+	plugins: ["react-refresh"],
 	rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+		"react-refresh/only-export-components": [
+			"warn",
 			{ allowConstantExport: true },
 		],
 	},
-}
+};
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,66 +1,76 @@
-import Homepage from './pages/homepage/Homepage'
-import { MantineProvider, DEFAULT_THEME, createTheme, mergeMantineTheme } from '@mantine/core'
+import Homepage from "./pages/homepage/Homepage";
+import {
+	MantineProvider,
+	DEFAULT_THEME,
+	createTheme,
+	mergeMantineTheme,
+} from "@mantine/core";
 import {
 	Route,
 	createBrowserRouter,
 	createRoutesFromElements,
 	RouterProvider,
 } from "react-router-dom";
-import Settings from './pages/settings/Settings';
-import { ModalsProvider } from '@mantine/modals';
-import { useLocalStorage } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { useQueryAPI } from './hooks/useAPI';
-import ThemeProvider from './components/ThemeProvider';
-import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
-import '@mantine/dates/styles.css'; //if using mantine date picker features
-import 'mantine-react-table/styles.css'; //import MRT styles
+import Settings from "./pages/settings/Settings";
+import { ModalsProvider } from "@mantine/modals";
+import { useLocalStorage } from "@mantine/hooks";
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "./hooks/useAPI";
+import ThemeProvider from "./components/ThemeProvider";
+import "@mantine/core/styles.css"; //import Mantine V7 styles needed by MRT
+import "@mantine/dates/styles.css"; //if using mantine date picker features
+import "mantine-react-table/styles.css"; //import MRT styles

 function App() {
-  
 	const { data, isFetched } = useQueryAPI({
 		endpoint: "api/themes",
 	});

 	const [themeName, setThemeName] = useLocalStorage<any>({
-		key: 'theme',
-		defaultValue: 'blackboard',
+		key: "theme",
+		defaultValue: "blackboard",
 	});

 	const [currentTheme, setCurrentTheme] = useState<any>({});

 	const overrides = createTheme({
-    white:currentTheme.colorbackground,
-    fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
+		white: currentTheme.colorbackground,
+		fontFamily:
+			"-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif",
 	});

 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);

 	useEffect(() => {
-    if(data && themeName) {
-      let temp = data.find((t: any) => t.name === themeName)
+		if (data && themeName) {
+			const temp = data.find((t: any) => t.name === themeName);
 			setCurrentTheme(temp);
 		}
-  }, [isFetched, themeName])
+	}, [isFetched, themeName]);

 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
 				<Route path="/trigger" element={<Homepage theme={currentTheme} />} />
-				<Route path="/trigger/settings" element={<Settings theme={currentTheme}/>} />
+				<Route
+					path="/trigger/settings"
+					element={<Settings theme={currentTheme} />}
+				/>
 			</Route>,
 		),
 	);

 	return (
 		<MantineProvider theme={mantineTheme}>
+			{currentTheme && (
 				<ThemeProvider theme={currentTheme}>
 					<ModalsProvider>
 						<RouterProvider router={router} />
 					</ModalsProvider>
 				</ThemeProvider>
+			)}
 		</MantineProvider>
-  )
+	);
 }

-export default App
+export default App;
--- a/src/DataTable/DataTable.tsx
+++ b/src/DataTable/DataTable.tsx
@@ -1,5 +1,6 @@
-import { MantineReactTable, useMantineReactTable } from "mantine-react-table"
+import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
 import { memo } from "react";
+import "../dataTableStyles.css";

 export function DataTableComponent({
 	columns,
@@ -9,7 +10,6 @@ export function DataTableComponent({
 	onCreatingRowSave,
 	onEditingRowSave,
 }: any) {
-
 	const table = useMantineReactTable({
 		columns: columns,
 		data: tableData,
@@ -34,57 +34,21 @@ export function DataTableComponent({
 			showLoadingOverlay: isLoading,
 			isLoading: isLoading,
 		},
-        // mantineToolbarAlertBannerBadgeProps: {
-		// 	style: {
-		// 		color: "red",
-		// 	},
-		// },
-		// mantineTopToolbarProps: {
-		// 	style: {
-		// 		color: "var(--color-text-pri)",
-		// 		background: "var(--color-background)",
-		// 		border: "none",
-		// 		boxShadow: "none",
-		// 	},
-		// },
-		// mantineTableHeadProps: {
-		// 	style: {
-		// 		boxShadow: "none",
-		// 	},
-		// },
-		// mantineTableHeadCellProps: {
-		// 	style: {
-		// 		color: "var(--color-text-pri)",
-		// 		background: "var(--color-background)",
-		// 		borderRight: "none",
-		// 		borderLeft: "none",
-		// 	},
-		// },
-		// mantineTableBodyCellProps: {
-		// 	style: {
-		// 		background: "var(--color-background)",
-		// 		borderRight: "none",
-		// 		borderLeft: "none",
-		// 	},
-		// },
-		// mantinePaperProps: {
-		// 	style: {
-		// 		border: "none",
-		// 		boxShadow: "none",
-		// 		background: "var(--color-background)",
-		// 	},
-		// },
-		// mantineTableContainerProps: {
-		// 	style: {
-		// 		border: "none",
-		// 		boxShadow: "none",
-		// 		background: "var(--color-background)",
-		// 	},
-		// },
+		mantineTableHeadProps: {
+			style: {
+				color: "var(--color-text-pri)",
+			},
+		},
+		mantineTableBodyCellProps: {
+			style: {
+				color: "var(--color-text-pri)",
+				background: "var(--color-background)",
+				borderRight: "none",
+				borderLeft: "none",
+			},
+		},
 	});
-	return (
-				<MantineReactTable table={table} />
-	);
+	return <MantineReactTable table={table} />;
 }

 export const DataTable = memo(DataTableComponent);
--- a/src/DataTable/columns/ApplicationColumns.tsx
+++ b/src/DataTable/columns/ApplicationColumns.tsx
@@ -108,4 +108,3 @@ export default function ApplicationColumns() {

 	return columns;
 }
-
--- a/src/DataTable/columns/BookmarkColumns.tsx
+++ b/src/DataTable/columns/BookmarkColumns.tsx
@@ -80,4 +80,3 @@ export default function ApplicationColumns(groups: any, groupData: any) {

 	return columns;
 }
-
--- a/src/DataTable/columns/CategoryColumns.tsx
+++ b/src/DataTable/columns/CategoryColumns.tsx
@@ -64,4 +64,3 @@ export default function CategoryColumns() {

 	return columns;
 }
-
--- a/src/DataTable/columns/MessagesColumns.tsx
+++ b/src/DataTable/columns/MessagesColumns.tsx
@@ -60,4 +60,3 @@ export default function MessagesColumns() {

 	return columns;
 }
-
--- a/src/DataTable/columns/PersonalizationColumns.tsx
+++ b/src/DataTable/columns/PersonalizationColumns.tsx
@@ -59,4 +59,3 @@ export default function PersonalizationColumns() {

 	return columns;
 }
-
--- a/src/DataTable/columns/SearchProviderColumns.tsx
+++ b/src/DataTable/columns/SearchProviderColumns.tsx
@@ -60,4 +60,3 @@ export default function SearchProviderColumns() {

 	return columns;
 }
-
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -1,11 +1,20 @@
-import { Box } from '@mantine/core';
+import { Box } from "@mantine/core";

-export default function ThemeProvider({ theme, children }: { theme: any, children: React.ReactNode }) {
-    return <Box style={{
-        '--color-text-pri': theme.colortextpri,
-        '--color-text-acc': theme.colortextacc,
-        '--color-background': theme.colorbackground,
-        '--color-border': theme.colorborder,
-        '--color-search-background': theme.colorsearchbackground,
-    }}>{children}</Box>;
+export default function ThemeProvider({
+	theme,
+	children,
+}: { theme: any; children: React.ReactNode }) {
+	return (
+		<Box
+			style={{
+				"--color-text-pri": theme.colortextpri,
+				"--color-text-acc": theme.colortextacc,
+				"--color-background": theme.colorbackground,
+				"--color-border": theme.colorborder,
+				"--color-search-background": theme.colorsearchbackground,
+			}}
+		>
+			{children}
+		</Box>
+	);
 }
--- a/src/components/ToastError.tsx
+++ b/src/components/ToastError.tsx
@@ -1,10 +1,10 @@
-import { Stack, Text } from '@mantine/core';
-import { stackClasses } from '../styles';
+import { Stack, Text } from "@mantine/core";
+import { stackClasses } from "../styles";

 export function ToastError({ err }: { err: any }) {
 	const errorResponse = JSON.parse(err.message);
 	return (
-		<Stack className={stackClasses.VStack} style={{ alignItems: 'flex-start' }}>
+		<Stack className={stackClasses.VStack} style={{ alignItems: "flex-start" }}>
 			<Text>
 				Status: {errorResponse.status} {errorResponse.statusText}
 			</Text>
--- a/src/contexts/HomepageFilters.ts
+++ b/src/contexts/HomepageFilters.ts
@@ -1,3 +1,3 @@
-import { atom } from 'jotai';
+import { atom } from "jotai";

-export const HomepageFilters = atom([{value: 'All', label: 'All'}]);
+export const HomepageFilters = atom([{ value: "All", label: "All" }]);
--- a/src/dataTableStyles.css
+++ b/src/dataTableStyles.css
@@ -1,173 +1,6 @@
-.mrt-table-paper {
-	height: 100%;
-	overflow: visible;
-	background-color: transparent;
-	border: none;
-	border-style: none;
-	box-shadow: none;
-	&.mantine-Overlay-root {
-		color: var(--mantine-primary-color-7);
-		background-color: alpha(var(--mantine-color-appGray-9), 0.5);
-	}
-	&.mrt-toolbar-dropzone {
-		height: 4.5vh;
-		width: 35vw;
-		color: var(--mantine-primary-color-6);
-		font-size: 36px;
-		background-color: rgb(255, 255, 255, 1);
-		justify-self: center;
-		&.inner {
-			font-size: 36px;
-		}
-	}
-	& ::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
-		border-radius: 5px;
-		background-color: transparent;
-
-	}
-	& ::-webkit-scrollbar-thumb:hover {
-		background-color: var(--mantine-primary-color-4);
-	}
-	& ::-webkit-scrollbar-track {
-		background-color: transparent;
-		border-radius: 5px;
-	}
-	& ::-webkit-scrollbar-thumb {
-		border-radius: 5px;
-		background-color: var(--mantine-primary-color-6);
-	}
-	& ::-webkit-scrollbar-corner {
-		background-color: light-dark(white, var(--mantine-primary-color-8));
-	}
-}
-
-.mrt-table-container {
-	height: 100%;
-	background-color: light-dark(white, var(--mantine-primary-color-8));
-	border-top: solid;
-	border-top-color: light-dark(
-		var(--mantine-color-appGray-1),
-		var(--mantine-primary-color-6)
-	);
-	border-top-width: 1px;
-	border-left: solid;
-	border-left-color: light-dark(
-		var(--mantine-color-appGray-1),
-		var(--mantine-primary-color-6)
-	);
-	border-left-width: 1px;
-	border-right: solid;
-	border-right-color: light-dark(
-		var(--mantine-color-appGray-1),
-		var(--mantine-primary-color-6)
-	);
-	border-right-width: 1px;
-	border-bottom: none;
-	border-radius: 4px;
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
-}
-
-.mantine-Table-th {
-	color: light-dark(var(--mantine-color-appGray-7), var(--mantine-primary-color-3));
-	background-color: light-dark(white, var(--mantine-primary-color-8));
-	border-color: light-dark(
-		var(--mantine-color-appGray-1),
-		var(--mantine-primary-color-7)
-	);
-	/* & .mantine-ActionIcon-root {
-		margin-right: 1px;
-		display: none;
-	} */
-	& .mrt-table-head-cell-content {
-		padding-top: 12px;
-		padding-bottom: 12px;
-		align-items: center;
-		justify-content: center;
-		white-space: nowrap;
-		.mrt-table-head-cell-labels {
-			& > * > .mantine-Text-root {
-				font-size: 14px;
-				font-weight: bold;
-			}
-		}
-		& .mrt-table-head-cell-content-actions {
-			transition: 1s all ease;
-			& .mantine-ActionIcon-root {
-				color: transparent;
-				background-color: transparent;
-				display: hidden;
-			}
-		}
-	}
-	& .mrt-table-head-cell-resize-handle {
-		display: flex;
-		width: 4px;
-		border-radius: 4px;
-		border-left-color: transparent;
-		background-color: light-dark(
-			var(--mantine-primary-color-1),
-			var(--mantine-primary-color-6)
-		);
-	}
-	& .mantine-TableHeadCell-Content-Labels {
-		cursor: pointer;
-		position: absolute;
-	}
-	&:hover {
-		& .mrt-table-head-cell-content-actions {
-			& .mantine-ActionIcon-root {
-				color: light-dark(var(--mantine-primary-color-6), var(--mantine-primary-color-3));
-				background-color: light-dark(
-					var(--mantine-primary-color-1),
-					var(--mantine-primary-color-6)
-				);
-				display: grid;
-				position: absolute;
-				right: 0;
-			}
-		}
-		& .mrt-table-head-cell-resize-handle {
-			border-left-color: var(--mantine-primary-color-2);
-			border-width: 4px;
-			border-left-style: solid;
-		}
-	}
-}
-
-.mantine-Mark-root {
-	background-color: light-dark(
-		var(--mantine-primary-color-7),
-		var(--mantine-primary-color-7)
-	);
-	color: white;
-}
-
-.mantine-Table-tr {
-	height: 56px;
-	box-shadow: none;
-	& .table-icon-device-floppy {
-		color: light-dark(var(--mantine-primary-color-6), var(--mantine-primary-color-3));
-	}
-}
-
-.mantine-Table-td {
-	color: light-dark(var(--mantine-color-appGray-7), var(--mantine-primary-color-3));
-	justify-content: center;
-	border-color: light-dark(
-		var(--mantine-color-appGray-1),
-		var(--mantine-primary-color-7)
-	);
-
-	& > * > .mantine-Text-root {
-		font-size: 14px;
-	}
-}
-
 .mrt-table-head-sort-button {
 	display: none;
+	color: var(--color-text-pri) !important;
 }

 .mrt-table-head-sort-button[data-sorted='asc'] {
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1 @@
-export { useQueryAPI } from './useAPI';
+export { useQueryAPI } from "./useAPI";
--- a/src/hooks/useAPI.ts
+++ b/src/hooks/useAPI.ts
@@ -1,21 +1,25 @@
-import { useQuery, useQueryClient, useMutation, useInfiniteQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
-import { toast } from 'react-toastify';
+import {
+	useQuery,
+	useQueryClient,
+	useMutation,
+	useInfiniteQuery,
+} from "@tanstack/react-query";
+import { useCallback } from "react";
+import { toast } from "react-toastify";

 export function useQueryAPI({ endpoint }: { endpoint: string }) {
-
 	const callEndpoint = async (endpoint: string) => {
 		const url = `http://localhost:5000/trigger/${endpoint}`;
 		const options: object = {
-			method: 'GET',
+			method: "GET",
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*',
-				'Access-Control-Allow-Headers': '*',
-				'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-				'Access-Control-Allow-Credentials': true,
-				'Sec-Fetch-Mode': 'no-cors',
-				'Sec-Fetch-Site': 'same-site',
+				"Content-Type": "application/json",
+				"Access-Control-Allow-Origin": "*",
+				"Access-Control-Allow-Headers": "*",
+				"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+				"Access-Control-Allow-Credentials": true,
+				"Sec-Fetch-Mode": "no-cors",
+				"Sec-Fetch-Site": "same-site",
 			},
 		};

@@ -27,30 +31,28 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
 	};

 	return useQuery({
-		queryKey: ['GET', endpoint],
+		queryKey: ["GET", endpoint],
 		queryFn: () => callEndpoint(endpoint),
 	});
 }

 export function useMutationAPI() {
-
 	const callEndpoint = async (
 		method: string,
 		endpoint: string,
 		body: object | undefined | null,
 	) => {
-
 		const url = `http://localhost:5000/trigger/${endpoint}`;
 		const options: any = {
 			method: method,
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*',
-				'Access-Control-Allow-Headers': '*',
-				'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-				'Access-Control-Allow-Credentials': true,
-				'Sec-Fetch-Mode': 'no-cors',
-				'Sec-Fetch-Site': 'same-site'
+				"Content-Type": "application/json",
+				"Access-Control-Allow-Origin": "*",
+				"Access-Control-Allow-Headers": "*",
+				"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+				"Access-Control-Allow-Credentials": true,
+				"Sec-Fetch-Mode": "no-cors",
+				"Sec-Fetch-Site": "same-site",
 			},
 			body: JSON.stringify(body),
 		};
@@ -58,7 +60,7 @@ export function useMutationAPI() {
 		const response = await fetch(url, options);
 		if (!response.ok) {
 			const responseData = await response.json();
-			if (typeof responseData.detail !== 'string') {
+			if (typeof responseData.detail !== "string") {
 				const errorResponse = JSON.stringify({
 					status: response.status,
 					statusText: response.statusText,
@@ -71,7 +73,7 @@ export function useMutationAPI() {

 				throw new Error(errorResponse);
 			}
-			if (typeof responseData.detail === 'object') {
+			if (typeof responseData.detail === "object") {
 				const errorResponse = JSON.stringify({
 					status: response.status,
 					statusText: response.statusText,
@@ -108,16 +110,18 @@ export function useMutationAPI() {
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
 		onSuccess: (data, variables) => {
-			queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] });
+			queryClient.invalidateQueries({ queryKey: ["GET", variables.endpoint] });

-			if (variables.endpoint.includes('/')) {
+			if (variables.endpoint.includes("/")) {
 				if ((variables.endpoint.match(/\//g) || []).length > 2) {
-					const GetEndpoint = variables.endpoint.split('/');
+					const GetEndpoint = variables.endpoint.split("/");
 					const Endpoint = `${GetEndpoint[1]}/${GetEndpoint[2]}`;
-					queryClient.invalidateQueries({ queryKey: ['GET', `/${Endpoint}`] });
+					queryClient.invalidateQueries({ queryKey: ["GET", `/${Endpoint}`] });
 				} else {
-					const GetEndpoint = variables.endpoint.split('/')[1];
-					queryClient.invalidateQueries({ queryKey: ['GET', `/${GetEndpoint}`] });
+					const GetEndpoint = variables.endpoint.split("/")[1];
+					queryClient.invalidateQueries({
+						queryKey: ["GET", `/${GetEndpoint}`],
+					});
 				}
 			}
 		},
@@ -125,32 +129,30 @@ export function useMutationAPI() {
 }

 export function useFileUploadAPI() {
-
 	const callEndpoint = async (
 		method: string,
 		endpoint: string,
 		body?: object | FormData | undefined | null,
 	) => {
-
 		const url = `http://localhost:5000/trigger/${endpoint}`;

 		const options = {
 			method: method,
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*',
-				'Access-Control-Allow-Headers': '*',
-				'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-				'Access-Control-Allow-Credentials': true,
-				'Sec-Fetch-Mode': 'no-cors',
-				'Sec-Fetch-Site': 'same-site',
+				"Content-Type": "application/json",
+				"Access-Control-Allow-Origin": "*",
+				"Access-Control-Allow-Headers": "*",
+				"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+				"Access-Control-Allow-Credentials": true,
+				"Sec-Fetch-Mode": "no-cors",
+				"Sec-Fetch-Site": "same-site",
 			},
 			body: body ?? undefined,
 		};
 		const response = await fetch(url, options as unknown as Body);
 		if (!response.ok) {
 			const responseData = await response.json();
-			if (typeof responseData.detail !== 'string') {
+			if (typeof responseData.detail !== "string") {
 				const errorResponse = JSON.stringify({
 					status: response.status,
 					statusText: response.statusText,
@@ -190,10 +192,10 @@ export function useFileUploadAPI() {
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
 		onSuccess: (variables) => {
-			queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] });
-			if (variables.endpoint?.includes('/')) {
-				const GetEndpoint = variables.endpoint.split('/')[1];
-				queryClient.invalidateQueries({ queryKey: ['GET', `/${GetEndpoint}`] });
+			queryClient.invalidateQueries({ queryKey: ["GET", variables.endpoint] });
+			if (variables.endpoint?.includes("/")) {
+				const GetEndpoint = variables.endpoint.split("/")[1];
+				queryClient.invalidateQueries({ queryKey: ["GET", `/${GetEndpoint}`] });
 			}
 		},
 	});
@@ -204,12 +206,11 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) {
 	const queryClient = useQueryClient();

 	const fetchPage = async (page: number, retryCount = 0): Promise<any> => {
-
 		// Start building the URL
 		const url = new URL(`http://localhost:5000/trigger/${endpoint}`);

 		// Check and append custom query parameters from the endpoint
-		const customParams = new URLSearchParams(endpoint.split('?')[1]);
+		const customParams = new URLSearchParams(endpoint.split("?")[1]);
 		for (const [key, value] of customParams) {
 			if (!url.searchParams.has(key)) {
 				url.searchParams.append(key, value);
@@ -217,19 +218,19 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) {
 		}

 		// Add 'page' and 'size' parameters
-		url.searchParams.set('page', page.toString()); // Use 'set' to ensure uniqueness
-		url.searchParams.set('size', pageSize.toString());
+		url.searchParams.set("page", page.toString()); // Use 'set' to ensure uniqueness
+		url.searchParams.set("size", pageSize.toString());

 		const options: any = {
-			method: 'GET',
+			method: "GET",
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*',
-				'Access-Control-Allow-Headers': '*',
-				'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-				'Access-Control-Allow-Credentials': true,
-				'Sec-Fetch-Mode': 'no-cors',
-				'Sec-Fetch-Site': 'same-site',
+				"Content-Type": "application/json",
+				"Access-Control-Allow-Origin": "*",
+				"Access-Control-Allow-Headers": "*",
+				"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+				"Access-Control-Allow-Credentials": true,
+				"Sec-Fetch-Mode": "no-cors",
+				"Sec-Fetch-Site": "same-site",
 			},
 		};

@@ -294,18 +295,18 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) {
 			return allItems;
 		} catch (error) {
 			// Handling errors in fetching the first page
-			console.error('Error fetching the first page:', error);
+			console.error("Error fetching the first page:", error);
 			return []; // Return empty array on error
 		}
 	};

 	const invalidate = useCallback(() => {
-		queryClient.invalidateQueries({ queryKey: ['GET', endpoint] });
+		queryClient.invalidateQueries({ queryKey: ["GET", endpoint] });
 	}, [queryClient, endpoint]);

 	return {
 		...useQuery({
-			queryKey: ['GET', endpoint],
+			queryKey: ["GET", endpoint],
 			queryFn: callEndpoint,
 		}),
 		invalidate,
@@ -322,31 +323,31 @@ export function useDownloadFile() {
 		async ({ endpoint, file_name }: DownloadFileOptions) => {
 			const url = `http://localhost:5000/trigger/${endpoint}`;
 			const options: any = {
-				method: 'GET',
+				method: "GET",
 				headers: {
-					'Content-Type': 'application/json',
-					'Access-Control-Allow-Origin': '*',
-					'Access-Control-Allow-Headers': '*',
-					'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-					'Access-Control-Allow-Credentials': true,
-					'Sec-Fetch-Mode': 'no-cors',
-					'Sec-Fetch-Site': 'same-site',
+					"Content-Type": "application/json",
+					"Access-Control-Allow-Origin": "*",
+					"Access-Control-Allow-Headers": "*",
+					"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+					"Access-Control-Allow-Credentials": true,
+					"Sec-Fetch-Mode": "no-cors",
+					"Sec-Fetch-Site": "same-site",
 				},
 			};
-			const toastID = toast.loading('Processing...');
+			const toastID = toast.loading("Processing...");
 			try {
 				const response = await fetch(url, options);
 				if (!response.ok) {
-					throw new Error('Network response was not ok');
+					throw new Error("Network response was not ok");
 				}

 				const blob = await response.blob();
-				if (blob.type === 'application/json') {
+				if (blob.type === "application/json") {
 					const blob_text = await blob.text();
-					const cleaned_text = blob_text.replace(/"/g, '');
+					const cleaned_text = blob_text.replace(/"/g, "");
 					toast.update(toastID, {
 						render: cleaned_text,
-						type: 'info',
+						type: "info",
 						isLoading: false,
 						autoClose: 5000,
 						closeButton: null,
@@ -354,11 +355,11 @@ export function useDownloadFile() {
 					return;
 				}

-				if (typeof window !== 'undefined') {
+				if (typeof window !== "undefined") {
 					const blobURL = window.URL.createObjectURL(blob);
-					const a = document.createElement('a');
+					const a = document.createElement("a");

-					a.style.display = 'none';
+					a.style.display = "none";
 					a.href = blobURL;
 					a.download = file_name;

@@ -368,17 +369,17 @@ export function useDownloadFile() {
 					document.body.removeChild(a);
 					toast.update(toastID, {
 						render: `${file_name} Downloaded`,
-						type: 'success',
+						type: "success",
 						isLoading: false,
 						autoClose: 5000,
 						closeButton: null,
 					});
 				}
 			} catch (error) {
-				console.error('Download failed:', error);
+				console.error("Download failed:", error);
 				toast.update(toastID, {
 					render: `Error Downloading ${file_name}. Please try again.`,
-					type: 'error',
+					type: "error",
 					isLoading: false,
 					autoClose: 5000,
 					closeButton: null,
@@ -391,7 +392,6 @@ export function useDownloadFile() {
 	return downloadFile;
 }

-
 export const useFetchInfiniteQuery = ({
 	endpoint,
 	pageSize = 10,
@@ -399,27 +399,27 @@ export const useFetchInfiniteQuery = ({
 	endpoint: string;
 	pageSize?: number;
 }) => {
-	const queryKey = ['GET', endpoint];
+	const queryKey = ["GET", endpoint];

 	const fetchInfiniteQuery = async (endpoint: string) => {
 		const url = `http://localhost:5000/trigger/${endpoint}`;
 		const requestOptions: any = {
-			method: 'GET',
+			method: "GET",
 			headers: {
-				'Content-Type': 'application/json',
-				'Access-Control-Allow-Origin': '*',
-				'Access-Control-Allow-Headers': '*',
-				'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
-				'Access-Control-Allow-Credentials': true,
-				'Sec-Fetch-Mode': 'no-cors',
-				'Sec-Fetch-Site': 'same-site'
+				"Content-Type": "application/json",
+				"Access-Control-Allow-Origin": "*",
+				"Access-Control-Allow-Headers": "*",
+				"Access-Control-Allow-Methods": "POST, GET, OPTIONS",
+				"Access-Control-Allow-Credentials": true,
+				"Sec-Fetch-Mode": "no-cors",
+				"Sec-Fetch-Site": "same-site",
 			},
 		};
 		try {
 			const response = await fetch(url, requestOptions);
 			return await response.json();
 		} catch (error) {
-			console.error('Error fetching transactions:', error);
+			console.error("Error fetching transactions:", error);
 			throw error;
 		}
 	};
@@ -431,12 +431,25 @@ export const useFetchInfiniteQuery = ({
 		}
 		return allPages.length + 1;
 	};
-	const { data, isLoading, isFetchingNextPage, fetchNextPage, isError, isFetching } =
-		useInfiniteQuery({
+	const {
+		data,
+		isLoading,
+		isFetchingNextPage,
+		fetchNextPage,
+		isError,
+		isFetching,
+	} = useInfiniteQuery({
 		queryKey,
 		queryFn,
 		getNextPageParam,
 		initialPageParam: 1,
 	});
-	return { data, isLoading, isFetchingNextPage, fetchNextPage, isError, isFetching };
+	return {
+		data,
+		isLoading,
+		isFetchingNextPage,
+		fetchNextPage,
+		isError,
+		isFetching,
+	};
 };
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -12,11 +12,10 @@ const queryClient = new QueryClient({
 	},
 });

-ReactDOM.createRoot(document.getElementById('root')!).render(
-  
+ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<QueryClientProvider client={queryClient}>
 			<App />
 		</QueryClientProvider>
 	</React.StrictMode>,
-)
+);
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -1,28 +1,31 @@
-import { Stack } from '@mantine/core';
-import stackClasses from '../../styles/Stack.module.css';
-import {useQueryAPI} from '../../hooks/useAPI';
-import Search from './components/Search';
-import Header from './components/Header';
-import Applications from './components/Applications';
-import Bookmarks from './components/Bookmarks';
-import SettingsButton from './components/SettingsButton';
-import { useEffect, useState } from 'react';
-import '../../index.css';
-import { useLocalStorage } from '@mantine/hooks';
+import { Stack } from "@mantine/core";
+import stackClasses from "../../styles/Stack.module.css";
+import { useQueryAPI } from "../../hooks/useAPI";
+import Search from "./components/Search";
+import Header from "./components/Header";
+import Applications from "./components/Applications";
+import Bookmarks from "./components/Bookmarks";
+import SettingsButton from "./components/SettingsButton";
+import { useEffect, useState } from "react";
+import "../../index.css";
+import { useLocalStorage } from "@mantine/hooks";

-export default function Homepage({theme}:any) {
-	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
-	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [contentType, setContentType] = useLocalStorage<any>({ key: 'contenttype', defaultValue: 'All' });
+export default function Homepage({ theme }: any) {
+	const { data, isFetching } = useQueryAPI({ endpoint: "api/messages" });
+	const [displayedGreeting, setDisplayedGreeting] = useState("");
+	const [contentType, setContentType] = useLocalStorage<any>({
+		key: "contenttype",
+		defaultValue: "All",
+	});
 	function date() {
 		const currentDate = new Date();
 		const dateOptions: Intl.DateTimeFormatOptions = {
-			weekday: 'long',
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric',
+			weekday: "long",
+			year: "numeric",
+			month: "long",
+			day: "numeric",
 		};
-		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
+		const date = currentDate.toLocaleDateString("en-GB", dateOptions);
 		return date;
 	}
 	function greet(list: any) {
@@ -32,7 +35,7 @@ export default function Homepage({theme}:any) {
 		let timeBased: any = [];
 		let easterEggs: any = [];
 		for (const l of list) {
-			if (l.easteregg === 'N') {
+			if (l.easteregg === "N") {
 				timeBased = timeBased.concat(l);
 			} else {
 				easterEggs = easterEggs.concat(l);
@@ -51,12 +54,16 @@ export default function Homepage({theme}:any) {
 	}, [isFetching]);

 	return (
-		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
+		<Stack gap={0} className={stackClasses.containerStack} justify="center">
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications contentType={contentType}/>
-			<Bookmarks contentType={contentType}/>
-			<SettingsButton theme={theme} contentType={contentType} setContentType={setContentType}/>
+			<Applications contentType={contentType} />
+			<Bookmarks contentType={contentType} />
+			<SettingsButton
+				theme={theme}
+				contentType={contentType}
+				setContentType={setContentType}
+			/>
 		</Stack>
 	);
 }
--- a/src/pages/homepage/components/AppItem.tsx
+++ b/src/pages/homepage/components/AppItem.tsx
@@ -1,41 +1,43 @@
-import { Icon } from '@iconify/react';
-import { Box, Stack, Text } from '@mantine/core';
-import { useState } from 'react';
-import stacks from '../../../styles/Stack.module.css';
-import texts from '../../../styles/Text.module.css';
+import { Icon } from "@iconify/react";
+import { Box, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+import stacks from "../../../styles/Stack.module.css";
+import texts from "../../../styles/Text.module.css";

 function AppItem({ url, icon, name }: any) {
-	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [textDecoration, setTextDecoration] = useState<string>("none");

 	return (
 		<Box
-			component='a'
+			component="a"
 			href={`https://${url}`}
-			onMouseOver={() => setTextDecoration('underline')}
-			onMouseOut={() => setTextDecoration('none')}
+			onMouseOver={() => setTextDecoration("underline")}
+			onMouseOut={() => setTextDecoration("none")}
 			className={stacks.appItemBox}
 		>
 			<Stack
 				style={{
-					height: '64px',
-					marginRight: '1em',
-					marginLeft: '1em',
-					paddingTop: '15px',
+					height: "64px",
+					marginRight: "1em",
+					marginLeft: "1em",
+					paddingTop: "15px",
 				}}
 			>
 				<Icon icon={`mdi:${icon}`} height={32} width={32} />
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
 					flex: 1,
-					overflow: 'hidden',
+					overflow: "hidden",
 					gap: 0,
 				}}
 			>
-				<Text className={texts.appName} classNames={texts}>{name}</Text>
+				<Text className={texts.appName} classNames={texts}>
+					{name}
+				</Text>
 				<Text
 					className={texts.appUrl}
 					classNames={texts}
--- a/src/pages/homepage/components/Applications.tsx
+++ b/src/pages/homepage/components/Applications.tsx
@@ -1,11 +1,11 @@
-import { Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import {useQueryAPI} from '../../../hooks/useAPI';
-import texts from '../../../styles/Text.module.css';
-import AppItem from './AppItem';
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import texts from "../../../styles/Text.module.css";
+import AppItem from "./AppItem";

-function Applications({contentType}: any) {
-	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
+function Applications({ contentType }: any) {
+	const { data, isFetching } = useQueryAPI({ endpoint: "api/apps" });
 	const [applications, setApplications] = useState([]);
 	useEffect(() => {
 		if (!isFetching) {
@@ -13,24 +13,26 @@ function Applications({contentType}: any) {
 		}
 	}, [isFetching]);
 	return (
-		<Stack id='apps' style={{ gap: 0 }}>
-			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>
+		<Stack id="apps" style={{ gap: 0 }}>
+			<Text className={texts.sectionTitle} classNames={texts}>
+				Applications
+			</Text>
 			<Stack
 				style={{
-					background: 'var(--color-background)',
-					gap: '.25rem',
-					backgroundSize: 'cover',
-					borderBottom: '0px solid',
-					display: 'grid',
-					gridColumnGap: '5px',
-					gridRowGap: '5px',
-					gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
-					gridTemplateRows: '64px',
-					paddingBottom: 'var(--module-spacing)',
+					background: "var(--color-background)",
+					gap: ".25rem",
+					backgroundSize: "cover",
+					borderBottom: "0px solid",
+					display: "grid",
+					gridColumnGap: "5px",
+					gridRowGap: "5px",
+					gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr",
+					gridTemplateRows: "64px",
+					paddingBottom: "var(--module-spacing)",
 				}}
 			>
 				{applications?.map((item: any) => {
-					if (item.category === contentType || contentType === 'All')
+					if (item.category === contentType || contentType === "All")
 						return (
 							<AppItem
 								key={item.name}
--- a/src/pages/homepage/components/BookmarkGroups.tsx
+++ b/src/pages/homepage/components/BookmarkGroups.tsx
@@ -1,15 +0,0 @@
-import BookmarkDetails from './BookmarkDetails';
-
-function BookmarkGroups(props) {
-	const links = props.links;
-	return (
-		<div id='bookmarkForm'>
-			<h3>{links?.category}</h3>
-			{links?.map((links) => (
-				<BookmarkDetails key={links.name} name={links.name} url={links.url} />
-			))}
-		</div>
-	);
-}
-
-export default BookmarkGroups;
--- a/src/pages/homepage/components/Bookmarks.tsx
+++ b/src/pages/homepage/components/Bookmarks.tsx
@@ -1,15 +1,15 @@
-import { Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import {useQueryAPI} from '../../../hooks/useAPI';
-import texts from '../../../styles/Text.module.css';
-import LinkGroups from './LinkGroups';
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import texts from "../../../styles/Text.module.css";
+import LinkGroups from "./LinkGroups";

-function Links({contentType}: any) {
+function Links({ contentType }: any) {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
-		endpoint: 'api/links',
+		endpoint: "api/links",
 	});
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
-		endpoint: 'api/categories',
+		endpoint: "api/categories",
 	});
 	const [bookmarks, setBookmarks] = useState([]);
 	const [categories, setCategories] = useState([]);
@@ -24,29 +24,32 @@ function Links({contentType}: any) {
 	return (
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
-				<Stack id='links' style={{ gap: 0 }}>
-					<Text className={texts.sectionTitle} classNames={texts}>Bookmarks</Text>
+				<Stack id="links" style={{ gap: 0 }}>
+					<Text className={texts.sectionTitle} classNames={texts}>
+						Bookmarks
+					</Text>
 					<Stack
 						style={{
-							display: 'grid',
-							flexWrap: 'nowrap',
-							gridColumnGap: '20px',
-							gridRowGap: '0px',
-							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-							gridTemplateRows: 'auto',
+							display: "grid",
+							flexWrap: "nowrap",
+							gridColumnGap: "20px",
+							gridRowGap: "0px",
+							gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
+							gridTemplateRows: "auto",
 						}}
 					>
 						{categories.map((category: any) => {
 							if (
 								category.column_filter === contentType ||
-								contentType === 'All'
+								contentType === "All"
 							) {
 								return (
 									<LinkGroups
 										key={category.id}
 										category={category.category_name}
 										links={bookmarks.filter(
-											(bookmark: any) => bookmark.category === category.category_index,
+											(bookmark: any) =>
+												bookmark.category === category.category_index,
 										)}
 									/>
 								);
--- a/src/pages/homepage/components/Header.tsx
+++ b/src/pages/homepage/components/Header.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import {textClasses} from '../../../styles';
+import { Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { textClasses } from "../../../styles";

 function Header({ greet, date }: any) {
 	const [time, setTime] = useState(new Date());
@@ -22,41 +22,47 @@ function Header({ greet, date }: any) {
 	return (
 		<Stack
 			style={{
-				borderBottom: '0px solid',
-				zIndex: '1',
-				clear: 'both',
-				display: 'flex',
-				flexDirection: 'row',
+				borderBottom: "0px solid",
+				zIndex: "1",
+				clear: "both",
+				display: "flex",
+				flexDirection: "row",
 				gap: 0,
 			}}
 		>
 			<Stack
 				style={{
-					display: 'grid',
-					width: '100%',
+					display: "grid",
+					width: "100%",
 				}}
 			>
-				<Text className={textClasses.greeting} classNames={textClasses}>{greet}</Text>
+				<Text className={textClasses.greeting} classNames={textClasses}>
+					{greet}
+				</Text>
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					float: 'right',
-					justifyContent: 'right',
-					width: 'auto',
+					display: "flex",
+					float: "right",
+					justifyContent: "right",
+					width: "auto",
 					gap: 0,
 				}}
 			>
-				<Text className={textClasses.dateTime} classNames={textClasses} style={{ width: 'max-content' }}>
+				<Text
+					className={textClasses.dateTime}
+					classNames={textClasses}
+					style={{ width: "max-content" }}
+				>
 					{date}
 				</Text>
 				<Text
-					component='h2'
+					component="h2"
 					className={textClasses.dateTime}
 					classNames={textClasses}
 					style={{
-						justifyContent: 'right',
-						display: 'grid',
+						justifyContent: "right",
+						display: "grid",
 					}}
 				>
 					{`${
@@ -65,7 +71,7 @@ function Header({ greet, date }: any) {
 							: time.getHours() > 12
 								? time.getHours() - 12
 								: time.getHours()
-					}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
+					}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? "PM" : "AM"}`}
 				</Text>
 			</Stack>
 		</Stack>
--- a/src/pages/homepage/components/LinkGroups.tsx
+++ b/src/pages/homepage/components/LinkGroups.tsx
@@ -1,17 +1,19 @@
-import { Stack, Text } from '@mantine/core';
-import texts from '../../../styles/Text.module.css';
-import LinkItem from './LinkItem';
+import { Stack, Text } from "@mantine/core";
+import texts from "../../../styles/Text.module.css";
+import LinkItem from "./LinkItem";

 function LinkGroups({ links, category }: any) {
 	return (
 		<Stack
 			style={{
-				marginBottom: '0em',
-				display: 'block',
-				lineHeight: '1.5rem',
+				marginBottom: "0em",
+				display: "block",
+				lineHeight: "1.5rem",
 			}}
 		>
-			<Text className={texts.linkCategory} classNames={texts}>{category}</Text>
+			<Text className={texts.linkCategory} classNames={texts}>
+				{category}
+			</Text>
 			{links?.map((link: any) => (
 				<LinkItem key={link.name} link={link} />
 			))}
--- a/src/pages/homepage/components/LinkItem.tsx
+++ b/src/pages/homepage/components/LinkItem.tsx
@@ -1,9 +1,14 @@
-import { Text } from '@mantine/core';
-import texts from '../../../styles/Text.module.css';
+import { Text } from "@mantine/core";
+import texts from "../../../styles/Text.module.css";

 function LinkItem({ link }: any) {
 	return (
-		<Text className={texts.linkItem} classNames={texts} component='a' href={link.url}>
+		<Text
+			className={texts.linkItem}
+			classNames={texts}
+			component="a"
+			href={link.url}
+		>
 			{link.name}
 		</Text>
 	);
--- a/src/pages/homepage/components/MessageInfo.jsx
+++ b/src/pages/homepage/components/MessageInfo.jsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
-import Messages from '../../../components/Messages';
-import useQueryAPI from '../../../hooks/useAPI';
+import { useEffect, useState } from "react";
+import Messages from "../../../components/Messages";
+import useQueryAPI from "../../../hooks/useAPI";

 function MessageInfo() {
-	const messageData = useQueryAPI({ endpoint: 'api/messages' });
+	const messageData = useQueryAPI({ endpoint: "api/messages" });
 	const [greetings, setGreetings] = useState([]);

 	useEffect(() => {
@@ -15,7 +15,7 @@ function MessageInfo() {
 	return (
 		<>
 			{greetings && (
-				<div id='messageForm'>
+				<div id="messageForm">
 					{greetings.map((greeting, index) => (
 						<Messages
 							key={greeting.id}
--- a/src/pages/homepage/components/Search.tsx
+++ b/src/pages/homepage/components/Search.tsx
@@ -4,35 +4,40 @@ import { useQueryAPI } from "../../../hooks";
 import { useState } from "react";

 export default function Search() {
-    const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
+	const { data: providers } = useQueryAPI({ endpoint: "api/providers" });

-    const [providerLabel, setProviderLabel] = useState('Google Search');
-    const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
+	const [providerLabel, setProviderLabel] = useState("Google Search");
+	const [providerURL, setProviderURL] = useState(
+		"https://www.google.com/search?q=",
+	);

 	const handleKeyPress = (item: any) => {
-        const option = item.target.value.substr(1, item.target.value.indexOf(' ') - 1) || item.target.value.substr(1);
+		const option =
+			item.target.value.substr(1, item.target.value.indexOf(" ") - 1) ||
+			item.target.value.substr(1);
 		const subtext = item.target.value.substr(2 + option.length);
-        if (item.key === 'Enter') {
-            if (item.target.value.startsWith('/')) {
-                open(`${providerURL}${subtext}`, '_self');
+		if (item.key === "Enter") {
+			if (item.target.value.startsWith("/")) {
+				open(`${providerURL}${subtext}`, "_self");
 			} else if (validURL(item.target.value)) {
-                if (containsProtocol(item.target.value)) window.location = item.target.value;
-		        else open(`https://${item.target.value}`, '_self');
+				if (containsProtocol(item.target.value))
+					window.location = item.target.value;
+				else open(`https://${item.target.value}`, "_self");
 			} else {
-                open(`${providerURL}${subtext}`, '_self');
-            }
+				open(`${providerURL}${subtext}`, "_self");
 			}
 		}
+	};

 	function validURL(str: any) {
 		const pattern = new RegExp(
-            '^(https?:\\/\\/)?' + // protocol
-                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-                '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-                '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-                '(\\#[-a-z\\d_]*)?$',
-            'i',
+			"^(https?:\\/\\/)?" + // protocol
+				"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+				"((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+				"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+				"(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+				"(\\#[-a-z\\d_]*)?$",
+			"i",
 		); // fragment locator
 		return !!pattern.test(str);
 	}
@@ -44,26 +49,34 @@ export default function Search() {
 	return (
 		<Stack
 			style={{
-				backgroundColor: 'transparent',
-				textAlign: 'center',
-				position: 'relative',
-				padding: '.3em',
-				display: 'inline-block',
+				backgroundColor: "transparent",
+				textAlign: "center",
+				position: "relative",
+				padding: ".3em",
+				display: "inline-block",
 				gap: 0,
 			}}
 		>
 			<TextInput
 				className={textInputClasses.search}
 				classNames={textInputClasses}
-				spellCheck='true'
+				spellCheck="true"
 				leftSection={providerLabel}
 				onChange={(item: any) => {
-                    if(item.target.value.startsWith('/')) {
-                        setProviderLabel(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).name);
-                        setProviderURL(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).url);
+					if (item.target.value.startsWith("/")) {
+						setProviderLabel(
+							providers?.find(
+								(p: any) => p.prefix === item.target.value.split(" ")[0],
+							).name,
+						);
+						setProviderURL(
+							providers?.find(
+								(p: any) => p.prefix === item.target.value.split(" ")[0],
+							).url,
+						);
 					} else {
-                        setProviderLabel('Google Search');
-                        setProviderURL('https://www.google.com/search?q=');
+						setProviderLabel("Google Search");
+						setProviderURL("https://www.google.com/search?q=");
 					}
 				}}
 				onKeyUp={(item: any) => {
--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton.tsx
@@ -1,58 +1,58 @@
-import { Button, Menu, NavLink, Select } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { FiMenu, FiMonitor } from 'react-icons/fi';
-import {useQueryAPI} from '../../../hooks/useAPI';
-import button from '../../../styles/Button.module.css';
-import menu from '../../../styles/Menu.module.css';
-import navLink from '../../../styles/NavLink.module.css';
-import selectClasses from '../../../styles/Select.module.css';
+import { Button, Menu, NavLink, Select } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { FiMenu, FiMonitor } from "react-icons/fi";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import button from "../../../styles/Button.module.css";
+import menu from "../../../styles/Menu.module.css";
+import navLink from "../../../styles/NavLink.module.css";
+import selectClasses from "../../../styles/Select.module.css";

-function SettingsButton({contentType, setContentType, theme}: any) {
-	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
-	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
+function SettingsButton({ contentType, setContentType, theme }: any) {
+	const { data, isFetched } = useQueryAPI({ endpoint: "api/appCategories" });
+	const [categories, setCategories] = useState([
+		{ value: "All", label: "All" },
+	]);

 	useEffect(() => {
-		if(data) {
-			const list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
-			list.unshift({value: 'All', label: 'All'});
+		if (data) {
+			const list: [any] =
+				data.map((category: any) => {
+					return { value: category.category, label: category.category };
+				}) || [];
+			list.unshift({ value: "All", label: "All" });
 			setCategories(list);
 		}
 	}, [data, isFetched]);

 	function runWakeCommand() {
 		const requestOptions = {
-			method: 'GET',
-			headers: { 'Content-Type': 'application/json' },
+			method: "GET",
+			headers: { "Content-Type": "application/json" },
 		};
-		fetch('/trigger/api/wakeDakota', requestOptions);
+		fetch("/trigger/api/wakeDakota", requestOptions);
 	}
 	return (
-		<Menu
-			withinPortal={false}
-			withArrow
-			shadow='md'
-			position='top'
-		>
+		<Menu withinPortal={false} withArrow shadow="md" position="top">
 			<Menu.Target>
 				<Button className={button.settingsButton} classNames={button}>
 					<FiMenu />
 				</Button>
 			</Menu.Target>
-			<Menu.Dropdown
-				className={menu.dropdown}
-			>
+			<Menu.Dropdown className={menu.dropdown}>
 				<NavLink
-					label='Settings'
-					component='a'
-					href='/trigger/settings'
+					label="Settings"
+					component="a"
+					href="/trigger/settings"
 					className={navLink.defaultNavLink}
 					classNames={navLink}
 				/>
-				<NavLink label='Quick Actions'
-					className={navLink.defaultNavLink}
-					classNames={navLink}>
 				<NavLink
-						label='Wake Dakota'
+					label="Quick Actions"
+					className={navLink.defaultNavLink}
+					classNames={navLink}
+				>
+					<NavLink
+						label="Wake Dakota"
 						leftSection={<FiMonitor />}
 						onClick={() => runWakeCommand()}
 						className={navLink.defaultNavLink}
@@ -60,12 +60,12 @@ function SettingsButton({contentType, setContentType, theme}: any) {
 					/>
 				</NavLink>
 				<Select
-					label='Homepage Filter'
+					label="Homepage Filter"
 					data={categories ?? []}
 					defaultValue={contentType}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						setContentType(data)
+						setContentType(data);
 					}}
 					classNames={selectClasses}
 					comboboxProps={{ withinPortal: false }}
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -1,8 +1,8 @@
-import { ActionIcon, Group, Stack, Tabs } from "@mantine/core";
-import tabClasses from '../../styles/Tabs.module.css';
+import { ActionIcon, Group, Stack, Tabs, Text } from "@mantine/core";
+import tabClasses from "../../styles/Tabs.module.css";
 import Personalization from "./components/Personalization";
 import { FiArrowLeftCircle } from "react-icons/fi";
-import { actionIconClasses } from "../../styles";
+import { actionIconClasses, textClasses } from "../../styles";
 import Messages from "./components/Messages";
 import Applications from "./components/Applications";
 import Bookmarks from "./components/Bookmarks";
@@ -10,14 +10,28 @@ import Categories from "./components/Categories";
 import SearchProviders from "./components/SearchProviders";
 import Themes from "./components/Themes";

-function Settings({theme}:any) {
+function Settings({ theme }: any) {
 	return (
-        <Stack h={'100vh'} px={'2rem'} bg={'var(--color-background)'}>
-            <Group gap={0} >
-                <ActionIcon className={actionIconClasses.backButton} classNames={actionIconClasses} component="a" href="/trigger"><FiArrowLeftCircle/></ActionIcon>
-                <h1>Settings</h1>
+		<Stack h={"100vh"} px={"2rem"} bg={"var(--color-background)"}>
+			<Group gap={0}>
+				<ActionIcon
+					className={actionIconClasses.backButton}
+					classNames={actionIconClasses}
+					component="a"
+					href="/trigger"
+				>
+					<FiArrowLeftCircle />
+				</ActionIcon>
+				<Text className={textClasses.settingsTitle} classNames={textClasses}>
+					Settings
+				</Text>
 			</Group>
-            <Tabs orientation="vertical" defaultValue={'personalization'} className={tabClasses.settingsTabs} classNames={tabClasses}>
+			<Tabs
+				orientation="vertical"
+				defaultValue={"personalization"}
+				className={tabClasses.settingsTabs}
+				classNames={tabClasses}
+			>
 				<Tabs.List>
 					<Tabs.Tab value="personalization">Personal Info</Tabs.Tab>
 					<Tabs.Tab value="messages">Messages</Tabs.Tab>
@@ -27,13 +41,27 @@ function Settings({theme}:any) {
 					<Tabs.Tab value="themes">Themes</Tabs.Tab>
 					<Tabs.Tab value="providers">Search Providers</Tabs.Tab>
 				</Tabs.List>
-                <Tabs.Panel value="personalization"><Personalization/></Tabs.Panel>
-                <Tabs.Panel value="messages"><Messages/></Tabs.Panel>
-                <Tabs.Panel value="applications"><Applications/></Tabs.Panel>
-                <Tabs.Panel value="bookmarks"><Bookmarks/></Tabs.Panel>
-                <Tabs.Panel value="bookmarksCategories"><Categories/></Tabs.Panel>
-                <Tabs.Panel value="themes"><Themes/></Tabs.Panel>
-                <Tabs.Panel value="providers"><SearchProviders/></Tabs.Panel>
+				<Tabs.Panel value="personalization">
+					<Personalization />
+				</Tabs.Panel>
+				<Tabs.Panel value="messages">
+					<Messages />
+				</Tabs.Panel>
+				<Tabs.Panel value="applications">
+					<Applications />
+				</Tabs.Panel>
+				<Tabs.Panel value="bookmarks">
+					<Bookmarks />
+				</Tabs.Panel>
+				<Tabs.Panel value="bookmarksCategories">
+					<Categories />
+				</Tabs.Panel>
+				<Tabs.Panel value="themes">
+					<Themes theme={theme} />
+				</Tabs.Panel>
+				<Tabs.Panel value="providers">
+					<SearchProviders />
+				</Tabs.Panel>
 			</Tabs>
 		</Stack>
 	);
--- a/src/pages/settings/components/Applications.tsx
+++ b/src/pages/settings/components/Applications.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
 import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const ApplicationSettings = () => {
 	const endpoint = "api/apps";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -12,30 +13,29 @@ const ApplicationSettings = () => {
 	});
 	const [applicationData, setApplicationData] = useState<any>([]);

-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

 	useEffect(() => {
-        if(isFetched) {
+		if (isFetched) {
 			setApplicationData(data);
 		}
-    })
+	});

-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
 	}) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Application created successfully");
-        })
+		});
 		exitCreatingMode();
 	};
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		table,
 	}) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Application updated successfully");
 		});
 		table.setEditingRow(null);
@@ -43,7 +43,9 @@ const ApplicationSettings = () => {

 	return (
 		<Stack>
-            <h2>Applications</h2>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Applications
+			</Text>
 			<DataTable
 				tableName="Applications"
 				columns={ApplicationColumns()}
@@ -54,6 +56,6 @@ const ApplicationSettings = () => {
 				onEditingRowSave={handleEditRow}
 			/>
 		</Stack>
-    )
+	);
 };
 export default ApplicationSettings;
--- a/src/pages/settings/components/Bookmarks.tsx
+++ b/src/pages/settings/components/Bookmarks.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
+import { textClasses } from "../../../styles";
 const BookmarkSettings = () => {
 	const endpoint = "api/links";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -19,14 +20,14 @@ const BookmarkSettings = () => {
 	const [bookmarkData, setBookmarkData] = useState<any>([]);
 	const [groups, setGroups] = useState([]);
 	const [fullyFetched, setFullyFetched] = useState(false);
-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

 	useEffect(() => {
-        if(isFetched) {
+		if (isFetched) {
 			setBookmarkData(data);
 		}
-    })
+	});

 	useEffect(() => {
 		if (groupDataisFetched) {
@@ -38,21 +39,20 @@ const BookmarkSettings = () => {
 		}
 	}, [groupDataisFetched]);

-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
 	}) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Application created successfully");
-        })
+		});
 		exitCreatingMode();
 	};
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		table,
 	}) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Application updated successfully");
 		});
 		table.setEditingRow(null);
@@ -60,7 +60,9 @@ const BookmarkSettings = () => {

 	return (
 		<Stack>
-            <h2>Bookmarks</h2>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Bookmarks
+			</Text>
 			<DataTable
 				tableName="Applications"
 				columns={BookmarkColumns(groups, groupData)}
@@ -71,6 +73,6 @@ const BookmarkSettings = () => {
 				onEditingRowSave={handleEditRow}
 			/>
 		</Stack>
-    )
+	);
 };
 export default BookmarkSettings;
--- a/src/pages/settings/components/Categories.tsx
+++ b/src/pages/settings/components/Categories.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
 import CategoryColumns from "../../../DataTable/columns/CategoryColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const CategorySettings = () => {
 	const endpoint = "api/categories";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -12,30 +13,29 @@ const CategorySettings = () => {
 	});
 	const [categoryData, setCategoryData] = useState<any>([]);

-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

 	useEffect(() => {
-        if(isFetched) {
+		if (isFetched) {
 			setCategoryData(data);
 		}
-    })
+	});

-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
 	}) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Category created successfully");
-        })
+		});
 		exitCreatingMode();
 	};
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		table,
 	}) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Category updated successfully");
 		});
 		table.setEditingRow(null);
@@ -43,7 +43,9 @@ const CategorySettings = () => {

 	return (
 		<Stack>
-            <h2>Categories</h2>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Categories
+			</Text>
 			<DataTable
 				tableName="Categories"
 				columns={CategoryColumns()}
@@ -54,6 +56,6 @@ const CategorySettings = () => {
 				onEditingRowSave={handleEditRow}
 			/>
 		</Stack>
-    )
+	);
 };
 export default CategorySettings;
--- a/src/pages/settings/components/Messages.tsx
+++ b/src/pages/settings/components/Messages.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
 import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const MessageSettings = () => {
 	const endpoint = "api/messages";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -12,30 +13,29 @@ const MessageSettings = () => {
 	});
 	const [messageData, setMessageData] = useState<any>([]);

-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

 	useEffect(() => {
-        if(isFetched) {
+		if (isFetched) {
 			setMessageData(data);
 		}
-    })
+	});

-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
 	}) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Message created successfully");
-        })
+		});
 		exitCreatingMode();
 	};
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		table,
 	}) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Message updated successfully");
 		});
 		table.setEditingRow(null);
@@ -43,7 +43,9 @@ const MessageSettings = () => {

 	return (
 		<Stack>
-            <h2>Messages</h2>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Messages
+			</Text>
 			<DataTable
 				tableName="Messages"
 				columns={MessagesColumns()}
@@ -54,6 +56,6 @@ const MessageSettings = () => {
 				onEditingRowSave={handleEditRow}
 			/>
 		</Stack>
-    )
+	);
 };
 export default MessageSettings;
--- a/src/pages/settings/components/Personalization.tsx
+++ b/src/pages/settings/components/Personalization.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
+import { textClasses } from "../../../styles";
+import { Text } from "@mantine/core";
 const PersonalizationSettings = () => {
 	const endpoint = "api/personaldata";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -11,30 +13,29 @@ const PersonalizationSettings = () => {
 	});
 	const [personalData, setPersonalData] = useState<any>([]);

-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

 	useEffect(() => {
-        if(isFetched) {
+		if (isFetched) {
 			setPersonalData(data);
 		}
-    })
+	});

-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
 	}) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Personalization created successfully");
-        })
+		});
 		exitCreatingMode();
 	};
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		table,
 	}) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Personalization updated successfully");
 		});
 		table.setEditingRow(null);
@@ -42,7 +43,9 @@ const PersonalizationSettings = () => {

 	return (
 		<>
-            <h2>Personalization</h2>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Personalization
+			</Text>
 			<DataTable
 				tableName="Personalization"
 				columns={PersonalizationColumns()}
@@ -53,6 +56,6 @@ const PersonalizationSettings = () => {
 				onEditingRowSave={handleEditRow}
 			/>
 		</>
-    )
+	);
 };
 export default PersonalizationSettings;
--- a/src/pages/settings/components/SearchProviders.tsx
+++ b/src/pages/settings/components/SearchProviders.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
 import { DataTable } from "../../../DataTable/DataTable";
 import { toast } from "react-toastify";
 import type { MRT_TableOptions } from "mantine-react-table";
 import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
+import { textClasses } from "../../../styles";
 const SearchProviderSettings = () => {
 	const endpoint = "api/providers";
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
@@ -12,30 +13,29 @@ const SearchProviderSettings = () => {
 	});
 	const [providerData, setProviderData] = useState<any>([]);

-    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
-    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
+	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

 	useEffect(() => {
-        if(isFetched) {
+		if (isFetched) {
 			setProviderData(data);
 		}
-    })
+	});

-    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		exitCreatingMode,
 	}) => {
-        
-        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Search provider created successfully");
-        })
+		});
 		exitCreatingMode();
 	};
-    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
 		values,
 		table,
 	}) => {
-        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
 			toast.success("Search provider updated successfully");
 		});
 		table.setEditingRow(null);
@@ -43,7 +43,9 @@ const SearchProviderSettings = () => {

 	return (
 		<Stack>
-            <h2>Search Providers</h2>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Search Providers
+			</Text>
 			<DataTable
 				tableName="Categories"
 				columns={SearchProviderColumns()}
@@ -54,6 +56,6 @@ const SearchProviderSettings = () => {
 				onEditingRowSave={handleEditRow}
 			/>
 		</Stack>
-    )
+	);
 };
 export default SearchProviderSettings;
--- a/src/pages/settings/components/ThemeModalContent.tsx
+++ b/src/pages/settings/components/ThemeModalContent.tsx
@@ -0,0 +1,250 @@
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Stack, Group, Text, Box } from "@mantine/core";
+import { useState } from "react";
+import { stackClasses } from "../../../styles";
+
+export default function ThemeModalContent({ selectedTheme }: any) {
+	const ExampleApp = (previewTheme: any) => {
+		const [textDecoration, setTextDecoration] = useState<string>("none");
+		return (
+			<Box
+				component="a"
+				onMouseOver={() => setTextDecoration("underline")}
+				onMouseOut={() => setTextDecoration("none")}
+				className={stackClasses.appItemBox}
+			>
+				<Stack
+					style={{
+						height: "64px",
+						marginRight: "1em",
+						marginLeft: "1em",
+						paddingTop: "15px",
+					}}
+				>
+					<Icon
+						style={{ color: previewTheme.theme.colortextpri }}
+						icon={`mdi:check`}
+						height={32}
+						width={32}
+					/>
+				</Stack>
+				<Stack
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						flex: 1,
+						overflow: "hidden",
+						gap: 0,
+					}}
+				>
+					<Text
+						style={{
+							fontWeight: 400,
+							fontSize: 11,
+							fontStyle: "normal",
+							color: previewTheme.theme.colortextpri,
+							fontFamily:
+								"-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important",
+							margin: 0,
+						}}
+					>
+						{"Example App"}
+					</Text>
+					<Text
+						style={{
+							fontWeight: 400,
+							fontSize: 11,
+							fontStyle: "italic",
+							color: previewTheme.theme.colortextacc,
+							fontFamily:
+								"-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important",
+							margin: 0,
+							textDecoration: textDecoration,
+						}}
+					>
+						{"https://www.example.com"}
+					</Text>
+				</Stack>
+			</Box>
+		);
+	};
+	return (
+		<Stack
+			style={{
+				width: "100%",
+				backgroundColor: selectedTheme.colorbackground,
+				borderRadius: "10px",
+			}}
+		>
+			<Group
+				justify="center"
+				style={{
+					color: selectedTheme.colortextpri,
+					paddingTop: "1rem",
+				}}
+			>
+				{selectedTheme.name}
+			</Group>
+			<Text
+				pl={"1.5rem"}
+				style={{
+					textDecoration: "underline",
+					fontSize: "20px",
+					fontWeight: 200,
+					fontStyle: "italic",
+					height: "10px",
+					textTransform: "uppercase",
+					marginTop: "20px",
+					marginBottom: "20px",
+					color: selectedTheme.colortextpri,
+				}}
+			>
+				Applications
+			</Text>
+			<Stack
+				style={{
+					background: selectedTheme.colorbackground,
+					gap: ".25rem",
+					backgroundSize: "cover",
+					borderBottom: "0px solid",
+					display: "grid",
+					gridColumnGap: "5px",
+					gridRowGap: "5px",
+					gridTemplateColumns: "1fr 1fr 1fr",
+					gridTemplateRows: "64px",
+					padding: "1rem",
+					paddingTop: "0rem",
+					justifyContent: "center",
+					alignContent: "center",
+				}}
+			>
+				<ExampleApp theme={selectedTheme} />
+				<ExampleApp theme={selectedTheme} />
+				<ExampleApp theme={selectedTheme} />
+			</Stack>
+			<Text
+				pl={"1.5rem"}
+				style={{
+					textDecoration: "underline",
+					fontSize: "20px",
+					fontWeight: 200,
+					fontStyle: "italic",
+					height: "10px",
+					textTransform: "uppercase",
+					marginTop: "20px",
+					marginBottom: "20px",
+					color: selectedTheme.colortextpri,
+				}}
+			>
+				Bookmarks
+			</Text>
+			<Stack
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					flexWrap: "nowrap",
+					gridColumnGap: "20px",
+					gridRowGap: "0px",
+					gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
+					gridTemplateRows: "auto",
+				}}
+			>
+				<Stack
+					style={{
+						width: "100%",
+						marginBottom: "0em",
+						display: "block",
+						lineHeight: "1.5rem",
+						padding: "1rem",
+						paddingTop: "0rem",
+					}}
+				>
+					<Text
+						style={{
+							fontSize: "14px",
+							fontWeight: 400,
+							height: "10px",
+							width: "auto",
+							color: selectedTheme.colortextacc,
+							textTransform: "uppercase",
+							marginTop: "20px",
+							marginBottom: "20px",
+						}}
+					>
+						Example Category
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 1"}
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 2"}
+					</Text>
+				</Stack>
+				<Stack
+					style={{
+						width: "100%",
+						marginBottom: "0em",
+						display: "block",
+						lineHeight: "1.5rem",
+						padding: "1rem",
+						paddingTop: "0rem",
+					}}
+				>
+					<Text
+						style={{
+							fontSize: "14px",
+							fontWeight: 400,
+							height: "10px",
+							width: "auto",
+							color: selectedTheme.colortextacc,
+							textTransform: "uppercase",
+							marginTop: "20px",
+							marginBottom: "20px",
+						}}
+					>
+						Example Category
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 1"}
+					</Text>
+					<Text
+						style={{
+							display: "block",
+							fontSize: "14px",
+							lineHeight: 2,
+							color: selectedTheme.colortextpri,
+						}}
+						component="a"
+					>
+						{"Link 2"}
+					</Text>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+}
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -1,14 +1,32 @@
 import { useEffect, useState } from "react";
 import { useQueryAPI } from "../../../hooks/useAPI";
-import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
-import AppItem from "../../homepage/components/AppItem";
+import {
+	ActionIcon,
+	Button,
+	Card,
+	ColorPicker,
+	ColorSwatch,
+	Divider,
+	Group,
+	Modal,
+	SimpleGrid,
+	Stack,
+	Text,
+} from "@mantine/core";
 import { FiEdit } from "react-icons/fi";
 import { useDisclosure, useLocalStorage } from "@mantine/hooks";
-import '@mantine/core/styles/ModalBase.css';
-import '@mantine/core/styles/Modal.css';
-function ThemesSettings() {
+import "@mantine/core/styles/ModalBase.css";
+import "@mantine/core/styles/Modal.css";
+import { actionIconClasses, modalClasses, textClasses } from "../../../styles";
+import ThemeModalContent from "./ThemeModalContent";
+function ThemesSettings({ theme }: any) {
 	const [opened, { open, close }] = useDisclosure(false);
-    const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
+    const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
+    const [colorValue, onChange] = useState('#000000');
+	const [value, setValue] = useLocalStorage<any>({
+		key: "theme",
+		defaultValue: {},
+	});
 	const { data, isFetched } = useQueryAPI({
 		endpoint: "api/themes",
 	});
@@ -23,32 +41,83 @@ function ThemesSettings() {
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
 		open();
-    }
+	};
+
+    const handleClose = () => {
+        close();
+        closePicker();
+    };

 	return (
 		<>
-            <Modal.Root opened={opened} onClose={close}>
+			<Modal.Root
+				size={"50%"}
+				style={{
+					"--color-text-pri": theme.colortextpri,
+					"--color-text-acc": theme.colortextacc,
+					"--color-background": theme.colorbackground,
+					"--color-border": theme.colorborder,
+					"--color-search-background": theme.colorsearchbackground,
+				}}
+				className={modalClasses.editThemeModal}
+				classNames={modalClasses}
+				opened={opened}
+				onClose={handleClose}
+			>
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
 						<Modal.Title>Edit Theme</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
-                    <Modal.Body>
-                        <Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
-                            <Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
-                            <AppItem
-								name={'Example App'}
-								url={'https://example.com'}
-								icon={'mdi:apps'}
-								category={'Default'}
-							/>
+					<Modal.Body p={"2rem"}>
+						<ThemeModalContent selectedTheme={selectedTheme} />
+                        <Divider color="black" my="sm" />
+                        <Group w={"100%"} h={"100%"} gap={0}>
+                            <Stack w={"50%"}>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Primary Color</Text>
+                                    <ColorSwatch onClick={openPicker} radius={"sm"} w={"100px"} color={selectedTheme.colortextpri} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Accent Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colortextacc} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Background Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorbackground} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Border Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorborder} />
+                                </Group>
+                                <Group c={'black'} justify="space-between">
+                                    <Text>Search Background Color</Text>
+                                    <ColorSwatch radius={"sm"} w={"100px"} color={selectedTheme.colorsearchbackground} />
+                                </Group>
                            </Stack>
+                            <Stack h={"100%"} w={'50%'} align="center" justify="center">
+                                {pickerOpen ? (
+                                    <>
+                                        <ColorPicker value={colorValue} onChange={onChange}/>
+                                        <Group><Text c={'black'}>{colorValue}</Text><Button onClick={() => {setSelectedTheme({ ...selectedTheme, colorbackground: colorValue }); closePicker();}} c={'white'} bg={'forestgreen'}>Save</Button></Group>
+                                    </>
+                                ) : (
+                                    <Card bg={'#0002'} h={"100%"} w={"90%"}>
+                                        <Text c="black">
+                                            Pick a swatch to edit the color.
+                                        </Text>
+                                    </Card>
+                                )}
+                            </Stack>
+                        </Group>
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-            <Stack h={'100%'} w={'100%'}>
-                <h2>Themes</h2>
+			<Stack h={"100%"} w={"100%"}>
+				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+					Themes
+				</Text>
 				<SimpleGrid cols={5}>
 					{themesList.map((theme: any) => (
 						<Stack key={theme.name}>
@@ -60,7 +129,7 @@ function ThemesSettings() {
 								}}
 								data-theme={theme.name}
 								onClick={() => {
-                                    setValue(theme.name)
+									setValue(theme.name);
 								}}
 							>
 								{theme.name}
@@ -74,8 +143,12 @@ function ThemesSettings() {
 									<ColorSwatch color={theme.colorborder} />
 								</Group>
 								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
 									onClick={() => handleOpen(theme)}
-                                ><FiEdit/></ActionIcon>
+								>
+									<FiEdit />
+								</ActionIcon>
 							</Group>
 						</Stack>
 					))}
--- a/src/styles/ActionIcon.module.css
+++ b/src/styles/ActionIcon.module.css
@@ -1,12 +1,37 @@
 .backButton {
    &.root {
-        background-color: transparent;
-        color: black;
+        background-color: transparent !important;
+        color: var(--color-text-pri) !important;
        width: 2rem;
        height: 2rem;
+        margin-right: 1rem;
        .icon {
            font-size: 24px;
        }
+        .loader {
+            display: none;
+        }
+        :hover {
+            background-color: transparent !important;
+            color: var(--color-text-pri) !important;
+        }
    }
    
 }
+
+.editButton {
+    &.root {
+        background-color: transparent !important;
+        color: var(--color-text-pri) !important;
+        .icon {
+            font-size: 24px;
+        }
+        .loader {
+            display: none;
+        }
+        :hover {
+            background-color: var(--color-text-pri) !important;
+            color: var(--color-text-acc) !important;
+        }
+    }
+}
--- a/src/styles/Modal.module.css
+++ b/src/styles/Modal.module.css
@@ -0,0 +1,27 @@
+.editThemeModal {
+    .header {
+        color: white;
+        background-color: var(--color-background);
+    }
+    .content {
+        justify-content: center;
+        align-content: center;
+        color: light-dark(var(--mantine-primary-color-6), white);
+        background-color: white;
+    }
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .close {
+        color: var(--mantine-color-appRed-3);
+        background-color: var(--mantine-color-appRed-1);
+        max-width: 20px!important;
+        max-height: 20px!important;
+        &:hover {
+            color: var(--mantine-color-appRed-1);
+            background-color: var(--mantine-color-appRed-3);
+        }
+    }
+}
--- a/src/styles/Tabs.module.css
+++ b/src/styles/Tabs.module.css
@@ -3,4 +3,11 @@
        padding-left: 2rem;
        height: 100%;
    }
+    .tab {
+        color: var(--color-text-pri);
+        &:hover {
+            color: var(--color-background);
+            background-color: var(--color-text-acc);
+        }
+    }
 }
--- a/src/styles/Text.module.css
+++ b/src/styles/Text.module.css
@@ -86,6 +86,26 @@
    }
 }

+.settingsTitle {
+    &.root {
+        font-size: 32px;
+        font-weight: bold;
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+        color: var(--color-text-pri);
+    }
+}
+
+.settingsSubTitle {
+    &.root {
+        font-size: 24px;
+        font-weight: bold;
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+        color: var(--color-text-pri);
+    }
+}
+
 .settingsLink {
    &.root {
        font-size: 1.25em;
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,12 +1,25 @@
-import actionIconClasses from './ActionIcon.module.css';
-import buttonClasses from './Button.module.css';
-import menuClasses from './Menu.module.css';
-import navLinkClasses from './NavLink.module.css';
-import popoverClasses from './Popover.module.css';
-import selectClasses from './Select.module.css';
-import stackClasses from './Stack.module.css';
-import tabClasses from './Tabs.module.css';
-import textClasses from './Text.module.css';
-import textInputClasses from './TextInput.module.css';
+import actionIconClasses from "./ActionIcon.module.css";
+import buttonClasses from "./Button.module.css";
+import menuClasses from "./Menu.module.css";
+import modalClasses from "./Modal.module.css";
+import navLinkClasses from "./NavLink.module.css";
+import popoverClasses from "./Popover.module.css";
+import selectClasses from "./Select.module.css";
+import stackClasses from "./Stack.module.css";
+import tabClasses from "./Tabs.module.css";
+import textClasses from "./Text.module.css";
+import textInputClasses from "./TextInput.module.css";

-export { actionIconClasses, buttonClasses, menuClasses, navLinkClasses, popoverClasses, selectClasses, stackClasses, tabClasses, textClasses, textInputClasses }
+export {
+	actionIconClasses,
+	buttonClasses,
+	menuClasses,
+	modalClasses,
+	navLinkClasses,
+	popoverClasses,
+	selectClasses,
+	stackClasses,
+	tabClasses,
+	textClasses,
+	textInputClasses,
+};
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,15 +1,15 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";

 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [react()],
 	server: {
 		port: 3000,
-		host: '0.0.0.0',
+		host: "0.0.0.0",
 		proxy: {
-			'/api': {
-				target: 'http://localhost:5000/trigger',
+			"/api": {
+				target: "http://localhost:5000/trigger",
 				changeOrigin: false,
 				secure: false,
 			},
@@ -17,10 +17,10 @@ export default defineConfig({
 	},
 	preview: {
 		port: 3000,
-		host: '0.0.0.0',
+		host: "0.0.0.0",
 		proxy: {
 			api: {
-				target: 'http://localhost:5000',
+				target: "http://localhost:5000",
 				changeOrigin: false,
 				secure: false,
 			},