diff --git a/src/app/(category-sidebar)/[collection]/page.tsx b/src/app/(category-sidebar)/[collection]/page.tsx
new file mode 100644
index 0000000..55fcf75
--- /dev/null
+++ b/src/app/(category-sidebar)/[collection]/page.tsx
@@ -0,0 +1,53 @@
+import { Link } from "@/components/ui/link";
+import { db } from "@/db";
+import { products } from "@/db/schema";
+import { count } from "drizzle-orm";
+import Image from "next/image";
+
+export default async function Home(props: {
+  params: {
+    collection: string;
+  };
+}) {
+  const collections = await db.query.collections.findMany({
+    with: {
+      categories: true,
+    },
+    where: (collections, { eq }) =>
+      eq(collections.name, decodeURIComponent(props.params.collection)),
+    orderBy: (collections, { asc }) => asc(collections.name),
+  });
+  let imageCount = 0;
+
+  return (
+    <div className="w-full p-4">
+      {collections.map((collection) => (
+        <div key={collection.name}>
+          <h2 className="text-xl font-semibold">{collection.name}</h2>
+          <div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
+            {collection.categories.map((category) => (
+              <Link
+                prefetch={true}
+                key={category.name}
+                className="flex w-[125px] flex-col items-center text-center"
+                href={`/products/${category.slug}`}
+              >
+                <Image
+                  loading={imageCount++ < 15 ? "eager" : "lazy"}
+                  decoding="sync"
+                  src={category.image_url ?? "/placeholder.svg"}
+                  alt={`A small picture of ${category.name}`}
+                  className="mb-2 h-14 w-14 border hover:bg-yellow-200"
+                  width={48}
+                  height={48}
+                  quality={65}
+                />
+                <span className="text-xs">{category.name}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index 36bb83b..1924c68 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -6,12 +6,15 @@ export default async function Layout({
 }: {
   children: React.ReactNode;
 }) {
-  const allCategories = await db.query.categories.findMany({
-    orderBy: (categories, { asc }) => asc(categories.name),
+  const allCategories = await db.query.collections.findMany({
+    with: {
+      categories: true,
+    },
+    orderBy: (collections, { asc }) => asc(collections.name),
   });
   return (
-    <div className="flex flex-grow font-helvetica-roman">
-      <aside className="hidden w-48 min-w-48 border-r border-gray-400 p-3 md:block">
+    <div className="flex flex-grow overflow-hidden font-helvetica-roman">
+      <aside className="sticky hidden h-screen w-64 min-w-64 max-w-64 border-r p-4 md:block">
         <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
           Choose a Category
         </h2>
@@ -20,7 +23,7 @@ export default async function Layout({
             <li key={category.name} className="w-full">
               <Link
                 prefetch={true}
-                href={`/products/${category.slug}`}
+                href={`/${category.name}`}
                 className="block w-full py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline"
               >
                 {category.name}
@@ -29,7 +32,9 @@ export default async function Layout({
           ))}
         </ul>
       </aside>
-      <main className="flex-grow">{children}</main>
+      <main className="h-[calc(100vh-73px)] flex-grow overflow-y-auto p-4 pt-0">
+        {children}
+      </main>
     </div>
   );
 }
diff --git a/src/app/(category-sidebar)/page.tsx b/src/app/(category-sidebar)/page.tsx
index c9b97cd..9153a9a 100644
--- a/src/app/(category-sidebar)/page.tsx
+++ b/src/app/(category-sidebar)/page.tsx
@@ -19,17 +19,17 @@ export default async function Home() {
   return (
     <div className="w-full p-4">
       <div className="mb-2 w-full flex-grow border-b-[1px] border-green-800 text-sm font-semibold text-black">
-        Explore {productCount.at(0)?.count} products
+        Explore {productCount.at(0)?.count.toLocaleString()} products
       </div>
       {collections.map((collection) => (
         <div key={collection.name}>
           <h2 className="text-xl font-semibold">{collection.name}</h2>
-          <div className="grid grid-cols-2 gap-4 border-b-2 py-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+          <div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
             {collection.categories.map((category) => (
               <Link
                 prefetch={true}
                 key={category.name}
-                className="flex flex-col items-center text-center"
+                className="flex w-[125px] flex-col items-center text-center"
                 href={`/products/${category.slug}`}
               >
                 <Image
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2e22de3..0b6044c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -54,24 +54,24 @@ export default async function RootLayout({
   return (
     <html lang="en" className="h-full">
       <body
-        className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
+        className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col overflow-y-hidden antialiased`}
       >
-        <div className="flex flex-grow flex-col">
-          <div className="flex w-full justify-end px-4 pt-2 text-sm hover:underline">
-            <Suspense
-              fallback={
-                <button className="flex flex-row items-center gap-1">
-                  <div className="h-[20px]" />
-                  <svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
-                    <polygon points="0,0 5,6 10,0"></polygon>
-                  </svg>
-                </button>
-              }
-            >
-              <AuthServer />
-            </Suspense>
-          </div>
-          <header className="flex flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+        <header className="sticky top-0 z-10 flex w-[100vw] flex-grow flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 bg-background p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+          <div className="flex flex-grow flex-col">
+            <div className="flex w-full justify-end px-4 pt-2 font-sans text-sm hover:underline">
+              <Suspense
+                fallback={
+                  <button className="flex flex-row items-center gap-1">
+                    <div className="h-[20px]" />
+                    <svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
+                      <polygon points="0,0 5,6 10,0"></polygon>
+                    </svg>
+                  </button>
+                }
+              >
+                <AuthServer />
+              </Suspense>
+            </div>
             <div className="flex w-full items-center justify-center sm:w-auto">
               <Link
                 prefetch={true}
@@ -80,45 +80,45 @@ export default async function RootLayout({
               >
                 NextMaster
               </Link>
-            </div>
-            <div className="items flex w-full flex-row items-center justify-between gap-4">
-              <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
-                <SearchDropdownComponent />
-              </div>
-              <div className="flex flex-row justify-between space-x-4">
-                <div className="relative">
+              <div className="items flex w-full flex-row items-center justify-between gap-4">
+                <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
+                  <SearchDropdownComponent />
+                </div>
+                <div className="flex flex-row justify-between space-x-4">
+                  <div className="relative">
+                    <Link
+                      prefetch={true}
+                      href="/order"
+                      className="text-lg text-green-800 hover:underline"
+                    >
+                      ORDER
+                    </Link>
+                    <Suspense>
+                      <Cart />
+                    </Suspense>
+                  </div>
+                  <Link
+                    prefetch={true}
+                    href="/order-history"
+                    className="hidden text-lg text-green-800 hover:underline md:block"
+                  >
+                    ORDER HISTORY
+                  </Link>
                   <Link
                     prefetch={true}
-                    href="/order"
-                    className="text-lg text-green-800 hover:underline"
+                    href="/order-history"
+                    aria-label="Order History"
+                    className="block text-lg text-green-800 hover:underline md:hidden"
                   >
-                    ORDER
+                    <MenuIcon />
                   </Link>
-                  <Suspense>
-                    <Cart />
-                  </Suspense>
                 </div>
-                <Link
-                  prefetch={true}
-                  href="/order-history"
-                  className="hidden text-lg text-green-800 hover:underline md:block"
-                >
-                  ORDER HISTORY
-                </Link>
-                <Link
-                  prefetch={true}
-                  href="/order-history"
-                  aria-label="Order History"
-                  className="block text-lg text-green-800 hover:underline md:hidden"
-                >
-                  <MenuIcon />
-                </Link>
               </div>
             </div>
-          </header>
-          {children}
-        </div>
-        <footer className="flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
+          </div>
+        </header>
+        {children}
+        <footer className="sticky bottom-0 flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
           <div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
             <span className="hover:bg-yellow-100 hover:underline">Home</span>
             <span>|</span>
diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index 2f7a1f1..e15c2fd 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -26,7 +26,8 @@ async function prefetchImages(href: string) {
   const imageResponse = await fetch(`/api/prefetch-images${url.pathname}`, {
     priority: "low",
   });
-  if (!imageResponse.ok) {
+  // only throw in dev
+  if (!imageResponse.ok && process.env.NODE_ENV === "development") {
     throw new Error("Failed to prefetch images");
   }
   const { images } = await imageResponse.json();