diff --git a/package-lock.json b/package-lock.json
index bc0adbd..cc7d28d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-	"name": "things-app",
-	"version": "0.0.1",
+	"name": "things-catalog-app",
+	"version": "0.10.2",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "things-app",
-			"version": "0.0.1",
+			"name": "things-catalog-app",
+			"version": "0.10.2",
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
 				"@sveltejs/adapter-netlify": "^1.0.0-next.84",
@@ -14,6 +14,7 @@
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
 				"autoprefixer": "^10.4.13",
+				"daisyui": "^3.5.1",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte3": "^4.0.0",
@@ -846,6 +847,12 @@
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"dev": true
 		},
+		"node_modules/colord": {
+			"version": "2.9.3",
+			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+			"dev": true
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -875,6 +882,16 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/css-selector-tokenizer": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+			"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"fastparse": "^1.1.2"
+			}
+		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -887,6 +904,26 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/daisyui": {
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.5.1.tgz",
+			"integrity": "sha512-7GG+9QXnr2qQMCqnyFU8TxpaOYJigXiEtmzoivmiiZZHvxqIwYdaMAkgivqTVxEgy3Hot3m1suzZjmt1zUrvmA==",
+			"dev": true,
+			"dependencies": {
+				"colord": "^2.9",
+				"css-selector-tokenizer": "^0.8",
+				"postcss": "^8",
+				"postcss-js": "^4",
+				"tailwindcss": "^3"
+			},
+			"engines": {
+				"node": ">=16.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/daisyui"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1658,6 +1695,12 @@
 			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
 			"dev": true
 		},
+		"node_modules/fastparse": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+			"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+			"dev": true
+		},
 		"node_modules/fastq": {
 			"version": "1.13.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -3918,6 +3961,12 @@
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"dev": true
 		},
+		"colord": {
+			"version": "2.9.3",
+			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+			"dev": true
+		},
 		"concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3941,12 +3990,35 @@
 				"which": "^2.0.1"
 			}
 		},
+		"css-selector-tokenizer": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+			"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+			"dev": true,
+			"requires": {
+				"cssesc": "^3.0.0",
+				"fastparse": "^1.1.2"
+			}
+		},
 		"cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 			"dev": true
 		},
+		"daisyui": {
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.5.1.tgz",
+			"integrity": "sha512-7GG+9QXnr2qQMCqnyFU8TxpaOYJigXiEtmzoivmiiZZHvxqIwYdaMAkgivqTVxEgy3Hot3m1suzZjmt1zUrvmA==",
+			"dev": true,
+			"requires": {
+				"colord": "^2.9",
+				"css-selector-tokenizer": "^0.8",
+				"postcss": "^8",
+				"postcss-js": "^4",
+				"tailwindcss": "^3"
+			}
+		},
 		"debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4432,6 +4504,12 @@
 			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
 			"dev": true
 		},
+		"fastparse": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+			"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+			"dev": true
+		},
 		"fastq": {
 			"version": "1.13.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
diff --git a/package.json b/package.json
index 843092c..4788702 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.13",
+		"daisyui": "^3.5.1",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
diff --git a/src/lib/Foundation.svelte b/src/lib/Foundation.svelte
index 0b76959..e66d0bb 100644
--- a/src/lib/Foundation.svelte
+++ b/src/lib/Foundation.svelte
@@ -1,9 +1,7 @@
 <script context="module">
     export { default as Button } from "./foundation/Button.svelte";
     export { default as Column } from "./foundation/Column.svelte";
-    export { default as Link } from "./foundation/Link.svelte";
     export { default as Row } from "./foundation/Row.svelte";
-    export { default as Text } from "./foundation/Text.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/Link.svelte b/src/lib/foundation/Link.svelte
deleted file mode 100644
index 279520e..0000000
--- a/src/lib/foundation/Link.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    export let to;
-</script>
-
-<a href={to} target="_blank" rel="noreferrer" class="font-bold hover:text-primary transition duration-200 ease-in">
-    <slot />
-</a>
\ No newline at end of file
diff --git a/src/lib/foundation/Text.svelte b/src/lib/foundation/Text.svelte
deleted file mode 100644
index 0705d52..0000000
--- a/src/lib/foundation/Text.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-    export let center = false
-    export let italic = false
-    export let bold = false
-    export let small = false
-    export let smallauto = false
-    export let large = false
-    export let light = false
-    export let display = false
-    export let body = true
-
-    if (display) body = false
-</script>
-
-<div
-    class:center 
-    class:italic
-    class:small
-    class:smallauto
-    class:bold
-    class:large 
-    class:light
-    class:display
-    class:body
-    class="text-lg text-gray-800"
->
-    <slot />
-</div>
-
-<style lang="postcss">
-    div.center {
-        @apply text-center;
-    }
-
-    div.bold {
-        @apply font-bold;
-    }
-
-    div.small {
-        @apply text-xs;
-    }
-    
-    div.smallauto {
-        @apply text-sm;
-        @apply lg:text-lg;
-    }
-
-    div.large {
-        @apply text-2xl;
-    }
-
-    div.light {
-        @apply text-gray-200;
-    }
-
-    div.display {
-        @apply font-display;
-    }
-
-    div.body {
-        @apply font-body;
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/icons/x-mark.svg b/src/lib/icons/x-mark.svg
new file mode 100644
index 0000000..3644342
--- /dev/null
+++ b/src/lib/icons/x-mark.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="M6 18L18 6M6 6l12 12" />
+</svg>
diff --git a/src/lib/language/translations.ts b/src/lib/language/translations.ts
index 7660bc8..bcf827c 100644
--- a/src/lib/language/translations.ts
+++ b/src/lib/language/translations.ts
@@ -8,7 +8,15 @@ export default {
         "Donate": "Donate",
         "Click to Donate": "Click to Donate",
         "Available": "Available",
-        "Unavailable": "Unavailable"
+        "Unavailable": "Unavailable",
+        "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.",
+        "Learn More": "Learn More",
+        "OK": "OK",
+        "Hours": "Hours",
+        "Wednesday": "Wednesday",
+        "Saturday": "Saturday"
     },
     es: {
         "Button.Home": "Inicio",
@@ -19,6 +27,14 @@ export default {
         "No Results": "No hay resultados",
         "Donate": "Donar",
         "Click to Donate": "Clic para donar",
+        "How to Borrow": "Como pedir prestado",
+        "How to Borrow.Step1": "Compre una membresía de PVD Things y pague cuotas anuales.",
+        "How to Borrow.Step2": "Visítenos en 12 Library Court en Providence.",
+        "Learn More": "Aprende más",
+        "OK": "OK",
+        "Hours": "Horas",
+        "Wednesday": "Miércoles",
+        "Saturday": "Sábado",
         "Available": "Disponible",
         "Unavailable": "Indisponible",
         "All": "Todas",
diff --git a/src/lib/layout/Footer.svelte b/src/lib/layout/Footer.svelte
index 9b15dce..f7a36bf 100644
--- a/src/lib/layout/Footer.svelte
+++ b/src/lib/layout/Footer.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Column, Link, Row, Text } from "$lib/Foundation.svelte";
+	import { Column, Row } from "$lib/Foundation.svelte";
 </script>
 
 <footer class="bg-bg py-10 relative z-40">
diff --git a/src/lib/things/BorrowModal.svelte b/src/lib/things/BorrowModal.svelte
new file mode 100644
index 0000000..a049b74
--- /dev/null
+++ b/src/lib/things/BorrowModal.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Button from "$lib/foundation/Button.svelte";
+	import { ButtonTheme } from "$lib/foundation/button";
+  import { showBorrowModal } from "./borrowModalStore";
+  import CloseIcon from "$lib/icons/x-mark.svg";
+	import { onDestroy } from "svelte";
+	import { t } from "$lib/language/translate";
+
+  let dialog: HTMLDialogElement;
+
+  const unsubscribe = showBorrowModal.subscribe((value) => {
+    if (value) dialog.showModal();
+  });
+
+  const closeModal = () => showBorrowModal.set(false);
+
+  const learnMore = () => {
+    closeModal();
+    window.open("https://www.pvdthings.coop/membership", '_blank').focus();
+  };
+
+  onDestroy(unsubscribe);
+</script>
+
+<dialog bind:this={dialog} id="borrow-modal" class="modal modal-bottom sm:modal-middle">
+  <form method="dialog" class="modal-box">
+    <button class="btn btn-circle btn-ghost outline-none absolute right-2 top-2" on:click={() => showBorrowModal.set(false)}>
+      <img src={CloseIcon} alt="Close" height="24" width="24" />
+    </button>
+    <h3 class="font-bold text-lg">{$t('How to Borrow')}</h3>
+    <ol class="py-4">
+      <li class="mb-2">1. {$t('How to Borrow.Step1')}</li>
+      <li class="mb-2">2. {$t('How to Borrow.Step2')}</li>
+    </ol>
+    <h4 class="font-bold">{$t('Hours')}</h4>
+    <ul class="pt-1 pb-6">
+      <li>{$t('Wednesday')} 6PM - 8PM</li>
+      <li>{$t('Saturday')} 11AM - 2PM</li>
+    </ul>
+    <div class="modal-bottom flex flex-row justify-between">
+      <Button on:click={learnMore}>
+        {$t('Learn More')}
+      </Button>
+      <Button theme={ButtonTheme.primary} on:click={closeModal}>
+        {$t('OK')}
+      </Button>
+    </div>
+  </form>
+</dialog>
\ No newline at end of file
diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte
index bbb177f..3d10fe9 100644
--- a/src/lib/things/Thing.svelte
+++ b/src/lib/things/Thing.svelte
@@ -1,61 +1,74 @@
 <script>
-    import BoxIcon from "$lib/icons/box.svg";
-    import { t, locale } from "$lib/language/translate";
+	import BoxIcon from '$lib/icons/box.svg';
+	import { t, locale } from '$lib/language/translate';
+	import { showBorrowModal } from './borrowModalStore';
 
-    export let thing;
+	export let thing;
 
-    let innerWidth = 0;
-    let language;
+	let innerWidth = 0;
+	let language;
 
-    $: isMobile = innerWidth < 600;
-    $: fontSize = thing.name.length > 13 || isMobile ? 'text-sm' : 'text-base';
+	$: isMobile = innerWidth < 600;
+	$: fontSize = thing.name.length > 13 || isMobile ? 'text-sm' : 'text-base';
 
-    const donateURL = `https://airtable.com/shrwMSrzvSLpQgQWC?prefill_Description=${encodeURIComponent(thing.name)}`;
-    const hasZeroStock = thing.stock < 1;
-    const noneAvailable = !hasZeroStock && (!thing.available || thing.available < 1);
+	const donateURL = `https://airtable.com/shrwMSrzvSLpQgQWC?prefill_Description=${encodeURIComponent(
+		thing.name
+	)}`;
+	const hasZeroStock = thing.stock < 1;
+	const noneAvailable = !hasZeroStock && (!thing.available || thing.available < 1);
 
-    const backgroundColor = noneAvailable
-        ? 'bg-red-300'
-        : hasZeroStock
-        ? 'bg-yellow-300'
-        : 'bg-green-400';
+	const backgroundColor = noneAvailable
+		? 'bg-red-300'
+		: hasZeroStock
+		? 'bg-yellow-300'
+		: 'bg-green-400';
 
-    function getShortName(name){
-        if (name.length < 30) return name;
-        return name.substring(0, 29) + '...';
-    }
+	function getShortName(name) {
+		if (name.length < 30) return name;
+		return name.substring(0, 29) + '...';
+	}
 
-    const onClick = () => {
-        if (!hasZeroStock) return;
-        window.open(donateURL, '_blank').focus();
-    };
+	const onClick = () => {
+		if (!hasZeroStock) {
+			showBorrowModal.set(true);
+		} else {
+			window.open(donateURL, '_blank').focus();
+		}
+	};
 
-    locale.subscribe((value) => {
-        language = value;
-    });
+	locale.subscribe((value) => {
+		language = value;
+	});
 </script>
 
 <svelte:window bind:innerWidth />
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="flex flex-col justify-between bg-white rounded-md overflow-hidden brutal hovers-static {hasZeroStock && 'cursor-pointer'}" on:click={onClick}>
-    <div class="p-2">
-        <img src={thing.image ?? BoxIcon} alt={thing.name} class="w-full aspect-square object-contain rounded" />
-        <div class="mt-3">
-            <div class="{fontSize} uppercase font-bold font-sans text-center">
-                {getShortName(language === 'en' ? thing.name : thing.spanishName ?? thing.name)}
-            </div>
-        </div>
-    </div>
-    <div class="{backgroundColor} py-1 text-center font-medium border-t border-black">
-        {#if hasZeroStock}
-            {isMobile ? $t('Donate') : $t('Click to Donate')}
-        {:else if noneAvailable}
-            {isMobile ? `${thing.available} / ${thing.stock}` : $t('Unavailable')}
-        {:else}
-            {isMobile 
-                ? `${thing.available} / ${thing.stock}`
-                : `${thing.available} / ${thing.stock} ${$t('Available')}`}
-        {/if}
-    </div>
-</div>
\ No newline at end of file
+<div
+	class="flex flex-col justify-between bg-white rounded-md overflow-hidden brutal hovers-static cursor-pointer"
+	on:click={onClick}
+>
+	<div class="p-2">
+		<img
+			src={thing.image ?? BoxIcon}
+			alt={thing.name}
+			class="w-full aspect-square object-contain rounded"
+		/>
+		<div class="mt-3">
+			<div class="{fontSize} uppercase font-bold font-sans text-center">
+				{getShortName(language === 'en' ? thing.name : thing.spanishName ?? thing.name)}
+			</div>
+		</div>
+	</div>
+	<div class="{backgroundColor} py-1 text-center font-medium border-t border-black">
+		{#if hasZeroStock}
+			{isMobile ? $t('Donate') : $t('Click to Donate')}
+		{:else if noneAvailable}
+			{isMobile ? `${thing.available} / ${thing.stock}` : $t('Unavailable')}
+		{:else}
+			{isMobile
+				? `${thing.available} / ${thing.stock}`
+				: `${thing.available} / ${thing.stock} ${$t('Available')}`}
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/things/borrowModalStore.ts b/src/lib/things/borrowModalStore.ts
new file mode 100644
index 0000000..db515db
--- /dev/null
+++ b/src/lib/things/borrowModalStore.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const showBorrowModal = writable(false);
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ad50aee..ef27fd9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
     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";
 
     export let data;
 
@@ -48,6 +49,7 @@
     {#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} />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6a95a43..f87f8be 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -23,10 +23,30 @@ module.exports = {
         "1/4-screen": "25vw"
       },
       backgroundImage: theme => ({
-        "purple-city" : "url('/2.png')",
+        "purple-city": "url('/2.png')",
         "long-city": "url('/long-city.png')"
       })
     },
   },
-  plugins: [],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+        pvdthingsTheme: {
+          "primary": "#facc15",
+          "secondary": "#d8e1ff",       
+          "accent": "#a78bfa",
+          "neutral": "#2c2537", 
+          "base-100": "#d8e1ff",
+          "info": "#2563eb", 
+          "success": "#54de97",
+          "warning": "#fb923c", 
+          "error": "#df2926",
+
+          "--btn-text-case": "none",
+          "--rounded-box": "6px"
+        }
+      }
+    ]
+  },
 }