diff --git a/src/app.css b/src/app.css
index 35840cd..122c8d9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9,17 +9,20 @@
         @apply border-2 border-black rounded-md;
     }
 
+    .hovers-static {
+        box-shadow: 2px 2px 0 #000000;
+        -webkit-box-shadow: 2px 2px 0px 0px #000000;
+    }
+
     .hovers {
         box-shadow: 2px 2px 0 #000000;
         -webkit-box-shadow: 2px 2px 0px 0px #000000;
-        @apply transform duration-200;
     }
 
     .hovers:focus,
     .hovers:hover {
-        box-shadow: 4px 4px 0 #000000;
-        -webkit-box-shadow: 4px 4px 0px 0px #000000;
-        @apply scale-105;
+        box-shadow: 3px 3px 0 #000000;
+        -webkit-box-shadow: 3px 3px 0px 0px #000000;
     }
 }
 
diff --git a/src/lib/Foundation.svelte b/src/lib/Foundation.svelte
index e99a5d1..a0f0d9a 100644
--- a/src/lib/Foundation.svelte
+++ b/src/lib/Foundation.svelte
@@ -1,7 +1,5 @@
 <script context="module">
     export { default as Button } from "./foundation/Button.svelte";
-    export { default as ButtonTheme } from "./foundation/buttonTheme";
-
     export { default as Card } from "./foundation/Card.svelte";
     export { default as Column } from "./foundation/Column.svelte";
     export { default as Image } from "./foundation/Image.svelte";
diff --git a/src/lib/filters.ts b/src/lib/filters.ts
index 968d86b..2493421 100644
--- a/src/lib/filters.ts
+++ b/src/lib/filters.ts
@@ -1,9 +1,13 @@
-export const filter = (things, { keyword, onlyWishList }) => {
+export const filter = (things, { keyword, onlyWishList, category }) => {
     let filtered = things;
+    if (category)
+        filtered = filtered.filter(thing => thing.categories.includes(category));
     if (keyword.length > 0)
         filtered = filtered.filter(thing => thing.name.toLowerCase().includes(keyword.toLowerCase()));
     if (onlyWishList)
         filtered = filtered.filter(thing => thing.stock < 1);
+    if (!onlyWishList)
+        filtered = filtered.filter(thing => thing.stock !== 0);
 
     return filtered;
 }
diff --git a/src/lib/foundation/Button.svelte b/src/lib/foundation/Button.svelte
index 400f47f..e0c933d 100644
--- a/src/lib/foundation/Button.svelte
+++ b/src/lib/foundation/Button.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import ButtonTheme from './buttonTheme';
+    import { ButtonSize, ButtonTheme } from './button';
 
     export let text: string = 'Button';
+    export let icon: string = null;
+    export let selectedIcon: string = null;
     export let selected: boolean = false;
     export let theme: ButtonTheme = ButtonTheme.default;
+    export let size: ButtonSize = ButtonSize.normal;
+    export let flat: boolean = false;
+
+    const padding = size === ButtonSize.normal ? 'px-3 py-1' : 'px-2';
 
     const isToggled = (providedTheme: ButtonTheme) => theme === providedTheme && selected;
 
     const dispatch = createEventDispatcher();
 
     const onClick = () => {
-        if (selected) return;
         dispatch('click', `"${text}" Button clicked`);
     }
 </script>
@@ -20,10 +25,16 @@
     on:click={onClick}
     class:default={theme === ButtonTheme.default}
     class:defaultToggled={isToggled(ButtonTheme.default)}
-    class:alert={theme === ButtonTheme.alert}
-    class:alertToggled={isToggled(ButtonTheme.alert)}
-    class="px-3 py-1 rounded brutal hovers font-bold font-display outline-none">
-        {text}
+    class:primary={theme === ButtonTheme.primary}
+    class:primaryToggled={isToggled(ButtonTheme.primary)}
+    class="{padding} rounded brutal {!flat && 'hovers'} font-bold font-display outline-none">
+        {#if icon && !selected}
+            <img class="icon" src={icon} alt={text} />
+        {/if}
+        {#if selectedIcon && selected}
+            <img class="icon" src={selectedIcon} alt={text} />
+        {/if}
+        <slot />
 </button>
 
 <style lang="postcss">
@@ -32,14 +43,18 @@
     }
 
     button.defaultToggled {
-        @apply bg-yellow-400 !important;
+        @apply bg-primary !important;
+    }
+
+    button.primary {
+        @apply bg-primary;
     }
 
-    button.alert {
-        @apply bg-red-100;
+    button.primaryToggled {
+        @apply bg-primary;
     }
 
-    button.alertToggled {
-        @apply bg-red-300 !important;
+    img.icon {
+        @apply inline h-5 w-5 mr-1;
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/foundation/Card.svelte b/src/lib/foundation/Card.svelte
index 14070e1..b4670b5 100644
--- a/src/lib/foundation/Card.svelte
+++ b/src/lib/foundation/Card.svelte
@@ -1,10 +1,9 @@
 <script>
-    export let hovers = true
     export let style = "h-auto w-auto"
 </script>
 
 <div class={style}>
-    <div class:hovers class="h-full bg-white brutal overflow-hidden">
+    <div class="h-full bg-white brutal hovers-static overflow-hidden">
         <slot />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/foundation/Chooser.svelte b/src/lib/foundation/Chooser.svelte
new file mode 100644
index 0000000..104237f
--- /dev/null
+++ b/src/lib/foundation/Chooser.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    export let options = [];
+
+    let chosenOption = options[0];
+    let dropdownHidden = true;
+
+    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>{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">Choose a category&colon;</div>
+        {#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">{option}</button>
+        {/each}
+    </div>
+</div>
+
+<style lang="postcss">
+    .dropdownHidden {
+        @apply hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/foundation/Image.svelte b/src/lib/foundation/Image.svelte
index be4f452..ca0e19f 100644
--- a/src/lib/foundation/Image.svelte
+++ b/src/lib/foundation/Image.svelte
@@ -1,7 +1,9 @@
 <script>
     export let src = "";
     export let alt = "";
-    export let height = "40";
+
+    let className = "";
+    export { className as class };
 </script>
 
-<img {src} {alt} class="w-full h-{height} object-contain" />
\ No newline at end of file
+<img {src} {alt} class="object-contain {className}" />
\ No newline at end of file
diff --git a/src/lib/foundation/Text.svelte b/src/lib/foundation/Text.svelte
index 815e894..0705d52 100644
--- a/src/lib/foundation/Text.svelte
+++ b/src/lib/foundation/Text.svelte
@@ -41,7 +41,7 @@
     }
     
     div.smallauto {
-        @apply text-xs;
+        @apply text-sm;
         @apply lg:text-lg;
     }
 
diff --git a/src/lib/foundation/button.ts b/src/lib/foundation/button.ts
new file mode 100644
index 0000000..2b6a091
--- /dev/null
+++ b/src/lib/foundation/button.ts
@@ -0,0 +1,9 @@
+export enum ButtonTheme {
+    default,
+    primary
+}
+
+export enum ButtonSize {
+    normal,
+    small
+}
\ No newline at end of file
diff --git a/src/lib/foundation/buttonTheme.ts b/src/lib/foundation/buttonTheme.ts
deleted file mode 100644
index a68b498..0000000
--- a/src/lib/foundation/buttonTheme.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-enum ButtonTheme {
-    default,
-    alert
-}
-
-export default ButtonTheme;
\ No newline at end of file
diff --git a/src/lib/icons/eye-off.svg b/src/lib/icons/eye-off.svg
new file mode 100644
index 0000000..c295e68
--- /dev/null
+++ b/src/lib/icons/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/src/lib/icons/eye.svg b/src/lib/icons/eye.svg
new file mode 100644
index 0000000..c731d33
--- /dev/null
+++ b/src/lib/icons/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/src/lib/layout/Header.svelte b/src/lib/layout/Header.svelte
index 3b0913e..5132870 100644
--- a/src/lib/layout/Header.svelte
+++ b/src/lib/layout/Header.svelte
@@ -1,33 +1,22 @@
-<script>
-    import { Row, Title } from "$lib/Foundation.svelte";
-    
-    export let title = null;
-</script>
-
-<header class="w-full p-4 flex flex-col space-y-8 justify-center bg-long-city bg-center bg-cover border-b-2 border-bg">
+<header class="w-full p-4 flex flex-col space-y-8 justify-center">
     <div class="grid grid-cols-3">
         <div class="flex flex-row justify-start">
             <div>
                 <a href="https://pvdthings.coop" class="flex flex-row items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 lg:w-12 lg:h-12" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <polyline points="15 6 9 12 15 18" />
                     </svg>
-                    <div class="text-xl lg:text-2xl font-bold font-display hover:underline">BACK</div>
+                    <div class="text-xl font-bold font-display hover:underline">HOME</div>
                 </a>
             </div>
         </div>
-        <div class="flex flex-row justify-center">
+        <div class="flex flex-row justify-center content-center">
             <a href="https://pvdthings.coop">
-                <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="mt-2 h-14 md:h-20 lg:h-24"/>
+                <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="h-16 lg:h-20"/>
             </a>
         </div>
         <div class="flex flex-row justify-end"></div>
     </div>
-    <Row center><slot /></Row>
-    {#if title}
-        <Row center><Title bold caps>{title}</Title></Row>
-    {:else}
-        <h1 hidden>PVD Things</h1>
-    {/if}
+    <h1 hidden>PVD Things</h1>
 </header>
\ No newline at end of file
diff --git a/src/lib/things/Scroller.svelte b/src/lib/things/Scroller.svelte
index 4d5fc91..4cb7d7f 100644
--- a/src/lib/things/Scroller.svelte
+++ b/src/lib/things/Scroller.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
     import Thing from "./Thing.svelte";
 
+    export let wrap = false;
+    const style = wrap ? "grid grid-cols-3 md:grid-cols-5 gap-x-4 gap-y-6 place-content-between" : "flex flex-row overflow-auto";
+
     export let things = [];
     things = things.sort((a, b) => b.stock - a.stock);
 </script>
 
-<div class="flex flex-row overflow-auto pl-4 py-7 lg:flex-wrap">
+<div class={style}>
     {#each things as thing}
         <Thing {thing} />
     {/each}
diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte
index 3c176a7..e3ba325 100644
--- a/src/lib/things/Thing.svelte
+++ b/src/lib/things/Thing.svelte
@@ -2,18 +2,25 @@
 	import { Card, Image, Text } from "$lib/Foundation.svelte";
 
     export let thing;
+
+    let className = "";
+    export { className as class };
+
+    const donateURL = `https://airtable.com/shrwMSrzvSLpQgQWC?prefill_Description=${encodeURIComponent(thing.name)}`;
 </script>
 
-<div class="pr-3 lg:pr-6 lg:pb-6 flex flex-col">
-    <Card style="h-24 w-24 lg:h-48 lg:w-48">
-        <Image height="full" src={thing.image} alt={thing.name} />
+<div class="flex flex-col {className}">
+    <Card>
+        <Image src={thing.image} alt={thing.name} class="aspect-square" />
     </Card>
-    <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 justify-between flex-grow">
+    <div class="pl-1 pt-2 flex flex-col gap-2 justify-between flex-grow">
         <Text display bold smallauto>{thing.name}</Text>
         <div class="flex flex-col lg:flex-row gap-2">
-            <div class="px-2 py-1 rounded bg-black">
-                <Text body small light>{thing.stock > 0 ? `${thing.stock} in stock` : 'Wish List'}</Text>
-            </div>
+            {#if thing.stock > 0}
+                <div class="px-2 py-1 rounded bg-green-300 w-max font-medium text-sm">Available</div>
+            {:else}
+                <a class="px-2 py-1 rounded brutal hover:hovers-static bg-primary w-max font-bold font-display text-sm" href={donateURL} target="_blank" rel="noreferrer">Donate</a>
+            {/if}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/things/Things.svelte b/src/lib/things/Things.svelte
index abb2d06..7a9e8d0 100644
--- a/src/lib/things/Things.svelte
+++ b/src/lib/things/Things.svelte
@@ -4,22 +4,25 @@
 
     export let things;
     export let categories;
+    export let shownCategory;
 </script>
 
 <div>
   {#key things}
-    {#each categories as category}
-      {@const filteredThings = filterByCategory(things, category)}
-      {#if filteredThings.length > 0}
-        <div>
-          <div
-            class="pl-4 text-4xl lg:text-5xl font-display font-bold text-black"
-          >
-            {category}
+    {#if shownCategory}
+      <Scroller things={filterByCategory(things, shownCategory)} wrap={true} />
+    {:else}
+      {#each categories as category}
+        {@const filteredThings = filterByCategory(things, category)}
+        {#if filteredThings.length > 0}
+          <div>
+            <div class="pl-4 text-4xl lg:text-5xl font-display font-bold text-black">
+              {category}
+            </div>
+            <Scroller things={filteredThings} />
           </div>
-          <Scroller things={filteredThings} />
-        </div>
-      {/if}
-    {/each}
+        {/if}
+      {/each}
+    {/if}
   {/key}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 71a18c3..f14017e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,50 +1,69 @@
 <script>
+	import { onMount } from "svelte";
     import { filter } from "$lib/filters";
     import Things from "$lib/things/Things.svelte";
-    import { Button, ButtonTheme, TextInput } from "$lib/Foundation.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";
 
     export let data;
 
     let shownThings = data.things;
+    let shownCategory = "DIY";
     let searchText = "";
     let showingOnlyWishList = false;
 
+    onMount(() => filterThings());
+
     const filterThings = () => {
         shownThings = filter(data.things, {
             keyword: searchText,
-            onlyWishList: showingOnlyWishList
+            onlyWishList: showingOnlyWishList,
+            category: shownCategory
         });
     }
 
-    const showAll = () => {
-        showingOnlyWishList = false;
+    const filterThingsByCategory = (event) => {
+        shownCategory = event.detail;
         filterThings();
     }
 
-    const showOnlyWishList = () => {
-        showingOnlyWishList = true;
+    const toggleWishList = () => {
+        showingOnlyWishList = !showingOnlyWishList;
         filterThings();
     }
 </script>
 
-<div class="pt-4 lg:w-3/4 mx-auto">
+<div class="mx-3 lg:mx-auto lg:w-3/4">
     {#if !data}
         <LoadingIndicator />
     {:else}
-        <div class="flex flex-col md:flex-row flex-wrap px-4 mb-8 gap-4">
+        <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="Wish List" 
+                        selected={showingOnlyWishList}>
+                        Wish List
+                    </Button>
+                {/key}
+            </div>
             <TextInput
                 bind:value={searchText}
                 on:input={filterThings}
                 placeholder="Search..."
             />
-            <div class="flex flex-row flex-wrap gap-4">
-                {#key showingOnlyWishList}
-                    <Button on:click={showAll} theme={ButtonTheme.default} text="All" selected={!showingOnlyWishList} />
-                    <Button on:click={showOnlyWishList} theme={ButtonTheme.default} text="Wish List" selected={showingOnlyWishList} />
-                {/key}
-            </div>
         </div>
-        <Things things={shownThings} categories={data.categories} />
+        <div class="mb-8">
+            <Things things={shownThings} categories={data.categories} {shownCategory} />
+        </div>
     {/if}
 </div>
\ No newline at end of file