diff --git a/src/__routes.svelte b/src/__routes.svelte
index 77c83cb..fdb8155 100644
--- a/src/__routes.svelte
+++ b/src/__routes.svelte
@@ -99,10 +99,6 @@
 		{
 			path: '/cookie-policy',
 			component: () => import('$routes/legal/cookie-policy.svelte'),
-		},
-		{
-			path: '/preferences',
-			component: () => import('$root/src/routes/onboarding/preferencesPage.svelte'),
-		},
+		}
 	]}
 />
diff --git a/src/lib/components/Categories/preference.svelte b/src/lib/components/Categories/preference.svelte
index 1308f43..ec75b73 100644
--- a/src/lib/components/Categories/preference.svelte
+++ b/src/lib/components/Categories/preference.svelte
@@ -1,17 +1,32 @@
 <script lang="ts">
-    export let preferences;
-    export let onPreferenceSelect;
+	import { Img } from "flowbite-svelte"
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+
+    export let name;
+    export let img;
+
   </script>
-  
-  <div class="category-3-in-row">
-    {#each preferences as preference}
+
+  <div class="preference">
       <div
-        class="preference"
-        style="background-image: url({preference.img})"
-        on:click={() => onPreferenceSelect(preference)}
+        on:click={() => dispatch('selected')}
       >
-        <span>{preference.name}</span>
+          <Img alt="sample 1" size="max-w-lg" class="rounded-lg abcd" src={img}/>
+        <span>{name}</span>
       </div>
-    {/each}
   </div>
+
+<style lang="scss">
+  div
+            &.selected {
+                div {
+                    border: 1px dashed #4263eb;
+                    p {
+                    color: #4263eb;
+                    }
+                }
+            }
+</style>
   
\ No newline at end of file
diff --git a/src/lib/utils/database/preferences.ts b/src/lib/utils/database/preferences.ts
index 35548e1..ca17d6e 100644
--- a/src/lib/utils/database/preferences.ts
+++ b/src/lib/utils/database/preferences.ts
@@ -1,5 +1,6 @@
 import { databases } from '$lib/appwrite';
 import { Query } from 'appwrite';
+import { writable } from 'svelte/store'
 
 // typescript interfaces for objects return definitions
 interface Interest {
@@ -16,14 +17,22 @@ interface Recommendations {
   }
 
   // Define a variable to store the selected preferences
-  let selectedInterests = [];
-  let selectedTravelBuddies = [];
-  let selectedRecommendations = [];
+  // let selectedInterests = [];
+  // let selectedTravelBuddies = [];
+  // let selectedRecommendations = [];
 
 // fetch interests
-export const getInterests = async (): Promise<Interest[]> => {
-    return ((await databases.listDocuments('6417cf1de159d094b370', '6417cf29f2118829b3b4')).documents as unknown as Interest[])};
 
+    export const getInterests = () => {
+      const store = writable<Interest[]>([]) 
+      databases.listDocuments('6417cf1de159d094b370', '6417cf29f2118829b3b4').then(({ documents }) => {
+        // @ts-ignore
+        store.set(documents)
+      })
+    
+      
+      return [store] as const
+    } 
 
 // fetch travel buddies
 export const getTravelBuddies = async (): Promise<TravelBuddies[]> => {
@@ -49,6 +58,7 @@ export const addSelectedPreferences = async (userId, interests, travelBuddies, r
     return updatedUser;
   };
 
+
 //   // Function to update Interests
 //   function updateSelectedInterests(preference) {
 //     if (selectedInterests.includes(preference)) {
diff --git a/src/routes/homepage/homepage.svelte b/src/routes/homepage/homepage.svelte
index 1e2a812..e343f27 100644
--- a/src/routes/homepage/homepage.svelte
+++ b/src/routes/homepage/homepage.svelte
@@ -1,5 +1,6 @@
 <script>
 	import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
+	import { Img } from "flowbite-svelte"
 	import Discover from './Components/Discover.svelte'
 	import Top from './Components/Top.svelte'
 	import Categories from './Components/Categories.svelte'
@@ -35,7 +36,7 @@
 		})
 	}
 </script>
-
+<Img alt="sample 1" size="max-w-lg" class="rounded-lg abdcd" src='https://s2.qwant.com/thumbr/0x380/e/a/5660c0c2a15f36094cbed82c408a16012aa0230b5a0c6fe4597365b82bb037/history-of-the-krtecek-217183127.jpg?u=https%3A%2F%2Fsouvenirprague.com%2Fimages%2Fblog%2Foriginals%2Fhistory-of-the-krtecek-217183127.jpg&q=0&b=1&p=0&a=0'/>
 {#if !fitstTime}
 	<Top headline={city + state} />
 
diff --git a/src/routes/onboarding/interestsPage.svelte b/src/routes/onboarding/interestsPage.svelte
index 8606c9c..711ae91 100644
--- a/src/routes/onboarding/interestsPage.svelte
+++ b/src/routes/onboarding/interestsPage.svelte
@@ -5,7 +5,7 @@
   import collections from '$lib/collections';
   import Loading from '$lib/components/Common/Loading.svelte';
   import Category2InRow from '$lib/components/categories/Category2InRow.svelte';
-  import Category3InRow from '$lib/components/categories/Category3InRow.svelte';
+  import Category3InRow from '$lib/components/Categories/preference.svelte';
   import { getInterests, getTravelBuddies, getRecommendations, addSelectedPreferences } from '$lib/utils/database/preferences';
   import { navigate } from '$lib/router'
   import { onMount } from 'svelte';
diff --git a/src/routes/onboarding/preferencesPage.svelte b/src/routes/onboarding/preferencesPage.svelte
index 1664e7a..53e2948 100644
--- a/src/routes/onboarding/preferencesPage.svelte
+++ b/src/routes/onboarding/preferencesPage.svelte
@@ -6,6 +6,7 @@
     import { getInterests, getRecommendations, getTravelBuddies, addSelectedPreferences } from '$lib/utils/database/preferences';
     import preference from "$lib/components/Categories/preference.svelte";
   
+  
     let preferences = [];
   
     let selectedPrefId = 1;
@@ -149,12 +150,7 @@
             border-radius: 20px;
             border: 1px solid #4264eb00;
   
-            img {
-              aspect-ratio: 1/1;
-              object-fit: cover;
-              border-radius: 18px;
-              width: 100%;
-            }
+            
   
             p {
               font-weight: 700;
@@ -163,14 +159,7 @@
             }
           }
   
-            &.selected {
-                div {
-                    border: 1px dashed #4263eb;
-                    p {
-                    color: #4263eb;
-                    }
-                }
-            }
+            
         }
       }
     }
diff --git a/src/typography.css b/src/typography.css
index e69de29..123b700 100644
--- a/src/typography.css
+++ b/src/typography.css
@@ -0,0 +1,214 @@
+
+.display1 {
+    /* Display Large - Source Sans Pro/Regular 64/72 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 64px;
+    line-height: 72px; /* or 112% */
+    letter-spacing: -0.25px;
+}
+
+.display2{
+    /* Display Medium - Source Sans Pro/Regular 48/56 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 48px;
+    line-height: 56px; /* or 117% */
+}
+
+.display3{
+    /* Display Small - Source Sans Pro/Regular 40/48 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 48px; /* or 120% */
+}
+
+.h1{
+    /* Headline Large - Source Sans Pro/Regular 32/40 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 40px; /* identical to box height, or 125% */
+}
+
+.h2{
+    /* Headline Medium - Source Sans Pro/Regular 28/36 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 28px;
+    line-height: 36px; /* identical to box height, or 129% */
+}
+
+.h3{
+    /* Headline Small - Source Sans Pro/Regular 24/32 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px; /* identical to box height, or 133% */
+}
+
+.title1{
+    /* Title Large - Source Sans Pro/Medium 22/28 . +0.4 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 30px; /* identical to box height, or 125% */
+    letter-spacing: 0.5px;
+}
+
+.title2{
+    /* Title Medium - Source Sans Pro/Medium 16/24 . +0.16 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px; /* identical to box height, or 150% */
+    letter-spacing: 0.2px;
+}
+
+.title3{
+    /* Title Small - Source Sans Pro/Medium 14/20 . +0.12 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px; /* identical to box height, or 143% */
+    letter-spacing: 0.16px;
+}
+
+.label1{
+    /* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px; /* identical to box height, or 156% */
+    letter-spacing: 0.2px;
+}
+
+.label2{
+    /* Label Medium - Source Sans Pro/Medium 14/20 . +0.4 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px; /* identical to box height, or 150% */
+    letter-spacing: 0.4px;
+}
+
+.label3{
+    /* Label Small - Source Sans Pro/Medium 12/16 . +0.6 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px; /* identical to box height, or 143% */
+    letter-spacing: 0.6px;
+}
+
+.body1{
+    /* Body Large - Source Sans Pro/Regular 16/24 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px; /* identical to box height, or 150% */
+}
+
+.body2{
+    /* Body Medium - Source Sans Pro/Regular 14/20 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px; /* identical to box height, or 143% */
+    letter-spacing: 0.08px;
+}
+
+.body3{
+    /* Body Small - Source Sans Pro/Regular 12/16 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px; /* identical to box height, or 133% */
+    letter-spacing: 0.2px;
+}
+
+.overline{
+    /* Overline - Source Sans Pro/Regular 12/16 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px; /* identical to box height, or 133% */
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+}
+
+.caption{
+    /* Caption - Source Sans Pro/Regular 12/16 . 0 */
+
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px; /* identical to box height, or 133% */
+    letter-spacing: 0.5px;
+}
+
+.redacted1{
+    /* Redacted Large */
+
+    font-family: 'Redacted Script';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px; /* identical to box height, or 150% */
+}
+
+.redacted2{
+    /* Redacted Medium */
+
+    font-family: 'Redacted Script';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px; /* identical to box height, or 143% */
+    letter-spacing: 0.08px;
+}
+
+.redacted3{
+    /* Redacted Small */
+
+    font-family: 'Redacted Script';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px; /* identical to box height, or 133% */
+    letter-spacing: 0.2px;
+}
\ No newline at end of file