diff --git a/src/assets/css/_bootstrap.scss b/src/assets/css/_bootstrap.scss
index d251a04..f4eef0f 100644
--- a/src/assets/css/_bootstrap.scss
+++ b/src/assets/css/_bootstrap.scss
@@ -31,7 +31,7 @@
 // @import 'bootstrap/scss/forms';
 @import 'bootstrap/scss/grid';
 // @import 'bootstrap/scss/list-group';
-// @import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/modal';
 // @import 'bootstrap/scss/navbar';
 // @import 'bootstrap/scss/offcanvas';
 // @import 'bootstrap/scss/pagination';
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 8046131..328e52a 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -5,9 +5,16 @@
     opacity: .87;
 }
 
+.sticky {
+    background-color: hsl(195, 4%, 22%);
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+}
+
 .rarity-icon svg {
-  height: 14.5px;
-  width: auto;
+  height: .9rem;
+  line-height: .9rem;
   display: inline-block;
 }
 
diff --git a/src/components/RarityIcon.astro b/src/components/RarityIcon.astro
index bc39bae..63cb976 100644
--- a/src/components/RarityIcon.astro
+++ b/src/components/RarityIcon.astro
@@ -26,10 +26,10 @@ const rarityMap = {
   "Double Rare": doubleRare,
   "Promo": promo,
   "Special Illustration Rare": specialIllusRare,
-  "Ultra Rare": ultrarare, // Ultra Rare and Holo Rare use the same icon
+  "Ultra Rare": ultrarare,
 };
 
-const svg = rarityMap[rarity] ?? "";
+const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
 ---
 
-<span class="rarity-icon h-100" set:html={svg}></span>
+<div class="rarity-icon" set:html={svg}></div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 478d8ab..0762abb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -6,7 +6,6 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
-		<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" as="style" />
 		<title>Rigid's app thing</title>
 	</head>
 	<body>
diff --git a/src/pages/pokemon.astro b/src/pages/pokemon.astro
index 6a2e8ec..182dd07 100644
--- a/src/pages/pokemon.astro
+++ b/src/pages/pokemon.astro
@@ -1,61 +1,17 @@
 ---
 import Layout from '../layouts/Main.astro';
-import RarityIcon from "../components/RarityIcon.astro";
-
-//import { eq } from 'drizzle-orm';
-import { db } from '../db';
-//import * as schema from '../db/schema.ts';
-
-// Get some sample Pokemon data from the database
-//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
-const pokemon = await db.query.cards.findMany({
-    where: { productLineName: "pokemon" },
-    limit: 320,
-    with: {
-        prices: true,
-    }
-});
-
-const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
+import CardGrid from "../components/CardGrid.astro";
+import Card from "../components/Card.astro";
+import StickyFilter from '../components/StickyFilter.astro';
 ---
 
 <Layout>
+<StickyFilter />
 <div class="container">
     <h1 class="my-5">Rigid's app thing</h1>
-    <div class="row">
-        <div class="col-sm-12 col-md-3">
-            <div class="h5">Inventory management placeholder</div>
-        </div>
-        <div class="col-sm-12 col-md-9">
-                <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
-            {pokemon.map((card) => (
-                <div class="col">
-                    <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
-                    <div class="col-auto h6 my-0">{card.productName}</div>
-                    <div class="d-flex justify-content-between">
-                        <div class="copy-small">{card.number}</div>
-                        <RarityIcon rarity={card.rarityName} />
-                    </div>
-                    <div class="row row-cols-5 gx-1 mt-1">
-                    {card.prices
-                        .slice()
-                        .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
-                        .filter((price, index, arr) =>
-                        arr.findIndex(p => p.condition === price.condition) === index
-                        )
-                        .map((price) => (
-                        <div class="col p price-label">
-                            {price.condition.split(' ').map((w) => w[0]).join('')}
-                            <br />${price.marketPrice}
-                        </div>
-                        ))}
-                    </div>
-                </div>
-            ))}
-
-        </div>
-        </div>
-    </div>
-    
+    <CardGrid>
+        <Card slot="Card"></Card>
+    </CardGrid>
 </div>
-</Layout>
+</div>
+</Layout>
\ No newline at end of file
