diff --git a/src/components/Card.astro b/src/components/Card.astro
index bd6d597..ad4929f 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,61 +1,30 @@
 ---
-interface Props {
-	title: string;
-	body: string;
-	href: string;
+import pb from "../lib/pb";
+
+const { href, title, body, image } = Astro.props;
+let imageURL;
+
+if (image) {
+  imageURL = pb.files.getUrl(image, image.file);
 }
-
-const { href, title, body } = Astro.props;
 ---
 
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>
+<div class="relative max-w-xl mx-auto mt-20 h-32 w-64">
+  <a href={href} class="block">
+    {
+      image && (
+        <img
+          class="h-32 w-64 object-cover rounded-md"
+          src={imageURL}
+          alt={`Cover for ${title}`}
+        />
+      )
+    }
+
+    <div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
+    <div class="absolute inset-0 inline-flex flex-col items-center justify-center">
+      <h2 class="text-white text-3xl font-bold">{title}</h2>
+      <span class="text-white">{body}</span>
+    </div>
+  </a>
+</div>
diff --git a/src/components/Image.astro b/src/components/Image.astro
index 30f3f29..a36a4ef 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -1,14 +1,50 @@
 ---
-import { Image as AstroImage } from "astro:assets";
-const { src, alt } = Astro.props;
+import { Picture as AstroPic } from "astro:assets";
+const { src, alt, nsfw } = Astro.props;
 ---
 
-<AstroImage
-  src={src}
-  alt={alt}
-  inferSize={true}
-  format="avif"
-  quality={50}
-  class="rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg max-w-48"
-  loading="lazy"
-/>
+<div class="overflow-hidden rounded" data-nsfw={`${nsfw}`}>
+  <div
+    data-lightbox="true"
+    id="parent"
+    class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
+  >
+    <img src={src} alt={alt} loading="lazy" />
+    {
+      alt && (
+        <div
+          id="info"
+          class="z-[2] absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
+        >
+          {alt}
+        </div>
+      )
+    }
+  </div>
+</div>
+
+<script>
+  import { nsfw } from "../lib/stores/nsfw";
+
+  const nsfwImages = document.querySelectorAll('[data-nsfw="true"]');
+  nsfw.subscribe((nsfw) => {
+    if (nsfw) {
+      // @ts-ignore
+      nsfwImages.forEach((image) => (image.style.display = "inherit"));
+    } else {
+      // @ts-ignore
+      nsfwImages.forEach((image) => (image.style.display = "none"));
+    }
+  });
+</script>
+
+<style>
+  #parent:hover > #info {
+    opacity: 70;
+  }
+
+  #info {
+    background-color: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(5px);
+  }
+</style>
diff --git a/src/components/IndexSidebar.astro b/src/components/IndexSidebar.astro
new file mode 100644
index 0000000..dbcbd8c
--- /dev/null
+++ b/src/components/IndexSidebar.astro
@@ -0,0 +1,78 @@
+---
+import { Image } from "astro:assets";
+import config from "../../config.yaml";
+import SocialCard from "./SocialCard.astro";
+const {} = Astro.props;
+---
+
+<aside>
+  <div class="p-4">
+    <a href="/">
+      {
+        config.icon && (
+          <Image
+            class={"icon"}
+            src={config.icon}
+            width={10}
+            height={10}
+            alt={""}
+          />
+        )
+      }
+      <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
+    >
+    <p class="pt-4">{config.description}</p>
+    <br />
+    <div class="flex flex-col">
+      <h1 class="font-bold text-2xl pt-4">Socials</h1>
+      <div
+        id="socials"
+        class="flex gap-4 columns-2 md:columns-4  pt-4"
+      >
+        {
+          config.socials &&
+            config.socials.map((s) => (
+              <a href={s.url} target="_blank">
+                {/* <img src={s.icon} alt={s.name} /> */}
+                <span class="hover:underline">{s.name}</span>
+              </a>
+            ))
+        }
+      </div>
+      <!-- Links to Subpages -->
+      <br />
+      <br />
+      <div class="text-2xl">
+        <h1 class="font-bold text-2xl pt-4">Pages</h1>
+        <div
+          id="pages"
+          class="flex gap-4 columns-2 md:columns-4 self-center pt-4"
+        >
+          <ul>
+            {
+              [
+                { page: "Characters", url: "/characters" },
+                // { page: "Comics", url: "/comics" },
+              ].map((s) => (
+                <a href={s.url}>
+                  {/* <img src={s.icon} alt={s.name} /> */}
+                  <li class="hover:underline">{s.page}</li>
+                </a>
+              ))
+            }
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    img.icon {
+      width: 10rem;
+      margin: 0 auto;
+      object-fit: cover;
+      object-position: center;
+      border-radius: 100%;
+    }
+  </style>
+</aside>
diff --git a/src/components/Lightbox.astro b/src/components/Lightbox.astro
new file mode 100644
index 0000000..c4cecd4
--- /dev/null
+++ b/src/components/Lightbox.astro
@@ -0,0 +1,110 @@
+<figure class="place-content-center app-lightbox">
+  <img class="portal" />
+  <figcaption class="desc rounded font-bold"></figcaption>
+</figure>
+
+<script>
+  // @ts-nocheck
+  const lbTriggers = document.querySelectorAll('[data-lightbox="true"]');
+  const lightbox = document.querySelector(".app-lightbox");
+  let portal = lightbox.querySelector(".portal");
+  let desc = lightbox.querySelector(".desc");
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const trig of lbTriggers) {
+    trig.addEventListener("click", () => {
+      const T = trig.getElementsByTagName("img")[0];
+
+      portal.src = T.src;
+      // console.log();
+      if (!T.alt) desc.classList.add('hidden');
+      else desc.classList.remove('hidden')
+      desc.innerHTML = T.alt;
+
+      setTimeout(() => {
+        // Adapt size attribute dynamically
+
+        const img = portal;
+        const ratio = img.naturalWidth / img.naturalHeight;
+        img.sizes = `${window.innerHeight * ratio}px`;
+      }, 352);
+
+      lightbox.classList.add("is-active");
+      document.documentElement.classList.add("scrollIsLocked");
+    });
+  }
+
+  lightbox.addEventListener("click", () => {
+    // console.log('cli');
+
+    lightbox.classList.remove("is-active");
+    document.documentElement.classList.remove("scrollIsLocked");
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      // console.log(e);
+
+      lightbox.classList.remove("is-active");
+      document.documentElement.classList.remove("scrollIsLocked");
+    }
+  });
+</script>
+
+<style lang="scss">
+  .app-lightbox {
+    position: fixed;
+    margin: auto auto;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    cursor: zoom-out;
+    // TODO: map color to API
+    background-color: var(--bg-color, hsl(0, 0%, 0%, 0.85));
+    opacity: 0;
+    transition: opacity 0.35s;
+
+    &.is-active {
+      pointer-events: initial;
+      opacity: 1;
+    }
+  }
+
+  :global([data-lightbox]) {
+    cursor: zoom-in;
+  }
+
+  .portal {
+    display: flex;
+
+    margin: auto auto;
+    padding: 2rem;
+    max-width: 90%;
+    max-height: 90%;
+    // TODO: map speed to API
+    transition:
+      opacity 0.35s,
+      transform 0.35s;
+    transform: scale(0.2);
+
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .is-active & {
+      transform: scale(1);
+    }
+  }
+
+  .desc {
+    background-color: white;
+    max-width: 20%;
+    margin: auto auto;
+    padding: 1rem;
+  }
+</style>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 1659a20..fdf4cd1 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -1,24 +1,63 @@
 ---
 import { Image } from "astro:assets";
-import config from "../../config.json";
-
-const {class} = Astro.props
+import config from "../../config.yaml";
+const {} = Astro.props;
 ---
 
 <aside>
-<div>
-  <h1>{config.title}</h1>
-  <p class="text-red-500 md:text-black">awa</p>
-
-  <Image class={"icon"} src={config.icon} alt={""} inferSize />
-</div>
+  <div class="p-4">
+    <a href="/">
+      {
+        config.icon && (
+          <Image
+            class={"icon"}
+            src={config.icon}
+            alt={"Icon"}
+            width={50}
+            height={50}
+          />
+        )
+      }
+      <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
+    >
+    <p class="pt-4">{config.description}</p>
+    {
+      config.socials &&
+        config.socials.map((s) => (
+          <a href={s.url} target="_blank" rel="noopener noreferrer">
+            {/* <img src={s.icon} alt={s.name} /> */}
+            <span class="">{s.name}</span>
+          </a>
+        ))
+    }
+    <br />
+    <button class="bg-gray-600 p-1 mt-4" id="nsfwButton">loading...</button>
+  </div>
 </aside>
 
+<script>
+  // @ts-nocheck
+  import { nsfw } from "../lib/stores/nsfw";
+
+  function toggleNsfw() {
+    nsfw.set(!nsfw.get());
+  }
+
+  nsfw.subscribe((nsfw) => {
+    if (nsfw) {
+      document.getElementById("nsfwButton").innerText = `disable nsfw`;
+    } else {
+      document.getElementById("nsfwButton").innerText = `enable nsfw`;
+    }
+  });
+
+  document.getElementById("nsfwButton").addEventListener("click", toggleNsfw);
+</script>
+
 <style>
   img.icon {
     width: 10rem;
-    height: 10rem;
-    margin: 50px auto;
+    margin: 0 auto;
     object-fit: cover;
     object-position: center;
     border-radius: 100%;
diff --git a/src/components/SocialCard.astro b/src/components/SocialCard.astro
new file mode 100644
index 0000000..727832b
--- /dev/null
+++ b/src/components/SocialCard.astro
@@ -0,0 +1,18 @@
+---
+const { href, text, image, alt } = Astro.props;
+---
+
+<div class="relative bg-black max-w-xl mx-auto mt-10 h-16">
+  <a href={href} class="block">
+    {
+      image && (
+        <img class="h-16 object-cover rounded-md" src={image} alt={alt} />
+      )
+    }
+
+    <div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
+    <div class="absolute inset-0 flex items-center justify-center">
+      <h2 class="text-white text-3xl font-bold">{text}</h2>
+    </div>
+  </a>
+</div>
diff --git a/src/layouts/CharacterList.astro b/src/layouts/CharacterList.astro
new file mode 100644
index 0000000..ecf52a5
--- /dev/null
+++ b/src/layouts/CharacterList.astro
@@ -0,0 +1,39 @@
+---
+import config from "../../config.yaml";
+import Sidebar from "../components/Sidebar.astro";
+
+const { title, background } = config;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+      <div
+        class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center"
+      >
+        <Sidebar />
+      </div>
+      <slot />
+  </body>
+</html>
+<style define:vars={{ background: `url(${background})` }}>
+  .container {
+    width: calc(100% - 25rem);
+  }
+  body {
+    font-family: system-ui, sans-serif;
+    background: var(--background);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Gallery.astro
similarity index 73%
rename from src/layouts/Layout.astro
rename to src/layouts/Gallery.astro
index 0904e97..f740aaf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Gallery.astro
@@ -1,5 +1,6 @@
 ---
-import config from "../../config.json";
+import config from "../../config.yaml";
+import Lightbox from "../components/Lightbox.astro";
 import Sidebar from "../components/Sidebar.astro";
 
 const { title, background } = config;
@@ -16,22 +17,27 @@ const { title, background } = config;
     <title>{title}</title>
   </head>
   <body>
+    <Lightbox />
     <div
-      class="relative container left-60  p-8 box-border mx-auto transition-all"
+      class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center"
+    >
+      <Sidebar />
+    </div>
+    <div
+      class="container float-none md:float-right md:container md:box-border transition-all"
     >
-      <div
-        class="fixed left-0 top-0 w-96 bg-[#ffffff59] h-full pt-8 z-[9999] box-border"
-      >
-        <Sidebar />
-      </div>
       <slot />
     </div>
   </body>
 </html>
+
 <style define:vars={{ background: `url(${background})` }}>
-  .container {
-    width: calc(100% - 25rem);
+  @media screen(md) {
+    .container {
+      width: calc(100% - 25rem);
+    }
   }
+
   body {
     font-family: system-ui, sans-serif;
     background: var(--background);
diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro
new file mode 100644
index 0000000..57b4b1b
--- /dev/null
+++ b/src/layouts/Index.astro
@@ -0,0 +1,32 @@
+---
+import config from "../../config.yaml";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{config.title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style define:vars={{ background: `url(${config.background})` }}>
+  .container {
+    width: calc(100% - 25rem);
+  }
+  body {
+    font-family: system-ui, sans-serif;
+    background: var(--background);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+  }
+</style>
diff --git a/src/lib/stores/nsfw.ts b/src/lib/stores/nsfw.ts
new file mode 100644
index 0000000..c76e078
--- /dev/null
+++ b/src/lib/stores/nsfw.ts
@@ -0,0 +1,3 @@
+import { atom } from "nanostores";
+
+export const nsfw = atom<boolean>(false);
diff --git a/src/pages/characters/[slug].astro b/src/pages/characters/[slug].astro
new file mode 100644
index 0000000..34c0ad0
--- /dev/null
+++ b/src/pages/characters/[slug].astro
@@ -0,0 +1,71 @@
+---
+import type { GetStaticPaths } from "astro";
+import Gallery from "../../layouts/Gallery.astro";
+import Image from "../../components/Image.astro";
+import pb from "../../lib/pb";
+export const getStaticPaths = (async () => {
+  const paths = await pb
+    .collection("characters")
+    .getFullList({
+      sort: "-created",
+    })
+    .then((r) => r);
+
+  // console.log(paths);
+
+  return paths.map(({ slug, name }) => {
+    return {
+      params: { slug },
+    };
+  });
+}) satisfies GetStaticPaths;
+
+const { slug } = Astro.params;
+
+const imageCollection = await pb.collection("images").getFullList({
+  sort: "-created",
+  filter: `(character.slug~"${slug}")`,
+});
+const characterDetails = await pb
+  .collection("characters")
+  .getFirstListItem(`(slug~"${slug}")`);
+// console.log(characterDetails);
+const images = imageCollection.map((record) => {
+  const url = pb.files.getUrl(record, record.file);
+  return {
+    url: url,
+    desc: record.description,
+    nsfw: record.nsfw,
+  };
+});
+---
+
+<Gallery>
+  <div class="flex flex-col">
+    <div class="pb-4">
+      <h1 class="text-2xl text-center p-8">
+        <a href={`/characters`}>
+          {characterDetails.name}
+        </a>
+      </h1>
+      {
+        characterDetails.description && (
+          <Fragment
+            class="text-xl p-8"
+            set:html={characterDetails.description}
+          />
+        )
+      }
+    </div>
+    <div class="gap-4 columns-2 md:columns-4 self-center">
+      {
+        images.map((image) => (
+          <Image nsfw={image.nsfw} src={image.url} alt={image.desc} />
+        ))
+      }
+    </div>
+  </div>
+</Gallery>
+
+<!-- <style>
+</style> -->
diff --git a/src/pages/characters/index.astro b/src/pages/characters/index.astro
new file mode 100644
index 0000000..93a4f82
--- /dev/null
+++ b/src/pages/characters/index.astro
@@ -0,0 +1,29 @@
+---
+import CharacterList from "../../layouts/CharacterList.astro";
+import pb from "../../lib/pb";
+import Card from "../../components/Card.astro";
+
+const characters = await pb
+  .collection("characters")
+  // @ts-ignore
+  .getFullList({ expand: ["icon"] });
+---
+
+<CharacterList>
+  <div class="flex flex-col">
+    <h1 class="text-2xl text-center p-8">Characters</h1>
+    <div class="flex gap-4 columns-2 md:columns-4 self-center">
+      {
+        characters.map((c) => (
+          // @ts-ignore
+          <Card
+            href={`/characters/${c.slug}`}
+            image={c.expand ? c.expand.icon : null}
+            title={c.name}
+            body={c.body}
+          />
+        ))
+      }
+    </div>
+  </div>
+</CharacterList>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f3d6ff7..ed3b3fb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,42 +1,12 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Image from "../components/Image.astro";
-
-const images = [
-  "https://randomfox.ca/images/1.jpg",
-  "https://randomfox.ca/images/2.jpg",
-  "https://randomfox.ca/images/3.jpg",
-  "https://randomfox.ca/images/4.jpg",
-  "https://randomfox.ca/images/5.jpg",
-  "https://randomfox.ca/images/6.jpg",
-  "https://randomfox.ca/images/7.jpg",
-  "https://randomfox.ca/images/8.jpg",
-  "https://randomfox.ca/images/9.jpg",
-  "https://randomfox.ca/images/10.jpg",
-  "https://randomfox.ca/images/11.jpg",
-  "https://randomfox.ca/images/12.jpg",
-  "https://randomfox.ca/images/13.jpg",
-  "https://randomfox.ca/images/14.jpg",
-  "https://randomfox.ca/images/15.jpg",
-  "https://randomfox.ca/images/16.jpg",
-  "https://randomfox.ca/images/17.jpg",
-  "https://randomfox.ca/images/18.jpg",
-  "https://randomfox.ca/images/19.jpg",
-  "https://randomfox.ca/images/20.jpg",
-];
+import Sidebar from "../components/IndexSidebar.astro";
+import IndexLayout from "../layouts/Index.astro";
 ---
 
-<Layout>
-  <div class="text-center my-16 mb-32">
-    ... album title and description ...
-
-    <div class="columns-3">
-      {images.map((image) => <Image src={image} alt="" />)}
+<IndexLayout>
+  <div class="flex flex-col ">
+    <div class=" flex gap-4 columns-2 md:columns-4 self-center">
+      <Sidebar />
     </div>
-
-    ... rest of the page ...
   </div>
-</Layout>
-
-<!-- <style>
-</style> -->
+</IndexLayout>