diff --git a/src/app.css b/src/app.css
index 122c8d9..57f9aae 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,6 +19,7 @@
         -webkit-box-shadow: 2px 2px 0px 0px #000000;
     }
 
+    .hovers-above,
     .hovers:focus,
     .hovers:hover {
         box-shadow: 3px 3px 0 #000000;
diff --git a/src/lib/Foundation.svelte b/src/lib/Foundation.svelte
deleted file mode 100644
index e66d0bb..0000000
--- a/src/lib/Foundation.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script context="module">
-    export { default as Button } from "./foundation/Button.svelte";
-    export { default as Column } from "./foundation/Column.svelte";
-    export { default as Row } from "./foundation/Row.svelte";
-    export { default as TextInput } from "./foundation/TextInput.svelte";
-    export { default as Title } from "./foundation/Title.svelte";
-</script>
\ No newline at end of file
diff --git a/src/lib/foundation/Button.svelte b/src/lib/components/Button/Button.svelte
similarity index 96%
rename from src/lib/foundation/Button.svelte
rename to src/lib/components/Button/Button.svelte
index e0c933d..b1e2512 100644
--- a/src/lib/foundation/Button.svelte
+++ b/src/lib/components/Button/Button.svelte
@@ -37,9 +37,9 @@
         <slot />
 </button>
 
-<style lang="postcss">
+<style>
     button.default {
-        @apply bg-indigo-100;
+        @apply bg-indigo-100 hover:bg-indigo-50;
     }
 
     button.defaultToggled {
diff --git a/src/lib/foundation/button.ts b/src/lib/components/Button/button.ts
similarity index 100%
rename from src/lib/foundation/button.ts
rename to src/lib/components/Button/button.ts
diff --git a/src/lib/components/Button/index.ts b/src/lib/components/Button/index.ts
new file mode 100644
index 0000000..5bf207b
--- /dev/null
+++ b/src/lib/components/Button/index.ts
@@ -0,0 +1,2 @@
+export { default as Button } from "./Button.svelte";
+export * from "./button";
\ No newline at end of file
diff --git a/src/lib/components/Chooser/Chooser.css b/src/lib/components/Chooser/Chooser.css
new file mode 100644
index 0000000..c568e0c
--- /dev/null
+++ b/src/lib/components/Chooser/Chooser.css
@@ -0,0 +1,3 @@
+button.chooser-button {
+  @apply px-3 py-1 font-bold font-display text-left outline-none;
+}
\ No newline at end of file
diff --git a/src/lib/components/Chooser/Chooser.svelte b/src/lib/components/Chooser/Chooser.svelte
new file mode 100644
index 0000000..fd99008
--- /dev/null
+++ b/src/lib/components/Chooser/Chooser.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import "./Chooser.css";
+	import { createEventDispatcher } from 'svelte';
+	import { t, locale } from '$lib/language/translate';
+	import ChevronIcon from "$lib/icons/chevron.svg";
+	import ChooserBody from './ChooserBody.svelte';
+
+	export let options = [];
+
+	let chosenOption = options[0];
+	let dropdownHidden = true;
+	let innerWidth: number;
+
+	$: isEnglish = $locale === 'en';
+
+	const dispatch = createEventDispatcher();
+
+	const toggleDropdown = () => {
+		dropdownHidden = !dropdownHidden;
+
+		if (innerWidth < 768) {
+			document.body.classList.toggle('overflow-hidden');
+		} else {
+			document.body.classList.remove('overflow-hidden');
+		}
+	};
+
+	const optionChosen = (option) => {
+		chosenOption = option;
+		toggleDropdown();
+		dispatch('chosen', option);
+	};
+</script>
+
+<svelte:window bind:innerWidth on:click={() => (dropdownHidden = true)} />
+
+<div class="relative h-11" on:click|stopPropagation={() => {}} on:keypress={() => {}}>
+	<button
+		on:click={toggleDropdown}
+		class="chooser-button bg-indigo-100 hover:bg-indigo-50 h-full w-48 brutal hovers"
+	>
+		<img
+			class="inline mr-1"
+			src={ChevronIcon}
+			alt="Dropdown"
+		/>
+		<span>{isEnglish ? chosenOption : $t(chosenOption)}</span>
+	</button>
+	<ChooserBody
+		hidden={dropdownHidden}
+		title={$t('Category')}
+		{chosenOption}
+		{options}
+		onOptionClick={optionChosen}
+		onClose={toggleDropdown}
+	/>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/Chooser/ChooserBody.svelte b/src/lib/components/Chooser/ChooserBody.svelte
new file mode 100644
index 0000000..f9c8c02
--- /dev/null
+++ b/src/lib/components/Chooser/ChooserBody.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import "./Chooser.css";
+  import ChevronIcon from "$lib/icons/chevron.svg";
+  import CloseIcon from '$lib/icons/x-mark.svg';
+	import ChooserItem from './ChooserItem.svelte';
+	import { t } from "$lib/language/translate";
+
+  export let title: string;
+  export let chosenOption: string;
+  export let options: string[];
+  export let hidden: boolean;
+  export let onOptionClick: (option: string) => void;
+  export let onClose: () => void;
+</script>
+
+<div
+  class:body-hidden={hidden}
+  class="fixed top-0 left-0 w-full h-full overflow-hidden md:h-fit md:absolute bg-indigo-50 md:brutal md:hovers-above md:rounded-md flex flex-col z-50"
+>
+  <div class="md:hidden">
+    <div class="p-4 bg-primary text-2xl font-bold text-left sticky top-0">
+      {title}
+      <button class="float-right" on:click={onClose}>
+        <img class="w-[30px] h-[30px]" src={CloseIcon} alt="close" />
+      </button>
+    </div>
+    <hr class="border-black border-opacity-20" />
+  </div>
+  <button
+		on:click={onClose}
+		class="chooser-button hidden md:block bg-primary h-11 w-full border-b-2 border-black"
+	>
+    <img
+      class="inline rotate-180 mr-1"
+      src={ChevronIcon}
+      alt="Dropdown"
+    />
+		<span>{$t(chosenOption)}</span>
+	</button>
+  <div class="flex flex-col overflow-y-scroll">
+    {#each options as option}
+      <hr />
+      <ChooserItem
+        on:click={() => onOptionClick(option)}
+        selected={chosenOption == option}
+      >
+        {$t(option)}
+      </ChooserItem>
+    {/each}
+  </div>
+</div>
+
+<style lang="postcss">
+	.body-hidden {
+		@apply hidden;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Chooser/ChooserItem.svelte b/src/lib/components/Chooser/ChooserItem.svelte
new file mode 100644
index 0000000..558b84f
--- /dev/null
+++ b/src/lib/components/Chooser/ChooserItem.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import CheckIcon from "$lib/icons/check.svg";
+
+  export let selected: boolean;
+</script>
+
+<button
+  on:click
+  class:selected
+  class="text-2xl md:text-lg p-4 md:py-2 text-left hover:bg-gray-300 align-middle"
+  >
+    <slot />
+    {#if selected}
+      <img class="inline-block float-right mt-1 w-[20px] h-[20px]" src={CheckIcon} alt="Selected" />
+    {/if}
+  </button
+>
\ No newline at end of file
diff --git a/src/lib/components/Chooser/index.ts b/src/lib/components/Chooser/index.ts
new file mode 100644
index 0000000..64760d6
--- /dev/null
+++ b/src/lib/components/Chooser/index.ts
@@ -0,0 +1 @@
+export { default as Chooser } from "./Chooser.svelte";
\ No newline at end of file
diff --git a/src/lib/foundation/Column.svelte b/src/lib/components/Column.svelte
similarity index 100%
rename from src/lib/foundation/Column.svelte
rename to src/lib/components/Column.svelte
diff --git a/src/lib/Head.svelte b/src/lib/components/Head.svelte
similarity index 100%
rename from src/lib/Head.svelte
rename to src/lib/components/Head.svelte
diff --git a/src/lib/LoadingIndicator.svelte b/src/lib/components/LoadingIndicator.svelte
similarity index 85%
rename from src/lib/LoadingIndicator.svelte
rename to src/lib/components/LoadingIndicator.svelte
index 533380a..f2cc2c0 100644
--- a/src/lib/LoadingIndicator.svelte
+++ b/src/lib/components/LoadingIndicator.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Row } from "$lib/Foundation.svelte";
+    import Row from "./Row.svelte";
 </script>
 
 <div class="fixed z-50 h-screen w-screen inset-0 bg-black flex flex-col gap-4 justify-center">
diff --git a/src/lib/foundation/Row.svelte b/src/lib/components/Row.svelte
similarity index 100%
rename from src/lib/foundation/Row.svelte
rename to src/lib/components/Row.svelte
diff --git a/src/lib/foundation/TextInput.svelte b/src/lib/components/TextInput.svelte
similarity index 87%
rename from src/lib/foundation/TextInput.svelte
rename to src/lib/components/TextInput.svelte
index a89b626..5f780f9 100644
--- a/src/lib/foundation/TextInput.svelte
+++ b/src/lib/components/TextInput.svelte
@@ -20,7 +20,7 @@
     on:change
     on:keyup={keyReleased}
     class:invalid
-    class="px-4 py-2 brutal hovers outline-none {customClass}"
+    class="w-full px-4 py-2 pl-10 brutal hovers outline-none {customClass}"
 />
 
 <style lang="postcss">
diff --git a/src/lib/foundation/Title.svelte b/src/lib/components/Title.svelte
similarity index 100%
rename from src/lib/foundation/Title.svelte
rename to src/lib/components/Title.svelte
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..1a9fd88
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1,8 @@
+export { default as Button } from "./Button/Button.svelte";
+export { Chooser } from "./Chooser";
+export { default as Column } from "./Column.svelte";
+export { default as Head } from "./Head.svelte";
+export { default as LoadingIndicator } from "./LoadingIndicator.svelte";
+export { default as Row } from "./Row.svelte";
+export { default as TextInput } from "./TextInput.svelte";
+export { default as Title } from "./Title.svelte";
\ No newline at end of file
diff --git a/src/lib/layout/Footer.svelte b/src/lib/components/layout/Footer.svelte
similarity index 98%
rename from src/lib/layout/Footer.svelte
rename to src/lib/components/layout/Footer.svelte
index f7a36bf..9f0006c 100644
--- a/src/lib/layout/Footer.svelte
+++ b/src/lib/components/layout/Footer.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Column, Row } from "$lib/Foundation.svelte";
+	import { Column, Row } from "$lib/components";
 </script>
 
 <footer class="bg-bg py-10 relative z-40">
diff --git a/src/lib/layout/Header.svelte b/src/lib/components/layout/Header.svelte
similarity index 100%
rename from src/lib/layout/Header.svelte
rename to src/lib/components/layout/Header.svelte
diff --git a/src/lib/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte
similarity index 100%
rename from src/lib/layout/Layout.svelte
rename to src/lib/components/layout/Layout.svelte
diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/components/things/BorrowModal/BorrowModal.svelte
similarity index 90%
rename from src/lib/things/BorrowModal.svelte
rename to src/lib/components/things/BorrowModal/BorrowModal.svelte
index a049b74..6d6f65c 100644
--- a/src/lib/things/BorrowModal.svelte
+++ b/src/lib/components/things/BorrowModal/BorrowModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Button from "$lib/foundation/Button.svelte";
-	import { ButtonTheme } from "$lib/foundation/button";
-  import { showBorrowModal } from "./borrowModalStore";
+  import { Button } from "$lib/components";
+	import { ButtonTheme } from "$lib/components/Button/button";
+  import { showBorrowModal } from "./stores";
   import CloseIcon from "$lib/icons/x-mark.svg";
 	import { onDestroy } from "svelte";
 	import { t } from "$lib/language/translate";
diff --git a/src/lib/components/things/BorrowModal/index.ts b/src/lib/components/things/BorrowModal/index.ts
new file mode 100644
index 0000000..ebd033d
--- /dev/null
+++ b/src/lib/components/things/BorrowModal/index.ts
@@ -0,0 +1,2 @@
+export { default as BorrowModal } from './BorrowModal.svelte';
+export * from './stores';
\ No newline at end of file
diff --git a/src/lib/things/borrowModalStore.ts b/src/lib/components/things/BorrowModal/stores.ts
similarity index 100%
rename from src/lib/things/borrowModalStore.ts
rename to src/lib/components/things/BorrowModal/stores.ts
diff --git a/src/lib/things/Scroller.svelte b/src/lib/components/things/Scroller.svelte
similarity index 100%
rename from src/lib/things/Scroller.svelte
rename to src/lib/components/things/Scroller.svelte
diff --git a/src/lib/things/Thing.svelte b/src/lib/components/things/Thing.svelte
similarity index 97%
rename from src/lib/things/Thing.svelte
rename to src/lib/components/things/Thing.svelte
index 3d10fe9..d50d96e 100644
--- a/src/lib/things/Thing.svelte
+++ b/src/lib/components/things/Thing.svelte
@@ -1,7 +1,7 @@
 <script>
 	import BoxIcon from '$lib/icons/box.svg';
 	import { t, locale } from '$lib/language/translate';
-	import { showBorrowModal } from './borrowModalStore';
+	import { showBorrowModal } from './BorrowModal';
 
 	export let thing;
 
diff --git a/src/lib/things/Things.svelte b/src/lib/components/things/Things.svelte
similarity index 92%
rename from src/lib/things/Things.svelte
rename to src/lib/components/things/Things.svelte
index 7a9e8d0..b2d5f3d 100644
--- a/src/lib/things/Things.svelte
+++ b/src/lib/components/things/Things.svelte
@@ -1,6 +1,6 @@
 <script>
     import Scroller from "./Scroller.svelte";
-    import { filterByCategory } from "$lib/filters";
+    import { filterByCategory } from "$lib/utils/filters";
 
     export let things;
     export let categories;
diff --git a/src/lib/foundation/Chooser.svelte b/src/lib/foundation/Chooser.svelte
deleted file mode 100644
index 36473fe..0000000
--- a/src/lib/foundation/Chooser.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from "svelte";
-    import { t, locale } from "$lib/language/translate";
-    import { defaultFilterCategory } from "../filters";
-
-    export let options = [];
-
-    let chosenOption = defaultFilterCategory;
-    let dropdownHidden = true;
-
-    $: isEnglish = $locale === "en";
-
-    const dispatch = createEventDispatcher();
-
-    const toggleDropdown = () => {
-        dropdownHidden = !dropdownHidden;
-    }
-
-    const optionChosen = (option) => {
-        chosenOption = option;
-        toggleDropdown();
-        dispatch("chosen", option);
-    }
-</script>
-
-<svelte:window on:click={() => dropdownHidden = true} />
-
-<div class="relative h-11" on:click|stopPropagation={() => {}} on:keypress={() => {}}>
-    <button on:click={toggleDropdown} class="{ dropdownHidden ? 'bg-indigo-100 hover:bg-indigo-50' : 'bg-primary' } px-3 py-1 h-full w-44 rounded brutal hovers font-bold font-display text-left outline-none">
-        <span class="mr-1">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="inline"><polyline points="6 9 12 15 18 9"></polyline></svg>
-        </span>
-        <span>{isEnglish ? chosenOption : $t(chosenOption)}</span>
-    </button>
-    <div class:dropdownHidden class="fixed top-0 left-0 w-full h-full overflow-y-scroll md:h-fit md:absolute md:top-14 bg-indigo-50 md:brutal md:hovers-static p-4 md:rounded-md flex flex-col gap-y-4 md:gap-y-2 z-50">
-        <div class="text-xl font-bold md:hidden">{$t('Chooser.CategoryPrompt')}</div>
-            <button on:click={() => optionChosen(defaultFilterCategory)} class="text-2xl md:text-lg text-left active:underline hover:underline hover:underline-offset-2 hover:decoration-2">{isEnglish ? defaultFilterCategory : $t(defaultFilterCategory)}</button>
-        {#each options as option}
-            <button on:click={() => optionChosen(option)} class="text-2xl md:text-lg text-left active:underline hover:underline hover:underline-offset-2 hover:decoration-2">{isEnglish ? option : $t(option)}</button>
-        {/each}
-    </div>
-</div>
-
-<style lang="postcss">
-    .dropdownHidden {
-        @apply hidden;
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/icons/check.svg b/src/lib/icons/check.svg
new file mode 100644
index 0000000..66c0f29
--- /dev/null
+++ b/src/lib/icons/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+</svg>
diff --git a/src/lib/icons/chevron.svg b/src/lib/icons/chevron.svg
new file mode 100644
index 0000000..5de9afe
--- /dev/null
+++ b/src/lib/icons/chevron.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="3"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  ><polyline points="6 9 12 15 18 9" /></svg
+>
\ No newline at end of file
diff --git a/src/lib/icons/magnifying-glass.svg b/src/lib/icons/magnifying-glass.svg
new file mode 100644
index 0000000..19b91c5
--- /dev/null
+++ b/src/lib/icons/magnifying-glass.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+</svg>
\ No newline at end of file
diff --git a/src/lib/language/translations.ts b/src/lib/language/translations.ts
index bcf827c..b53277d 100644
--- a/src/lib/language/translations.ts
+++ b/src/lib/language/translations.ts
@@ -2,13 +2,27 @@ export default {
     en: {
         "Button.Home": "Home",
         "Button.WishList": "Wish List",
-        "Chooser.CategoryPrompt": "Choose a category:",
+        "Category": "Category",
         "Input.Search": "Search...",
         "No Results": "No Results",
         "Donate": "Donate",
         "Click to Donate": "Click to Donate",
         "Available": "Available",
         "Unavailable": "Unavailable",
+        "All": "All",
+        "DIY": "DIY",
+        "Media": "Media",
+        "Games": "Games",
+        "Outdoors": "Outdoors",
+        "Sports": "Sports",
+        "Entertainment": "Entertainment",
+        "Yard": "Yard",
+        "Cleaning": "Cleaning",
+        "Cooking": "Cooking",
+        "Crafts": "Crafts",
+        "Pet": "Pet",
+        "Automotive": "Automotive",
+        "Health": "Health",
         "How to Borrow": "How to Borrow",
         "How to Borrow.Step1": "Purchase a PVD Things membership and pay annual dues.",
         "How to Borrow.Step2": "Visit us at 12 Library Court in Providence.",
@@ -22,7 +36,7 @@ export default {
         "Button.Home": "Inicio",
         "Button.Donate": "Donar",
         "Button.WishList": "Donaciones",
-        "Chooser.CategoryPrompt": "Elija una categoría:",
+        "Category": "Categoría",
         "Input.Search": "Buscar...",
         "No Results": "No hay resultados",
         "Donate": "Donar",
diff --git a/src/lib/stores/catalog.ts b/src/lib/stores/catalog.ts
new file mode 100644
index 0000000..ea227cd
--- /dev/null
+++ b/src/lib/stores/catalog.ts
@@ -0,0 +1,23 @@
+import { defaultFilterCategory, filter } from "$lib/utils/filters";
+import { derived, writable } from "svelte/store";
+
+export const categoryFilter = writable<string>(defaultFilterCategory);
+
+export const searchFilter = writable<string>('');
+
+export const wishListFilter = writable<boolean>(false);
+
+export const things = writable<[]>(undefined);
+
+export const filteredThings = derived(
+  [things, categoryFilter, searchFilter, wishListFilter],
+  ([$things, $categoryFilter, $searchFilter, $wishListFilter]) => {
+    return filter($things, {
+			keyword: $searchFilter,
+			onlyWishList: $wishListFilter,
+			category: $categoryFilter
+		});
+  }
+);
+
+export const categories = writable<[]>(undefined);
\ No newline at end of file
diff --git a/src/lib/filters.ts b/src/lib/utils/filters.ts
similarity index 96%
rename from src/lib/filters.ts
rename to src/lib/utils/filters.ts
index 60619a6..f67c824 100644
--- a/src/lib/filters.ts
+++ b/src/lib/utils/filters.ts
@@ -2,7 +2,7 @@
 export const defaultFilterCategory = "All";
 
 export const filter = (things, { keyword, onlyWishList, category }) => {
-    let filtered = things;
+    let filtered = things ?? [];
     
     if (category && category.toLowerCase() !== "all")
         filtered = filtered.filter(thing => thing.categories.includes(category));
diff --git a/src/lib/shuffle.ts b/src/lib/utils/shuffle.ts
similarity index 100%
rename from src/lib/shuffle.ts
rename to src/lib/utils/shuffle.ts
diff --git a/src/lib/views/CategoryChooserView.svelte b/src/lib/views/CategoryChooserView.svelte
new file mode 100644
index 0000000..6f88d19
--- /dev/null
+++ b/src/lib/views/CategoryChooserView.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { Chooser } from "$lib/components";
+	import { categories, categoryFilter } from "$lib/stores/catalog";
+
+  const filterThingsByCategory = (event) => {
+    $categoryFilter = event.detail;
+	};
+</script>
+
+<Chooser on:chosen={filterThingsByCategory} options={$categories} />
\ No newline at end of file
diff --git a/src/lib/views/SearchInputView.svelte b/src/lib/views/SearchInputView.svelte
new file mode 100644
index 0000000..ec599d5
--- /dev/null
+++ b/src/lib/views/SearchInputView.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { TextInput } from '$lib/components';
+	import { t } from '$lib/language/translate';
+	import { searchFilter } from '$lib/stores/catalog';
+	import XMarkIcon from '$lib/icons/x-mark.svg';
+	import SearchIcon from '$lib/icons/magnifying-glass.svg';
+
+	const clearSearch = () => {
+		$searchFilter = '';
+	};
+</script>
+
+<div class="relative">
+	<img src={SearchIcon} alt="searchIcon" class="w-6 h-6 absolute top-2.5 left-2 transform" />
+	<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+	{#if $searchFilter.length > 0}
+		<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
+			<img src={XMarkIcon} alt="searchIcon" class="w-5 h-5 absolute top-1.75 left-2.25 transform" />
+		</button>
+	{/if}
+</div>
diff --git a/src/lib/views/ThingsView.svelte b/src/lib/views/ThingsView.svelte
new file mode 100644
index 0000000..dadc050
--- /dev/null
+++ b/src/lib/views/ThingsView.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { categories, categoryFilter, filteredThings } from '$lib/stores/catalog';
+	import Things from '$lib/components/things/Things.svelte';
+</script>
+
+<Things things={$filteredThings} categories={$categories} shownCategory={$categoryFilter} />
diff --git a/src/lib/views/WishListButtonView.svelte b/src/lib/views/WishListButtonView.svelte
new file mode 100644
index 0000000..7dc9cf4
--- /dev/null
+++ b/src/lib/views/WishListButtonView.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { Button } from "$lib/components";
+	import { ButtonTheme } from "$lib/components/Button";
+  import EyeOffIcon from '$lib/icons/eye-off.svg';
+	import EyeIcon from '$lib/icons/eye.svg';
+	import { t } from "$lib/language/translate";
+	import { wishListFilter } from "$lib/stores/catalog";
+
+  let innerWidth;
+  $: showIcon = innerWidth > 376;
+
+  const toggleWishList = () => {
+    $wishListFilter = !$wishListFilter;
+	};
+</script>
+
+<svelte:window bind:innerWidth />
+
+{#key $wishListFilter}
+  <Button
+    on:click={toggleWishList}
+    icon={showIcon ? EyeOffIcon : undefined}
+    selectedIcon={showIcon ? EyeIcon : undefined}
+    theme={ButtonTheme.default}
+    text={$t('Button.WishList')}
+    selected={$wishListFilter}
+  >
+    {$t('Button.WishList')}
+  </Button>
+{/key}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 560f643..5a6d8bb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script>
     import "../app.css";
-    import Head from "$lib/Head.svelte";
-    import Layout from "$lib/layout/Layout.svelte";
+    import { Head } from "$lib/components";
+    import Layout from "$lib/components/layout/Layout.svelte";
 </script>
 
 <Head 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ef27fd9..b85b09e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,82 +1,43 @@
 <script>
-	import { onMount } from "svelte";
-    import { defaultFilterCategory, filter } from "$lib/filters";
-    import Things from "$lib/things/Things.svelte";
-    import { Button, TextInput } from "$lib/Foundation.svelte";
-    import { ButtonTheme } from "$lib/foundation/button";
-    import LoadingIndicator from "$lib/LoadingIndicator.svelte";
-	import Chooser from "$lib/foundation/Chooser.svelte";
-    import EyeOffIcon from "$lib/icons/eye-off.svg";
-    import EyeIcon from "$lib/icons/eye.svg";
-    import { t } from "$lib/language/translate";
-    import { goto } from '$app/navigation';
-	import BorrowModal from "$lib/things/BorrowModal.svelte";
+	import { onMount } from 'svelte';
+	import { LoadingIndicator, TextInput } from '$lib/components';
+	import { t } from '$lib/language/translate';
+	import { BorrowModal } from '$lib/components/things/BorrowModal';
+	import { categories, filteredThings, searchFilter, things, wishListFilter } from '$lib/stores/catalog';
+	import ThingsView from '$lib/views/ThingsView.svelte';
+	import WishListButtonView from '$lib/views/WishListButtonView.svelte';
+	import CategoryChooserView from '$lib/views/CategoryChooserView.svelte';
+	import SearchInputView from '$lib/views/SearchInputView.svelte';
 
-    export let data;
+	export let data;
 
-    let shownThings = data.things;
-    let shownCategory = defaultFilterCategory;
-    let searchText = "";
-    let showingOnlyWishList = false;
+	$things = data.things;
+	$categories = data.categories;
 
-    onMount(() => {
-        const urlParams = new URLSearchParams(window.location.search);
-        showingOnlyWishList = urlParams.get('showWishList') === 'true';
-        filterThings();
-     });
-
-    const filterThings = () => {
-        shownThings = filter(data.things, {
-            keyword: searchText,
-            onlyWishList: showingOnlyWishList,
-            category: shownCategory
-        });
-    }
-
-    const filterThingsByCategory = (event) => {
-        shownCategory = event.detail;
-        filterThings();
-    }
-
-    const toggleWishList = () => {
-        showingOnlyWishList = !showingOnlyWishList;
-        goto(`?showWishList=${showingOnlyWishList}`);
-        filterThings();
-    }
+	onMount(() => {
+		const urlParams = new URLSearchParams(window.location.search);
+		$wishListFilter = urlParams.get('showWishList') === 'true';
+	});
 </script>
 
 <div class="mx-3 lg:mx-auto lg:w-3/4">
-    {#if !data}
-        <LoadingIndicator />
-    {:else}
-        <BorrowModal />
-        <div class="flex flex-col-reverse mb-8 gap-3 md:h-11 md:w-full md:flex-row md:justify-between">
-            <div class="flex flex-row gap-4 justify-between md:justify-start">
-                <Chooser on:chosen={filterThingsByCategory} options={data.categories} />
-                {#key showingOnlyWishList}
-                    <Button
-                        icon={EyeOffIcon} 
-                        selectedIcon={EyeIcon} 
-                        on:click={toggleWishList} 
-                        theme={ButtonTheme.default} 
-                        text={$t("Button.WishList")}
-                        selected={showingOnlyWishList}>
-                        {$t("Button.WishList")}
-                    </Button>
-                {/key}
-            </div>
-            <TextInput
-                bind:value={searchText}
-                on:input={filterThings}
-                placeholder={$t("Input.Search")}
-            />
-        </div>
-        <div class="mb-8">
-            {#if shownThings.length > 0}
-                <Things things={shownThings} categories={data.categories} {shownCategory} />
-            {:else}
-                <div class="text-lg text-center font-bold uppercase">{$t("No Results")}</div>
-            {/if}
-        </div>
-    {/if}
-</div>
\ No newline at end of file
+	{#if !data}
+		<LoadingIndicator />
+	{:else}
+		<BorrowModal />
+		<div class="flex flex-col-reverse mb-8 gap-3 md:h-11 md:w-full md:flex-row md:justify-between">
+			<div class="flex flex-row gap-4 justify-between md:justify-start">
+				<CategoryChooserView />
+				<WishListButtonView />
+			</div>
+				<SearchInputView />
+		</div>
+		<div class="mb-8">
+			{#if $filteredThings.length > 0}
+				<ThingsView />
+			{:else}
+				<div class="text-lg text-center font-bold uppercase">{$t('No Results')}</div>
+			{/if}
+		</div>
+	{/if}
+</div>