diff --git a/README.md b/README.md
index 4fee31f..0a2afe3 100644
--- a/README.md
+++ b/README.md
@@ -1,58 +1,11 @@
-# create-svelte
+# Exo
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
+## Development
 
 ```bash
-npm run build
+bun run story:dev
 ```
 
-You can preview the production build with `npm run preview`.
+## References
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+Check out all the available controls in their book: controls.histoire.dev.
diff --git a/bun.lockb b/bun.lockb
index de99597..f4dbd71 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 463716c..a078735 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@sveltejs/package": "^2.0.0",
     "@tailwindcss/forms": "^0.5.3",
     "@vitest/coverage-c8": "^0.31.4",
+    "autoprefixer": "^10.4.14",
     "histoire": "^0.16.1",
     "publint": "^0.1.9",
     "rome": "^12.1.3",
@@ -48,6 +49,7 @@
     "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
+    "unplugin-icons": "^0.16.2",
     "vite": "^4.3.0",
     "vitest": "^0.31.4"
   },
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 0000000..5cbc2c7
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/src/app.css b/src/app.css
index 77bf6af..aa613e2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,9 @@
 @import '@fontsource/fira-mono';
+@import '@fontsource-variable/inter';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
 	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
diff --git a/src/lib/components/Counter.svelte b/src/lib/components/Counter.svelte
deleted file mode 100644
index bb71271..0000000
--- a/src/lib/components/Counter.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts">
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	function modulo(n: number, m: number) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		touch-action: manipulation;
-		color: var(--text-color);
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--secondary-color);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: var(--text-color);
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: flex;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--accent-color);
-		font-size: 4rem;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-
-	.hidden {
-		top: -100%;
-		user-select: none;
-	}
-</style>
diff --git a/src/lib/components/TextField/TextField.story.svelte b/src/lib/components/TextField/TextField.story.svelte
index e80d56a..f683b6e 100644
--- a/src/lib/components/TextField/TextField.story.svelte
+++ b/src/lib/components/TextField/TextField.story.svelte
@@ -1,11 +1,31 @@
 <script lang="ts">
-  import TextField from './TextField.svelte';
-
-  import type { Hst as Histoire } from '@histoire/plugin-svelte';
+  import TextField, { TextFieldVariant } from "./TextField.svelte";
+  
+  import type { Hst as Histoire } from "@histoire/plugin-svelte";
 
   export let Hst: Histoire;
+
+  let name = "Name";
+  let value = "Hello World";
+  let disabled = false;
+  let variant = TextFieldVariant.Default;
 </script>
 
 <Hst.Story>
-  <TextField />
+  <TextField
+    {name}
+    {variant}
+    {disabled}
+    bind:value={value}
+  />
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={name} title="Name" />
+    <Hst.Text bind:value={value} title="Value" />
+    <Hst.Select
+      title="Variant"
+      bind:value={variant}
+      options={Object.values(TextFieldVariant)}
+    />
+    <Hst.Checkbox bind:value={disabled} title="Disabled" />
+  </svelte:fragment>
 </Hst.Story>
diff --git a/src/lib/components/TextField/TextField.svelte b/src/lib/components/TextField/TextField.svelte
index 3bf6406..3c625c9 100644
--- a/src/lib/components/TextField/TextField.svelte
+++ b/src/lib/components/TextField/TextField.svelte
@@ -1,64 +1,73 @@
 <script lang="ts" context="module">
-  export enum TextInputVariant {
-    Default,
-    Transparent
+  export enum TextFieldVariant {
+    Default = "Default",
+    Transparent = "Transparent",
   }
 </script>
 
 <script lang="ts">
-  import classNames from 'classnames';
-  import { createEventDispatcher } from 'svelte';
+  import classNames from "classnames";
+  import { createEventDispatcher } from "svelte";
 
   // import Warning from '~icons/custom/warning';
 
+  import "../../../app.css";
+
   export let autoComplete: string | undefined = undefined;
   export let error: string | undefined = undefined;
   export let label: string | undefined = undefined;
   export let name: string;
   export let placeholder: string | undefined = undefined;
   export let tabIndex: number | undefined = undefined;
-  export let type: 'text' | 'email' | 'tel' | 'password' | 'number' = 'text';
+  export let type: "text" | "email" | "tel" | "password" | "number" = "text";
   export let required = false;
   export let step: string | undefined = undefined;
   export let value: string | number | undefined;
-  export let variant: TextInputVariant = TextInputVariant.Default;
+  export let variant: TextFieldVariant = TextFieldVariant.Default;
   export let disabled = false;
-  export let className = '';
+  export let className = "";
   export let icon: any = undefined;
   export { className as class };
 
-  const dispatch = createEventDispatcher();
-  const TEXT_FIELD_INPUT_CLASS = classNames(
-    variant === TextInputVariant.Default &&
-      'border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded-lg',
-    'bg-gray-50 text-gray-900 text-sm block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
-    type === 'number' && 'font-mono',
-    className
-  );
+  let TEXT_FIELD_INPUT_CLASS: string;
 
   const TEXT_FIELD_CLASS_NAMES =
-    'relative transition-[background-color] transition-[box-shadow] duration-200 h-[44px] min-w-full w-full rounded-md inline-flex';
+    "relative transition-[background-color] transition-[box-shadow] duration-200 h-[44px] min-w-full w-full rounded-md inline-flex";
 
   const inputContainerClassNames = classNames(
     TEXT_FIELD_CLASS_NAMES,
-    !!error && 'border-rose-200!'
+    !!error && "border-rose-200!"
   );
 
+  const dispatch = createEventDispatcher();
   const handleInput = (event: Event): void => {
     const target = event.target as HTMLInputElement;
     value = type.match(/^(number|range)$/) ? +target.value : target.value;
-    dispatch('input', {
-      value
+    dispatch("input", {
+      value,
     });
   };
 
   const handleIconClick = (): void => {
-    dispatch('clickIcon');
+    dispatch("clickIcon");
   };
+
+  $: {
+    TEXT_FIELD_INPUT_CLASS = classNames(
+      variant === TextFieldVariant.Default &&
+        "border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded-lg",
+      "bg-gray-50 text-gray-900 text-sm block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+      type === "number" && "font-mono",
+      className
+    );
+  }
 </script>
 
 <div class="flex flex-col justify-start no-wrap">
-  <label for={name} class="mb-2 text-sm font-medium text-gray-900 dark:text-white" hidden={!label}
+  <label
+    for={name}
+    class="mb-2 text-sm font-medium text-gray-900 dark:text-white"
+    hidden={!label}
     >{label}
   </label>
   <div class={inputContainerClassNames}>
@@ -75,7 +84,7 @@
       tabindex={tabIndex}
       aria-invalid="false"
       aria-label="{name}-input"
-      aria-required={required ? 'true' : 'false'}
+      aria-required={required ? "true" : "false"}
       class={TEXT_FIELD_INPUT_CLASS}
       on:input={handleInput}
     />
diff --git a/src/lib/components/TextField/index.ts b/src/lib/components/TextField/index.ts
new file mode 100644
index 0000000..59e94de
--- /dev/null
+++ b/src/lib/components/TextField/index.ts
@@ -0,0 +1 @@
+export { default as TextField, TextFieldVariant } from './TextField';
diff --git a/src/lib/index.ts b/src/lib/index.ts
index ae34e39..665fa3c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1 @@
-export { default as Button } from './Button.svelte';
+export * from './TextField';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
deleted file mode 100644
index 99c3037..0000000
--- a/src/routes/+layout.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import Header from './components/Header.svelte';
-
-	import '../app.css';
-</script>
-
-<Header />
-
-<main>
-	<slot />
-</main>
-
-<footer>
-	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
-</footer>
-
-<style>
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		width: 100%;
-		max-width: 1024px;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
-
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 40px;
-	}
-
-	footer a {
-		font-weight: bold;
-	}
-
-	@media (min-width: 480px) {
-		footer {
-			padding: 40px 0;
-		}
-	}
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
deleted file mode 100644
index 0e28294..0000000
--- a/src/routes/+page.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-	import Counter from '$lib/Counter.svelte';
-</script>
-
-<svelte:head>
-	<title>Home</title>
-	<meta name="description" content="Svelte demo app" />
-</svelte:head>
-
-<section>
-	<h1>
-		<span class="welcome">
-			<picture>
-				<source srcset="svelte-welcome.webp" type="image/webp" />
-				<img src="svelte-welcome.png" alt="Welcome" />
-			</picture>
-		</span>
-
-		to your new<br />SvelteKit app
-	</h1>
-
-	<h2>
-		try editing <strong>src/routes/+page.svelte</strong>
-	</h2>
-
-	<Counter />
-</section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 1;
-	}
-
-	h1 {
-		width: 100%;
-	}
-
-	.welcome {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
-</style>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
deleted file mode 100644
index 189f71e..0000000
--- a/src/routes/+page.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/src/routes/components/Header.svelte b/src/routes/components/Header.svelte
deleted file mode 100644
index 9399bbb..0000000
--- a/src/routes/components/Header.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-</script>
-
-<header>
-	<div class="corner">
-		<a href="https://kit.svelte.dev">
-			<img src="/svelte.svg" alt="SvelteKit" />
-		</a>
-	</div>
-
-	<nav>
-		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
-		</svg>
-		<ul>
-			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.url.pathname === '/about'}>
-				<a sveltekit:prefetch href="/about">About</a>
-			</li>
-			<li class:active={$page.url.pathname === '/todos'}>
-				<a sveltekit:prefetch href="/todos">Todos</a>
-			</li>
-		</ul>
-		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
-		</svg>
-	</nav>
-
-	<div class="corner">
-		<!-- TODO put something else here? github link? -->
-	</div>
-</header>
-
-<style>
-	header {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.corner {
-		width: 3em;
-		height: 3em;
-	}
-
-	.corner a {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-	}
-
-	.corner img {
-		width: 2em;
-		height: 2em;
-		object-fit: contain;
-	}
-
-	nav {
-		display: flex;
-		justify-content: center;
-		--background: rgba(255, 255, 255, 0.7);
-	}
-
-	svg {
-		width: 2em;
-		height: 3em;
-		display: block;
-	}
-
-	path {
-		fill: var(--background);
-	}
-
-	ul {
-		position: relative;
-		padding: 0;
-		margin: 0;
-		height: 3em;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		list-style: none;
-		background: var(--background);
-		background-size: contain;
-	}
-
-	li {
-		position: relative;
-		height: 100%;
-	}
-
-	li.active::before {
-		--size: 6px;
-		content: '';
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: 0;
-		left: calc(50% - var(--size));
-		border: var(--size) solid transparent;
-		border-top: var(--size) solid var(--accent-color);
-	}
-
-	nav a {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		padding: 0 1em;
-		color: var(--heading-color);
-		font-weight: 700;
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		text-decoration: none;
-		transition: color 0.2s linear;
-	}
-
-	a:hover {
-		color: var(--accent-color);
-	}
-</style>