diff --git a/index.html b/index.html
index e875a96..105d654 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,9 @@
 
   <!-- Serviceworker registration -->
   <script>
-    if (typeof navigator.serviceWorker !== 'undefined') {
-      navigator.serviceWorker.register('sw.js')
-    }
+   // if (typeof navigator.serviceWorker !== 'undefined') {
+   //   navigator.serviceWorker.register('serviceworker.js')
+   // }
   </script>
 
 	<!-- Meta Pixel Code -->
diff --git a/postcss.config.cjs b/postcss.config.cjs
index bafe175..5f0853f 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -2,5 +2,5 @@ const autoprefixer = require('autoprefixer')
 const tailwind = require('tailwindcss')
 
 module.exports = {
-	plugins: [tailwind(), autoprefixer()],
+  plugins: [tailwind(), autoprefixer()]
 }
diff --git a/public/serviceworker.js b/public/serviceworker.js
index 4b2d31b..1565554 100644
--- a/public/serviceworker.js
+++ b/public/serviceworker.js
@@ -1,9 +1,10 @@
 // This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
-import { workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js'
+import workbox from 'workbox-sw'
 
 const CACHE = 'pwabuilder-offline-page'
 
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js')
+
 // TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
 const offlineFallbackPage = '/offline.html'
 
diff --git a/src/__routes.svelte b/src/__routes.svelte
index 0f05871..f2acf1b 100644
--- a/src/__routes.svelte
+++ b/src/__routes.svelte
@@ -94,5 +94,9 @@
 			path: '/forgot-pswd',
 			component: () => import('$routes/authorization/forgottonPassword/forgot-pswd.svelte'),
 		},
+		{
+			path: '/preferences',
+			component: () => import('$root/src/routes/onboarding/interestsPage.svelte'),
+		}
 	]}
 />
diff --git a/src/lib/collections.ts b/src/lib/collections.ts
index b6272ae..605ac88 100644
--- a/src/lib/collections.ts
+++ b/src/lib/collections.ts
@@ -2,8 +2,10 @@ import { Collection } from './appwrite'
 
 const experiences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
 const users = new Collection('63ded6c18e8493bffc83', 'Users')
+const categories = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
 
 export default {
 	experiences,
 	users,
+	categories,
 }
diff --git a/src/lib/components/Interests/Interests.svelte b/src/lib/components/Interests/Interests.svelte
index fd7f953..e37564e 100644
--- a/src/lib/components/Interests/Interests.svelte
+++ b/src/lib/components/Interests/Interests.svelte
@@ -3,6 +3,7 @@
 	import collections from '$lib/collections'
 	import { Query } from 'appwrite'
 	import { navigate } from 'svelte-routing'
+	import Category from "$lib/components/Interests/category.svelte";
 
 	export let current_state = 1
 
diff --git a/src/lib/components/Interests/category.svelte b/src/lib/components/Interests/category.svelte
new file mode 100644
index 0000000..addf887
--- /dev/null
+++ b/src/lib/components/Interests/category.svelte
@@ -0,0 +1,55 @@
+<!-- This component is imported to display a category to (de)select-->
+<script lang="ts">
+    export let name;
+    export let image;
+    export let selected = false;
+    export let onToggle = () => {};
+  
+    const handleClick = () => {
+      onToggle();
+    };
+  </script>
+  
+  <div class="category" class:selected={selected} on:click={handleClick}>
+    <div class="image">
+      <img src={image} alt={name} />
+    </div>
+    <div class="name">{name}</div>
+  </div>
+  
+  <style lang="scss">
+    .category {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 120px;
+      margin: 10px;
+      cursor: pointer;
+  
+      .image {
+        width: 100%;
+        padding-top: 100%;
+        position: relative;
+  
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+  
+      .name {
+        margin-top: 5px;
+        font-size: 14px;
+        text-align: center;
+      }
+  
+      &.selected {
+        border: 2px solid blue;
+      }
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/src/routes/onboarding/interestsPage.svelte b/src/routes/onboarding/interestsPage.svelte
new file mode 100644
index 0000000..75be1b0
--- /dev/null
+++ b/src/routes/onboarding/interestsPage.svelte
@@ -0,0 +1,61 @@
+<!-- The InterestsPage component is responsible for displaying a list of categories that a user can select from -->
+
+<script lang="ts">
+    // Import necessary modules and components
+    import { user } from '$lib/appwrite';
+    import collections from '$lib/collections';
+    import { Query } from 'appwrite';
+    import { navigate } from 'svelte-routing';
+    import  Category  from "$lib/components/Interests/category.svelte";
+  
+    // Define reactive variables using Svelte's $ syntax
+    $: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')]);
+    $: console.log($user);
+  
+    // Define a writable store to keep track of selected categories
+    import { writable } from 'svelte/store';
+    const selectedCategories = writable([]);
+  
+    // Define a function to toggle the selected state of a category
+    const toggleSelected = (categoryName) => {
+      selectedCategories.update((categories) => {
+        if (categories.includes(categoryName)) {
+          return categories.filter((name) => name !== categoryName);
+        } else {
+          return [...categories, categoryName];
+        }
+      });
+    };
+  
+    // Define a function to handle the form submission
+    const handleSubmit = async () => {
+      const { $id } = await collections.users.updateDocument(userInfo.$id, {
+        preferences: {
+          categories: $selectedCategories,
+        },
+      });
+  
+      navigate(`/profile/${$id}`);
+    };
+  </script>
+  
+  <!-- Render each category as a Category component and pass its name, image, and selected state as props to the Category component. -->
+  {#await collections.categories.listDocuments()}
+    <p>Loading...</p>
+  {:then categories}
+    {#each categories.data as category}
+      <Category 
+        name={category.name}
+        image={category.image}
+        selected={$selectedCategories.includes(category.name)}
+        onToggle={() => toggleSelected(category.name)}
+      />
+    {/each}
+  
+    <!-- Display a form with a button to submit the selected categories -->
+    <form on:submit|preventDefault={handleSubmit}>
+      <button type="submit">Save Preferences</button>
+    </form>
+  {:catch error}
+    <p>Error: {error.message}</p>
+  {/await}
diff --git a/src/routes/profile/functions/Interests-Update.svelte b/src/routes/profile/functions/Interests-Update.svelte
index c61df4d..ca6bf5a 100644
--- a/src/routes/profile/functions/Interests-Update.svelte
+++ b/src/routes/profile/functions/Interests-Update.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Interests from "$lib/components/Interests/Interests.svelte"
+	import Interests from "$lib/components/Interests/interests.svelte"
 
     let current_state = 1
 </script>