diff --git a/src/layouts/CharacterList.astro b/src/layouts/CharacterList.astro
index d7c867d..fcc95b3 100644
--- a/src/layouts/CharacterList.astro
+++ b/src/layouts/CharacterList.astro
@@ -4,17 +4,21 @@ import Sidebar from "../components/Sidebar.astro";
 import pb from "../lib/pb";
 import c from "../lib/config";
 
-
 const avatarRec = await pb
   .collection("images")
-  .getFirstListItem("useAsAvatar=true").catch(() => null);
+  .getFirstListItem("useAsAvatar=true", { requestKey: null })
+  .catch(() => null);
 const backgroundRec = await pb
   .collection("images")
-  .getFirstListItem("useAsBackground=true").catch(() => null);
+  .getFirstListItem("useAsBackground=true", { requestKey: null })
+  .catch(() => null);
 
-
-const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
-const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
+const icon = avatarRec
+  ? await pb.files.getUrl(avatarRec, avatarRec.file)
+  : null;
+const background = backgroundRec
+  ? await pb.files.getUrl(backgroundRec, backgroundRec.file)
+  : null;
 const socials = await pb.collection("socials").getFullList();
 
 const config = {
@@ -39,19 +43,24 @@ export const prerender = false;
     <title>{config.title}</title>
   </head>
   <body>
-    <div
-      class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
+<div class="xl:flex">
+      <div
+      class="static xl:h-screen xl:relative  w-full xl:w-96 bg-[#11111156] backdrop-blur-md backdrop-brightness-50 h-full pt-4 box-border text-center"
     >
       <Sidebar />
     </div>
-    <slot />
+    <div
+      class="max-w-fit ml-auto mr-auto transition-all"
+    >
+      <slot />
+    </div>
+</div>
   </body>
 </html>
 <style define:vars={{ background: `url(${config.background})` }}>
-  .container {
-    width: calc(100% - 25rem);
-  }
-  body {
+
+
+body {
     font-family: system-ui, sans-serif;
     background: var(--background);
     background-size: cover;
diff --git a/src/layouts/Gallery.astro b/src/layouts/Gallery.astro
index 143dc94..e867892 100644
--- a/src/layouts/Gallery.astro
+++ b/src/layouts/Gallery.astro
@@ -39,25 +39,23 @@ const config = {
   </head>
   <body>
     <Lightbox />
-    <div
-      class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md  h-full pt-4  box-border text-center"
+    <div class="xl:flex">
+      <div
+      class="tatic xl:h-screen xl:relative  w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
     >
       <Sidebar />
     </div>
     <div
-      class="container float-none xl:float-right xl:box-border transition-all"
+      class="max-w-fit ml-auto mr-auto transition-all"
     >
       <slot />
     </div>
+    </div>
   </body>
 </html>
 
 <style define:vars={{ background: `url(${config.background})` }}>
-  @media screen(xl) {
-    .container {
-      width: calc(100% - 25rem);
-    }
-  }
+
 
   body {
     font-family: system-ui, sans-serif;
diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro
index d973d1c..1f08bc8 100644
--- a/src/layouts/Index.astro
+++ b/src/layouts/Index.astro
@@ -20,15 +20,15 @@ const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgrou
     <meta name="generator" content={Astro.generator} />
     <title>{config.TITLE}</title>
   </head>
-  <body>
-    <slot />
+  <body class="flex h-screen">
+    <div class="m-auto">
+      <slot />
+    </div>
   </body>
 </html>
 
 <style define:vars={{ background: `url(${background})` }}>
-  .container {
-    width: calc(100% - 25rem);
-  }
+
   body {
     font-family: system-ui, sans-serif;
     background: var(--background);
diff --git a/src/pages/characters/index.astro b/src/pages/characters/index.astro
index 80f12d9..ad786f1 100644
--- a/src/pages/characters/index.astro
+++ b/src/pages/characters/index.astro
@@ -6,28 +6,52 @@ import Card from "../../components/Card.astro";
 const characters = await pb
   .collection("characters")
   // @ts-ignore
-  .getFullList({ expand: ["icon"], filter: `(hidden = false)` });
+  .getFullList({ expand: ["icon"], filter: `(hidden = false)`, requestKey: null });
 
 export const prerender = false;
 ---
 
 <CharacterList>
   <div class="flex flex-col">
-    <h1 class="text-3xl text-center pt-8">Characters</h1>
-    <div
-      class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4"
-    >
-      {
-        [...characters].map((c) => (
-          // @ts-ignore
-          <Card
-            href={`/characters/${c.slug}`}
-            image={c.expand ? c.expand.icon : null}
-            title={c.name}
-            body={c.body}
-          />
-        ))
-      }
-    </div>
+  <h1 class="text-3xl text-center pt-8">Characters</h1>
+  <!-- class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4" -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 self-center p-4">
+    {
+      // @ts-ignore
+      characters.length === 0 && (
+        <div class="text-center col-span-full">
+          <p class="text-lg">No characters found.</p>
+        </div>
+      )
+    }
+    {
+      // @ts-ignore
+      characters.length === 0 && (
+        <div class="text-center col-span-full">
+          <p class="text-lg">No characters found.</p>
+        </div>
+      )
+    }
+    {
+      [...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>
+
+<style>
+@media screen(md) {
+    .container {
+      width: calc(100% - 25rem);
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index deebbeb..80bc696 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,8 +5,8 @@ import IndexLayout from "../layouts/Index.astro";
 ---
 
 <IndexLayout>
-  <div class="flex flex-col ">
-    <div class=" flex gap-4 columns-2 md:columns-4 self-center">
+  <div class="flex flex-col items-center justify-centerß">
+    <div class="mx-auto my-auto">
       <Sidebar />
     </div>
   </div>
