diff --git a/src/components/IssueListing.astro b/src/components/IssueListing.astro
new file mode 100644
index 0000000..7435a80
--- /dev/null
+++ b/src/components/IssueListing.astro
@@ -0,0 +1,160 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  issues: CollectionEntry<"issues">[];
+}
+
+const { issues } = Astro.props;
+
+const minDate = issues[issues.length - 1]?.data.date.toISOString().split("T")[0];
+const maxDate = issues[0]?.data.date.toISOString().split("T")[0];
+---
+
+<div class="mb-8">
+  <h1 class="text-3xl md:text-4xl font-bold mb-4">Derniers numéros</h1>
+  <search>
+    <form id="filter-form" class="space-y-4">
+      <input
+        id="search-input"
+        type="search"
+        placeholder="Chercher un article..."
+        data-slot="input"
+        class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:ring-3 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none"
+      />
+      <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
+        <div class="flex-1">
+          <label for="start-date" class="gap-2 text-sm leading-none font-medium flex items-center select-none mb-1">Date de début</label>
+          <input
+            id="start-date"
+            type="date"
+            min={minDate}
+            max={maxDate}
+            data-slot="input"
+            class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:ring-3 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none"
+          />
+        </div>
+        <div class="flex-1">
+          <label for="end-date" class="gap-2 text-sm leading-none font-medium flex items-center select-none mb-1">Date de fin</label>
+          <input
+            id="end-date"
+            type="date"
+            min={minDate}
+            max={maxDate}
+            data-slot="input"
+            class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:ring-3 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none"
+          />
+        </div>
+        <div class="flex-1">
+          <label for="tag-filter" class="gap-2 text-sm leading-none font-medium flex items-center select-none mb-1">Filtrer par tag</label>
+          <select
+            id="tag-filter"
+            data-slot="input"
+            class="dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:ring-3 md:text-sm w-full min-w-0 outline-none appearance-none"
+          >
+            <option value="">Filtrer par tag</option>
+            <option value="all">Tous</option>
+            <option value="lite">Lite</option>
+            <option value="special">Special</option>
+          </select>
+        </div>
+      </div>
+    </form>
+  </search>
+</div>
+
+<div id="issues-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  {issues.map((issue) => (
+    <div
+      class="issue-card"
+      data-title={issue.data.title.toLowerCase()}
+      data-date={issue.data.date.toISOString().split("T")[0]}
+      data-tags={issue.data.tags.join(",")}
+    >
+      <div
+        data-slot="card"
+        class="ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 group/card flex flex-col"
+      >
+        <div data-slot="card-header" class="gap-1 rounded-t-xl px-4 grid auto-rows-min items-start">
+          <div data-slot="card-title" class="text-base leading-snug font-medium">{issue.data.title}</div>
+          <p data-slot="card-description" class="text-muted-foreground text-sm">
+            Publié le{" "}
+            <time datetime={issue.data.date.toISOString()}>
+              {issue.data.date.toLocaleDateString("fr-FR", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </time>
+            {issue.data.tags[0] && (
+              <span class="h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium bg-secondary text-secondary-foreground inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap ml-2">
+                {issue.data.tags[0].charAt(0).toUpperCase() + issue.data.tags[0].slice(1)}
+              </span>
+            )}
+          </p>
+        </div>
+        <div data-slot="card-content" class="px-4">
+          <img
+            src={issue.data.images[0]}
+            alt={`Couverture de ${issue.data.title}`}
+            class="w-full object-cover rounded-md mb-4"
+          />
+        </div>
+        <div data-slot="card-footer" class="bg-muted/50 rounded-b-xl border-t p-4 flex items-center">
+          <a
+            href={`/issues/${issue.id}`}
+            data-slot="button"
+            class="focus-visible:border-ring focus-visible:ring-ring/50 rounded-lg border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:translate-y-px inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none cursor-pointer border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-2.5"
+          >
+            Lire l'article
+          </a>
+        </div>
+      </div>
+    </div>
+  ))}
+</div>
+
+<p id="no-results" class="text-muted-foreground mt-8 hidden">Aucun article trouvé.</p>
+
+<script>
+  const searchInput = document.getElementById("search-input") as HTMLInputElement;
+  const startDateInput = document.getElementById("start-date") as HTMLInputElement;
+  const endDateInput = document.getElementById("end-date") as HTMLInputElement;
+  const tagFilter = document.getElementById("tag-filter") as HTMLSelectElement;
+  const cards = document.querySelectorAll<HTMLElement>(".issue-card");
+  const noResults = document.getElementById("no-results")!;
+  const form = document.getElementById("filter-form")!;
+
+  form.addEventListener("submit", (e) => e.preventDefault());
+
+  function filterCards() {
+    const query = searchInput.value.toLowerCase();
+    const startDate = startDateInput.value;
+    const endDate = endDateInput.value;
+    const tag = tagFilter.value;
+
+    let visibleCount = 0;
+
+    cards.forEach((card) => {
+      const title = card.dataset.title!;
+      const date = card.dataset.date!;
+      const tags = card.dataset.tags!;
+
+      const titleMatch = !query || title.includes(query);
+      const startMatch = !startDate || date >= startDate;
+      const endMatch = !endDate || date <= endDate;
+      const tagMatch = !tag || tag === "all" || tags.split(",").includes(tag);
+
+      const visible = titleMatch && startMatch && endMatch && tagMatch;
+      card.style.display = visible ? "" : "none";
+      if (visible) visibleCount++;
+    });
+
+    noResults.classList.toggle("hidden", visibleCount > 0);
+  }
+
+  searchInput.addEventListener("input", filterCards);
+  startDateInput.addEventListener("input", filterCards);
+  endDateInput.addEventListener("input", filterCards);
+  tagFilter.addEventListener("change", filterCards);
+</script>
diff --git a/src/components/IssueListing.svelte b/src/components/IssueListing.svelte
deleted file mode 100644
index a01e147..0000000
--- a/src/components/IssueListing.svelte
+++ /dev/null
@@ -1,157 +0,0 @@
-<script lang="ts">
-  import { Badge } from "$lib/components/ui/badge";
-  import { Button } from "$lib/components/ui/button";
-  import * as Card from "$lib/components/ui/card";
-  import { Input } from "$lib/components/ui/input";
-  import { Label } from "$lib/components/ui/label";
-  import * as Select from "$lib/components/ui/select";
-  import type { CollectionEntry } from "astro:content";
-  import SearchIcon from "@lucide/svelte/icons/search";
-
-  let { issues }: { issues: CollectionEntry<"issues">[] } = $props();
-
-  let searchQuery = $state("");
-  let startDate = $state("");
-  let endDate = $state("");
-  let tagFilter = $state<string>("");
-
-  const minDate = $derived(
-    issues[issues.length - 1]?.data.date.toISOString().split("T")[0],
-  );
-  const maxDate = $derived(
-    issues[0]?.data.date.toISOString().split("T")[0],
-  );
-
-  const tagLabels: Record<string, string> = {
-    all: "Tous",
-    lite: "Lite",
-    special: "Special",
-  };
-
-  let filteredIssues = $derived(
-    issues.filter((issue: CollectionEntry<"issues">) => {
-      const titleMatch = issue.data.title
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase());
-      const startDateMatch = startDate
-        ? issue.data.date >= new Date(startDate)
-        : true;
-      const endDateMatch = endDate
-        ? issue.data.date <= new Date(endDate)
-        : true;
-
-      const tagMatch =
-        !tagFilter || tagFilter === "all"
-          ? true
-          : issue.data.tags.includes(tagFilter);
-
-      return titleMatch && startDateMatch && endDateMatch && tagMatch;
-    }),
-  );
-</script>
-
-<div class="mb-8">
-  <h1 class="text-3xl md:text-4xl font-bold mb-4">Derniers numéros</h1>
-  <search>
-    <form
-      onsubmit={(e) => e.preventDefault()}
-      class="space-y-4"
-    >
-      <div class="flex flex-row space-x-2">
-        <Input
-          type="search"
-          placeholder="Chercher un article..."
-          bind:value={searchQuery}
-          class="grow"
-        />
-        <Button type="submit" size="icon">
-          <SearchIcon class="w-4 h-4" />
-          <span class="sr-only">Chercher</span>
-        </Button>
-      </div>
-      <div
-        class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4"
-      >
-        <div class="flex-1">
-          <Label for="start-date">Date de début</Label>
-          <Input
-            id="start-date"
-            type="date"
-            min={minDate}
-            max={maxDate}
-            bind:value={startDate}
-            class="w-full"
-          />
-        </div>
-        <div class="flex-1">
-          <Label for="end-date">Date de fin</Label>
-          <Input
-            id="end-date"
-            type="date"
-            min={minDate}
-            max={maxDate}
-            bind:value={endDate}
-            class="w-full"
-          />
-        </div>
-        <div class="flex-1">
-          <Label for="tag-filter">Filtrer par tag</Label>
-          <Select.Root type="single" bind:value={tagFilter}>
-            <Select.Trigger id="tag-filter" class="w-full">
-              {tagFilter ? tagLabels[tagFilter] ?? tagFilter : "Filtrer par tag"}
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Item value="all" label="Tous" />
-              {#each ["lite", "special"] as tag (tag)}
-                <Select.Item
-                  value={tag}
-                  label={tag.charAt(0).toUpperCase() + tag.slice(1)}
-                />
-              {/each}
-            </Select.Content>
-          </Select.Root>
-        </div>
-      </div>
-    </form>
-  </search>
-</div>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-  {#if filteredIssues.length > 0}
-    {#each filteredIssues as issue (issue)}
-      <Card.Root>
-        <Card.Header>
-          <Card.Title>{issue.data.title}</Card.Title>
-          <Card.Description>
-            Publié le <time datetime={issue.data.date.toISOString()}>
-              {issue.data.date.toLocaleDateString("fr-FR", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })}
-            </time>
-            {#if issue.data.tags[0]}
-              <Badge variant="secondary" class="ml-2">
-                {issue.data.tags[0].charAt(0).toUpperCase() +
-                  issue.data.tags[0].slice(1)}
-              </Badge>
-            {/if}
-          </Card.Description>
-        </Card.Header>
-        <Card.Content>
-          <img
-            src={issue.data.images[0]}
-            alt={`Couverture de ${issue.data.title}`}
-            class="w-full object-cover rounded-md mb-4"
-          />
-        </Card.Content>
-        <Card.Footer>
-          <Button href={`/issues/${issue.id}`} variant="outline">
-            Lire l'article
-          </Button>
-        </Card.Footer>
-      </Card.Root>
-    {/each}
-  {:else}
-    <p class="text-muted-foreground mt-8">Aucun article trouvé.</p>
-  {/if}
-</div>
diff --git a/src/components/ui/badge/badge.svelte b/src/components/ui/badge/badge.svelte
deleted file mode 100644
index 51bbc23..0000000
--- a/src/components/ui/badge/badge.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const badgeVariants = tv({
-		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-</script>
-
-<script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		href,
-		class: className,
-		variant = "default",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		variant?: BadgeVariant;
-	} = $props();
-</script>
-
-<svelte:element
-	this={href ? "a" : "span"}
-	bind:this={ref}
-	data-slot="badge"
-	{href}
-	class={cn(badgeVariants({ variant }), className)}
-	{...restProps}
->
-	{@render children?.()}
-</svelte:element>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
deleted file mode 100644
index 64e0aa9..0000000
--- a/src/components/ui/badge/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Badge } from "./badge.svelte";
-export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/src/components/ui/input/index.ts b/src/components/ui/input/index.ts
deleted file mode 100644
index ceb4b16..0000000
--- a/src/components/ui/input/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./input.svelte";
-
-export {
-  Root,
-  //
-  Root as Input,
-};
diff --git a/src/components/ui/input/input.svelte b/src/components/ui/input/input.svelte
deleted file mode 100644
index fe7db38..0000000
--- a/src/components/ui/input/input.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-
-	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
-
-	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
-	>;
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		type,
-		files = $bindable(),
-		class: className,
-		"data-slot": dataSlot = "input",
-		...restProps
-	}: Props = $props();
-</script>
-
-{#if type === "file"}
-	<input
-		bind:this={ref}
-		data-slot={dataSlot}
-		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-			className
-		)}
-		type="file"
-		bind:files
-		bind:value
-		{...restProps}
-	/>
-{:else}
-	<input
-		bind:this={ref}
-		data-slot={dataSlot}
-		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-			className
-		)}
-		{type}
-		bind:value
-		{...restProps}
-	/>
-{/if}
diff --git a/src/components/ui/label/index.ts b/src/components/ui/label/index.ts
deleted file mode 100644
index b0b23ce..0000000
--- a/src/components/ui/label/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./label.svelte";
-
-export {
-  Root,
-  //
-  Root as Label,
-};
diff --git a/src/components/ui/label/label.svelte b/src/components/ui/label/label.svelte
deleted file mode 100644
index d5e3086..0000000
--- a/src/components/ui/label/label.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: LabelPrimitive.RootProps = $props();
-</script>
-
-<LabelPrimitive.Root
-	bind:ref
-	data-slot="label"
-	class={cn(
-		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-		className
-	)}
-	{...restProps}
-/>
diff --git a/src/components/ui/select/index.ts b/src/components/ui/select/index.ts
deleted file mode 100644
index 5a4d1b6..0000000
--- a/src/components/ui/select/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import Content from "./select-content.svelte";
-import GroupHeading from "./select-group-heading.svelte";
-import Group from "./select-group.svelte";
-import Item from "./select-item.svelte";
-import Label from "./select-label.svelte";
-import Portal from "./select-portal.svelte";
-import ScrollDownButton from "./select-scroll-down-button.svelte";
-import ScrollUpButton from "./select-scroll-up-button.svelte";
-import Separator from "./select-separator.svelte";
-import Trigger from "./select-trigger.svelte";
-import Root from "./select.svelte";
-
-export {
-  Root,
-  Group,
-  Label,
-  Item,
-  Content,
-  Trigger,
-  Separator,
-  ScrollDownButton,
-  ScrollUpButton,
-  GroupHeading,
-  Portal,
-  //
-  Root as Select,
-  Group as SelectGroup,
-  Label as SelectLabel,
-  Item as SelectItem,
-  Content as SelectContent,
-  Trigger as SelectTrigger,
-  Separator as SelectSeparator,
-  ScrollDownButton as SelectScrollDownButton,
-  ScrollUpButton as SelectScrollUpButton,
-  GroupHeading as SelectGroupHeading,
-  Portal as SelectPortal,
-};
diff --git a/src/components/ui/select/select-content.svelte b/src/components/ui/select/select-content.svelte
deleted file mode 100644
index bb1e2ac..0000000
--- a/src/components/ui/select/select-content.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import SelectPortal from "./select-portal.svelte";
-	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
-	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
-	import { cn, type WithoutChild } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		sideOffset = 4,
-		portalProps,
-		children,
-		preventScroll = true,
-		...restProps
-	}: WithoutChild<SelectPrimitive.ContentProps> & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
-	} = $props();
-</script>
-
-<SelectPortal {...portalProps}>
-	<SelectPrimitive.Content
-		bind:ref
-		{sideOffset}
-		{preventScroll}
-		data-slot="select-content"
-		class={cn(
-			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
-			className
-		)}
-		{...restProps}
-	>
-		<SelectScrollUpButton />
-		<SelectPrimitive.Viewport
-			class={cn(
-				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
-			)}
-		>
-			{@render children?.()}
-		</SelectPrimitive.Viewport>
-		<SelectScrollDownButton />
-	</SelectPrimitive.Content>
-</SelectPortal>
diff --git a/src/components/ui/select/select-group-heading.svelte b/src/components/ui/select/select-group-heading.svelte
deleted file mode 100644
index 1fab5f0..0000000
--- a/src/components/ui/select/select-group-heading.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
-</script>
-
-<SelectPrimitive.GroupHeading
-	bind:ref
-	data-slot="select-group-heading"
-	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-	{...restProps}
->
-	{@render children?.()}
-</SelectPrimitive.GroupHeading>
diff --git a/src/components/ui/select/select-group.svelte b/src/components/ui/select/select-group.svelte
deleted file mode 100644
index f666cb2..0000000
--- a/src/components/ui/select/select-group.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: SelectPrimitive.GroupProps = $props();
-</script>
-
-<SelectPrimitive.Group
-	bind:ref
-	data-slot="select-group"
-	class={cn("scroll-my-1 p-1", className)}
-	{...restProps}
-/>
diff --git a/src/components/ui/select/select-item.svelte b/src/components/ui/select/select-item.svelte
deleted file mode 100644
index 32fd5ce..0000000
--- a/src/components/ui/select/select-item.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChild } from "$lib/utils.js";
-	import CheckIcon from '@lucide/svelte/icons/check';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		value,
-		label,
-		children: childrenProp,
-		...restProps
-	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
-</script>
-
-<SelectPrimitive.Item
-	bind:ref
-	{value}
-	data-slot="select-item"
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
-	)}
-	{...restProps}
->
-	{#snippet children({ selected, highlighted })}
-		<span class="absolute end-2 flex size-3.5 items-center justify-center">
-			{#if selected}
-				<CheckIcon class="cn-select-item-indicator-icon" />
-			{/if}
-		</span>
-		{#if childrenProp}
-			{@render childrenProp({ selected, highlighted })}
-		{:else}
-			{label || value}
-		{/if}
-	{/snippet}
-</SelectPrimitive.Item>
diff --git a/src/components/ui/select/select-label.svelte b/src/components/ui/select/select-label.svelte
deleted file mode 100644
index 69bcfdf..0000000
--- a/src/components/ui/select/select-label.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="select-label"
-	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/src/components/ui/select/select-portal.svelte b/src/components/ui/select/select-portal.svelte
deleted file mode 100644
index 424bcdd..0000000
--- a/src/components/ui/select/select-portal.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-
-	let { ...restProps }: SelectPrimitive.PortalProps = $props();
-</script>
-
-<SelectPrimitive.Portal {...restProps} />
diff --git a/src/components/ui/select/select-scroll-down-button.svelte b/src/components/ui/select/select-scroll-down-button.svelte
deleted file mode 100644
index 94f41cd..0000000
--- a/src/components/ui/select/select-scroll-down-button.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
-</script>
-
-<SelectPrimitive.ScrollDownButton
-	bind:ref
-	data-slot="select-scroll-down-button"
-	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
-	{...restProps}
->
-	<ChevronDownIcon  />
-</SelectPrimitive.ScrollDownButton>
diff --git a/src/components/ui/select/select-scroll-up-button.svelte b/src/components/ui/select/select-scroll-up-button.svelte
deleted file mode 100644
index 035ea09..0000000
--- a/src/components/ui/select/select-scroll-up-button.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
-</script>
-
-<SelectPrimitive.ScrollUpButton
-	bind:ref
-	data-slot="select-scroll-up-button"
-	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
-	{...restProps}
->
-	<ChevronUpIcon  />
-</SelectPrimitive.ScrollUpButton>
diff --git a/src/components/ui/select/select-separator.svelte b/src/components/ui/select/select-separator.svelte
deleted file mode 100644
index 3b24bab..0000000
--- a/src/components/ui/select/select-separator.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import type { Separator as SeparatorPrimitive } from "bits-ui";
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: SeparatorPrimitive.RootProps = $props();
-</script>
-
-<Separator
-	bind:ref
-	data-slot="select-separator"
-	class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
-	{...restProps}
-/>
diff --git a/src/components/ui/select/select-trigger.svelte b/src/components/ui/select/select-trigger.svelte
deleted file mode 100644
index 03d06d0..0000000
--- a/src/components/ui/select/select-trigger.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChild } from "$lib/utils.js";
-	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		size = "default",
-		...restProps
-	}: WithoutChild<SelectPrimitive.TriggerProps> & {
-		size?: "sm" | "default";
-	} = $props();
-</script>
-
-<SelectPrimitive.Trigger
-	bind:ref
-	data-slot="select-trigger"
-	data-size={size}
-	class={cn(
-		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
-</SelectPrimitive.Trigger>
diff --git a/src/components/ui/select/select.svelte b/src/components/ui/select/select.svelte
deleted file mode 100644
index 05eb663..0000000
--- a/src/components/ui/select/select.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		...restProps
-	}: SelectPrimitive.RootProps = $props();
-</script>
-
-<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/src/components/ui/separator/index.ts b/src/components/ui/separator/index.ts
deleted file mode 100644
index d66644e..0000000
--- a/src/components/ui/separator/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./separator.svelte";
-
-export {
-  Root,
-  //
-  Root as Separator,
-};
diff --git a/src/components/ui/separator/separator.svelte b/src/components/ui/separator/separator.svelte
deleted file mode 100644
index 5fd8a42..0000000
--- a/src/components/ui/separator/separator.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		"data-slot": dataSlot = "separator",
-		...restProps
-	}: SeparatorPrimitive.RootProps = $props();
-</script>
-
-<SeparatorPrimitive.Root
-	bind:ref
-	data-slot={dataSlot}
-	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
-		// this is different in shadcn/ui but self-stretch breaks things for us
-		"data-[orientation=vertical]:h-full",
-		className
-	)}
-	{...restProps}
-/>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ea0020f..840f416 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import IssueListing from "$lib/components/IssueListing.svelte";
+import IssueListing from "$lib/components/IssueListing.astro";
 import Layout from "$lib/layouts/Layout.astro";
 import { getCollection } from "astro:content";
 
@@ -9,5 +9,5 @@ const issues = (await getCollection("issues")).sort((a, b) =>
 ---
 
 <Layout title="Home">
-  <IssueListing client:load issues={issues} />
+  <IssueListing issues={issues} />
 </Layout>