Merge branch 'gridstack' of https://github.com/manuel-rw/homarr into gridstack

2025-11-10 23:45:48 +01:00 · 2022-12-20 07:50:08 +01:00
parent a633fb0182 5f1bddf864
commit c038078c5d
62 changed files with 453 additions and 574 deletions
--- a/src/components/About/AboutModal.tsx
+++ b/src/components/About/AboutModal.tsx
@@ -1,9 +1,11 @@
 import {
  ActionIcon,
+  Anchor,
  Badge,
  Button,
  createStyles,
  Group,
+  HoverCard,
  Modal,
  Table,
  Text,
@@ -17,6 +19,7 @@ import {
  IconVocabulary,
  IconWorldWww,
 } from '@tabler/icons';
+import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
 import { i18n } from 'next-i18next';
 import Image from 'next/image';
@@ -27,12 +30,13 @@ import { usePrimaryGradient } from '../layout/useGradient';
 interface AboutModalProps {
  opened: boolean;
  closeModal: () => void;
+  newVersionAvailable?: string;
 }

-export const AboutModal = ({ opened, closeModal }: AboutModalProps) => {
+export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutModalProps) => {
  const { classes } = useStyles();
  const colorGradiant = usePrimaryGradient();
-  const informations = useInformationTableItems();
+  const informations = useInformationTableItems(newVersionAvailable);

  return (
    <Modal
@@ -50,8 +54,8 @@ export const AboutModal = ({ opened, closeModal }: AboutModalProps) => {
    >
      <Text mb="lg">
        Homarr is a simple and modern homepage for your server that helps you access all of your
-        apps in one place. It integrates with the apps you use to display useful information
-        or control them. It&apos;s easy to install and supports many different devices.
+        apps in one place. It integrates with the apps you use to display useful information or
+        control them. It&apos;s easy to install and supports many different devices.
      </Text>

      <Title order={6} mb="xs" align="center">
@@ -123,7 +127,8 @@ interface ExtendedInitOptions extends InitOptions {
  locales: string[];
 }

-const useInformationTableItems = (): InformationTableItem[] => {
+const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
+  // TODO: Fix this to not request. Pass it as a prop.
  const colorGradiant = usePrimaryGradient();

  let items: InformationTableItem[] = [];
@@ -161,9 +166,41 @@ const useInformationTableItems = (): InformationTableItem[] => {
      icon: <IconVersions size={20} />,
      label: 'Homarr version',
      content: (
-        <Badge variant="gradient" gradient={colorGradiant}>
-          {CURRENT_VERSION}
-        </Badge>
+        <Group position="right">
+          <Badge variant="gradient" gradient={colorGradiant}>
+            {CURRENT_VERSION}
+          </Badge>
+          {newVersionAvailable && (
+            <HoverCard shadow="md" position="top" withArrow>
+              <HoverCard.Target>
+                <motion.div
+                  initial={{ scale: 1.2 }}
+                  animate={{
+                    scale: [0.8, 1.10, 1],
+                    rotate: [0, 10, 0],
+                  }}
+                  transition={{ duration: 0.8, ease: 'easeInOut' }}
+                >
+                  <Badge color="green" variant="filled">
+                    new: {newVersionAvailable}
+                  </Badge>
+                </motion.div>
+              </HoverCard.Target>
+              <HoverCard.Dropdown>
+                Version{' '}
+                <b>
+                  <Anchor
+                    target="_blank"
+                    href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
+                  >
+                    {newVersionAvailable}
+                  </Anchor>
+                </b>{' '}
+                is available ! Current version: {CURRENT_VERSION}
+              </HoverCard.Dropdown>
+            </HoverCard>
+          )}
+        </Group>
      ),
    },
  ];
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -12,7 +12,6 @@ import {

 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { useLocalStorage } from '@mantine/hooks';
-import { useTranslation } from 'next-i18next';
 import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';

@@ -38,8 +37,6 @@ const AppShelf = (props: any) => {
  const [activeId, setActiveId] = useState(null);
  const { colorScheme } = useMantineColorScheme();

-  const { t } = useTranslation('layout/app-shelf');
-
  const sensors = useSensors(
    useSensor(TouchSensor, {
      activationConstraint: {
--- a/src/components/Config/ConfigChanger.tsx
+++ b/src/components/Config/ConfigChanger.tsx
@@ -47,11 +47,9 @@ export default function ConfigChanger() {
  );
 }

-const useConfigsQuery = () => {
-  return useQuery({
+const useConfigsQuery = () => useQuery({
    queryKey: ['config/get-all'],
    queryFn: fetchConfigs,
  });
-};

 const fetchConfigs = async () => (await (await fetch('/api/configs')).json()) as string[];
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -3,8 +3,6 @@ import { DashboardDetailView } from './Views/DetailView';
 import { DashboardEditView } from './Views/EditView';
 import { useEditModeStore } from './Views/useEditModeStore';

-interface DashboardProps {}
-
 export const Dashboard = () => {
  const isEditMode = useEditModeStore((x) => x.enabled);

--- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx
+++ b/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx
@@ -10,8 +10,7 @@ interface MobileRibbonSidebarDrawerProps {
 export const MobileRibbonSidebarDrawer = ({
  location,
  ...props
-}: MobileRibbonSidebarDrawerProps) => {
-  return (
+}: MobileRibbonSidebarDrawerProps) => (
    <Drawer
      position={location}
      title={<Title order={4}>{location} sidebar</Title>}
@@ -24,4 +23,3 @@ export const MobileRibbonSidebarDrawer = ({
      <DashboardSidebar location={location} />
    </Drawer>
  );
-};
--- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';

 interface ChangePositionModalProps {
@@ -44,6 +45,8 @@ export const ChangePositionModal = ({
    onSubmit(form.values.x, form.values.y, form.values.width, form.values.height);
  };

+  const { t } = useTranslation('common');
+
  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <Grid>
@@ -94,9 +97,9 @@ export const ChangePositionModal = ({

      <Flex justify="end" gap="sm" mt="md">
        <Button onClick={() => onCancel()} variant="light" color="gray">
-          Cancel
+          {t('cancel')}
        </Button>
-        <Button type="submit">Save</Button>
+        <Button type="submit">{t('save')}</Button>
      </Flex>
    </form>
  );
--- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
@@ -22,7 +22,7 @@ export const ChangeWidgetPositionModal = ({
    updateConfig(
      configName,
      (prev) => {
-        let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
        currentWidget!.shape = {
          location: {
            x,
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, createStyles, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core';
+import { Alert, Button, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
 import {
@@ -30,7 +30,7 @@ export const EditAppModal = ({
  id,
  innerProps,
 }: ContextModalProps<{ app: AppType; allowAppNamePropagation: boolean }>) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(['layout/modals/add-app', 'common']);
  const { name: configName, config } = useConfigContext();
  const updateConfig = useConfigStore((store) => store.updateConfig);
  const [allowAppNamePropagation, setAllowAppNamePropagation] = useState<boolean>(
@@ -137,68 +137,76 @@ export const EditAppModal = ({
      </Stack>

      <form onSubmit={form.onSubmit(onSubmit)}>
-        <Tabs
-          value={activeTab}
-          onTabChange={(tab) => setActiveTab(tab as EditAppModalTab)}
-          defaultValue="general"
+        <Stack
+          justify="space-between"
+          style={{
+            minHeight: 300,
+          }}
        >
-          <Tabs.List grow>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={['name', 'url']} />}
-              icon={<IconAdjustments size={14} />}
-              value="general"
-            >
-              General
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={['behaviour.onClickUrl']} />}
-              icon={<IconClick size={14} />}
-              value="behaviour"
-            >
-              Behaviour
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={[]} />}
-              icon={<IconAccessPoint size={14} />}
-              value="network"
-            >
-              Network
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={['appearance.iconUrl']} />}
-              icon={<IconBrush size={14} />}
-              value="appearance"
-            >
-              Appearance
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={[]} />}
-              icon={<IconPlug size={14} />}
-              value="integration"
-            >
-              Integration
-            </Tabs.Tab>
-          </Tabs.List>
+          <Tabs
+            value={activeTab}
+            onTabChange={(tab) => setActiveTab(tab as EditAppModalTab)}
+            defaultValue="general"
+            radius="md"
+          >
+            <Tabs.List grow>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={['name', 'url']} />}
+                icon={<IconAdjustments size={14} />}
+                value="general"
+              >
+                {t('tabs.general')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={['behaviour.onClickUrl']} />}
+                icon={<IconClick size={14} />}
+                value="behaviour"
+              >
+                {t('tabs.behaviour')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={[]} />}
+                icon={<IconAccessPoint size={14} />}
+                value="network"
+              >
+                {t('tabs.network')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={['appearance.iconUrl']} />}
+                icon={<IconBrush size={14} />}
+                value="appearance"
+              >
+                {t('tabs.appearance')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={[]} />}
+                icon={<IconPlug size={14} />}
+                value="integration"
+              >
+                {t('tabs.integration')}
+              </Tabs.Tab>
+            </Tabs.List>

-          <GeneralTab form={form} openTab={(targetTab) => setActiveTab(targetTab)} />
-          <BehaviourTab form={form} />
-          <NetworkTab form={form} />
-          <AppearanceTab
-            form={form}
-            disallowAppNameProgagation={() => setAllowAppNamePropagation(false)}
-            allowAppNamePropagation={allowAppNamePropagation}
-          />
-          <IntegrationTab form={form} />
-        </Tabs>
+            <GeneralTab form={form} openTab={(targetTab) => setActiveTab(targetTab)} />
+            <BehaviourTab form={form} />
+            <NetworkTab form={form} />
+            <AppearanceTab
+              form={form}
+              disallowAppNameProgagation={() => setAllowAppNamePropagation(false)}
+              allowAppNamePropagation={allowAppNamePropagation}
+            />
+            <IntegrationTab form={form} />
+          </Tabs>

-        <Group position="right" mt={100}>
-          <Button onClick={closeModal} px={50} variant="light" color="gray">
-            Cancel
-          </Button>
-          <Button disabled={!form.isValid()} px={50} type="submit">
-            Save
-          </Button>
-        </Group>
+          <Group position="right" mt="md">
+            <Button onClick={closeModal} px={50} variant="light" color="gray">
+              {t('common:actions.cancel')}
+            </Button>
+            <Button disabled={!form.isValid()} px={50} type="submit">
+              {t('common:actions.save')}
+            </Button>
+          </Group>
+        </Stack>
      </form>
    </>
  );
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -16,7 +16,7 @@ export const AppearanceTab = ({
  disallowAppNameProgagation,
  allowAppNamePropagation,
 }: AppearanceTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  const { classes } = useStyles();

  return (
@@ -26,8 +26,8 @@ export const AppearanceTab = ({
          defaultValue={form.values.appearance.iconUrl}
          className={classes.textInput}
          icon={<DebouncedAppIcon form={form} width={20} height={20} />}
-          label="App Icon"
-          description="Logo of your app displayed in your dashboard. Must return a body content containg an image"
+          label={t('appearance.icon.label')}
+          description={t('appearance.icon.description')}
          variant="default"
          withAsterisk
          required
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
@@ -29,11 +29,7 @@ interface IconSelectorProps {
  allowAppNamePropagation: boolean;
 }

-export const IconSelector = ({
-  onChange,
-  allowAppNamePropagation,
-  form,
-}: IconSelectorProps) => {
+export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSelectorProps) => {
  const { data, isLoading } = useRepositoryIconsQuery<WalkxcodeRepositoryIcon>({
    url: 'https://api.github.com/repos/walkxcode/Dashboard-Icons/contents/png',
    converter: (item) => ({
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
@@ -1,6 +1,5 @@
-import { Tabs, TextInput, Switch, Text } from '@mantine/core';
+import { Tabs, Switch } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconClick } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';

@@ -9,21 +8,13 @@ interface BehaviourTabProps {
 }

 export const BehaviourTab = ({ form }: BehaviourTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
+
  return (
    <Tabs.Panel value="behaviour" pt="xs">
-      <TextInput
-        icon={<IconClick size={16} />}
-        label="On click url"
-        description="Overrides the app URL when clicking on the app"
-        placeholder="URL that should be opened instead when clicking on the app"
-        variant="default"
-        mb="md"
-        {...form.getInputProps('behaviour.onClickUrl')}
-      />
-
      <Switch
-        label="Open in new tab"
+        label={t('behaviour.isOpeningNewTab.label')}
+        description={t('behaviour.isOpeningNewTab.description')}
        {...form.getInputProps('behaviour.isOpeningNewTab', { type: 'checkbox' })}
      />
    </Tabs.Panel>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
@@ -1,6 +1,6 @@
-import { Tabs, Text, TextInput } from '@mantine/core';
+import { Tabs, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconCursorText, IconLink } from '@tabler/icons';
+import { IconClick, IconCursorText, IconLink } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { EditAppModalTab } from '../type';
@@ -11,43 +11,42 @@ interface GeneralTabProps {
 }

 export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  return (
-    <Tabs.Panel value="general" pt="lg">
+    <Tabs.Panel value="general" pt="sm">
      <TextInput
        icon={<IconCursorText size={16} />}
-        label="App name"
-        description="Used for displaying the app on the dashboard"
+        label={t('general.appname.label')}
+        description={t('general.appname.description')}
        placeholder="My example app"
        variant="default"
        mb="md"
        withAsterisk
+        required
        {...form.getInputProps('name')}
      />
      <TextInput
        icon={<IconLink size={16} />}
-        label="App url"
-        description={
-          <Text>
-            URL that will be opened when clicking on the app. Can be overwritten using
-            <Text
-              onClick={() => openTab('behaviour')}
-              variant="link"
-              span
-              style={{
-                cursor: 'pointer',
-              }}
-            >
-              {' '}
-              on click URL{' '}
-            </Text>
-            when using external URLs to enhance security.
-          </Text>
-        }
+        label={t('general.internalAddress.label')}
+        description={t('general.internalAddress.description')}
        placeholder="https://google.com"
        variant="default"
        withAsterisk
+        required
        {...form.getInputProps('url')}
+        onChange={(e) => {
+          form.setFieldValue('behaviour.onClickUrl', e.target.value);
+          form.setFieldValue('url', e.target.value);
+        }}
+      />
+      <TextInput
+        icon={<IconClick size={16} />}
+        label={t('general.externalAddress.label')}
+        description={t('general.externalAddress.description')}
+        placeholder="https://homarr.mywebsite.com/"
+        variant="default"
+        mb="md"
+        {...form.getInputProps('behaviour.onClickUrl')}
      />
    </Tabs.Panel>
  );
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
@@ -11,6 +11,7 @@ import {
  Title,
 } from '@mantine/core';
 import { TablerIcon } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';

 interface GenericSecretInputProps {
@@ -32,6 +33,7 @@ export const GenericSecretInput = ({
  const Icon = setIcon;

  const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false);
+  const { t } = useTranslation(['layout/modals/add-app', 'common']);

  return (
    <Card withBorder>
@@ -43,7 +45,7 @@ export const GenericSecretInput = ({
            </ThemeIcon>
            <Stack spacing={0}>
              <Title className={classes.subtitle} order={6}>
-                {label}
+                {t(label)}
              </Title>
            </Stack>
          </Group>
@@ -51,13 +53,13 @@ export const GenericSecretInput = ({
        <Grid.Col xs={12} md={6}>
          <Flex gap={10} justify="end" align="end">
            <Button variant="subtle" color="gray" px="xl">
-              Clear Secret
+              {t('integration.secrets.clear')}
            </Button>
            {displayUpdateField === true ? (
              <PasswordInput placeholder="new secret" width={200} {...props} />
            ) : (
              <Button onClick={() => setDisplayUpdateField(true)} variant="light">
-                Set Secret
+                {t('integration.secrets.update')}
              </Button>
            )}
          </Flex>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
@@ -17,7 +17,7 @@ interface IntegrationSelectorProps {
 }

 export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');

  // TODO: read this out from integrations dynamically.
  const data: SelectItem[] = [
@@ -76,9 +76,9 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {

  return (
    <Select
-      label="Integration configuration"
-      description="Treats this app as the selected integration and provides you with per-app configuration"
-      placeholder="Select your desired configuration"
+      label={t('integration.type.label')}
+      description={t('integration.type.description')}
+      placeholder={t('integration.type.placeholder')}
      itemComponent={SelectItemComponent}
      data={data}
      maxDropdownHeight={400}
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
@@ -31,9 +31,9 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
        let indexInFormValue =
          form.values.integration?.properties.findIndex((p) => p.field === property) ?? -1;
        if (indexInFormValue === -1) {
-          const type = Object.entries(integrationFieldDefinitions).find(
+          const { type } = Object.entries(integrationFieldDefinitions).find(
            ([k, v]) => k === property
-          )![1].type;
+          )![1];
          const newProperty: AppIntegrationPropertyType = {
            type,
            field: property as IntegrationField,
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
@@ -1,7 +1,7 @@
 import { Alert, Divider, Tabs, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconAlertTriangle } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
 import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';
@@ -11,7 +11,7 @@ interface IntegrationTabProps {
 }

 export const IntegrationTab = ({ form }: IntegrationTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  const hasIntegrationSelected = form.values.integration?.type;

  return (
@@ -20,18 +20,14 @@ export const IntegrationTab = ({ form }: IntegrationTabProps) => {

      {hasIntegrationSelected && (
        <>
-          <Divider label="Integration Configuration" labelPosition="center" mt="xl" mb="md" />
+          <Divider label={t('integration.type.label')} labelPosition="center" mt="xl" mb="md" />
          <Text size="sm" color="dimmed" mb="lg">
-            To update a secret, enter a value and click the save button. To remove a secret, use the
-            clear button.
+            {t('integration.secrets.description')}
          </Text>
          <IntegrationOptionsRenderer form={form} />
          <Alert icon={<IconAlertTriangle />} color="yellow">
            <Text>
-              Please note that Homarr removes secrets from the configuration for security reasons.
-              Thus, you can only either define or unset any credentials. Your credentials act as the
-              main access for your integrations and you should <b>never</b> share them with anybody
-              else. Make sure to <b>store and manage your secrets safely</b>.
+              <Trans i18nKey="integration.secrets.warning" />
            </Text>
          </Alert>
        </>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
@@ -9,12 +9,12 @@ interface NetworkTabProps {
 }

 export const NetworkTab = ({ form }: NetworkTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  return (
    <Tabs.Panel value="network" pt="lg">
      <Switch
-        label="Enable status checker"
-        description="Sends a simple HTTP / HTTPS request to check if your app is online"
+        label={t('network.statusChecker.label')}
+        description={t('network.statusChecker.description')}
        mb="md"
        defaultChecked={form.values.network.enabledStatusChecker}
        {...form.getInputProps('network.enabledStatusChecker')}
@@ -22,8 +22,8 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
      {form.values.network.enabledStatusChecker && (
        <MultiSelect
          required
-          label="HTTP status codes"
-          description="Determines what response codes are allowed for this app to be 'Online'"
+          label={t('network.statusCodes.label')}
+          description={t('network.statusCodes.description')}
          data={StatusCodes}
          clearable
          searchable
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts
@@ -1,6 +1 @@
-export type EditAppModalTab =
-  | 'general'
-  | 'behaviour'
-  | 'network'
-  | 'appereance'
-  | 'integration';
+export type EditAppModalTab = 'general' | 'behaviour' | 'network' | 'appereance' | 'integration';
--- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
@@ -21,9 +21,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement

  if (!configName) return null;

-  const getLowestWrapper = () => {
-    return config?.wrappers.sort((a, b) => a.position - b.position)[0];
-  };
+  const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];

  const handleAddition = async () => {
    updateConfig(
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -1,4 +1,4 @@
-import { Card, Center, Text, UnstyledButton } from '@mantine/core';
+import { Center, Text, UnstyledButton } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { createStyles } from '@mantine/styles';
 import { AppType } from '../../../../types/app';
--- a/src/components/Dashboard/Tiles/EmptyTile.tsx
+++ b/src/components/Dashboard/Tiles/EmptyTile.tsx
@@ -1,6 +1,6 @@
 import { HomarrCardWrapper } from './HomarrCardWrapper';
 import { BaseTileProps } from './type';

-export const EmptyTile = ({ className }: BaseTileProps) => {
-  return <HomarrCardWrapper className={className}>Empty</HomarrCardWrapper>;
-};
+export const EmptyTile = ({ className }: BaseTileProps) => (
+  <HomarrCardWrapper className={className}>Empty</HomarrCardWrapper>
+);
--- a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
+++ b/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
@@ -1,6 +1,7 @@
 import { Card, CardProps } from '@mantine/core';
 import { ReactNode } from 'react';
 import { useCardStyles } from '../../layout/useCardStyles';
+import { useEditModeStore } from '../Views/useEditModeStore';

 interface HomarrCardWrapperProps extends CardProps {
  children: ReactNode;
@@ -11,11 +12,13 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
    cx,
    classes: { card: cardClass },
  } = useCardStyles();
+  const isEditMode = useEditModeStore((x) => x.enabled);
  return (
    <Card
      {...props}
      className={cx(props.className, cardClass)}
      withBorder
+      style={{ cursor: isEditMode ? 'move' : 'default' }}
      radius="lg"
      shadow="md"
    />
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -1,8 +1,8 @@
-import Widgets from '../../../../widgets';
 import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+import Widgets from '../../../../widgets';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { IWidget } from '../../../../widgets/widgets';
@@ -48,7 +48,7 @@ export const WidgetsEditModal = ({
    updateConfig(
      configName,
      (prev) => {
-        let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
        currentWidget!.properties = moduleProperties;

        return {
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
@@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
      title: null,
      innerProps: {
        widgetId: integration,
-        widget: widget,
+        widget,
      },
    });
  };
--- a/src/components/Dashboard/Views/DashboardView.tsx
+++ b/src/components/Dashboard/Views/DashboardView.tsx
@@ -1,7 +1,6 @@
 import { Group, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 import { useConfigContext } from '../../../config/provider';
-import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan';
 import { useScreenSmallerThan } from '../../../tools/hooks/useScreenSmallerThan';
 import { CategoryType } from '../../../types/category';
 import { WrapperType } from '../../../types/wrapper';
--- a/src/components/Dashboard/Views/DetailView.tsx
+++ b/src/components/Dashboard/Views/DetailView.tsx
@@ -1,5 +1,3 @@
 import { DashboardView } from './DashboardView';

-export const DashboardDetailView = () => {
-  return <DashboardView />;
-};
+export const DashboardDetailView = () => <DashboardView />;
--- a/src/components/Dashboard/Views/EditView.tsx
+++ b/src/components/Dashboard/Views/EditView.tsx
@@ -1,5 +1,3 @@
 import { DashboardView } from './DashboardView';

-export const DashboardEditView = () => {
-  return <DashboardView />;
-};
+export const DashboardEditView = () => <DashboardView />;
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/src/components/Dashboard/Wrappers/Category/Category.tsx
@@ -1,10 +1,6 @@
-import { Card, Group, Title } from '@mantine/core';
+import { Group, Title } from '@mantine/core';
 import { CategoryType } from '../../../../types/category';
-import { IWidgetDefinition } from '../../../../widgets/widgets';
 import { HomarrCardWrapper } from '../../Tiles/HomarrCardWrapper';
-import { Tiles } from '../../Tiles/tilesDefinitions';
-import Widgets from '../../../../widgets';
-import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { CategoryEditMenu } from './CategoryEditMenu';
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
@@ -1,6 +1,7 @@
 import { Button, Group, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { CategoryType } from '../../../../types/category';
@@ -31,15 +32,17 @@ export const CategoryEditModal = ({
    context.closeModal(id);
  };

+  const { t } = useTranslation('common');
+
  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <TextInput data-autoFocus {...form.getInputProps('name')} label="Name of category" />

      <Group mt="md" grow>
        <Button onClick={() => context.closeModal(id)} variant="light" color="gray">
-          Cancel
+          {t('cancel')}
        </Button>
-        <Button type="submit">Save</Button>
+        <Button type="submit">{t('save')}</Button>
      </Group>
    </form>
  );
--- a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
+++ b/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
@@ -1,9 +1,5 @@
 import { Card } from '@mantine/core';
 import { RefObject } from 'react';
-import { IWidgetDefinition } from '../../../../widgets/widgets';
-import { Tiles } from '../../Tiles/tilesDefinitions';
-import Widgets from '../../../../widgets';
-import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';

@@ -38,6 +34,5 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
  );
 };

-const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) => {
-  return wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;
-};
+const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) =>
+  wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;
--- a/src/components/Dashboard/Wrappers/WrapperContent.tsx
+++ b/src/components/Dashboard/Wrappers/WrapperContent.tsx
@@ -18,47 +18,45 @@ interface WrapperContentProps {
  };
 }

-export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => {
-  return (
-    <>
-      {apps?.map((app) => {
-        const { component: TileComponent, ...tile } = Tiles['app'];
-        return (
-          <GridstackTileWrapper
-            id={app.id}
-            type="app"
-            key={app.id}
-            itemRef={refs.items.current[app.id]}
-            {...tile}
-            {...app.shape.location}
-            {...app.shape.size}
-          >
-            <TileComponent className="grid-stack-item-content" app={app} />
-          </GridstackTileWrapper>
-        );
-      })}
-      {widgets.map((widget) => {
-        const definition = Widgets[widget.id as keyof typeof Widgets] as
-          | IWidgetDefinition
-          | undefined;
-        if (!definition) return null;
+export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => (
+  <>
+    {apps?.map((app) => {
+      const { component: TileComponent, ...tile } = Tiles.app;
+      return (
+        <GridstackTileWrapper
+          id={app.id}
+          type="app"
+          key={app.id}
+          itemRef={refs.items.current[app.id]}
+          {...tile}
+          {...app.shape.location}
+          {...app.shape.size}
+        >
+          <TileComponent className="grid-stack-item-content" app={app} />
+        </GridstackTileWrapper>
+      );
+    })}
+    {widgets.map((widget) => {
+      const definition = Widgets[widget.id as keyof typeof Widgets] as
+        | IWidgetDefinition
+        | undefined;
+      if (!definition) return null;

-        return (
-          <GridstackTileWrapper
-            type="widget"
-            key={widget.id}
-            itemRef={refs.items.current[widget.id]}
-            id={definition.id}
-            {...definition.gridstack}
-            {...widget.shape.location}
-            {...widget.shape.size}
-          >
-            <WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
-              <definition.component className="grid-stack-item-content" widget={widget} />
-            </WidgetWrapper>
-          </GridstackTileWrapper>
-        );
-      })}
-    </>
-  );
-};
+      return (
+        <GridstackTileWrapper
+          type="widget"
+          key={widget.id}
+          itemRef={refs.items.current[widget.id]}
+          id={definition.id}
+          {...definition.gridstack}
+          {...widget.shape.location}
+          {...widget.shape.size}
+        >
+          <WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
+            <definition.component className="grid-stack-item-content" widget={widget} />
+          </WidgetWrapper>
+        </GridstackTileWrapper>
+      );
+    })}
+  </>
+);
--- a/src/components/Settings/Common/CommonSettings.tsx
+++ b/src/components/Settings/Common/CommonSettings.tsx
@@ -4,7 +4,6 @@ import ConfigChanger from '../../Config/ConfigChanger';
 import ConfigActions from './Config/ConfigActions';
 import LanguageSelect from './Language/LanguageSelect';
 import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector';
-import { SearchNewTabSwitch } from './SearchNewTabSwitch';

 export default function CommonSettings() {
  const { config } = useConfigContext();
--- a/src/components/Settings/Common/Config/ConfigActions.tsx
+++ b/src/components/Settings/Common/Config/ConfigActions.tsx
@@ -39,7 +39,7 @@ export default function ConfigActions() {
      <Flex gap="xs" justify="stretch">
        <ActionIcon className={classes.actionIcon} onClick={handleDownload} variant="default">
          <IconDownload size={20} />
-          <Text>{t('buttons.download')}</Text>
+          <Text size="sm">{t('buttons.download')}</Text>
        </ActionIcon>
        <ActionIcon
          className={classes.actionIcon}
@@ -48,11 +48,11 @@ export default function ConfigActions() {
          variant="light"
        >
          <IconTrash color={colors.red[2]} size={20} />
-          <Text>{t('buttons.delete.text')}</Text>
+          <Text size="sm">{t('buttons.delete.text')}</Text>
        </ActionIcon>
        <ActionIcon className={classes.actionIcon} onClick={createCopyModal.open} variant="default">
          <IconCopy size={20} />
-          <Text>{t('buttons.saveCopy')}</Text>
+          <Text size="sm">{t('buttons.saveCopy')}</Text>
        </ActionIcon>
      </Flex>

--- a/src/components/Settings/Customization/Layout/LayoutSelector.tsx
+++ b/src/components/Settings/Customization/Layout/LayoutSelector.tsx
@@ -1,6 +1,5 @@
 import {
  ActionIcon,
-  Center,
  Checkbox,
  createStyles,
  Flex,
@@ -11,6 +10,7 @@ import {
  Title,
  useMantineTheme,
 } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
@@ -35,6 +35,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
  const [searchBar, setSearchBar] = useState(defaultLayout?.enabledSearchbar ?? false);

  const { colors, colorScheme } = useMantineTheme();
+  const { t } = useTranslation('settings/common');

  if (!configName) return null;

@@ -69,7 +70,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {

  return (
    <Stack spacing="xs">
-      <Title order={6}>Dashboard layout</Title>
+      <Title order={6}>{t('layout.title')}</Title>

      <Paper px="xs" py={4} withBorder>
        <Group position="apart">
@@ -94,7 +95,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
        {leftSidebar && (
          <Paper className={classes.secondaryWrapper} p="xs" withBorder>
            <Flex align="center" justify="center" direction="column">
-              <Text align="center">Sidebar</Text>
+              <Text align="center">{t('layout.sidebar')}</Text>
              <Text color="dimmed" size="xs" align="center">
                Only for
                <br />
@@ -106,16 +107,16 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
        )}

        <Paper className={classes.primaryWrapper} p="xs" withBorder>
-          <Text align="center">Main</Text>
+          <Text align="center">{t('layout.main')}</Text>
          <Text color="dimmed" size="xs" align="center">
-            Cannot be turned of.
+            {t('layout.cannotturnoff')}
          </Text>
        </Paper>

        {rightSidebar && (
          <Paper className={classes.secondaryWrapper} p="xs" withBorder>
            <Flex align="center" justify="center" direction="column">
-              <Text align="center">Sidebar</Text>
+              <Text align="center">{t('layout.sidebar')}</Text>
              <Text color="dimmed" size="xs" align="center">
                Only for
                <br />
@@ -129,29 +130,29 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {

      <Stack spacing="xs">
        <Checkbox
-          label="Enable left sidebar"
-          description="Optional. Can be used for apps and integrations only"
+          label={t('layout.enablelsidebar')}
+          description={t('layout.enablelsidebardesc')}
          checked={leftSidebar}
          onChange={(ev) => handleChange('enabledLeftSidebar', ev, setLeftSidebar)}
        />
        <Checkbox
-          label="Enable right sidebar"
-          description="Optional. Can be used for apps and integrations only"
+          label={t('layout.enablersidebar')}
+          description={t('layout.enablersidebardesc')}
          checked={rightSidebar}
          onChange={(ev) => handleChange('enabledRightSidebar', ev, setRightSidebar)}
        />
        <Checkbox
-          label="Enable search bar"
+          label={t('layout.enablesearchbar')}
          checked={searchBar}
          onChange={(ev) => handleChange('enabledSearchbar', ev, setSearchBar)}
        />
        <Checkbox
-          label="Enable docker"
+          label={t('layout.enabledocker')}
          checked={docker}
          onChange={(ev) => handleChange('enabledDocker', ev, setDocker)}
        />
        <Checkbox
-          label="Enable pings"
+          label={t('layout.enableping')}
          checked={ping}
          onChange={(ev) => handleChange('enabledPing', ev, setPing)}
        />
--- a/src/components/Settings/SettingsDrawer.tsx
+++ b/src/components/Settings/SettingsDrawer.tsx
@@ -1,14 +1,11 @@
-import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
-import { useHotkeys } from '@mantine/hooks';
-import { useState } from 'react';
-import { IconSettings } from '@tabler/icons';
+import { Title, Drawer, Tabs, ScrollArea } from '@mantine/core';
 import { useTranslation } from 'next-i18next';

 import CustomizationSettings from './Customization/CustomizationSettings';
 import CommonSettings from './Common/CommonSettings';
 import Credits from './Common/Credits';

-function SettingsMenu() {
+function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
  const { t } = useTranslation('settings/common');

  return (
@@ -36,7 +33,11 @@ interface SettingsDrawerProps {
  closeDrawer: () => void;
 }

-export function SettingsDrawer({ opened, closeDrawer }: SettingsDrawerProps) {
+export function SettingsDrawer({
+  opened,
+  closeDrawer,
+  newVersionAvailable,
+}: SettingsDrawerProps & { newVersionAvailable: string }) {
  const { t } = useTranslation('settings/common');

  return (
@@ -48,7 +49,7 @@ export function SettingsDrawer({ opened, closeDrawer }: SettingsDrawerProps) {
      opened={opened}
      onClose={closeDrawer}
    >
-      <SettingsMenu />
+      <SettingsMenu newVersionAvailable={newVersionAvailable} />
      <Credits />
    </Drawer>
  );
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,74 +0,0 @@
-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) => ({
-  footer: {
-    borderTop: `1px solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
-    }`,
-  },
-
-  inner: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
-
-    [theme.fn.smallerThan('sm')]: {
-      flexDirection: 'column',
-    },
-  },
-
-  links: {
-    [theme.fn.smallerThan('sm')]: {
-      marginTop: theme.spacing.lg,
-      marginBottom: theme.spacing.sm,
-    },
-  },
-}));
-
-interface FooterCenteredProps {
-  links: { link: string; label: string }[];
-}
-
-export function Footer({ links }: FooterCenteredProps) {
-  useEffect(() => {
-    // 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) {
-          showNotification({
-            color: 'yellow',
-            autoClose: false,
-            title: 'New version available',
-            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 🐛',
-          });
-        }
-      });
-    });
-  }, []);
-
-  return (
-    <FooterComponent
-      height="auto"
-      style={{
-        background: 'none',
-        border: 'none',
-        clear: 'both',
-      }}
-      children={undefined}
-    />
-  );
-}
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,9 +1,8 @@
 import { AppShell, createStyles } from '@mantine/core';
 import { useConfigContext } from '../../config/provider';
 import { Background } from './Background';
-import { Footer } from './Footer';
-import { Header } from './Header/Header';
-import { Head } from './Header/Meta/Head';
+import { Header } from './header/Header';
+import { Head } from './header/Meta/Head';

 const useStyles = createStyles(() => ({}));

@@ -15,7 +14,6 @@ export default function Layout({ children }: any) {
    <AppShell
      fixed={false}
      header={<Header />}
-      footer={<Footer links={[]} />}
      styles={{
        main: {
          minHeight: 'calc(100vh - var(--mantine-header-height))',
--- a/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
+++ b/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
@@ -4,7 +4,7 @@ import { IconApps } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';

 export const AddElementAction = () => {
-  const { t } = useTranslation('layout/add-service-app-shelf');
+  const { t } = useTranslation('layout/element-selector/selector');

  return (
    <Tooltip withinPortal label={t('actionIcon.tooltip')}>
@@ -16,7 +16,7 @@ export const AddElementAction = () => {
        onClick={() =>
          openContextModal({
            modal: 'selectElement',
-            title: 'Add an element to your dashboard',
+            title: t('modal.title'),
            size: 'xl',
            innerProps: {},
          })
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,4 +1,6 @@
-import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
+import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
+import { useState, useEffect } from 'react';
+import { REPO_URL, CURRENT_VERSION } from '../../../../data/constants';
 import { useConfigContext } from '../../../config/provider';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
@@ -15,6 +17,18 @@ export function Header(props: any) {

  const { config } = useConfigContext();

+  const [newVersionAvailable, setNewVersionAvailable] = useState<string>('');
+  useEffect(() => {
+    // 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) {
+          setNewVersionAvailable(data.tag_name);
+        }
+      });
+    });
+  }, [CURRENT_VERSION]);
+
  return (
    <MantineHeader height={HeaderHeight} className={cardClasses.card}>
      <Group p="xs" noWrap grow>
@@ -25,7 +39,9 @@ export function Header(props: any) {
          <Search />
          <AddElementAction />
          <ToggleEditModeAction />
-          <SettingsMenu />
+          <Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>
+            <SettingsMenu newVersionAvailable={newVersionAvailable} />
+          </Indicator>
        </Group>
      </Group>
    </MantineHeader>
--- a/src/components/layout/header/Search.tsx
+++ b/src/components/layout/header/Search.tsx
@@ -60,8 +60,7 @@ export function Search() {
  // Overseerr is not use anywhere else, so it makes no sense to add a standalone toggle for displaying results
  const isOverseerrEnabled = false; //config?.settings.common.enabledModules.overseerr;
  const overseerrApp = config?.apps.find(
-    (app) =>
-      app.integration?.type === 'overseerr' || app.integration?.type === 'jellyseerr'
+    (app) => app.integration?.type === 'overseerr' || app.integration?.type === 'jellyseerr'
  );
  const searchEngineSettings = config?.settings.common.searchEngine;
  const searchEngineUrl = !searchEngineSettings
--- a/src/components/layout/header/SettingsMenu.tsx
+++ b/src/components/layout/header/SettingsMenu.tsx
@@ -1,12 +1,14 @@
-import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Menu, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { AboutModal } from '../../About/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';

-export const SettingsMenu = () => {
+export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
  const [drawerOpened, drawer] = useDisclosure(false);
+  const { t } = useTranslation('common');
  const [aboutModalOpened, aboutModal] = useDisclosure(false);

  return (
@@ -22,19 +24,34 @@ export const SettingsMenu = () => {
            <ColorSchemeSwitch />
            <Menu.Divider />
            <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
-              Homarr Settings
+              {t('sections.settings')}
            </Menu.Item>
            <Menu.Item
              icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
-              onClick={aboutModal.open}
+              rightSection={
+                newVersionAvailable && (
+                  <Badge variant="light" color="blue">
+                    New
+                  </Badge>
+                )
+              }
+              onClick={() => aboutModal.open()}
            >
              About
            </Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </Tooltip>
-      <SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
-      <AboutModal opened={aboutModalOpened} closeModal={aboutModal.close} />
+      <SettingsDrawer
+        opened={drawerOpened}
+        closeDrawer={drawer.close}
+        newVersionAvailable={newVersionAvailable}
+      />
+      <AboutModal
+        opened={aboutModalOpened}
+        closeModal={aboutModal.close}
+        newVersionAvailable={newVersionAvailable}
+      />
    </>
  );
-};
+}
--- a/src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
+++ b/src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
@@ -1,4 +1,4 @@
-import { Menu, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { Menu, useMantineColorScheme } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';