diff --git a/.gitignore b/.gitignore
index 7ad6275..6c7f6d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /.direnv
+/.helix
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f4f84f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno"
+}
diff --git a/components/Button.tsx b/components/Button.tsx
index 0d10b4b..909d380 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -6,6 +6,7 @@ export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
     <button
       {...props}
       disabled={!IS_BROWSER || props.disabled}
+      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
     />
   );
 }
diff --git a/deno.lock b/deno.lock
index 4d25a85..3be4de0 100644
--- a/deno.lock
+++ b/deno.lock
@@ -86,6 +86,8 @@
     "https://deno.land/x/esbuild@v0.17.11/wasm.d.ts": "dc279a3a46f084484453e617c0cabcd5b8bd1920c0e562e4ea02dfc828c8f968",
     "https://deno.land/x/esbuild@v0.17.11/wasm.js": "4030e7b50941ec6e06704c6b5f1f6416cc0f7f35f63daf63f184b728bea79a30",
     "https://deno.land/x/fresh@1.1.5/dev.ts": "a66c7d64be35bcd6a8e12eec9c27ae335044c70363a241f2e36ee776db468622",
+    "https://deno.land/x/fresh@1.1.5/plugins/twind.ts": "c0570d6010e29ba24ee5f43b9d3f1fe735f7fac76d9a3e680c9896373d669876",
+    "https://deno.land/x/fresh@1.1.5/plugins/twind/shared.ts": "023e0ffcd66668753b5049edab0de46e6d66194fb6026c679034b9bbf04ad6f3",
     "https://deno.land/x/fresh@1.1.5/runtime.ts": "b02ec1e2e32cf73a33d262b7c9dcab9468ce16cd89fd424196c71003698a4ab0",
     "https://deno.land/x/fresh@1.1.5/server.ts": "f379c9aad24471a71e58fb887fa57e5cc27ad9df035987eb260541c78df38e84",
     "https://deno.land/x/fresh@1.1.5/src/dev/deps.ts": "aef312af6de1315fa95fc0c32e87c56301b64efeb304193d0dce0da0634144d3",
@@ -122,12 +124,20 @@
     "https://esm.sh/stable/preact@10.13.1/deno/hooks.js": "f25445c4f9fa6742119c41db4a85a2f75ee6ea941c506ae8ad3b1568c7692c61",
     "https://esm.sh/stable/preact@10.13.1/deno/jsx-runtime.js": "7c8e1b8f272996846cbac0837dcb71f6f8cfc82611b3f7819501d07c37383dc0",
     "https://esm.sh/stable/preact@10.13.1/deno/preact.mjs": "9b73545225d0ed274c89f39aee524a2857c81a73060e80c2c4bdc2a6de7bec26",
+    "https://esm.sh/twind@0.16.19": "ae2fc340ae156813bca1ff5c5489734f234cc2254565244056a3370375f14e3b",
+    "https://esm.sh/twind@0.16.19/sheets": "01c41aa230494e7f7d5aeaea7ae112ab9f3c3f38ace35f1ccf015352f3bdf56f",
+    "https://esm.sh/v114/csstype@3.1.2/index.d.ts": "4c68749a564a6facdf675416d75789ee5a557afda8960e0803cf6711fa569288",
     "https://esm.sh/v114/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.mjs": "672116885c5e5072207c527a0ec663f5bc52774a0868ec487985109520382a55",
     "https://esm.sh/v114/preact-render-to-string@5.2.6/X-ZS8q/src/index.d.ts": "b1d73703252c8570fdf2952475805f5808ba3511fefbd93a3e7bd8406de7dcd0",
     "https://esm.sh/v114/preact@10.13.1/hooks/src/index.d.ts": "5c29febb624fc25d71cb0e125848c9b711e233337a08f7eacfade38fd4c14cc3",
     "https://esm.sh/v114/preact@10.13.1/jsx-runtime/src/index.d.ts": "e153460ed2b3fe2ad8b93696ecd48fbf73cd628b0b0ea6692b71804a3af69dfd",
     "https://esm.sh/v114/preact@10.13.1/src/index.d.ts": "65398710de6aa0a07412da79784e05e6e96763f51c7c91b77344d2d0af06385c",
     "https://esm.sh/v114/preact@10.13.1/src/jsx.d.ts": "fde41cfb4944bcc5005e653c989ef8f85deb1cbb5364a1726654993937cd08d0",
+    "https://esm.sh/v114/style-vendorizer@2.2.3/deno/style-vendorizer.mjs": "fb725497dd9621a84f552f9b6a4f3df82af5989ff18c40e972de1bdf475c9765",
+    "https://esm.sh/v114/twind@0.16.19/deno/sheets.js": "dcdb26e5d2860d9fff3ad81b81625799e501d465efdc99b206d3b7cd94151913",
+    "https://esm.sh/v114/twind@0.16.19/deno/twind.mjs": "6fab7543c2d8f0e587272e82218082d154dc87ffb1675e622e92feb72bb37006",
+    "https://esm.sh/v114/twind@0.16.19/sheets/sheets.d.ts": "21a0bca806d9c088d939dc95b08531ee71a708b98da8f20fde4a7026593b73b0",
+    "https://esm.sh/v114/twind@0.16.19/twind.d.ts": "a7cb168607800a3a6d2eabc177d7737015bc93073c14ff9e84a0f37ead9203c0",
     "https://raw.githubusercontent.com/lucacasonato/esbuild_deno_loader/8031f71afa1bbcd3237a94b11f53a2e5c5c0e7bf/deps.ts": "b7248e5b750be62613a9417f407e65ed43726d83b11f9631d6dbb58634bbd7d1",
     "https://raw.githubusercontent.com/lucacasonato/esbuild_deno_loader/8031f71afa1bbcd3237a94b11f53a2e5c5c0e7bf/mod.ts": "3e507379372361162f93325a216b86f6098defb5bb60144555b507bca26d061f",
     "https://raw.githubusercontent.com/lucacasonato/esbuild_deno_loader/8031f71afa1bbcd3237a94b11f53a2e5c5c0e7bf/src/deno.ts": "71bee6b14e72ca193c0686d8b4f1f47d639a64745b6f5c7576f7a3616f436f57",
diff --git a/flake.nix b/flake.nix
index b348adf..f1e10cf 100644
--- a/flake.nix
+++ b/flake.nix
@@ -15,7 +15,11 @@
       in {
         devShells.default = mkNakedShell {
           name = "musikspider-devshell";
-          packages = with pkgs; [deno];
+          packages = with pkgs; [
+            deno
+            nodePackages_latest.vscode-json-languageserver
+            taplo
+          ];
         };
       };
     };
diff --git a/import_map.json b/import_map.json
index e895aad..aa5b581 100644
--- a/import_map.json
+++ b/import_map.json
@@ -5,6 +5,8 @@
     "preact/": "https://esm.sh/preact@10.13.1/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.6",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3"
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
+    "twind": "https://esm.sh/twind@0.16.19",
+    "twind/": "https://esm.sh/twind@0.16.19/"
   }
 }
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
index ad32766..1b437bf 100644
--- a/islands/Counter.tsx
+++ b/islands/Counter.tsx
@@ -8,8 +8,8 @@ interface CounterProps {
 export default function Counter(props: CounterProps) {
   const [count, setCount] = useState(props.start);
   return (
-    <div>
-      <p>{count}</p>
+    <div class="flex gap-2 w-full">
+      <p class="flex-grow-1 font-bold text-xl">{count}</p>
       <Button onClick={() => setCount(count - 1)}>-1</Button>
       <Button onClick={() => setCount(count + 1)}>+1</Button>
     </div>
diff --git a/main.ts b/main.ts
index dedce9c..bb00964 100644
--- a/main.ts
+++ b/main.ts
@@ -7,4 +7,7 @@
 import { start } from "$fresh/server.ts";
 import manifest from "./fresh.gen.ts";
 
-await start(manifest);
+import twindPlugin from "$fresh/plugins/twind.ts";
+import twindConfig from "./twind.config.ts";
+
+await start(manifest, { plugins: [twindPlugin(twindConfig)] });
diff --git a/routes/index.tsx b/routes/index.tsx
index f054f50..5687d54 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -7,19 +7,17 @@ export default function Home() {
       <Head>
         <title>Fresh App</title>
       </Head>
-      <div>
+      <div class="p-4 mx-auto max-w-screen-md">
         <img
           src="/logo.svg"
-          width="64"
-          height="64"
+          class="w-32 h-32"
           alt="the fresh logo: a sliced lemon dripping with juice"
         />
-        <p>
+        <p class="my-6">
           Welcome to `fresh`. Try updating this message in the ./routes/index.tsx
           file, and refresh.
-          Hiiiiiii
         </p>
-        <Counter start={100} />
+        <Counter start={3} />
       </div>
     </>
   );
diff --git a/twind.config.ts b/twind.config.ts
new file mode 100644
index 0000000..2a7ac27
--- /dev/null
+++ b/twind.config.ts
@@ -0,0 +1,5 @@
+import { Options } from "$fresh/plugins/twind.ts";
+
+export default {
+  selfURL: import.meta.url,
+} as Options;