diff --git a/components/Settings/ModuleEnabler.tsx b/components/Settings/ModuleEnabler.tsx
new file mode 100644
index 000000000..fd08b5c80
--- /dev/null
+++ b/components/Settings/ModuleEnabler.tsx
@@ -0,0 +1,43 @@
+import { Group, Switch } from '@mantine/core';
+import * as Modules from '../modules';
+import { useConfig } from '../../tools/state';
+
+export default function ModuleEnabler(props: any) {
+ const { config, setConfig } = useConfig();
+ // Loop over each module with their title
+ const modules = Object.keys(Modules);
+ // Match the enabled modules with the modules array
+ let enabledModules = config.settings.enabledModules ?? [];
+ enabledModules = modules.filter((module) => enabledModules.includes(module));
+ return (
+
+ {modules.map((module: string) => (
+ {
+ if (e.currentTarget.checked) {
+ setConfig({
+ ...config,
+ settings: {
+ ...config.settings,
+ enabledModules: [...enabledModules, module],
+ },
+ });
+ } else {
+ setConfig({
+ ...config,
+ settings: {
+ ...config.settings,
+ enabledModules: enabledModules.filter((m) => m !== module),
+ },
+ });
+ }
+ }}
+ />
+ ))}
+
+ );
+}
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index 70b7c48cd..41ef8c9ef 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -14,6 +14,7 @@ import { Settings as SettingsIcon } from 'tabler-icons-react';
import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
function SettingsMenu(props: any) {
const { config, setConfig } = useConfig();
@@ -63,6 +64,7 @@ function SettingsMenu(props: any) {
label="Enable search bar"
/>
+
module.replace('Module', ''));
+ const isShown = enabledModulesTitles.includes(module.title);
const theme = useMantineTheme();
return (