diff --git a/src/components/SyncCard.stories.ts b/src/components/SyncCard.stories.ts
index 25e42e1..2c0ed3c 100644
--- a/src/components/SyncCard.stories.ts
+++ b/src/components/SyncCard.stories.ts
@@ -10,25 +10,7 @@ const meta: Meta<typeof SyncCard> = {
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   args: {
-    title: 'Sync Card Demo',
-  },
-  parameters: {
-    docs: {
-      /*
-      source: {
-        format: true,
-        code: `
-        <sync-card title="Sync Card Demo" v-model="sync-card-model">
-          <template v-slot:icon>
-            <span>
-              <img :src="icon" alt="icon alt text"/>
-            </span>
-          </template>
-        </sync-card>
-      `
-      },
-       */
-    },
+    title: 'Title',
   },
   render: (args) => ({
     components: { SyncCard },
@@ -44,69 +26,96 @@ const meta: Meta<typeof SyncCard> = {
 
       return { args, model };
     },
-    template: `
-      <sync-card v-bind="args" v-model="model">
-        <template v-slot:icon>
-          <span class="icon-calendar">
-            <img src="${CalendarIcon}" alt="Calendar Icon"/>
-          </span>
-        </template>
-      </sync-card>`,
+    template: `<sync-card v-bind="args" v-model="model" />`,
   }),
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const CalendarSync: Story = {
+
+export const Standard: Story = {
   args: {
     modelValue: [
       {
         key: 0,
-        label: 'My calendar',
+        label: 'Option 1',
         checked: false,
       },
       {
         key: 1,
-        label: 'Test Calendar',
-        checked: false,
-      },
-      {
-        key: 2,
-        label: 'Where all the spam events go',
+        label: 'Option 2',
         checked: true,
       },
       {
-        key: 3,
-        label: 'Work PTO',
-        checked: false,
-      },
-      {
-        key: 4,
-        label: 'That calendar you never use but its full of holidays',
+        key: 2,
+        label: 'Option 3',
         checked: false,
       },
     ],
   },
+  parameters: {
+    docs: {
+      source: {
+        code: '<sync-card\n  title="Title"\n  v-model="[\n    { key: 0, label: \'Option 1\', checked: false },\n    { key: 1, label: \'Option 2\', checked: true },\n    { key: 2, label: \'Option 3\', checked: false },\n  ]"\n/>',
+      },
+    },
+  },
 };
 
-export const FileSync: Story = {
+export const Icon: Story = {
   args: {
+    title: 'Select calendars to sync',
     modelValue: [
       {
         key: 0,
-        label: 'acorn.png',
-        checked: false,
+        label: 'My calendar',
+        checked: true,
       },
       {
         key: 1,
-        label: 'squirrel shopping list.txt',
+        label: 'Test Calendar',
         checked: false,
       },
       {
         key: 2,
-        label: 'chill beats to hibernate to.zip',
+        label: 'Where all the spam events go',
         checked: false,
       },
+      {
+        key: 3,
+        label: 'Work PTO',
+        checked: true,
+      },
     ],
   },
+  render: (args) => ({
+    components: { SyncCard },
+    setup() {
+      const model = ref(args.modelValue);
+
+      watch(
+        () => args.modelValue,
+        (val) => {
+          model.value = val;
+        }
+      );
+
+      return { args, model };
+    },
+    template: `
+      <sync-card v-bind="args" v-model="model">
+        <template v-slot:icon>
+          <span class="icon-calendar">
+            <img src="${CalendarIcon}" alt="Calendar Icon"/>
+          </span>
+        </template>
+      </sync-card>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: '<sync-card\n  title="Title"\n  v-model="[\n    { key: 0, label: \'My calendar\', checked: true },\n    { key: 1, label: \'Test Calendar\', checked: false },\n    { key: 2, label: \'Where all the spam events go\', checked: false },\n    { key: 3, label: \'Work PTO\', checked: true },\n  ]"\n>\n  <template v-slot:icon>\n    <img src="/assets/svg/icons/calendar.svg" alt="Calendar Icon"/>\n  </template>\n</sync-card>',
+      },
+    },
+  },
 };
diff --git a/src/components/SyncCard.vue b/src/components/SyncCard.vue
index b9b4fff..2f82a09 100644
--- a/src/components/SyncCard.vue
+++ b/src/components/SyncCard.vue
@@ -114,6 +114,7 @@ withDefaults(defineProps<Props>(), {
   background-color: var(--colour-neutral-base);
   padding: 0.375rem 0.75rem;
   font-size: var(--txt-input);
+  box-sizing: border-box;
 
   &:nth-child(even) {
     background-color: var(--colour-neutral-lower);