diff --git a/components/AppShelf/AddAppShelfItem.tsx b/components/AppShelf/AddAppShelfItem.tsx
index d916b2e3f..2675f5dd6 100644
--- a/components/AppShelf/AddAppShelfItem.tsx
+++ b/components/AppShelf/AddAppShelfItem.tsx
@@ -35,8 +35,7 @@ export default function AddItemShelfItem(props: any) {
   });
   return (
     <>
-      <Modal size={'xl'} opened={opened} onClose={() => setOpened(false)} title="Add a service">
-        <Paper radius="md" p="xl" withBorder {...props}>
+      <Modal size={'xl'} radius="lg" opened={props.opened || opened} onClose={() => setOpened(false)} title="Add a service">
           <Center>
             <Image
               height={120}
@@ -96,7 +95,6 @@ export default function AddItemShelfItem(props: any) {
               <Button type="submit">Add service</Button>
             </Group>
           </form>
-        </Paper>
       </Modal>
       <Grid.Col span={4} lg={2} sm={3}>
         <AspectRatio ratio={4 / 3}>
diff --git a/components/AppShelf/AppShelf.story.tsx b/components/AppShelf/AppShelf.story.tsx
new file mode 100644
index 000000000..6f9687513
--- /dev/null
+++ b/components/AppShelf/AppShelf.story.tsx
@@ -0,0 +1,9 @@
+import AppShelf from './AppShelf';
+
+export default {
+  title: 'Item Shelf',
+};
+
+export const Default = (args: any) => (
+    <AppShelf {...args} />
+);
diff --git a/components/AppShelf/AppShelf.tsx b/components/AppShelf/AppShelf.tsx
index b3fd253be..2e3f42db9 100644
--- a/components/AppShelf/AppShelf.tsx
+++ b/components/AppShelf/AppShelf.tsx
@@ -7,13 +7,13 @@ import AddItemShelfItem from './AddAppShelfItem';
 
 const useStyles = createStyles((theme) => ({
   main: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
     textAlign: 'center',
     padding: theme.spacing.xl,
     borderRadius: theme.radius.md,
 
     '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
     },
   },
 }));
@@ -35,9 +35,9 @@ const AppShelf = () => {
     localStorage.setItem('services', JSON.stringify([...services, item]));
   }
 
-  function removeItem(item: serviceItem) {
-    setServices(services.filter((s) => s.url !== item.url));
-    localStorage.setItem('services', JSON.stringify(services.filter((s) => s.url !== item.url)));
+  function removeItem(name: string) {
+    setServices(services.filter((s) => s.name !== name));
+    localStorage.setItem('services', JSON.stringify(services.filter((s) => s.name !== name)));
   }
 
   return (
@@ -75,70 +75,4 @@ const AppShelf = () => {
   );
 };
 
-export default AppShelf;
-
-const MockServices = [
-  {
-    name: 'Radarr',
-    type: 'Radarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
-    url: 'http://server:7878/',
-  },
-  {
-    name: 'Sonarr',
-    type: 'Sonarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-    url: 'http://server:8989/',
-  },
-  {
-    name: 'Sonarr',
-    type: 'Sonarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-    url: 'http://server:8989/',
-  },
-  {
-    name: 'Sonarr',
-    type: 'Sonarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-    url: 'http://server:8989/',
-  },
-  {
-    name: 'Sonarr',
-    type: 'Sonarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-    url: 'http://server:8989/',
-  },
-  {
-    name: 'Sonarr',
-    type: 'Sonarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-    url: 'http://server:8989/',
-  },
-  {
-    name: 'Sonarr',
-    type: 'Sonarr',
-    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-    url: 'http://server:8989/',
-  },
-];
-
-function saveLocal(arg0: any) {
-  // localStorage.setItem('services', JSON.stringify(arg0));
-  console.log(`saving ${arg0}`);
-}
-
-function loadLocal(arg0: string) {
-  const local = localStorage.getItem(arg0);
-  if (local) {
-    return JSON.parse(local);
-  }
-  return [
-    ...MockServices,
-    {
-      name: 'Radarr',
-      type: 'Radarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
-      url: 'http://server:7878/',
-    },
-  ];
-}
+export default AppShelf;
\ No newline at end of file