diff --git a/src/App.tsx b/src/App.tsx
index 86359de..e8f6062 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -42,8 +42,13 @@ function App() {
 				const temp = data.find((t: any) => t.name === themeName);
 				setTheme(temp);
 			} else {
-				const index = Math.floor(Math.random() * data.length);
-				setTheme(data[index]);
+				let enabled = data.filter((t: any) => t.randomEnabled);
+				if (enabled.length === 0) {
+					setTheme(data[0]);
+				} else {
+					const index = Math.floor(Math.random() * enabled.length);
+					setTheme(enabled[index]);
+				}
 			}
 		}
 	}, [isFetched, themeName]);
diff --git a/src/pages/settings/components/Themes.tsx b/src/pages/settings/components/Themes.tsx
index 95da2a0..024a0a0 100644
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -14,7 +14,7 @@ import {
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
+import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
 import { modals } from '@mantine/modals';
@@ -40,7 +40,7 @@ function ThemesSettings({ theme }: any) {
 		if (isFetched) {
 			setThemesList(data);
 		}
-	}, [isFetched]);
+	}, [data, isFetched]);
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -78,6 +78,7 @@ function ThemesSettings({ theme }: any) {
 	const randomColor = () => {
 		return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
 	};
+
 	return (
 		<>
 			<Modal.Root
@@ -348,28 +349,58 @@ function ThemesSettings({ theme }: any) {
 								</Button>
 							</Group>
 							<Group justify='space-between' gap={0}>
-								<Group className='theme-palette'>
-									<ActionIcon
-										className={actionIconClasses.editButton}
-										classNames={actionIconClasses}
-										onClick={() => handleOpen(theme)}
-									>
-										<FiEdit />
-									</ActionIcon>
-									<ColorSwatch color={theme.backgroundColor} />
-									<ColorSwatch color={theme.searchColor} />
-									<ColorSwatch color={theme.primaryColor} />
-									<ColorSwatch color={theme.accentColor} />
-									<ColorSwatch color={theme.borderColor} />
+								<ActionIcon
+									style={{
+										background: theme.randomEnabled
+											? 'rgba(255,255,255,1)'
+											: 'rgba(255,255,255,0.5)',
+										border: `solid 1px ${theme.borderColor}`,
+										borderRadius: '2%',
+										margin: '2px',
+										color: 'black',
+									}}
+									styles={{
+										root: {
+											height: '10px',
+											width: '10px',
+										},
+										icon: {
+											height: '10px',
+											width: '10px',
+											margin: 0,
+											padding: 0,
+										},
+									}}
+									onClick={() => {
+										createTheme({
+											method: 'PATCH',
+											endpoint: 'api/themes',
+											body: { ...theme, randomEnabled: !theme.randomEnabled },
+										});
+									}}
+								>
+									<FiCheck height={'10px'} width={'10px'} />
+								</ActionIcon>
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleOpen(theme)}
+								>
+									<FiEdit />
+								</ActionIcon>
+								<ColorSwatch color={theme.backgroundColor} />
+								<ColorSwatch color={theme.searchColor} />
+								<ColorSwatch color={theme.primaryColor} />
+								<ColorSwatch color={theme.accentColor} />
+								<ColorSwatch color={theme.borderColor} />
 
-									<ActionIcon
-										className={actionIconClasses.editButton}
-										classNames={actionIconClasses}
-										onClick={() => handleDeleteTheme(theme)}
-									>
-										<FiTrash color='red' />
-									</ActionIcon>
-								</Group>
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleDeleteTheme(theme)}
+								>
+									<FiTrash color='red' />
+								</ActionIcon>
 							</Group>
 						</Stack>
 					))}