diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index 6cce33389..af44ad651 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -122,7 +122,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
 
   const form = useForm({
     initialValues: {
-      id: props.id ?? Date.now(),
+      id: props.id ?? crypto.randomUUID(),
       type: props.type ?? 'Other',
       name: props.name ?? '',
       icon: props.icon ?? '/favicon.svg',
diff --git a/src/components/Config/LoadConfig.tsx b/src/components/Config/LoadConfig.tsx
index d36fecd19..12207e81d 100644
--- a/src/components/Config/LoadConfig.tsx
+++ b/src/components/Config/LoadConfig.tsx
@@ -7,6 +7,7 @@ import { useRouter } from 'next/router';
 import { setCookies } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
+import { migrateToIdConfig } from '../../tools/migrate';
 
 function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
   return status.accepted
@@ -84,7 +85,8 @@ export default function LoadConfigComponent(props: any) {
             message: undefined,
           });
           setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
-          setConfig(newConfig);
+          const migratedConfig = migrateToIdConfig(newConfig);
+          setConfig(migratedConfig);
         });
       }}
       accept={['application/json']}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 272d367a2..e2d9c2c4a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,6 +7,7 @@ import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
+import { migrateToIdConfig } from '../tools/migrate';
 
 export async function getServerSideProps({
   req,
@@ -48,7 +49,8 @@ export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
   const { config, loadConfig, setConfig, getConfigs } = useConfig();
   useEffect(() => {
-    setConfig(initialConfig);
+    const migratedConfig = migrateToIdConfig(initialConfig);
+    setConfig(migratedConfig);
   }, [initialConfig]);
   return (
     <>
diff --git a/src/tools/migrate.ts b/src/tools/migrate.ts
new file mode 100644
index 000000000..1d40074fc
--- /dev/null
+++ b/src/tools/migrate.ts
@@ -0,0 +1,13 @@
+import { Config } from './types';
+
+export function migrateToIdConfig(config: Config): Config {
+  // Set the config and add an ID to all the services that don't have one
+  const services = config.services.map((service) => ({
+    ...service,
+    id: service.id ?? crypto.randomUUID(),
+  }));
+  return {
+    ...config,
+    services,
+  };
+}
diff --git a/src/tools/types.ts b/src/tools/types.ts
index efb38e11d..3dbceb071 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -29,7 +29,7 @@ export type ServiceType =
   | 'Emby';
 
 export interface serviceItem {
-  id: number;
+  id: string;
   name: string;
   type: string;
   url: string;