🔀 Merge branch 'dev' into overseerr-integration

2025-11-12 00:15:48 +01:00 · 2022-07-24 21:36:55 +02:00
parent 1de20d1583 3fe8a4f7bc
commit 87c55f264e
100 changed files with 4558 additions and 11317 deletions
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -1,25 +1,30 @@
 import {
-  Modal,
+  ActionIcon,
+  Anchor,
+  Button,
  Center,
  Group,
-  TextInput,
  Image,
-  Button,
-  Select,
  LoadingOverlay,
-  ActionIcon,
-  Tooltip,
+  Modal,
+  MultiSelect,
+  ScrollArea,
+  Select,
+  Switch,
+  Tabs,
+  TextInput,
  Title,
-  Anchor,
-  Text,
+  Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useEffect, useState } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconApps as Apps } from '@tabler/icons';
+import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
+import Tip from '../layout/Tip';

 export function AddItemShelfButton(props: any) {
  const [opened, setOpened] = useState(false);
@@ -50,11 +55,13 @@ export function AddItemShelfButton(props: any) {
  );
 }

-function MatchIcon(name: string, form: any) {
+function MatchIcon(name: string | undefined, form: any) {
+  if (name === undefined || name === '') return null;
  fetch(
    `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
      .replace(/\s+/g, '-')
-      .toLowerCase()}.png`
+      .toLowerCase()
+      .replace(/^dash\.$/, 'dashdot')}.png`
  ).then((res) => {
    if (res.ok) {
      form.setFieldValue('icon', res.url);
@@ -65,28 +72,13 @@ function MatchIcon(name: string, form: any) {
 }

 function MatchService(name: string, form: any) {
-  const service = ServiceTypeList.find((s) => s === name);
+  const service = ServiceTypeList.find((s) => s.toLowerCase() === name.toLowerCase());
  if (service) {
    form.setFieldValue('type', service);
  }
 }

-function MatchPort(name: string, form: any) {
-  const portmap = [
-    { name: 'qBittorrent', value: '8080' },
-    { name: 'Sonarr', value: '8989' },
-    { name: 'Radarr', value: '7878' },
-    { name: 'Lidarr', value: '8686' },
-    { name: 'Readarr', value: '8686' },
-    { name: 'Deluge', value: '8112' },
-    { name: 'Transmission', value: '9091' },
-  ];
-  // Match name with portmap key
-  const port = portmap.find((p) => p.name === name);
-  if (port) {
-    form.setFieldValue('url', `http://localhost:${port.value}`);
-  }
-}
+const DEFAULT_ICON = '/favicon.svg';

 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
  const { setOpened } = props;
@@ -107,22 +99,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
      type: props.type ?? 'Other',
      category: props.category ?? undefined,
      name: props.name ?? '',
-      icon: props.icon ?? '/favicon.svg',
+      icon: props.icon ?? DEFAULT_ICON,
      url: props.url ?? '',
      apiKey: props.apiKey ?? (undefined as unknown as string),
      username: props.username ?? (undefined as unknown as string),
      password: props.password ?? (undefined as unknown as string),
+      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      status: props.status ?? ['200'],
+      newTab: props.newTab ?? true,
    },
    validate: {
      apiKey: () => null,
      // Validate icon with a regex
-      icon: (value: string) => {
-        // Regex to match everything that ends with and icon extension
-        if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
-          return 'Please enter a valid icon URL';
-        }
-        return null;
-      },
+      icon: (value: string) =>
+        // Disable matching to allow any values
+        null,
      // Validate url with a regex http/https
      url: (value: string) => {
        try {
@@ -132,15 +123,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
        }
        return null;
      },
+      status: (value: string[]) => {
+        if (!value.length) {
+          return 'Please select a status code';
+        }
+        return null;
+      },
    },
  });

  const [debounced, cancel] = useDebouncedValue(form.values.name, 250);
  useEffect(() => {
-    if (form.values.name !== debounced) return;
+    if (form.values.name !== debounced || form.values.icon !== DEFAULT_ICON) return;
    MatchIcon(form.values.name, form);
    MatchService(form.values.name, form);
-    MatchPort(form.values.name, form);
+    tryMatchPort(form.values.name, form);
  }, [debounced]);

  // Try to set const hostname to new URL(form.values.url).hostname)
@@ -166,6 +163,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
      </Center>
      <form
        onSubmit={form.onSubmit(() => {
+          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
+            form.values.status = undefined;
+          }
+          if (form.values.newTab === true) {
+            form.values.newTab = undefined;
+          }
          // If service already exists, update it.
          if (config.services && config.services.find((s) => s.id === form.values.id)) {
            setConfig({
@@ -190,126 +193,171 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
          form.reset();
        })}
      >
-        <Group direction="column" grow>
-          <TextInput
-            required
-            label="Service name"
-            placeholder="Plex"
-            {...form.getInputProps('name')}
-          />
+        <Tabs grow>
+          <Tabs.Tab label="Options">
+            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+              <Group direction="column" grow>
+                <TextInput
+                  required
+                  label="Service name"
+                  placeholder="Plex"
+                  {...form.getInputProps('name')}
+                />

-          <TextInput
-            required
-            label="Icon url"
-            placeholder="https://i.gifer.com/ANPC.gif"
-            {...form.getInputProps('icon')}
-          />
-          <TextInput
-            required
-            label="Service url"
-            placeholder="http://localhost:7575"
-            {...form.getInputProps('url')}
-          />
-          <Select
-            label="Service type"
-            defaultValue="Other"
-            placeholder="Pick one"
-            required
-            searchable
-            data={ServiceTypeList}
-            {...form.getInputProps('type')}
-          />
-          <Select
-            label="Category"
-            data={categoryList}
-            placeholder="Select a category or create a new one"
-            nothingFound="Nothing found"
-            searchable
-            clearable
-            creatable
-            onClick={(e) => {
-              e.preventDefault();
-            }}
-            getCreateLabel={(query) => `+ Create "${query}"`}
-            onCreate={(query) => {}}
-            {...form.getInputProps('category')}
-          />
-          <LoadingOverlay visible={isLoading} />
-          {(form.values.type === 'Sonarr' ||
-            form.values.type === 'Radarr' ||
-            form.values.type === 'Lidarr' ||
-            form.values.type === 'Readarr') && (
-            <>
-              <TextInput
+                <TextInput
+                  required
+                  label="Icon URL"
+                  placeholder={DEFAULT_ICON}
+                  {...form.getInputProps('icon')}
+                />
+                <TextInput
+                  required
+                  label="Service URL"
+                  placeholder="http://localhost:7575"
+                  {...form.getInputProps('url')}
+                />
+                <TextInput
+                  label="On Click URL"
+                  placeholder="http://sonarr.example.com"
+                  {...form.getInputProps('openedUrl')}
+                />
+                <Select
+                  label="Service type"
+                  defaultValue="Other"
+                  placeholder="Pick one"
+                  required
+                  searchable
+                  data={ServiceTypeList}
+                  {...form.getInputProps('type')}
+                />
+                <Select
+                  label="Category"
+                  data={categoryList}
+                  placeholder="Select a category or create a new one"
+                  nothingFound="Nothing found"
+                  searchable
+                  clearable
+                  creatable
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                  getCreateLabel={(query) => `+ Create "${query}"`}
+                  onCreate={(query) => {}}
+                  {...form.getInputProps('category')}
+                />
+                <LoadingOverlay visible={isLoading} />
+                {(form.values.type === 'Sonarr' ||
+                  form.values.type === 'Radarr' ||
+                  form.values.type === 'Lidarr' ||
+                  form.values.type === 'Readarr') && (
+                  <>
+                    <TextInput
+                      required
+                      label="API key"
+                      placeholder="Your API key"
+                      value={form.values.apiKey}
+                      onChange={(event) => {
+                        form.setFieldValue('apiKey', event.currentTarget.value);
+                      }}
+                      error={form.errors.apiKey && 'Invalid API key'}
+                    />
+                    <Tip>
+                      Get your API key{' '}
+                      <Anchor
+                        target="_blank"
+                        weight="bold"
+                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                        href={`${hostname}/settings/general`}
+                      >
+                        here.
+                      </Anchor>
+                    </Tip>
+                  </>
+                )}
+                {form.values.type === 'qBittorrent' && (
+                  <>
+                    <TextInput
+                      required
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      required
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {form.values.type === 'Deluge' && (
+                  <>
+                    <TextInput
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {form.values.type === 'Transmission' && (
+                  <>
+                    <TextInput
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+              </Group>
+            </ScrollArea>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <Group direction="column" grow>
+              <MultiSelect
                required
-                label="API key"
-                placeholder="Your API key"
-                value={form.values.apiKey}
-                onChange={(event) => {
-                  form.setFieldValue('apiKey', event.currentTarget.value);
-                }}
-                error={form.errors.apiKey && 'Invalid API key'}
+                label="HTTP Status Codes"
+                data={StatusCodes}
+                placeholder="Select valid status codes"
+                clearButtonLabel="Clear selection"
+                nothingFound="Nothing found"
+                defaultValue={['200']}
+                clearable
+                searchable
+                {...form.getInputProps('status')}
              />
-              <Text
-                style={{
-                  alignSelf: 'center',
-                  fontSize: '0.75rem',
-                  textAlign: 'center',
-                  color: '#a0aec0',
-                }}
-              >
-                tip: Get your API key{' '}
-                <Anchor
-                  target="_blank"
-                  weight="bold"
-                  style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                  href={`${hostname}/settings/general`}
-                >
-                  here
-                </Anchor>
-              </Text>
-            </>
-          )}
-          {form.values.type === 'qBittorrent' && (
-            <>
-              <TextInput
-                required
-                label="Username"
-                placeholder="admin"
-                value={form.values.username}
-                onChange={(event) => {
-                  form.setFieldValue('username', event.currentTarget.value);
-                }}
-                error={form.errors.username && 'Invalid username'}
+              <Switch
+                label="Open service in new tab"
+                defaultChecked={form.values.newTab}
+                {...form.getInputProps('newTab')}
              />
-              <TextInput
-                required
-                label="Password"
-                placeholder="adminadmin"
-                value={form.values.password}
-                onChange={(event) => {
-                  form.setFieldValue('password', event.currentTarget.value);
-                }}
-                error={form.errors.password && 'Invalid password'}
-              />
-            </>
-          )}
-          {form.values.type === 'Deluge' && (
-            <>
-              <TextInput
-                required
-                label="Password"
-                placeholder="deluge"
-                value={form.values.password}
-                onChange={(event) => {
-                  form.setFieldValue('password', event.currentTarget.value);
-                }}
-                error={form.errors.password && 'Invalid password'}
-              />
-            </>
-          )}
-        </Group>
-
+            </Group>
+          </Tabs.Tab>
+        </Tabs>
        <Group grow position="center" mt="xl">
          <Button type="submit">{props.message ?? 'Add service'}</Button>
        </Group>
--- a/src/components/AppShelf/AppShelf.story.tsx
+++ b/src/components/AppShelf/AppShelf.story.tsx
@@ -1,27 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-import AppShelf from './AppShelf';
-import { AppShelfItem } from './AppShelfItem';
-
-export default {
-  title: 'Item Shelf',
-  component: AppShelf,
-  args: {
-    service: {
-      name: 'qBittorrent',
-      url: 'http://',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/qBittorrent/icon.png',
-      type: 'qBittorrent',
-      apiKey: '',
-    },
-  },
-};
-
-export const Default = (args: any) => <AppShelf {...args} />;
-export const One = (args: any) => <AppShelfItem {...args} />;
-export const Ten = (args: any) => (
-  <SimpleGrid>
-    {Array.from(Array(10)).map((_, i) => (
-      <AppShelfItem {...args} key={i} />
-    ))}
-  </SimpleGrid>
-);
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -1,28 +1,74 @@
 import React, { useState } from 'react';
-import { Grid, Group, Title } from '@mantine/core';
+import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
 import {
  closestCenter,
  DndContext,
  DragOverlay,
  MouseSensor,
+  TouchSensor,
  useSensor,
  useSensors,
 } from '@dnd-kit/core';
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
+import { useLocalStorage } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';

 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-import { ModuleWrapper } from '../modules/moduleWrapper';
-import { DownloadsModule } from '../modules';
+import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
+import { DownloadsModule } from '../../modules';
+import DownloadComponent from '../../modules/downloads/DownloadsModule';
+
+const useStyles = createStyles((theme, _params) => ({
+  item: {
+    overflow: 'hidden',
+    borderLeft: '3px solid transparent',
+    borderRight: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    borderRadius: '20px',
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    marginTop: theme.spacing.md,
+  },
+
+  control: {
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderRadius: theme.spacing.md,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  },
+
+  content: {
+    margin: theme.spacing.md,
+  },
+
+  label: {
+    overflow: 'visible',
+  },
+}));

 const AppShelf = (props: any) => {
+  const { classes, cx } = useStyles(props);
+  const [toggledCategories, settoggledCategories] = useLocalStorage({
+    key: 'app-shelf-toggled',
+    // This is a bit of a hack to get the 5 first categories to be toggled on by default
+    defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
+  });
  const [activeId, setActiveId] = useState(null);
  const { config, setConfig } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+
  const sensors = useSensors(
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 500,
+        tolerance: 5,
+      },
+    }),
    useSensor(MouseSensor, {
      // Require the mouse to move by 10 pixels before activating
      activationConstraint: {
-        delay: 250,
+        delay: 500,
        tolerance: 5,
      },
    })
@@ -75,7 +121,14 @@ const AppShelf = (props: any) => {
        <SortableContext items={config.services}>
          <Grid gutter="xl" align="center">
            {filtered.map((service) => (
-              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+              <Grid.Col
+                key={service.id}
+                span={6}
+                xl={config.settings.appCardWidth || 2}
+                xs={4}
+                sm={3}
+                md={3}
+              >
                <SortableAppShelfItem service={service} key={service.id} id={service.id} />
              </Grid.Col>
            ))}
@@ -99,26 +152,49 @@ const AppShelf = (props: any) => {
    const noCategory = config.services.filter(
      (e) => e.category === undefined || e.category === null
    );
-
+    const downloadEnabled = config.modules?.[DownloadsModule.title]?.enabled ?? false;
+    // Create an item with 0: true, 1: true, 2: true... For each category
    return (
      // Return one item for each category
      <Group grow direction="column">
-        {categoryList.map((category) => (
-          <>
-            <Title order={3} key={category}>
-              {category}
-            </Title>
-            {item(category)}
-          </>
-        ))}
-        {/* Return the item for all services without category */}
-        {noCategory && noCategory.length > 0 ? (
-          <>
-            <Title order={3}>Other</Title>
-            {item()}
-          </>
-        ) : null}
-        <ModuleWrapper mt="xl" module={DownloadsModule} />
+        <Accordion
+          disableIconRotation
+          classNames={classes}
+          order={2}
+          iconPosition="right"
+          multiple
+          initialState={toggledCategories}
+          onChange={(idx) => settoggledCategories(idx)}
+        >
+          {categoryList.map((category, idx) => (
+            <Accordion.Item key={category} label={category}>
+              {item(category)}
+            </Accordion.Item>
+          ))}
+          {/* Return the item for all services without category */}
+          {noCategory && noCategory.length > 0 ? (
+            <Accordion.Item key="Other" label="Other">
+              {item()}
+            </Accordion.Item>
+          ) : null}
+          {downloadEnabled ? (
+            <Accordion.Item key="Downloads" label="Your downloads">
+              <Paper
+                p="lg"
+                radius="lg"
+                style={{
+                  background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                  borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                }}
+              >
+                <ModuleMenu module={DownloadsModule} />
+                <DownloadComponent />
+              </Paper>
+            </Accordion.Item>
+          ) : null}
+        </Accordion>
      </Group>
    );
  }
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -1,11 +1,21 @@
-import { Text, Card, Anchor, AspectRatio, Image, Center, createStyles } from '@mantine/core';
+import {
+  Text,
+  Card,
+  Anchor,
+  AspectRatio,
+  Image,
+  Center,
+  createStyles,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { serviceItem } from '../../tools/types';
-import PingComponent from '../modules/ping/PingModule';
+import PingComponent from '../../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
+import { useConfig } from '../../tools/state';

 const useStyles = createStyles((theme) => ({
  item: {
@@ -15,6 +25,9 @@ const useStyles = createStyles((theme) => ({
      boxShadow: `${theme.shadows.md} !important`,
      transform: 'scale(1.05)',
    },
+    [theme.fn.smallerThan('sm')]: {
+      WebkitUserSelect: 'none',
+    },
  },
 }));

@@ -38,7 +51,9 @@ export function SortableAppShelfItem(props: any) {
 export function AppShelfItem(props: any) {
  const { service }: { service: serviceItem } = props;
  const [hovering, setHovering] = useState(false);
-  const { classes, theme } = useStyles();
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+  const { classes } = useStyles();
  return (
    <motion.div
      animate={{
@@ -54,11 +69,22 @@ export function AppShelfItem(props: any) {
        setHovering(false);
      }}
    >
-      <Card withBorder radius="lg" shadow="md" className={classes.item}>
+      <Card
+        withBorder
+        radius="lg"
+        shadow="md"
+        className={classes.item}
+        style={{
+          background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+          borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        }}
+      >
        <Card.Section>
          <Anchor
-            target="_blank"
-            href={service.url}
+            target={service.newTab === false ? '_top' : '_blank'}
+            href={service.openedUrl ? service.openedUrl : service.url}
            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
          >
            <Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -91,22 +117,24 @@ export function AppShelfItem(props: any) {
            >
              <motion.i
                whileHover={{
-                  cursor: 'pointer',
                  scale: 1.1,
                }}
              >
                <Image
+                  styles={{ root: { cursor: 'pointer' } }}
                  width={80}
                  height={80}
                  src={service.icon}
                  fit="contain"
                  onClick={() => {
-                    window.open(service.url);
+                    if (service.openedUrl) {
+                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                  }}
                />
              </motion.i>
            </AspectRatio>
-            <PingComponent url={service.url} />
+            <PingComponent url={service.url} status={service.status} />
          </Card.Section>
        </Center>
      </Card>
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -20,19 +20,7 @@ export default function AppShelfMenu(props: any) {
        onClose={() => setOpened(false)}
        title="Modify a service"
      >
-        <AddAppShelfItemForm
-          setOpened={setOpened}
-          name={service.name}
-          id={service.id}
-          category={service.category}
-          type={service.type}
-          url={service.url}
-          icon={service.icon}
-          apiKey={service.apiKey}
-          username={service.username}
-          password={service.password}
-          message="Save service"
-        />
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
      </Modal>
      <Menu
        position="right"
@@ -66,7 +54,7 @@ export default function AppShelfMenu(props: any) {
              autoClose: 5000,
              title: (
                <Text>
-                  Service <b>{service.name}</b> removed successfully
+                  Service <b>{service.name}</b> removed successfully!
                </Text>
              ),
              color: 'green',
--- a/src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
+++ b/src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
 import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
+import { useConfig } from '../../tools/state';

 const useStyles = createStyles((theme) => ({
  root: {
@@ -29,6 +30,7 @@ const useStyles = createStyles((theme) => ({
 }));

 export function ColorSchemeSwitch() {
+  const { config } = useConfig();
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const { classes, cx } = useStyles();

--- a/src/components/Config/ConfigChanger.tsx
+++ b/src/components/Config/ConfigChanger.tsx
@@ -1,5 +1,5 @@
 import { Center, Loader, Select, Tooltip } from '@mantine/core';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useEffect, useState } from 'react';
 import { useConfig } from '../../tools/state';

@@ -26,7 +26,10 @@ export default function ConfigChanger() {
      label="Config loader"
      onChange={(e) => {
        loadConfig(e ?? 'default');
-        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+        setCookie('config-name', e ?? 'default', {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
+        });
      }}
      data={
        // If config list is empty, return the current config
--- a/src/components/Config/LoadConfig.tsx
+++ b/src/components/Config/LoadConfig.tsx
@@ -10,7 +10,7 @@ import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
 import { useRouter } from 'next/router';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
@@ -90,7 +90,10 @@ export default function LoadConfigComponent(props: any) {
            icon: <Check />,
            message: undefined,
          });
-          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setCookie('config-name', newConfig.name, {
+            maxAge: 60 * 60 * 24 * 30,
+            sameSite: 'strict',
+          });
          const migratedConfig = migrateToIdConfig(newConfig);
          setConfig(migratedConfig);
        });
--- a/src/components/Config/SaveConfig.tsx
+++ b/src/components/Config/SaveConfig.tsx
@@ -27,7 +27,7 @@ export default function SaveConfigComponent(props: any) {
    }
  }
  return (
-    <Group>
+    <Group spacing="xs">
      <Modal
        radius="md"
        opened={opened}
@@ -59,10 +59,11 @@ export default function SaveConfigComponent(props: any) {
          </Group>
        </form>
      </Modal>
-      <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
-        Download your config
+      <Button size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
+        Download config
      </Button>
      <Button
+        size="xs"
        leftIcon={<Trash />}
        variant="outline"
        onClick={() => {
@@ -91,10 +92,10 @@ export default function SaveConfigComponent(props: any) {
          setConfig({ ...config, name: 'default' });
        }}
      >
-        Delete current config
+        Delete config
      </Button>
-      <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
-        Save a copy of your config
+      <Button size="xs" leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
+        Save a copy
      </Button>
    </Group>
  );
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -0,0 +1,65 @@
+import { TextInput, Group, Button } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useConfig } from '../../tools/state';
+import { ColorSelector } from './ColorSelector';
+import { OpacitySelector } from './OpacitySelector';
+import { AppCardWidthSelector } from './AppCardWidthSelector';
+import { ShadeSelector } from './ShadeSelector';
+
+export default function TitleChanger() {
+  const { config, setConfig } = useConfig();
+
+  const form = useForm({
+    initialValues: {
+      title: config.settings.title,
+      logo: config.settings.logo,
+      favicon: config.settings.favicon,
+      background: config.settings.background,
+    },
+  });
+
+  const saveChanges = (values: {
+    title?: string;
+    logo?: string;
+    favicon?: string;
+    background?: string;
+  }) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        title: values.title,
+        logo: values.logo,
+        favicon: values.favicon,
+        background: values.background,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" grow mb="lg">
+      <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
+        <Group grow direction="column">
+          <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
+          <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
+          <TextInput
+            label="Favicon"
+            placeholder="/favicon.svg"
+            {...form.getInputProps('favicon')}
+          />
+          <TextInput
+            label="Background"
+            placeholder="/img/background.png"
+            {...form.getInputProps('background')}
+          />
+          <Button type="submit">Save</Button>
+        </Group>
+      </form>
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
+      <ShadeSelector />
+      <OpacitySelector />
+      <AppCardWidthSelector />
+    </Group>
+  );
+}
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function AppCardWidthSelector() {
+  const { config, setConfig } = useConfig();
+
+  const setappCardWidth = (appCardWidth: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appCardWidth,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Width</Text>
+      <Slider
+        label={null}
+        defaultValue={config.settings.appCardWidth}
+        step={0.2}
+        min={0.8}
+        max={2}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setappCardWidth(value)}
+      />
+    </Group>
+  );
+}
--- a/src/components/Settings/ColorSelector.tsx
+++ b/src/components/Settings/ColorSelector.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+interface ColorControlProps {
+  type: string;
+}
+
+export function ColorSelector({ type }: ColorControlProps) {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const colors = Object.keys(theme.colors).map((color) => ({
+    swatch: theme.colors[color][6],
+    color,
+  }));
+
+  const configColor = type === 'primary' ? primaryColor : secondaryColor;
+
+  const setConfigColor = (color: string) => {
+    if (type === 'primary') {
+      setPrimaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          primaryColor: color,
+        },
+      });
+    } else {
+      setSecondaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          secondaryColor: color,
+        },
+      });
+    }
+  };
+
+  const swatches = colors.map(({ color, swatch }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigColor(color)}
+      key={color}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[configColor][6]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            width: 152,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group spacing="xs">{swatches}</Group>
+      </Popover>
+      <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
+    </Group>
+  );
+}
--- a/src/components/Settings/CommonSettings.tsx
+++ b/src/components/Settings/CommonSettings.tsx
@@ -0,0 +1,86 @@
+import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
+import { useState } from 'react';
+import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
+import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
+import ConfigChanger from '../Config/ConfigChanger';
+import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
+import Tip from '../layout/Tip';
+
+export default function CommonSettings(args: any) {
+  const { config, setConfig } = useConfig();
+
+  const matches = [
+    { label: 'Google', value: 'https://google.com/search?q=' },
+    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
+    { label: 'Bing', value: 'https://bing.com/search?q=' },
+    { label: 'Custom', value: 'Custom' },
+  ];
+
+  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
+  const [searchUrl, setSearchUrl] = useState(
+    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
+  );
+
+  return (
+    <Group direction="column" grow mb="lg">
+      <Group grow direction="column" spacing={0}>
+        <Text>Search engine</Text>
+        <Tip>
+          Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or
+          for a Torrent respectively.
+        </Tip>
+        <SegmentedControl
+          fullWidth
+          mb="sm"
+          title="Search engine"
+          value={
+            // Match config.settings.searchUrl with a key in the matches array
+            searchUrl
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) => {
+              setSearchUrl(e);
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: e,
+                },
+              });
+            }
+          }
+          data={matches}
+        />
+        {searchUrl === 'Custom' && (
+          <>
+            <Tip>%s can be used as a placeholder for the query.</Tip>
+            <TextInput
+              label="Query URL"
+              placeholder="Custom query URL"
+              value={customSearchUrl}
+              onChange={(event) => {
+                setCustomSearchUrl(event.currentTarget.value);
+                setConfig({
+                  ...config,
+                  settings: {
+                    ...config.settings,
+                    searchUrl: event.currentTarget.value,
+                  },
+                });
+              }}
+            />
+          </>
+        )}
+      </Group>
+      <ColorSchemeSwitch />
+      <WidgetsPositionSwitch />
+      <ModuleEnabler />
+      <ConfigChanger />
+      <SaveConfigComponent />
+      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
+    </Group>
+  );
+}
--- a/src/components/Settings/Credits.tsx
+++ b/src/components/Settings/Credits.tsx
@@ -0,0 +1,44 @@
+import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
+import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
+
+export default function Credits(props: any) {
+  return (
+    <Group position="center" direction="row" mr="xs">
+      <Group spacing={0}>
+        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+          <IconBrandGithub size={18} />
+        </ActionIcon>
+        <Text
+          style={{
+            position: 'relative',
+            fontSize: '0.90rem',
+            color: 'gray',
+          }}
+        >
+          {CURRENT_VERSION}
+        </Text>
+      </Group>
+      <Group spacing={1}>
+        <Text
+          style={{
+            fontSize: '0.90rem',
+            textAlign: 'center',
+            color: 'gray',
+          }}
+        >
+          Made with ❤️ by @
+          <Anchor
+            href="https://github.com/ajnart"
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            ajnart
+          </Anchor>
+        </Text>
+        <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
+          <IconBrandDiscord size={18} />
+        </ActionIcon>
+      </Group>
+    </Group>
+  );
+}
--- a/src/components/Settings/ModuleEnabler.tsx
+++ b/src/components/Settings/ModuleEnabler.tsx
@@ -1,5 +1,5 @@
-import { Group, Switch } from '@mantine/core';
-import * as Modules from '../modules';
+import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
+import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';

 export default function ModuleEnabler(props: any) {
@@ -7,26 +7,29 @@ export default function ModuleEnabler(props: any) {
  const modules = Object.values(Modules).map((module) => module);
  return (
    <Group direction="column">
-      {modules.map((module) => (
-        <Switch
-          key={module.title}
-          size="md"
-          checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title} module`}
-          onChange={(e) => {
-            setConfig({
-              ...config,
-              modules: {
-                ...config.modules,
-                [module.title]: {
-                  ...config.modules?.[module.title],
-                  enabled: e.currentTarget.checked,
+      <Title order={4}>Module enabler</Title>
+      <SimpleGrid cols={2} spacing="md">
+        {modules.map((module) => (
+          <Checkbox
+            key={module.title}
+            size="md"
+            checked={config.modules?.[module.title]?.enabled ?? false}
+            label={`${module.title}`}
+            onChange={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
                },
-              },
-            });
-          }}
-        />
-      ))}
+              });
+            }}
+          />
+        ))}
+      </SimpleGrid>
    </Group>
  );
 }
--- a/src/components/Settings/OpacitySelector.tsx
+++ b/src/components/Settings/OpacitySelector.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function OpacitySelector() {
+  const { config, setConfig } = useConfig();
+
+  const MARKS = [
+    { value: 10, label: '10' },
+    { value: 20, label: '20' },
+    { value: 30, label: '30' },
+    { value: 40, label: '40' },
+    { value: 50, label: '50' },
+    { value: 60, label: '60' },
+    { value: 70, label: '70' },
+    { value: 80, label: '80' },
+    { value: 90, label: '90' },
+    { value: 100, label: '100' },
+  ];
+
+  const setConfigOpacity = (opacity: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appOpacity: opacity,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Opacity</Text>
+      <Slider
+        defaultValue={config.settings.appOpacity || 100}
+        step={10}
+        min={10}
+        marks={MARKS}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setConfigOpacity(value)}
+      />
+    </Group>
+  );
+}
--- a/src/components/Settings/SettingsMenu.story.tsx
+++ b/src/components/Settings/SettingsMenu.story.tsx
@@ -1,10 +0,0 @@
-import { SettingsMenuButton } from './SettingsMenu';
-
-export default {
-  title: ' menu',
-  args: {
-    opened: false,
-  },
-};
-
-export const Default = (args: any) => <SettingsMenuButton {...args} />;
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -1,131 +1,25 @@
-import {
-  ActionIcon,
-  Group,
-  Title,
-  Text,
-  Tooltip,
-  SegmentedControl,
-  TextInput,
-  Drawer,
-  Anchor,
-} from '@mantine/core';
-import { useColorScheme, useHotkeys } from '@mantine/hooks';
+import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
-import { IconBrandGithub as BrandGithub, IconSettings } from '@tabler/icons';
-import { CURRENT_VERSION } from '../../../data/constants';
-import { useConfig } from '../../tools/state';
-import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
-import ConfigChanger from '../Config/ConfigChanger';
-import SaveConfigComponent from '../Config/SaveConfig';
-import ModuleEnabler from './ModuleEnabler';
+import { IconSettings } from '@tabler/icons';
+import AdvancedSettings from './AdvancedSettings';
+import CommonSettings from './CommonSettings';
+import Credits from './Credits';

 function SettingsMenu(props: any) {
-  const { config, setConfig } = useConfig();
-  const colorScheme = useColorScheme();
-  const { current, latest } = props;
-
-  const matches = [
-    { label: 'Google', value: 'https://google.com/search?q=' },
-    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
-    { label: 'Bing', value: 'https://bing.com/search?q=' },
-    { label: 'Custom', value: 'Custom' },
-  ];
-
-  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
-  const [searchUrl, setSearchUrl] = useState(
-    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
-  );
-
  return (
-    <Group direction="column" grow>
-      <Group grow direction="column" spacing={0}>
-        <Text>Search engine</Text>
-        <SegmentedControl
-          fullWidth
-          title="Search engine"
-          value={
-            // Match config.settings.searchUrl with a key in the matches array
-            searchUrl
-          }
-          onChange={
-            // Set config.settings.searchUrl to the value of the selected item
-            (e) => {
-              setSearchUrl(e);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: e,
-                },
-              });
-            }
-          }
-          data={matches}
-        />
-        {searchUrl === 'Custom' && (
-          <TextInput
-            label="Query URL"
-            placeholder="Custom query url"
-            value={customSearchUrl}
-            onChange={(event) => {
-              setCustomSearchUrl(event.currentTarget.value);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: event.currentTarget.value,
-                },
-              });
-            }}
-          />
-        )}
-      </Group>
-      <ModuleEnabler />
-      <ColorSchemeSwitch />
-      <ConfigChanger />
-      <SaveConfigComponent />
-      <Text
-        style={{
-          alignSelf: 'center',
-          fontSize: '0.75rem',
-          textAlign: 'center',
-          color: '#a0aec0',
-        }}
-      >
-        tip: You can upload your config file by dragging and dropping it onto the page
-      </Text>
-      <Group position="center" direction="row" mr="xs">
-        <Group spacing={0}>
-          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
-            <BrandGithub size={18} />
-          </ActionIcon>
-          <Text
-            style={{
-              position: 'relative',
-              fontSize: '0.90rem',
-              color: 'gray',
-            }}
-          >
-            {CURRENT_VERSION}
-          </Text>
-        </Group>
-        <Text
-          style={{
-            fontSize: '0.90rem',
-            textAlign: 'center',
-            color: '#a0aec0',
-          }}
-        >
-          Made with ❤️ by @
-          <Anchor
-            href="https://github.com/ajnart"
-            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-          >
-            ajnart
-          </Anchor>
-        </Text>
-      </Group>
-    </Group>
+    <Tabs grow>
+      <Tabs.Tab data-autofocus label="Common">
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <CommonSettings />
+        </ScrollArea>
+      </Tabs.Tab>
+      <Tabs.Tab label="Customizations">
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <AdvancedSettings />
+        </ScrollArea>
+      </Tabs.Tab>
+    </Tabs>
  );
 }

@@ -136,14 +30,15 @@ export function SettingsMenuButton(props: any) {
  return (
    <>
      <Drawer
-        size="auto"
-        padding="xl"
+        size="xl"
+        padding="lg"
        position="right"
-        title={<Title order={3}>Settings</Title>}
+        title={<Title order={5}>Settings</Title>}
        opened={props.opened || opened}
        onClose={() => setOpened(false)}
      >
        <SettingsMenu />
+        <Credits />
      </Drawer>
      <ActionIcon
        variant="default"
--- a/src/components/Settings/ShadeSelector.tsx
+++ b/src/components/Settings/ShadeSelector.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+export function ShadeSelector() {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const primaryShades = theme.colors[primaryColor].map((s, i) => ({
+    swatch: theme.colors[primaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+  const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({
+    swatch: theme.colors[secondaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+
+  const setConfigShade = (shade: MantineTheme['primaryShade']) => {
+    setPrimaryShade(shade);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        primaryShade: shade,
+      },
+    });
+  };
+
+  const primarySwatches = primaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[primaryColor][Number(primaryShade)]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group direction="column" spacing="xs">
+          <Group spacing="xs">{primarySwatches}</Group>
+          <Group spacing="xs">{secondarySwatches}</Group>
+        </Group>
+      </Popover>
+      <Text>Shade</Text>
+    </Group>
+  );
+}
--- a/src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx
+++ b/src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { createStyles, Switch, Group } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function WidgetsPositionSwitch() {
+  const { config, setConfig } = useConfig();
+  const { classes, cx } = useStyles();
+  const defaultPosition = config?.settings?.widgetPosition || 'right';
+  const [widgetPosition, setWidgetPosition] = useState(defaultPosition);
+  const toggleWidgetPosition = () => {
+    const position = widgetPosition === 'right' ? 'left' : 'right';
+    setWidgetPosition(position);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        widgetPosition: position,
+      },
+    });
+  };
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Switch
+          checked={widgetPosition === 'left'}
+          onChange={() => toggleWidgetPosition()}
+          size="md"
+        />
+      </div>
+      Position widgets on left
+    </Group>
+  );
+}
--- a/src/components/layout/Aside.tsx
+++ b/src/components/layout/Aside.tsx
@@ -1,26 +1,36 @@
-import { Aside as MantineAside, Group } from '@mantine/core';
-import { WeatherModule, DateModule, CalendarModule, TotalDownloadsModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { Aside as MantineAside, createStyles } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));

 export default function Aside(props: any) {
+  const { classes, cx } = useStyles();
  return (
    <MantineAside
      pr="md"
-      hiddenBreakpoint="md"
+      hiddenBreakpoint="sm"
      hidden
+      className={cx(classes.hide)}
      style={{
        border: 'none',
+        background: 'none',
      }}
      width={{
        base: 'auto',
      }}
    >
-      <Group mt="sm" grow direction="column" style={{ width: 300 }}>
-        <ModuleWrapper module={CalendarModule} />
-        <ModuleWrapper module={TotalDownloadsModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={DateModule} />
-      </Group>
+      <Widgets />
    </MantineAside>
  );
 }
--- a/src/components/layout/Background.tsx
+++ b/src/components/layout/Background.tsx
@@ -0,0 +1,20 @@
+import { Global } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function Background() {
+  const { config } = useConfig();
+
+  return (
+    <Global
+      styles={{
+        body: {
+          minHeight: '100vh',
+          backgroundImage: `url('${config.settings.background}')` || '',
+          backgroundPosition: 'center center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        },
+      }}
+    />
+  );
+}
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { createStyles, Footer as FooterComponent } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
+import { IconAlertCircle as AlertCircle } from '@tabler/icons';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';

 const useStyles = createStyles((theme) => ({
@@ -38,12 +39,21 @@ export function Footer({ links }: FooterCenteredProps) {
    // Fetch Data here when component first mounted
    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
      res.json().then((data) => {
-        if (data.tag_name !== CURRENT_VERSION) {
+        if (data.tag_name > CURRENT_VERSION) {
          showNotification({
            color: 'yellow',
            autoClose: false,
            title: 'New version available',
-            message: `Version ${data.tag_name} is available, update now! 😡`,
+            icon: <AlertCircle />,
+            message: `Version ${data.tag_name} is available, update now!`,
+          });
+        } else if (data.tag_name < CURRENT_VERSION) {
+          showNotification({
+            color: 'orange',
+            autoClose: 5000,
+            title: 'You are using a development version',
+            icon: <AlertCircle />,
+            message: 'This version of Homarr is still in development! Bugs are expected 🐛',
          });
        }
      });
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import { createStyles, Header as Head, Group, Box } from '@mantine/core';
-import { Logo } from './Logo';
-import SearchBar from '../modules/search/SearchModule';
+import { Box, createStyles, Group, Header as Head } from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
+
+import DockerMenuButton from '../../modules/docker/DockerModule';
+import SearchBar from '../../modules/search/SearchModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { Logo } from './Logo';

 const HEADER_HEIGHT = 60;

@@ -13,19 +15,27 @@ const useStyles = createStyles((theme) => ({
      display: 'none',
    },
  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
 }));

 export function Header(props: any) {
+  const [opened, toggleOpened] = useBooleanToggle(false);
  const { classes, cx } = useStyles();
+  const [hidden, toggleHidden] = useBooleanToggle(true);

  return (
    <Head height="auto">
-      <Group m="xs" position="apart">
+      <Group p="xs" position="apart">
        <Box className={classes.hide}>
          <Logo style={{ fontSize: 22 }} />
        </Box>
        <Group noWrap>
          <SearchBar />
+          <DockerMenuButton />
          <SettingsMenuButton />
          <AddItemShelfButton />
        </Group>
--- a/src/components/layout/HeaderConfig.tsx
+++ b/src/components/layout/HeaderConfig.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Head from 'next/head';
+import { useConfig } from '../../tools/state';
+
+export function HeaderConfig(props: any) {
+  const { config } = useConfig();
+
+  return (
+    <Head>
+      <title>{config.settings.title || 'Homarr 🦞'}</title>
+      <link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
+    </Head>
+  );
+}
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -2,6 +2,10 @@ import { AppShell, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
+import Navbar from './Navbar';
+import { HeaderConfig } from './HeaderConfig';
+import { Background } from './Background';
+import { useConfig } from '../../tools/state';

 const useStyles = createStyles((theme) => ({
  main: {},
@@ -9,8 +13,18 @@ const useStyles = createStyles((theme) => ({

 export default function Layout({ children, style }: any) {
  const { classes, cx } = useStyles();
+  const { config } = useConfig();
+  const widgetPosition = config?.settings?.widgetPosition === 'left';
+
  return (
-    <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
+    <AppShell
+      header={<Header />}
+      navbar={widgetPosition ? <Navbar /> : undefined}
+      aside={widgetPosition ? undefined : <Aside />}
+      footer={<Footer links={[]} />}
+    >
+      <HeaderConfig />
+      <Background />
      <main
        className={cx(classes.main)}
        style={{
--- a/src/components/layout/Logo.tsx
+++ b/src/components/layout/Logo.tsx
@@ -1,33 +1,44 @@
 import { Group, Image, Text } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import * as React from 'react';
+import { useColorTheme } from '../../tools/color';
+import { useConfig } from '../../tools/state';
+
+export function Logo({ style, withoutText }: any) {
+  const { config } = useConfig();
+  const { primaryColor, secondaryColor } = useColorTheme();

-export function Logo({ style }: any) {
  return (
    <Group spacing="xs">
      <Image
        width={50}
-        src="/imgs/logo.png"
+        src={config.settings.logo || '/imgs/logo.png'}
        style={{
          position: 'relative',
        }}
      />
-      <NextLink
-        style={{
-          textDecoration: 'none',
-          position: 'relative',
-        }}
-        href="/"
-      >
-        <Text
-          sx={style}
-          weight="bold"
-          variant="gradient"
-          gradient={{ from: 'red', to: 'orange', deg: 145 }}
+      {withoutText ? null : (
+        <NextLink
+          href="/"
+          style={{
+            textDecoration: 'none',
+            position: 'relative',
+          }}
        >
-          Homarr
-        </Text>
-      </NextLink>
+          <Text
+            sx={style}
+            weight="bold"
+            variant="gradient"
+            gradient={{
+              from: primaryColor,
+              to: secondaryColor,
+              deg: 145,
+            }}
+          >
+            {config.settings.title || 'Homarr'}
+          </Text>
+        </NextLink>
+      )}
    </Group>
  );
 }
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,24 +1,37 @@
-import { Group, Navbar as MantineNavbar } from '@mantine/core';
-import { WeatherModule, DateModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { createStyles, Navbar as MantineNavbar } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));

 export default function Navbar() {
+  const { classes, cx } = useStyles();
+
  return (
    <MantineNavbar
-      hiddenBreakpoint="lg"
+      pl="md"
+      hiddenBreakpoint="sm"
      hidden
+      className={cx(classes.hide)}
      style={{
        border: 'none',
+        background: 'none',
      }}
      width={{
        base: 'auto',
      }}
    >
-      <Group mt="sm" direction="column" align="center">
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={WeatherModule} />
-      </Group>
+      <Widgets />
    </MantineNavbar>
  );
 }
--- a/src/components/layout/Tip.tsx
+++ b/src/components/layout/Tip.tsx
@@ -0,0 +1,19 @@
+import { Text } from '@mantine/core';
+
+interface TipProps {
+  children: React.ReactNode;
+}
+
+export default function Tip(props: TipProps) {
+  return (
+    <Text
+      style={{
+        fontSize: '0.75rem',
+        color: 'gray',
+        marginBottom: '0.5rem',
+      }}
+    >
+      Tip: {props.children}
+    </Text>
+  );
+}
--- a/src/components/layout/Widgets.tsx
+++ b/src/components/layout/Widgets.tsx
@@ -0,0 +1,16 @@
+import { Group } from '@mantine/core';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../../modules';
+import { DashdotModule } from '../../modules/dashdot';
+import { ModuleWrapper } from '../../modules/moduleWrapper';
+
+export default function Widgets(props: any) {
+  return (
+    <Group my="sm" grow direction="column" style={{ width: 300 }}>
+      <ModuleWrapper module={CalendarModule} />
+      <ModuleWrapper module={TotalDownloadsModule} />
+      <ModuleWrapper module={WeatherModule} />
+      <ModuleWrapper module={DateModule} />
+      <ModuleWrapper module={DashdotModule} />
+    </Group>
+  );
+}
--- a/src/components/modules/calendar/CalendarComponent.story.tsx
+++ b/src/components/modules/calendar/CalendarComponent.story.tsx
@@ -1,7 +0,0 @@
-import CalendarComponent from './CalendarModule';
-
-export default {
-  title: 'Calendar component',
-};
-
-export const Default = (args: any) => <CalendarComponent {...args} />;
--- a/src/components/modules/calendar/CalendarModule.tsx
+++ b/src/components/modules/calendar/CalendarModule.tsx
@@ -1,293 +0,0 @@
-/* eslint-disable react/no-children-prop */
-import { Box, Divider, Indicator, Popover, ScrollArea, useMantineTheme } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { Calendar } from '@mantine/dates';
-import { showNotification } from '@mantine/notifications';
-import { IconCalendar as CalendarIcon, IconCheck as Check } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-import {
-  SonarrMediaDisplay,
-  RadarrMediaDisplay,
-  LidarrMediaDisplay,
-  ReadarrMediaDisplay,
-} from './MediaDisplay';
-
-export const CalendarModule: IModule = {
-  title: 'Calendar',
-  description:
-    'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
-  icon: CalendarIcon,
-  component: CalendarComponent,
-};
-
-export default function CalendarComponent(props: any) {
-  const { config } = useConfig();
-  const [sonarrMedias, setSonarrMedias] = useState([] as any);
-  const [lidarrMedias, setLidarrMedias] = useState([] as any);
-  const [radarrMedias, setRadarrMedias] = useState([] as any);
-  const [readarrMedias, setReadarrMedias] = useState([] as any);
-
-  useEffect(() => {
-    // Filter only sonarr and radarr services
-    const filtered = config.services.filter(
-      (service) =>
-        service.type === 'Sonarr' ||
-        service.type === 'Radarr' ||
-        service.type === 'Lidarr' ||
-        service.type === 'Readarr'
-    );
-
-    // Get the url and apiKey for all Sonarr and Radarr services
-    const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
-    const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
-    const lidarrService = filtered.filter((service) => service.type === 'Lidarr').at(0);
-    const readarrService = filtered.filter((service) => service.type === 'Readarr').at(0);
-    const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
-    const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
-    if (sonarrService && sonarrService.apiKey) {
-      const baseUrl = new URL(sonarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setSonarrMedias(data);
-            showNotification({
-              title: 'Sonarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (radarrService && radarrService.apiKey) {
-      const baseUrl = new URL(radarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setRadarrMedias(data);
-            showNotification({
-              title: 'Radarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (lidarrService && lidarrService.apiKey) {
-      const baseUrl = new URL(lidarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/v1/calendar?apikey=${lidarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setLidarrMedias(data);
-            showNotification({
-              title: 'Lidarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (readarrService && readarrService.apiKey) {
-      const baseUrl = new URL(readarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/v1/calendar?apikey=${readarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setReadarrMedias(data);
-            showNotification({
-              title: 'Readarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-  }, [config.services]);
-
-  if (sonarrMedias === undefined && radarrMedias === undefined) {
-    return <Calendar />;
-  }
-  return (
-    <Calendar
-      onChange={(day: any) => {}}
-      renderDay={(renderdate) => (
-        <DayComponent
-          renderdate={renderdate}
-          sonarrmedias={sonarrMedias}
-          radarrmedias={radarrMedias}
-          lidarrmedias={lidarrMedias}
-          readarrmedias={readarrMedias}
-        />
-      )}
-    />
-  );
-}
-
-function DayComponent(props: any) {
-  const {
-    renderdate,
-    sonarrmedias,
-    radarrmedias,
-    lidarrmedias,
-    readarrmedias,
-  }: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
-    props;
-  const [opened, setOpened] = useState(false);
-  const theme = useMantineTheme();
-
-  const day = renderdate.getDate();
-
-  const readarrFiltered = readarrmedias.filter((media: any) => {
-    const date = new Date(media.releaseDate);
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
-  });
-
-  const lidarrFiltered = lidarrmedias.filter((media: any) => {
-    const date = new Date(media.releaseDate);
-    // Return true if the date is renerdate without counting hours and minutes
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
-  });
-  const sonarrFiltered = sonarrmedias.filter((media: any) => {
-    const date = new Date(media.airDate);
-    // Return true if the date is renerdate without counting hours and minutes
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
-  });
-  const radarrFiltered = radarrmedias.filter((media: any) => {
-    const date = new Date(media.inCinemas);
-    // Return true if the date is renerdate without counting hours and minutes
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
-  });
-  if (
-    sonarrFiltered.length === 0 &&
-    radarrFiltered.length === 0 &&
-    lidarrFiltered.length === 0 &&
-    readarrFiltered.length === 0
-  ) {
-    return <div>{day}</div>;
-  }
-
-  return (
-    <Box
-      onClick={() => {
-        setOpened(true);
-      }}
-    >
-      {readarrFiltered.length > 0 && (
-        <Indicator
-          size={10}
-          withBorder
-          style={{
-            position: 'absolute',
-            bottom: 8,
-            left: 8,
-          }}
-          color="red"
-          children={null}
-        />
-      )}
-      {radarrFiltered.length > 0 && (
-        <Indicator
-          size={10}
-          withBorder
-          style={{
-            position: 'absolute',
-            top: 8,
-            left: 8,
-          }}
-          color="yellow"
-          children={null}
-        />
-      )}
-      {sonarrFiltered.length > 0 && (
-        <Indicator
-          size={10}
-          withBorder
-          style={{
-            position: 'absolute',
-            top: 8,
-            right: 8,
-          }}
-          color="blue"
-          children={null}
-        />
-      )}
-      {lidarrFiltered.length > 0 && (
-        <Indicator
-          size={10}
-          withBorder
-          style={{
-            position: 'absolute',
-            bottom: 8,
-            right: 8,
-          }}
-          color="green"
-          children={undefined}
-        />
-      )}
-      <Popover
-        position="left"
-        radius="lg"
-        shadow="xl"
-        transition="pop"
-        styles={{
-          body: {
-            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
-          },
-        }}
-        width={700}
-        onClose={() => setOpened(false)}
-        opened={opened}
-        target={day}
-      >
-        <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <SonarrMediaDisplay media={media} />
-              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {radarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <RadarrMediaDisplay media={media} />
-              {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {lidarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <LidarrMediaDisplay media={media} />
-              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {readarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <ReadarrMediaDisplay media={media} />
-              {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-        </ScrollArea>
-      </Popover>
-    </Box>
-  );
-}
--- a/src/components/modules/calendar/MediaDisplay.story.tsx
+++ b/src/components/modules/calendar/MediaDisplay.story.tsx
@@ -1,67 +0,0 @@
-import { RadarrMediaDisplay } from './MediaDisplay';
-
-export default {
-  title: 'Media display component',
-  args: {
-    media: {
-      title: 'Doctor Strange in the Multiverse of Madness',
-      originalTitle: 'Doctor Strange in the Multiverse of Madness',
-      originalLanguage: {
-        id: 1,
-        name: 'English',
-      },
-      secondaryYearSourceId: 0,
-      sortTitle: 'doctor strange in multiverse madness',
-      sizeOnDisk: 0,
-      status: 'announced',
-      overview:
-        'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
-      inCinemas: '2022-05-04T00:00:00Z',
-      images: [
-        {
-          coverType: 'poster',
-          url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
-        },
-        {
-          coverType: 'fanart',
-          url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
-        },
-      ],
-      website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
-      year: 2022,
-      hasFile: false,
-      youTubeTrailerId: 'aWzlQ2N6qqg',
-      studio: 'Marvel Studios',
-      path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-      qualityProfileId: 1,
-      monitored: true,
-      minimumAvailability: 'announced',
-      isAvailable: true,
-      folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-      runtime: 126,
-      cleanTitle: 'doctorstrangeinmultiversemadness',
-      imdbId: 'tt9419884',
-      tmdbId: 453395,
-      titleSlug: '453395',
-      certification: 'PG-13',
-      genres: ['Fantasy', 'Action', 'Adventure'],
-      tags: [],
-      added: '2022-04-29T20:52:33Z',
-      ratings: {
-        tmdb: {
-          votes: 0,
-          value: 0,
-          type: 'user',
-        },
-      },
-      collection: {
-        name: 'Doctor Strange Collection',
-        tmdbId: 618529,
-        images: [],
-      },
-      id: 1,
-    },
-  },
-};
-
-export const Default = (args: any) => <RadarrMediaDisplay {...args} />;
--- a/src/components/modules/calendar/MediaDisplay.tsx
+++ b/src/components/modules/calendar/MediaDisplay.tsx
@@ -1,199 +0,0 @@
-import {
-  Image,
-  Group,
-  Title,
-  Badge,
-  Text,
-  ActionIcon,
-  Anchor,
-  ScrollArea,
-  Tooltip,
-  GroupProps,
-} from '@mantine/core';
-import { IconLink, IconPlayerPlay } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { serviceItem } from '../../../tools/types';
-
-export interface IMedia {
-  overview: string;
-  imdbId?: any;
-  artist?: string;
-  title: string;
-  poster?: string;
-  genres: string[];
-  seasonNumber?: number;
-  plexUrl?: string;
-  episodeNumber?: number;
-}
-export function MediaDisplay(
-  props: GroupProps & React.RefAttributes<HTMLDivElement> & { media: IMedia }
-) {
-  const { media }: { media: IMedia } = props;
-  return (
-    <Group {...props} position="apart">
-      <Text>
-        {media.poster && (
-          <Image
-            style={{
-              float: 'right',
-            }}
-            radius="md"
-            fit="cover"
-            src={media.poster}
-            alt={media.title}
-            width={250}
-            height={400}
-          />
-        )}
-        <Group direction="column">
-          <Group style={{ minWidth: 400 }} align="end">
-            <Title order={3}>{media.title}</Title>
-            {media.plexUrl && (
-              <Tooltip label="Open in Plex">
-                <Anchor href={media.plexUrl} target="_blank">
-                  <ActionIcon>
-                    <IconPlayerPlay />
-                  </ActionIcon>
-                </Anchor>
-              </Tooltip>
-            )}
-            {media.plexUrl && (
-              <Badge color="green" size="lg">
-                Available on Plex
-              </Badge>
-            )}
-            {media.imdbId && (
-              <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
-                <ActionIcon>
-                  <IconLink />
-                </ActionIcon>
-              </Anchor>
-            )}
-          </Group>
-          {media.artist && (
-            <Text
-              style={{
-                textAlign: 'center',
-                color: '#a0aec0',
-              }}
-            >
-              New release from {media.artist}
-            </Text>
-          )}
-          {(media.episodeNumber || media.seasonNumber) && (
-            <Text
-              style={{
-                textAlign: 'center',
-                color: '#a0aec0',
-              }}
-            >
-              Season {media.seasonNumber} {media.episodeNumber && `episode ${media.episodeNumber}`}
-            </Text>
-          )}
-        </Group>
-        <Group direction="column" position="apart">
-          <ScrollArea style={{ height: 250 }}>{media.overview}</ScrollArea>
-          <Group align="center" position="center" spacing="xs">
-            {media.genres.map((genre: string, i: number) => (
-              <Badge size="sm" key={i}>
-                {genre}
-              </Badge>
-            ))}
-          </Group>
-        </Group>
-      </Text>
-    </Group>
-  );
-}
-
-export function ReadarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  const { config } = useConfig();
-  // Find lidarr in services
-  const readarr = config.services.find((service: serviceItem) => service.type === 'Readarr');
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'cover');
-  if (!readarr) {
-    return null;
-  }
-  const baseUrl = new URL(readarr.url).origin;
-  // Remove '/' from the end of the lidarr url
-  const fullLink = `${baseUrl}${poster.url}`;
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        title: media.title,
-        poster: fullLink,
-        artist: media.author.authorName,
-        overview: media.overview,
-        genres: media.genres,
-      }}
-    />
-  );
-}
-
-export function LidarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  const { config } = useConfig();
-  // Find lidarr in services
-  const lidarr = config.services.find((service: serviceItem) => service.type === 'Lidarr');
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'cover');
-  if (!lidarr) {
-    return null;
-  }
-  const baseUrl = new URL(lidarr.url).origin;
-  // Remove '/' from the end of the lidarr url
-  const fullLink = `${baseUrl}${poster.url}`;
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        title: media.title,
-        poster: fullLink,
-        artist: media.artist.artistName,
-        overview: media.overview,
-        genres: media.genres,
-      }}
-    />
-  );
-}
-
-export function RadarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        imdbId: media.imdbId,
-        title: media.title,
-        overview: media.overview,
-        poster: poster.url,
-        genres: media.genres,
-      }}
-    />
-  );
-}
-
-export function SonarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.series.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        imdbId: media.series.imdbId,
-        title: media.series.title,
-        overview: media.series.overview,
-        poster: poster.url,
-        genres: media.series.genres,
-        seasonNumber: media.seasonNumber,
-        episodeNumber: media.episodeNumber,
-      }}
-    />
-  );
-}
--- a/src/components/modules/calendar/index.ts
+++ b/src/components/modules/calendar/index.ts
@@ -1 +0,0 @@
-export { CalendarModule } from './CalendarModule';
--- a/src/components/modules/calendar/mediaExample.ts
+++ b/src/components/modules/calendar/mediaExample.ts
@@ -1,408 +0,0 @@
-export const medias = [
-  {
-    title: 'Doctor Strange in the Multiverse of Madness',
-    originalTitle: 'Doctor Strange in the Multiverse of Madness',
-    originalLanguage: {
-      id: 1,
-      name: 'English',
-    },
-    alternateTitles: [
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange 2',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 1,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Доктор Стрэндж 2',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 11,
-          name: 'Russian',
-        },
-        id: 2,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doutor Estranho 2',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 3,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange v multivesmíre šialenstva',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 4,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange 2: El multiverso de la locura',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 3,
-          name: 'Spanish',
-        },
-        id: 5,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doktor Strange Deliliğin Çoklu Evreninde',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 17,
-          name: 'Turkish',
-        },
-        id: 6,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'মহাবিশ্বের পাগলামিতে অদ্ভুত চিকিৎসক',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 7,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'จอมเวทย์มหากาฬ ในมัลติเวิร์สมหาภัย',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 28,
-          name: 'Thai',
-        },
-        id: 8,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: "Marvel Studios' Doctor Strange in the Multiverse of Madness",
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 9,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange en el Multiverso de la Locura de Marvel Studios',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 3,
-          name: 'Spanish',
-        },
-        id: 10,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doktors Streindžs neprāta multivisumā',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 11,
-      },
-    ],
-    secondaryYearSourceId: 0,
-    sortTitle: 'doctor strange in multiverse madness',
-    sizeOnDisk: 0,
-    status: 'announced',
-    overview:
-      'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
-    inCinemas: '2022-05-04T00:00:00Z',
-    images: [
-      {
-        coverType: 'poster',
-        url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
-      },
-      {
-        coverType: 'fanart',
-        url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
-      },
-    ],
-    website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
-    year: 2022,
-    hasFile: false,
-    youTubeTrailerId: 'aWzlQ2N6qqg',
-    studio: 'Marvel Studios',
-    path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-    qualityProfileId: 1,
-    monitored: true,
-    minimumAvailability: 'announced',
-    isAvailable: true,
-    folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-    runtime: 126,
-    cleanTitle: 'doctorstrangeinmultiversemadness',
-    imdbId: 'tt9419884',
-    tmdbId: 453395,
-    titleSlug: '453395',
-    certification: 'PG-13',
-    genres: ['Fantasy', 'Action', 'Adventure'],
-    tags: [],
-    added: '2022-04-29T20:52:33Z',
-    ratings: {
-      tmdb: {
-        votes: 0,
-        value: 0,
-        type: 'user',
-      },
-    },
-    collection: {
-      name: 'Doctor Strange Collection',
-      tmdbId: 618529,
-      images: [],
-    },
-    id: 1,
-  },
-  {
-    title: 'Doctor Strange in the Multiverse of Madness',
-    originalTitle: 'Doctor Strange in the Multiverse of Madness',
-    originalLanguage: {
-      id: 1,
-      name: 'English',
-    },
-    alternateTitles: [
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange 2',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 1,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Доктор Стрэндж 2',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 11,
-          name: 'Russian',
-        },
-        id: 2,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doutor Estranho 2',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 3,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange v multivesmíre šialenstva',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 4,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange 2: El multiverso de la locura',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 3,
-          name: 'Spanish',
-        },
-        id: 5,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doktor Strange Deliliğin Çoklu Evreninde',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 17,
-          name: 'Turkish',
-        },
-        id: 6,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'মহাবিশ্বের পাগলামিতে অদ্ভুত চিকিৎসক',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 7,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'จอมเวทย์มหากาฬ ในมัลติเวิร์สมหาภัย',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 28,
-          name: 'Thai',
-        },
-        id: 8,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: "Marvel Studios' Doctor Strange in the Multiverse of Madness",
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 9,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doctor Strange en el Multiverso de la Locura de Marvel Studios',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 3,
-          name: 'Spanish',
-        },
-        id: 10,
-      },
-      {
-        sourceType: 'tmdb',
-        movieId: 1,
-        title: 'Doktors Streindžs neprāta multivisumā',
-        sourceId: 0,
-        votes: 0,
-        voteCount: 0,
-        language: {
-          id: 1,
-          name: 'English',
-        },
-        id: 11,
-      },
-    ],
-    secondaryYearSourceId: 0,
-    sortTitle: 'doctor strange in multiverse madness',
-    sizeOnDisk: 0,
-    status: 'announced',
-    overview:
-      'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
-    inCinemas: '2022-05-05T00:00:00Z',
-    images: [
-      {
-        coverType: 'poster',
-        url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
-      },
-      {
-        coverType: 'fanart',
-        url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
-      },
-    ],
-    website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
-    year: 2022,
-    hasFile: false,
-    youTubeTrailerId: 'aWzlQ2N6qqg',
-    studio: 'Marvel Studios',
-    path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-    qualityProfileId: 1,
-    monitored: true,
-    minimumAvailability: 'announced',
-    isAvailable: true,
-    folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-    runtime: 126,
-    cleanTitle: 'doctorstrangeinmultiversemadness',
-    imdbId: 'tt9419884',
-    tmdbId: 453395,
-    titleSlug: '453395',
-    certification: 'PG-13',
-    genres: ['Fantasy', 'Action', 'Adventure'],
-    tags: [],
-    added: '2022-04-29T20:52:33Z',
-    ratings: {
-      tmdb: {
-        votes: 0,
-        value: 0,
-        type: 'user',
-      },
-    },
-    collection: {
-      name: 'Doctor Strange Collection',
-      tmdbId: 618529,
-      images: [],
-    },
-    id: 2,
-  },
-];
--- a/src/components/modules/date/DateModule.story.tsx
+++ b/src/components/modules/date/DateModule.story.tsx
@@ -1,7 +0,0 @@
-import DateComponent from './DateModule';
-
-export default {
-  title: 'Date module',
-};
-
-export const Default = (args: any) => <DateComponent {...args} />;
--- a/src/components/modules/date/DateModule.tsx
+++ b/src/components/modules/date/DateModule.tsx
@@ -1,40 +0,0 @@
-import { Group, Text, Title } from '@mantine/core';
-import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
-import { IconClock as Clock } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-
-export const DateModule: IModule = {
-  title: 'Date',
-  description: 'Show the current time and date in a card',
-  icon: Clock,
-  component: DateComponent,
-  options: {
-    full: {
-      name: 'Display full time (24-hour)',
-      value: true,
-    },
-  },
-};
-
-export default function DateComponent(props: any) {
-  const [date, setDate] = useState(new Date());
-  const { config } = useConfig();
-  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false;
-  const formatString = isFullTime ? 'HH:mm' : 'h:mm A';
-  // Change date on minute change
-  // Note: Using 10 000ms instead of 1000ms to chill a little :)
-  useEffect(() => {
-    setInterval(() => {
-      setDate(new Date());
-    }, 1000 * 60);
-  }, []);
-
-  return (
-    <Group p="sm" spacing="xs" direction="column">
-      <Title>{dayjs(date).format(formatString)}</Title>
-      <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
-    </Group>
-  );
-}
--- a/src/components/modules/date/index.ts
+++ b/src/components/modules/date/index.ts
@@ -1 +0,0 @@
-export { DateModule } from './DateModule';
--- a/src/components/modules/downloads/DownloadsModule.tsx
+++ b/src/components/modules/downloads/DownloadsModule.tsx
@@ -1,140 +0,0 @@
-import { Table, Text, Tooltip, Title, Group, Progress, Skeleton } from '@mantine/core';
-import { IconDownload as Download } from '@tabler/icons';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
-import { NormalizedTorrent } from '@ctrl/shared-torrent';
-import { IModule } from '../modules';
-import { useConfig } from '../../../tools/state';
-import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
-
-export const DownloadsModule: IModule = {
-  title: 'Torrent',
-  description: 'Show the current download speed of supported services',
-  icon: Download,
-  component: DownloadComponent,
-  options: {
-    hidecomplete: {
-      name: 'Hide completed torrents',
-      value: false,
-    },
-  },
-};
-
-export default function DownloadComponent() {
-  const { config } = useConfig();
-  const qBittorrentService = config.services
-    .filter((service) => service.type === 'qBittorrent')
-    .at(0);
-  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
-  const hideComplete: boolean =
-    (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
-
-  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
-  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
-
-  useEffect(() => {
-    if (qBittorrentService) {
-      setInterval(() => {
-        axios
-          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
-          .then((res) => {
-            setqBittorrentTorrents(res.data.torrents);
-          });
-      }, 3000);
-    }
-    if (delugeService) {
-      setInterval(() => {
-        axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
-          setDelugeTorrents(res.data.torrents);
-        });
-      }, 3000);
-    }
-  }, [config.modules]);
-
-  if (!qBittorrentService && !delugeService) {
-    return (
-      <Group direction="column">
-        <Title>Critical: No qBittorrent/Deluge instance found in services.</Title>
-        <Group>
-          <Title order={3}>Add a qBittorrent/Deluge service to view current downloads</Title>
-          <AddItemShelfButton />
-        </Group>
-      </Group>
-    );
-  }
-
-  if (qBittorrentTorrents.length === 0 && delugeTorrents.length === 0) {
-    return (
-      <>
-        <Skeleton height={40} mt={10} />
-        <Skeleton height={40} mt={10} />
-        <Skeleton height={40} mt={10} />
-        <Skeleton height={40} mt={10} />
-        <Skeleton height={40} mt={10} />
-      </>
-    );
-  }
-
-  const ths = (
-    <tr>
-      <th>Name</th>
-      <th>Download</th>
-      <th>Upload</th>
-      <th>Progress</th>
-    </tr>
-  );
-  // Loop over qBittorrent torrents merging with deluge torrents
-  const torrents: NormalizedTorrent[] = [];
-  delugeTorrents.forEach((delugeTorrent) =>
-    torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
-  );
-  qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
-  const rows = torrents.map((torrent) => {
-    if (torrent.progress === 1 && hideComplete) {
-      return [];
-    }
-    const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
-    const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
-    return (
-      <tr key={torrent.id}>
-        <td>
-          <Tooltip position="top" label={torrent.name}>
-            <Text
-              style={{
-                maxWidth: '30vw',
-              }}
-              size="xs"
-              lineClamp={1}
-            >
-              {torrent.name}
-            </Text>
-          </Tooltip>
-        </td>
-        <td>
-          <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
-        </td>
-        <td>
-          <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
-        </td>
-        <td>
-          <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
-          <Progress
-            radius="lg"
-            color={torrent.progress === 1 ? 'green' : 'blue'}
-            value={torrent.progress * 100}
-            size="lg"
-          />
-        </td>
-      </tr>
-    );
-  });
-  return (
-    <Group noWrap direction="column">
-      <Title order={4}>Your torrents</Title>
-      <Table highlightOnHover>
-        <thead>{ths}</thead>
-        <tbody>{rows}</tbody>
-      </Table>
-    </Group>
-  );
-}
--- a/src/components/modules/downloads/TotalDownloadsModule.tsx
+++ b/src/components/modules/downloads/TotalDownloadsModule.tsx
@@ -1,211 +0,0 @@
-import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
-import { IconDownload as Download } from '@tabler/icons';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
-import { NormalizedTorrent } from '@ctrl/shared-torrent';
-import { linearGradientDef } from '@nivo/core';
-import { Datum, ResponsiveLine } from '@nivo/line';
-import { useListState } from '@mantine/hooks';
-import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-
-/**
- * Format bytes as human-readable text.
- *
- * @param bytes Number of bytes.
- * @param si True to use metric (SI) units, aka powers of 1000. False to use
- *           binary (IEC), aka powers of 1024.
- * @param dp Number of decimal places to display.
- *
- * @return Formatted string.
- */
-function humanFileSize(initialBytes: number, si = true, dp = 1) {
-  const thresh = si ? 1000 : 1024;
-  let bytes = initialBytes;
-
-  if (Math.abs(bytes) < thresh) {
-    return `${bytes} B`;
-  }
-
-  const units = si
-    ? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-  let u = -1;
-  const r = 10 ** dp;
-
-  do {
-    bytes /= thresh;
-    u += 1;
-  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-
-  return `${bytes.toFixed(dp)} ${units[u]}`;
-}
-
-export const TotalDownloadsModule: IModule = {
-  title: 'Download speed',
-  description: 'Show the current download speed of supported services',
-  icon: Download,
-  component: TotalDownloadsComponent,
-};
-
-interface torrentHistory {
-  x: number;
-  up: number;
-  down: number;
-}
-
-export default function TotalDownloadsComponent() {
-  const { config } = useConfig();
-  const qBittorrentService = config.services
-    .filter((service) => service.type === 'qBittorrent')
-    .at(0);
-  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
-
-  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
-  const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
-  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
-
-  const torrents: NormalizedTorrent[] = [];
-  delugeTorrents.forEach((delugeTorrent) =>
-    torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
-  );
-  qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
-
-  const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
-  const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      // Get the current download speed of qBittorrent.
-      if (qBittorrentService) {
-        axios
-          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
-          .then((res) => {
-            setqBittorrentTorrents(res.data.torrents);
-          });
-        if (delugeService) {
-          axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
-            setDelugeTorrents(res.data.torrents);
-          });
-        }
-      }
-    }, 1000);
-  }, [config.modules]);
-
-  useEffect(() => {
-    torrentHistoryHandlers.append({
-      x: Date.now(),
-      down: totalDownloadSpeed,
-      up: totalUploadSpeed,
-    });
-  }, [totalDownloadSpeed, totalUploadSpeed]);
-
-  if (!qBittorrentService && !delugeService) {
-    return (
-      <Group direction="column">
-        <Title order={3}>Critical: No qBittorrent/Deluge instance found in services.</Title>
-        <Group noWrap>
-          <Title order={5}>Add a qBittorrent/Deluge service to view current downloads</Title>
-          <AddItemShelfButton />
-        </Group>
-      </Group>
-    );
-  }
-
-  const theme = useMantineTheme();
-  // Load the last 10 values from the history
-  const history = torrentHistory.slice(-10);
-  const chartDataUp = history.map((load, i) => ({
-    x: load.x,
-    y: load.up,
-  })) as Datum[];
-  const chartDataDown = history.map((load, i) => ({
-    x: load.x,
-    y: load.down,
-  })) as Datum[];
-
-  return (
-    <Group noWrap direction="column" grow>
-      <Title order={4}>Current download speed</Title>
-      <Group direction="column">
-        <Group>
-          <ColorSwatch size={12} color={theme.colors.green[5]} />
-          <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
-        </Group>
-        <Group>
-          <ColorSwatch size={12} color={theme.colors.blue[5]} />
-          <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
-        </Group>
-      </Group>
-      <Box
-        style={{
-          height: 200,
-          width: '100%',
-        }}
-      >
-        <ResponsiveLine
-          isInteractive
-          enableSlices="x"
-          sliceTooltip={({ slice }) => {
-            const Download = slice.points[0].data.y as number;
-            const Upload = slice.points[1].data.y as number;
-            // Get the number of seconds since the last update.
-            const seconds = (Date.now() - (slice.points[0].data.x as number)) / 1000;
-            // Round to the nearest second.
-            const roundedSeconds = Math.round(seconds);
-            return (
-              <Card p="sm" radius="md" withBorder>
-                <Text size="md">{roundedSeconds} seconds ago</Text>
-                <Card.Section p="sm">
-                  <Group direction="column">
-                    <Group>
-                      <ColorSwatch size={10} color={theme.colors.green[5]} />
-                      <Text size="md">Download: {humanFileSize(Download)}</Text>
-                    </Group>
-                    <Group>
-                      <ColorSwatch size={10} color={theme.colors.blue[5]} />
-                      <Text size="md">Upload: {humanFileSize(Upload)}</Text>
-                    </Group>
-                  </Group>
-                </Card.Section>
-              </Card>
-            );
-          }}
-          data={[
-            {
-              id: 'downloads',
-              data: chartDataUp,
-            },
-            {
-              id: 'uploads',
-              data: chartDataDown,
-            },
-          ]}
-          curve="monotoneX"
-          yFormat=" >-.2f"
-          axisTop={null}
-          axisRight={null}
-          enablePoints={false}
-          animate={false}
-          enableGridX={false}
-          enableGridY={false}
-          enableArea
-          defs={[
-            linearGradientDef('gradientA', [
-              { offset: 0, color: 'inherit' },
-              { offset: 100, color: 'inherit', opacity: 0 },
-            ]),
-          ]}
-          fill={[{ match: '*', id: 'gradientA' }]}
-          colors={[
-            // Blue
-            theme.colors.blue[5],
-            // Green
-            theme.colors.green[5],
-          ]}
-        />
-      </Box>
-    </Group>
-  );
-}
--- a/src/components/modules/downloads/index.ts
+++ b/src/components/modules/downloads/index.ts
@@ -1,2 +0,0 @@
-export { DownloadsModule } from './DownloadsModule';
-export { TotalDownloadsModule } from './TotalDownloadsModule';
--- a/src/components/modules/index.ts
+++ b/src/components/modules/index.ts
@@ -1,6 +0,0 @@
-export * from './date';
-export * from './calendar';
-export * from './search';
-export * from './ping';
-export * from './weather';
-export * from './downloads';
--- a/src/components/modules/moduleWrapper.tsx
+++ b/src/components/modules/moduleWrapper.tsx
@@ -1,134 +0,0 @@
-import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@mantine/core';
-import { useConfig } from '../../tools/state';
-import { IModule } from './modules';
-
-function getItems(module: IModule) {
-  const { config, setConfig } = useConfig();
-  const enabledModules = config.modules ?? {};
-  const items: JSX.Element[] = [];
-  if (module.options) {
-    const keys = Object.keys(module.options);
-    const values = Object.values(module.options);
-    // Get the value and the name of the option
-    const types = values.map((v) => typeof v.value);
-    // Loop over all the types with a for each loop
-    types.forEach((type, index) => {
-      const optionName = `${module.title}.${keys[index]}`;
-      const moduleInConfig = config.modules?.[module.title];
-      if (type === 'string') {
-        items.push(
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              setConfig({
-                ...config,
-                modules: {
-                  ...config.modules,
-                  [module.title]: {
-                    ...config.modules[module.title],
-                    options: {
-                      ...config.modules[module.title].options,
-                      [keys[index]]: {
-                        ...config.modules[module.title].options?.[keys[index]],
-                        value: (e.target as any)[0].value,
-                      },
-                    },
-                  },
-                },
-              });
-            }}
-          >
-            <Group noWrap align="end" position="center" mt={0}>
-              <TextInput
-                key={optionName}
-                id={optionName}
-                name={optionName}
-                label={values[index].name}
-                defaultValue={(moduleInConfig?.options?.[keys[index]]?.value as string) ?? ''}
-                onChange={(e) => {}}
-              />
-
-              <Button type="submit">Save</Button>
-            </Group>
-          </form>
-        );
-      }
-      // TODO: Add support for other types
-      if (type === 'boolean') {
-        items.push(
-          <Switch
-            defaultChecked={
-              // Set default checked to the value of the option if it exists
-              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ?? false
-            }
-            key={keys[index]}
-            onClick={(e) => {
-              setConfig({
-                ...config,
-                modules: {
-                  ...config.modules,
-                  [module.title]: {
-                    ...config.modules[module.title],
-                    options: {
-                      ...config.modules[module.title].options,
-                      [keys[index]]: {
-                        ...config.modules[module.title].options?.[keys[index]],
-                        value: e.currentTarget.checked,
-                      },
-                    },
-                  },
-                },
-              });
-            }}
-            label={values[index].name}
-          />
-        );
-      }
-    });
-  }
-  return items;
-}
-
-export function ModuleWrapper(props: any) {
-  const { module }: { module: IModule } = props;
-  const { config, setConfig } = useConfig();
-  const enabledModules = config.modules ?? {};
-  // Remove 'Module' from enabled modules titles
-  const isShown = enabledModules[module.title]?.enabled ?? false;
-  const theme = useMantineTheme();
-  const items: JSX.Element[] = getItems(module);
-
-  if (!isShown) {
-    return null;
-  }
-  return (
-    <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
-      {module.options && (
-        <Menu
-          size="lg"
-          shadow="xl"
-          closeOnItemClick={false}
-          radius="md"
-          position="left"
-          styles={{
-            root: {
-              position: 'absolute',
-              top: 15,
-              right: 15,
-            },
-            body: {
-              // Add shadow and elevation to the body
-              boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
-            },
-          }}
-        >
-          <Menu.Label>Settings</Menu.Label>
-          {items.map((item) => (
-            <Menu.Item key={item.key}>{item}</Menu.Item>
-          ))}
-        </Menu>
-      )}
-      <module.component />
-    </Card>
-  );
-}
--- a/src/components/modules/modules.tsx
+++ b/src/components/modules/modules.tsx
@@ -1,20 +0,0 @@
-// This interface is to be used in all the modules of the project
-// Each module should have its own interface and call the following function:
-// TODO: Add a function to register a module
-// Note: Maybe use context to keep track of the modules
-export interface IModule {
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  component: React.ComponentType;
-  options?: Option;
-}
-
-interface Option {
-  [x: string]: OptionValues;
-}
-
-export interface OptionValues {
-  name: string;
-  value: boolean | string;
-}
--- a/src/components/modules/ping/PingModule.story.tsx
+++ b/src/components/modules/ping/PingModule.story.tsx
@@ -1,16 +0,0 @@
-import { serviceItem } from '../../../tools/types';
-import PingComponent from './PingModule';
-
-export default {
-  title: 'Modules/Search bar',
-};
-
-const service: serviceItem = {
-  id: '1',
-  type: 'Other',
-  name: 'YouTube',
-  icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
-  url: 'https://youtube.com/',
-};
-
-export const Default = (args: any) => <PingComponent service={service} />;
--- a/src/components/modules/ping/PingModule.tsx
+++ b/src/components/modules/ping/PingModule.tsx
@@ -1,60 +0,0 @@
-import { Indicator, Tooltip } from '@mantine/core';
-import axios from 'axios';
-import { motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
-import { IconPlug as Plug } from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-
-export const PingModule: IModule = {
-  title: 'Ping Services',
-  description: 'Pings your services and shows their status as an indicator',
-  icon: Plug,
-  component: PingComponent,
-};
-
-export default function PingComponent(props: any) {
-  type State = 'loading' | 'down' | 'online';
-  const { config } = useConfig();
-
-  const { url }: { url: string } = props;
-  const [isOnline, setOnline] = useState<State>('loading');
-  const exists = config.modules?.[PingModule.title]?.enabled ?? false;
-  useEffect(() => {
-    if (!exists) {
-      return;
-    }
-    axios
-      .get('/api/modules/ping', { params: { url } })
-      .then(() => {
-        setOnline('online');
-      })
-      .catch(() => {
-        setOnline('down');
-      });
-  }, []);
-  if (!exists) {
-    return null;
-  }
-  return (
-    <Tooltip
-      radius="lg"
-      style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
-    >
-      <motion.div
-        animate={{
-          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
-        }}
-        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
-      >
-        <Indicator
-          size={13}
-          color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'}
-        >
-          {null}
-        </Indicator>
-      </motion.div>
-    </Tooltip>
-  );
-}
--- a/src/components/modules/ping/index.ts
+++ b/src/components/modules/ping/index.ts
@@ -1 +0,0 @@
-export { PingModule } from './PingModule';
--- a/src/components/modules/readme.md
+++ b/src/components/modules/readme.md
@@ -1,9 +0,0 @@
-**Each module has a set of rules:** 
- Exported Typed IModule element (Unique Name, description, component, ...) 
- Needs to be in a new folder
- Needs to be exported in the modules/newmodule/index.tsx of the new folder
- Needs to be imported in the modules/index.tsx file
- Needs to look good when wrapped with the modules/ModuleWrapper component
- Needs to be put somewhere fitting in the app (While waiting for the big AppStore overhall) 
- Any API Calls need to be safe and done on the widget itself (via useEffect or similar)
- You can't add a package (unless there is a very specific need for it. Contact [@Ajnart](ajnart@pm.me) or make a [Discussion](https://github.com/ajnart/homarr/discussions/new).
--- a/src/components/modules/search/SearchModule.story.tsx
+++ b/src/components/modules/search/SearchModule.story.tsx
@@ -1,10 +0,0 @@
-import SearchBar from './SearchModule';
-
-export default {
-  title: 'Search bar',
-  config: {
-    searchBar: false,
-  },
-};
-
-export const Default = (args: any) => <SearchBar {...args} />;
--- a/src/components/modules/search/SearchModule.tsx
+++ b/src/components/modules/search/SearchModule.tsx
@@ -1,162 +0,0 @@
-import {
-  Kbd,
-  createStyles,
-  Text,
-  Popover,
-  TextInput,
-} from '@mantine/core';
-import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
-import { useEffect, useRef, useState } from 'react';
-import {
-  IconSearch as Search,
-  IconBrandYoutube as BrandYoutube,
-  IconDownload as Download,
-} from '@tabler/icons';
-import axios from 'axios';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-import OverseerrMediaDisplay from '../overseerr/OverseerrMediaDisplay';
-
-const useStyles = createStyles((theme) => ({
-  hide: {
-    [theme.fn.smallerThan('sm')]: {
-      display: 'none',
-    },
-    display: 'flex',
-    alignItems: 'center',
-  },
-}));
-
-export const SearchModule: IModule = {
-  title: 'Search Bar',
-  description: 'Show the current time and date in a card',
-  icon: Search,
-  component: SearchBar,
-};
-
-export default function SearchBar(props: any) {
-  const { config, setConfig } = useConfig();
-  const [opened, setOpened] = useState(false);
-  const [results, setOpenedResults] = useState(false);
-  const [icon, setIcon] = useState(<Search />);
-  const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
-  const textInput = useRef<HTMLInputElement>();
-  // Find a service with the type of 'Overseerr'
-  const service = config.services.find((s) => s.type === 'Overseerr');
-
-  const form = useForm({
-    initialValues: {
-      query: '',
-    },
-  });
-
-  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
-  const [data, setData] = useState([]);
-  useEffect(() => {
-    if (form.values.query !== debounced || form.values.query === '') return;
-    setOpened(false);
-    setOpenedResults(true);
-    if (service) {
-      const serviceUrl = new URL(service.url);
-      axios
-        .post(`/api/modules/overseerr?query=${form.values.query}`, {
-          service,
-        })
-        .then((res) => setData(res.data.results ?? []));
-    }
-  }, [debounced]);
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
-  const { classes, cx } = useStyles();
-  const rightSection = (
-    <div className={classes.hide}>
-      <Kbd>Ctrl</Kbd>
-      <span style={{ margin: '0 5px' }}>+</span>
-      <Kbd>K</Kbd>
-    </div>
-  );
-
-  // If enabled modules doesn't contain the module, return null
-  // If module in enabled
-
-  const exists = config.modules?.[SearchModule.title]?.enabled ?? false;
-  if (!exists) {
-    return null;
-  }
-
-  // Data with label as item.name
-  return (
-    <form
-      onChange={() => {
-        // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
-        const query = form.values.query.trim();
-        const isYoutube = query.startsWith('!yt');
-        const isTorrent = query.startsWith('!t');
-        if (isYoutube) {
-          setIcon(<BrandYoutube size={22} />);
-        } else if (isTorrent) {
-          setIcon(<Download size={22} />);
-        } else {
-          setIcon(<Search size={22} />);
-        }
-      }}
-      onSubmit={form.onSubmit((values) => {
-        const query = values.query.trim();
-        const isYoutube = query.startsWith('!yt');
-        const isTorrent = query.startsWith('!t');
-        form.setValues({ query: '' });
-        setTimeout(() => {
-          if (isYoutube) {
-            window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
-          } else if (isTorrent) {
-            window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
-          } else {
-            window.open(`${queryUrl}${values.query}`);
-          }
-        }, 20);
-      })}
-    >
-      <Popover
-        opened={results}
-        target={
-          <Popover
-            opened={opened}
-            position="bottom"
-            placement="start"
-            width={260}
-            withArrow
-            radius="md"
-            trapFocus={false}
-            transition="pop-bottom-right"
-            onFocusCapture={() => setOpened(true)}
-            onBlurCapture={() => setOpened(false)}
-            target={
-              <TextInput
-                variant="filled"
-                icon={icon}
-                ref={textInput}
-                rightSectionWidth={90}
-                rightSection={rightSection}
-                radius="md"
-                size="md"
-                styles={{ rightSection: { pointerEvents: 'none' } }}
-                placeholder="Search the web..."
-                {...props}
-                {...form.getInputProps('query')}
-              />
-            }
-          >
-            <Text>
-              tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on
-              YouTube or for a Torrent respectively.
-            </Text>
-          </Popover>
-        }
-      >
-        {/* Loop on the first 5 items of data */}
-        {data.slice(0, 5).map((item, index) => (
-          <OverseerrMediaDisplay key={index} media={item} />
-        ))}
-      </Popover>
-    </form>
-  );
-}
--- a/src/components/modules/search/index.ts
+++ b/src/components/modules/search/index.ts
@@ -1 +0,0 @@
-export { SearchModule } from './SearchModule';
--- a/src/components/modules/weather/WeatherInterface.ts
+++ b/src/components/modules/weather/WeatherInterface.ts
@@ -1,41 +0,0 @@
-// To parse this data:
-//
-//   import { Convert, WeatherResponse } from "./file";
-//
-//   const weatherResponse = Convert.toWeatherResponse(json);
-//
-// These functions will throw an error if the JSON doesn't
-// match the expected interface, even if the JSON is valid.
-
-export interface WeatherResponse {
-  current_weather: CurrentWeather;
-  utc_offset_seconds: number;
-  latitude: number;
-  elevation: number;
-  longitude: number;
-  generationtime_ms: number;
-  daily_units: DailyUnits;
-  daily: Daily;
-}
-
-export interface CurrentWeather {
-  winddirection: number;
-  windspeed: number;
-  time: string;
-  weathercode: number;
-  temperature: number;
-}
-
-export interface Daily {
-  temperature_2m_max: number[];
-  time: Date[];
-  temperature_2m_min: number[];
-  weathercode: number[];
-}
-
-export interface DailyUnits {
-  temperature_2m_max: string;
-  temperature_2m_min: string;
-  time: string;
-  weathercode: string;
-}
--- a/src/components/modules/weather/WeatherModule.tsx
+++ b/src/components/modules/weather/WeatherModule.tsx
@@ -1,179 +0,0 @@
-import { Group, Space, Title, Tooltip } from '@mantine/core';
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-import {
-  IconArrowDownRight as ArrowDownRight,
-  IconArrowUpRight as ArrowUpRight,
-  IconCloud as Cloud,
-  IconCloudFog as CloudFog,
-  IconCloudRain as CloudRain,
-  IconCloudSnow as CloudSnow,
-  IconCloudStorm as CloudStorm,
-  IconQuestionMark as QuestionMark,
-  IconSnowflake as Snowflake,
-  IconSun as Sun,
-} from '@tabler/icons';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-import { WeatherResponse } from './WeatherInterface';
-
-export const WeatherModule: IModule = {
-  title: 'Weather (beta)',
-  description: 'Look up the current weather in your location',
-  icon: Sun,
-  component: WeatherComponent,
-  options: {
-    freedomunit: {
-      name: 'Display in Fahrenheit',
-      value: false,
-    },
-    location: {
-      name: 'Current location',
-      value: '',
-    },
-  },
-};
-
-// 0 Clear sky
-// 1, 2, 3 Mainly clear, partly cloudy, and overcast
-// 45, 48 Fog and depositing rime fog
-// 51, 53, 55 Drizzle: Light, moderate, and dense intensity
-// 56, 57 Freezing Drizzle: Light and dense intensity
-// 61, 63, 65 Rain: Slight, moderate and heavy intensity
-// 66, 67 Freezing Rain: Light and heavy intensity
-// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
-// 77 Snow grains
-// 80, 81, 82 Rain showers: Slight, moderate, and violent
-// 85, 86Snow showers slight and heavy
-// 95 *Thunderstorm: Slight or moderate
-// 96, 99 *Thunderstorm with slight and heavy hail
-export function WeatherIcon(props: any) {
-  const { code } = props;
-  let data: { icon: any; name: string };
-  switch (code) {
-    case 0: {
-      data = { icon: Sun, name: 'Clear' };
-      break;
-    }
-    case 1:
-    case 2:
-    case 3: {
-      data = { icon: Cloud, name: 'Mainly clear' };
-      break;
-    }
-    case 45:
-    case 48: {
-      data = { icon: CloudFog, name: 'Fog' };
-      break;
-    }
-    case 51:
-    case 53:
-    case 55: {
-      data = { icon: Cloud, name: 'Drizzle' };
-      break;
-    }
-    case 56:
-    case 57: {
-      data = { icon: Snowflake, name: 'Freezing drizzle' };
-      break;
-    }
-    case 61:
-    case 63:
-    case 65: {
-      data = { icon: CloudRain, name: 'Rain' };
-      break;
-    }
-    case 66:
-    case 67: {
-      data = { icon: CloudRain, name: 'Freezing rain' };
-      break;
-    }
-    case 71:
-    case 73:
-    case 75: {
-      data = { icon: CloudSnow, name: 'Snow fall' };
-      break;
-    }
-    case 77: {
-      data = { icon: CloudSnow, name: 'Snow grains' };
-      break;
-    }
-    case 80:
-    case 81:
-    case 82: {
-      data = { icon: CloudRain, name: 'Rain showers' };
-
-      break;
-    }
-    case 85:
-    case 86: {
-      data = { icon: CloudSnow, name: 'Snow showers' };
-      break;
-    }
-    case 95: {
-      data = { icon: CloudStorm, name: 'Thunderstorm' };
-      break;
-    }
-    case 96:
-    case 99: {
-      data = { icon: CloudStorm, name: 'Thunderstorm with hail' };
-      break;
-    }
-    default: {
-      data = { icon: QuestionMark, name: 'Unknown' };
-    }
-  }
-  return (
-    <Tooltip label={data.name}>
-      <data.icon size={50} />
-    </Tooltip>
-  );
-}
-
-export default function WeatherComponent(props: any) {
-  // Get location from browser
-  const { config } = useConfig();
-  const [weather, setWeather] = useState({} as WeatherResponse);
-  const cityInput: string =
-    (config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? '';
-  const isFahrenheit: boolean =
-    (config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value as boolean) ?? false;
-
-  useEffect(() => {
-    axios
-      .get(`https://geocoding-api.open-meteo.com/v1/search?name=${cityInput}`)
-      .then((response) => {
-        // Check if results exists
-        const { latitude, longitude } = response.data.results
-          ? response.data.results[0]
-          : { latitude: 0, longitude: 0 };
-        axios
-          .get(
-            `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Europe%2FLondon`
-          )
-          .then((res) => {
-            setWeather(res.data);
-          });
-      });
-  }, [cityInput]);
-  if (!weather.current_weather) {
-    return null;
-  }
-  function usePerferedUnit(value: number): string {
-    return isFahrenheit ? `${(value * (9 / 5)).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
-  }
-  return (
-    <Group p="sm" spacing="xs" direction="column">
-      <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
-      <Group spacing={0}>
-        <WeatherIcon code={weather.current_weather.weathercode} />
-        <Space mx="sm" />
-        <span>{usePerferedUnit(weather.daily.temperature_2m_max[0])}</span>
-        <ArrowUpRight size={16} style={{ right: 15 }} />
-        <Space mx="sm" />
-        <span>{usePerferedUnit(weather.daily.temperature_2m_min[0])}</span>
-        <ArrowDownRight size={16} />
-      </Group>
-    </Group>
-  );
-}
--- a/src/components/modules/weather/index.ts
+++ b/src/components/modules/weather/index.ts
@@ -1 +0,0 @@
-export { WeatherModule } from './WeatherModule';
				`@@ -1 +0,0 @@`
				`export { CalendarModule } from './CalendarModule';`
				`@@ -1 +0,0 @@`
				`export { SearchModule } from './SearchModule';`
				`@@ -1 +0,0 @@`
				`export { WeatherModule } from './WeatherModule';`