diff --git a/package-lock.json b/package-lock.json
index abacc6c..bd9d609 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,17 @@
 {
   "name": "kener",
-  "version": "3.2.10",
+  "version": "3.2.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kener",
-      "version": "3.2.10",
+      "version": "3.2.11",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.10",
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.2",
diff --git a/package.json b/package.json
index 2c51ed4..16106cd 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,8 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "^7.26.10",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.3.2",
diff --git a/src/kener.css b/src/kener.css
index 4dae4a6..8e38f5a 100644
--- a/src/kener.css
+++ b/src/kener.css
@@ -1,108 +1,10 @@
 /*one is the class for dotted background*/
 
-.dots-pattern {
-  position: absolute;
-  top: 0px;
-  left: 0;
-  width: 100%;
-  z-index: 0;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  height: 100svh;
-  background: linear-gradient(177deg, rgba(255, 137, 131, 0.5) 0%, rgba(35, 136, 224, 0.05) 60%);
-  clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%);
-}
-
-.dots-pattern::after {
-  content: "";
-  position: absolute;
-  background-image: radial-gradient(rgba(0, 0, 0, 0) 1.5px, var(--background-kener) 1px);
-  background-size: 14px 14px;
-  width: 100%;
-  height: 100vh;
-  top: 0;
-  transform: blur(3px);
-  left: 0;
-}
-
-.squares-pattern {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 0;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  height: 100svh;
-
-  /* clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%); */
-}
-
-.squares-pattern::after {
-  content: "";
-  position: absolute;
-  background-image:
-    linear-gradient(#444cf7 1px, transparent 1px),
-    linear-gradient(to right, #444cf7 1px, var(--background-kener) 1px);
-  -webkit-mask-image: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.8) 20%,
-    rgba(0, 0, 0, 0.6) 40%,
-    rgba(0, 0, 0, 0.4) 60%,
-    rgba(0, 0, 0, 0.2) 80%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-image: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.2) 0%,
-    rgba(0, 0, 0, 0.1) 20%,
-    rgba(0, 0, 0, 0.05) 40%,
-    rgba(0, 0, 0, 0.025) 60%,
-    rgba(0, 0, 0, 0.0125) 80%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  background-size: 32px 32px;
-  width: 100%;
-  height: 100vh;
-  top: 0;
-
-  left: 0;
-}
-.dark .squares-pattern::after {
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.5) 0%,
-    rgba(0, 0, 0, 0.25) 20%,
-    rgba(0, 0, 0, 0.125) 40%,
-    rgba(0, 0, 0, 0.0625) 60%,
-    rgba(0, 0, 0, 0.03125) 80%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-image: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.5) 0%,
-    rgba(0, 0, 0, 0.25) 20%,
-    rgba(0, 0, 0, 0.125) 40%,
-    rgba(0, 0, 0, 0.0625) 60%,
-    rgba(0, 0, 0, 0.03125) 80%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  background-image:
-    linear-gradient(#616fbf 1px, transparent 1px),
-    linear-gradient(to right, #616fbf 1px, var(--background-kener) 1px);
-}
-
 /*Needed to overlay content on top of dotted bg*/
 section {
   position: relative;
   z-index: 1;
 }
-/*Needed overlay content on top of dotted bg*/
-.blurry-bg {
-  /* background-color: var(--background-kener-rgba);
-	box-shadow: 0 0 64px 64px var(--background-kener-rgba); */
-}
 
 :root {
   --up-color: #4ead94;
@@ -952,3 +854,25 @@ textarea::placeholder {
 p code:not([class^="language-"]) {
   @apply rounded-sm bg-yellow-100 px-1 py-0.5 font-mono text-xs dark:bg-neutral-700  dark:text-neutral-100;
 }
+
+.kener-theme-mono .section-hero .h1,
+.kener-theme-mono-hero-h1 {
+  @apply text-foreground;
+}
+
+.kener-theme-default .section-hero .h1,
+.kener-theme-default-hero-h1 {
+  @apply bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-transparent;
+}
+.kener-theme-sunset .section-hero .h1,
+.kener-theme-sunset-hero-h1 {
+  @apply bg-gradient-to-r from-yellow-500 via-red-500 to-pink-500 bg-clip-text text-transparent;
+}
+.kener-theme-forest .section-hero .h1,
+.kener-theme-forest-hero-h1 {
+  @apply bg-gradient-to-l from-blue-500 via-teal-500 to-green-500 bg-clip-text text-transparent;
+}
+.kener-theme-ocean .section-hero .h1,
+.kener-theme-ocean-hero-h1 {
+  @apply bg-gradient-to-l from-cyan-500 via-blue-500 to-indigo-500 bg-clip-text text-transparent;
+}
diff --git a/src/lib/anywhere.js b/src/lib/anywhere.js
index 244e9f9..606a32c 100644
--- a/src/lib/anywhere.js
+++ b/src/lib/anywhere.js
@@ -66,7 +66,7 @@ export const WebhookJSONTemplate = JSON.stringify(
     actions: [
       {
         text: "{{action_text}}",
-        url: "{{action_url}}",
+        url: "{{{action_url}}}",
       },
     ],
   },
diff --git a/src/lib/components/manage/homePage.svelte b/src/lib/components/manage/homePage.svelte
index 3eaf596..e594f0b 100644
--- a/src/lib/components/manage/homePage.svelte
+++ b/src/lib/components/manage/homePage.svelte
@@ -8,6 +8,7 @@
   import * as Select from "$lib/components/ui/select";
   import locales from "$lib/locales/locales.json?raw";
   import GMI from "$lib/components/gmi.svelte";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 
   import Loader from "lucide-svelte/icons/loader";
   import X from "lucide-svelte/icons/x";
@@ -16,6 +17,11 @@
   import Play from "lucide-svelte/icons/play";
   import { Tooltip } from "bits-ui";
 
+  import CodeMirror from "svelte-codemirror-editor";
+  import { html } from "@codemirror/lang-html";
+  import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+  import { mode } from "mode-watcher";
+
   export let data;
 
   let formStateHero = "idle";
@@ -34,6 +40,15 @@
   let homeIncidentCount = 10;
   let homeIncidentStartTimeWithin = 30;
   let incidentGroupView = "EXPAND_FIRST";
+  let kenerTheme = "default";
+
+  let availableThemes = [
+    { name: "Default", value: "default" },
+    { name: "Mono", value: "mono" },
+    { name: "Sunset", value: "sunset" },
+    { name: "Forest", value: "forest" },
+    { name: "Ocean", value: "ocean" }
+  ];
 
   let nav = [];
   let categories = [];
@@ -74,6 +89,9 @@
   if (data.siteData.footerHTML) {
     footerHTML = data.siteData.footerHTML;
   }
+  if (data.siteData.kenerTheme) {
+    kenerTheme = data.siteData.kenerTheme;
+  }
   if (data.siteData.tzToggle) {
     tzToggle = data.siteData.tzToggle;
   }
@@ -105,6 +123,19 @@
       heroError = data.error;
       return;
     }
+    saveTheme();
+  }
+
+  async function saveTheme() {
+    let resp = await storeSiteData({
+      kenerTheme: kenerTheme
+    });
+    //print data
+    let data = await resp.json();
+    if (data.error) {
+      alert(data.error);
+      return;
+    }
   }
 
   let navErrorMessage = "";
@@ -258,44 +289,16 @@
     <Card.Description>Configure the hero section of your site.</Card.Description>
   </Card.Header>
   <Card.Content>
-    <form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmitHero}>
+    <form class="mx-auto mt-4 flex flex-col gap-y-4" on:submit|preventDefault={formSubmitHero}>
       <div class="flex w-full flex-row justify-evenly gap-2">
         <div class="w-full">
-          <Label for="hero_title">
-            Title
-            <Tooltip.Root openDelay={100}>
-              <Tooltip.Trigger class="">
-                <Info class="inline-block h-4 w-4 text-muted-foreground" />
-              </Tooltip.Trigger>
-              <Tooltip.Content class="max-w-md">
-                <div
-                  class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-                >
-                  You can set the title of the hero section here. This will be displayed on the top of the page.
-                </div>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </Label>
+          <Label for="hero_title">Title</Label>
           <Input bind:value={hero.title} class="mt-2" type="text" id="hero_title" placeholder="Status Page for Kener" />
         </div>
       </div>
       <div class="flex w-full flex-row justify-evenly gap-2">
         <div class="w-full">
-          <Label for="hero_subtitle">
-            Subtitle
-            <Tooltip.Root openDelay={100}>
-              <Tooltip.Trigger class="">
-                <Info class="inline-block h-4 w-4 text-muted-foreground" />
-              </Tooltip.Trigger>
-              <Tooltip.Content class="max-w-md">
-                <div
-                  class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-                >
-                  You can set the subtitle of the hero section here. This will be displayed below the title.
-                </div>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </Label>
+          <Label for="hero_subtitle">Subtitle</Label>
           <Input
             bind:value={hero.subtitle}
             class="mt-2"
@@ -305,12 +308,49 @@
           />
         </div>
       </div>
+      <div class="flex flex-col gap-y-2">
+        <div>
+          <Label>Color</Label>
+        </div>
+        <div class="flex flex-row gap-x-2 rounded-md border p-2">
+          <div class="w-3/4 pt-2">
+            <span class="kener-theme-{kenerTheme}-hero-h1 font-medium">{hero.title}</span>
+          </div>
+          <div class="flex w-1/4 justify-end">
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <Button variant="outline">
+                  {availableThemes.find((el) => el.value === kenerTheme)?.name || "Mono"}
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content>
+                {#each availableThemes as theme}
+                  <DropdownMenu.Group>
+                    <DropdownMenu.Item>
+                      <Button
+                        variant="ghost"
+                        class="h-6 w-full justify-start text-xs"
+                        on:click={() => {
+                          kenerTheme = theme.value;
+                        }}
+                      >
+                        {theme.name}
+                      </Button>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Group>
+                {/each}
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </div>
+        </div>
+      </div>
+
       <div class="flex w-full justify-end gap-x-2">
         {#if !!heroError}
           <div class="py-2 text-sm font-medium text-destructive">{heroError}</div>
         {/if}
         <Button type="submit" disabled={formStateHero === "loading"}>
-          Save
+          Save Hero Section
           {#if formStateHero === "loading"}
             <Loader class="ml-2 inline h-4 w-4 animate-spin" />
           {/if}
@@ -370,7 +410,7 @@
         </div>
         <div class="pt-8">
           <Button type="submit" disabled={formStateIncident === "loading"}>
-            Save
+            Save Incidents Settings
             {#if formStateIncident === "loading"}
               <Loader class="ml-2 inline h-4 w-4 animate-spin" />
             {/if}
@@ -495,7 +535,7 @@
           <span class="text-sm font-medium text-destructive"> {navErrorMessage} </span>
         </p>
         <Button type="submit" disabled={formStateHero === "loading"}>
-          Save
+          Save Navigation
           {#if formStateHero === "loading"}
             <Loader class="ml-2 inline h-4 w-4 animate-spin" />
           {/if}
@@ -574,7 +614,7 @@
           <div class="py-2 text-sm font-medium text-destructive">{i18nErrorMessage}</div>
         {/if}
         <Button type="submit" disabled={formStatei18n === "loading"}>
-          Save
+          Save Languages
           {#if formStatei18n === "loading"}
             <Loader class="ml-2 inline h-4 w-4 animate-spin" />
           {/if}
@@ -637,7 +677,7 @@
           <div class="py-2 text-sm font-medium text-destructive">{categoriesErrorMessage}</div>
         {/if}
         <Button type="submit" disabled={formStateCategories === "loading"}>
-          Save
+          Save Categories
           {#if formStateCategories === "loading"}
             <Loader class="ml-2 inline h-4 w-4 animate-spin" />
           {/if}
@@ -656,24 +696,42 @@
     <form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmitFooter}>
       <div class="flex w-full flex-row justify-evenly gap-2">
         <div class="w-full">
-          <textarea
-            bind:value={footerHTML}
-            class="mt-2 h-48 w-full rounded-sm border p-2"
-            placeholder="eg. <p>Powered by Kener</p>"
-          ></textarea>
+          <div class="overflow-hidden rounded-md">
+            <CodeMirror
+              bind:value={footerHTML}
+              lang={html()}
+              theme={$mode == "dark" ? githubDark : githubLight}
+              styles={{
+                "&": {
+                  width: "100%",
+                  maxWidth: "100%",
+                  height: "320px",
+                  border: "1px solid hsl(var(--border) / var(--tw-border-opacity))",
+                  borderRadius: "0.375rem"
+                }
+              }}
+            />
+          </div>
         </div>
       </div>
 
-      <div class="flex w-full justify-end gap-x-2">
-        {#if !!footerErrorMessage}
-          <div class="py-2 text-sm font-medium text-destructive">{footerErrorMessage}</div>
-        {/if}
-        <Button type="submit" disabled={formStateFooter === "loading"}>
-          Save
-          {#if formStateFooter === "loading"}
-            <Loader class="ml-2 inline h-4 w-4 animate-spin" />
+      <div class="flex w-full justify-between gap-x-2">
+        <div>
+          <Button variant="outline" class="mt-2" on:click={() => (footerHTML = data.defaultFooterHTML)}>
+            <span class="ml-2">Reset to default</span>
+          </Button>
+        </div>
+        <div class="flex flex-row justify-end gap-x-2">
+          {#if !!footerErrorMessage}
+            <div class="py-2 text-sm font-medium text-destructive">{footerErrorMessage}</div>
           {/if}
-        </Button>
+          <Button type="submit" disabled={formStateFooter === "loading"}>
+            Save Custom Footer
+            {#if formStateFooter === "loading"}
+              <Loader class="ml-2 inline h-4 w-4 animate-spin" />
+            {/if}
+          </Button>
+        </div>
       </div>
     </form>
   </Card.Content>
diff --git a/src/lib/components/manage/themeInfo.svelte b/src/lib/components/manage/themeInfo.svelte
index 90ef8ac..adaf5b5 100644
--- a/src/lib/components/manage/themeInfo.svelte
+++ b/src/lib/components/manage/themeInfo.svelte
@@ -14,6 +14,11 @@
   import { Tooltip } from "bits-ui";
   import ColorPicker from "svelte-awesome-color-picker";
 
+  import CodeMirror from "svelte-codemirror-editor";
+  import { css } from "@codemirror/lang-css";
+  import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+  import { mode } from "mode-watcher";
+
   export let data;
 
   let formState = "idle";
@@ -26,6 +31,7 @@
     barStyle: "PARTIAL",
     barRoundness: "ROUNDED",
     summaryStyle: "CURRENT",
+    kenerTheme: "default",
     colorsJ: {
       UP: "#4ead94",
       DOWN: "#ca3038",
@@ -95,16 +101,64 @@
       </p>
 
       <div class="flex">
-        <RadioGroup.Root bind:value={themeData.pattern} onValueChange={(e) => (themeData.pattern = e)}>
-          <div class="flex items-center space-x-2">
+        <RadioGroup.Root
+          class="flex flex-1 flex-wrap justify-start gap-4"
+          bind:value={themeData.pattern}
+          onValueChange={(e) => (themeData.pattern = e)}
+        >
+          <div class="flex w-1/6 items-center space-x-2">
             <RadioGroup.Item value="squares" id="rsq" />
             <Label for="rsq">Squares</Label>
           </div>
-          <div class="flex items-center space-x-2">
+          <div class="flex w-1/6 items-center space-x-2">
             <RadioGroup.Item value="dots" id="rdot" />
             <Label for="rdot">Dots</Label>
           </div>
-          <div class="flex items-center space-x-2">
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="tiles" id="tiles" />
+            <Label for="tiles">Tiles</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="radial-blue" id="radial-blue" />
+            <Label for="radial-blue">Radial Blue</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="radial-mono" id="radial-mono" />
+            <Label for="radial-mono">Radial Mono</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="radial-midnight" id="radial-midnight" />
+            <Label for="radial-midnight">Radial Midnight</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="circle-mono" id="circle-mono" />
+            <Label for="circle-mono">Circle Mono</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="carbon-fibre" id="carbon-fibre" />
+            <Label for="carbon-fibre">Carbon Fibre</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="texture-sky" id="texture-sky" />
+            <Label for="texture-sky">Texture Sky</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="angular-mono" id="angular-mono" />
+            <Label for="angular-mono">Angular Mono</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="angular-spring" id="angular-spring" />
+            <Label for="angular-spring">Angular Spring</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="angular-bloom" id="angular-bloom" />
+            <Label for="angular-bloom">Angular Bloom</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
+            <RadioGroup.Item value="pets" id="pets" />
+            <Label for="pets">Pets</Label>
+          </div>
+          <div class="flex w-1/6 items-center space-x-2">
             <RadioGroup.Item value="none" id="rnone" />
             <Label for="rnone">None</Label>
           </div>
@@ -239,53 +293,51 @@
         </RadioGroup.Root>
       </div>
       <hr />
-      <p class="font-medium">
-        Colors
-        <Tooltip.Root openDelay={100}>
-          <Tooltip.Trigger class="">
-            <Info class="inline-block h-4 w-4 text-muted-foreground" />
-          </Tooltip.Trigger>
-          <Tooltip.Content class="max-w-md">
-            <div
-              class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-            >
-              Choose the colors for the monitor. You can choose between UP, DEGRADED, and DOWN.
-            </div>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      </p>
-      <div class="flex w-full flex-row justify-evenly gap-2">
-        <div class="relative w-full">
+      <div>
+        <p class="font-medium">Status Colors</p>
+        <p class=" text-xs font-semibold text-muted-foreground">
+          Choose the colors for the monitor. You can choose between UP, DEGRADED, and DOWN.
+        </p>
+      </div>
+
+      <div class="flex w-full flex-row justify-start gap-x-8">
+        <div class="relative">
           <ColorPicker
             bind:hex={themeData.colorsJ.UP}
             position="responsive"
+            isAlpha={false}
+            isDark={$mode == "dark"}
+            --input-size="16px"
+            isTextInput={true}
             label="UP"
-            --cp-input-color="#777"
-            --cp-button-hover-color="#767676"
             on:input={(event) => {
               themeData.colorsJ.UP = event.detail.hex;
             }}
           />
         </div>
-        <div class="relative w-full">
+        <div class="relative">
           <ColorPicker
             bind:hex={themeData.colorsJ.DEGRADED}
             position="responsive"
+            isAlpha={false}
+            isDark={$mode == "dark"}
+            --input-size="16px"
+            isTextInput={true}
             label="DEGRADED"
-            --cp-input-color="#777"
-            --cp-button-hover-color="#767676"
             on:input={(event) => {
               themeData.colorsJ.DEGRADED = event.detail.hex;
             }}
           />
         </div>
-        <div class="relative w-full">
+        <div class="relative">
           <ColorPicker
             bind:hex={themeData.colorsJ.DOWN}
             position="responsive"
+            isAlpha={false}
+            isDark={$mode == "dark"}
+            --input-size="16px"
+            isTextInput={true}
             label="DOWN"
-            --cp-input-color="#777"
-            --cp-button-hover-color="#767676"
             on:input={(event) => {
               themeData.colorsJ.DOWN = event.detail.hex;
             }}
@@ -338,14 +390,28 @@
       <div class="flex w-full flex-row justify-start gap-2">
         <div class="w-full">
           <Label for="customCSS" class="text-sm text-muted-foreground">
-            You can add custom CSS to style your site. Do not include style tags.
+            You can add custom CSS to style your site. Do not include style tags. Go to <a
+              href="https://kener.ing/docs/custom-js-css-guide#grid-layout"
+              class="text-card-foreground"
+              target="_blank">this link</a
+            > to learn more about it.
           </Label>
-          <textarea
-            bind:value={themeData.customCSS}
-            id="customCSS"
-            class="mt-1 h-48 w-full rounded-sm border p-2"
-            placeholder=".className&#123;color: red;&#125;"
-          ></textarea>
+          <div class="overflow-hidden rounded-md">
+            <CodeMirror
+              bind:value={themeData.customCSS}
+              lang={css()}
+              theme={$mode == "dark" ? githubDark : githubLight}
+              styles={{
+                "&": {
+                  width: "100%",
+                  maxWidth: "100%",
+                  height: "320px",
+                  border: "1px solid hsl(var(--border) / var(--tw-border-opacity))",
+                  borderRadius: "0.375rem"
+                }
+              }}
+            />
+          </div>
         </div>
       </div>
       <hr />
@@ -354,7 +420,7 @@
           <div class="py-2 text-sm font-medium text-destructive">{themeError}</div>
         {/if}
         <Button type="submit" disabled={formState === "loading"}>
-          Save
+          Save Theme Settings
           {#if formState === "loading"}
             <Loader class="ml-2 inline h-4 w-4 animate-spin" />
           {/if}
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
index aaf024e..e71ece5 100644
--- a/src/lib/components/nav.svelte
+++ b/src/lib/components/nav.svelte
@@ -8,11 +8,62 @@
   import GMI from "$lib/components/gmi.svelte";
   export let data;
   let defaultPattern = data.site?.pattern || "squares";
+  let allPets = [
+    {
+      url: base + "/chicken.gif",
+      bottom: "-5"
+    },
+    {
+      url: base + "/dog.gif",
+      bottom: "-17"
+    },
+    {
+      url: base + "/cockatiel.gif",
+      bottom: "-10"
+    },
+    {
+      url: base + "/crab.gif",
+      bottom: "-20"
+    },
+    {
+      url: base + "/fox.gif",
+      bottom: "-9"
+    },
+    {
+      url: base + "/horse.gif",
+      bottom: "-11"
+    },
+    {
+      url: base + "/panda.gif",
+      bottom: "0"
+    },
+    {
+      url: base + "/totoro.gif",
+      bottom: "-27"
+    },
+    {
+      url: base + "/rabbit.gif",
+      bottom: "0"
+    },
+    {
+      url: base + "/duck.gif",
+      bottom: "-5"
+    },
+    {
+      url: base + "/snake.gif",
+      bottom: "0"
+    }
+  ];
+  let randomPet = allPets[Math.floor(Math.random() * allPets.length)];
 </script>
 
-<div class="{defaultPattern}-pattern"></div>
+{#if defaultPattern == "pets" && !!randomPet}
+  <div class="pets-pattern" style="background-image: url({randomPet.url});bottom: {randomPet.bottom}px"></div>
+{:else}
+  <div class="{defaultPattern}-pattern"></div>
+{/if}
 
-<header class="blurry-bg sticky top-0 z-50 mx-auto md:mt-2">
+<header class="sticky top-0 z-50 mx-auto md:mt-2">
   <div class="container flex h-14 max-w-[820px] items-center border bg-card px-3 md:rounded-md">
     <a rel="external" href={data.site.home ? data.site.home : base} class="mr-6 flex items-center space-x-2">
       {#if data.site.logo}
diff --git a/src/lib/server/controllers/controller.js b/src/lib/server/controllers/controller.js
index eea9faf..075bf3b 100644
--- a/src/lib/server/controllers/controller.js
+++ b/src/lib/server/controllers/controller.js
@@ -77,6 +77,11 @@ const siteDataKeys = [
     isValid: (value) => typeof value === "string",
     data_type: "string",
   },
+  {
+    key: "kenerTheme",
+    isValid: (value) => typeof value === "string",
+    data_type: "string",
+  },
   {
     key: "customCSS",
     isValid: (value) => typeof value === "string",
@@ -89,8 +94,25 @@ const siteDataKeys = [
   },
   {
     key: "pattern",
-    //string dots or sqaures or circ
-    isValid: (value) => typeof value === "string" && ["dots", "squares", "none"].includes(value),
+    //string dots or squares or circle
+    isValid: (value) =>
+      typeof value === "string" &&
+      [
+        "dots",
+        "squares",
+        "tiles",
+        "none",
+        "radial-blue",
+        "radial-mono",
+        "radial-midnight",
+        "circle-mono",
+        "carbon-fibre",
+        "texture-sky",
+        "angular-mono",
+        "angular-spring",
+        "angular-bloom",
+        "pets",
+      ].includes(value),
     data_type: "string",
   },
   {
diff --git a/src/lib/server/db/seedSiteData.js b/src/lib/server/db/seedSiteData.js
index 2cc3797..166b088 100644
--- a/src/lib/server/db/seedSiteData.js
+++ b/src/lib/server/db/seedSiteData.js
@@ -43,8 +43,20 @@ const seedSiteData = {
     title: "Build stunning status pages in minutes",
     subtitle: "Let your users know what's going on.",
   },
-  footerHTML:
-    '<p class="text-center">\nMade using \n<a href="https://github.com/rajnandan1/kener" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">\n  Kener\n</a>\nan open source status page system built with Svelte and TailwindCSS.<br/>\nCreated with ❤️ by <a href="https://rajnandan.com" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">Raj Nandan Sharma</a>.\n</p>\n',
+  footerHTML: `<div
+   class="container relative mt-4 max-w-[655px]"
+   >
+   <div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+      <p class="text-center text-sm leading-loose text-muted-foreground ">
+         Made using 
+         <a href="https://github.com/rajnandan1/kener" target="_blank"  class="font-medium underline underline-offset-4">
+         Kener
+         </a>
+         an open source status page system built with Svelte and TailwindCSS.<br/>
+         Created with ❤️ by <a href="https://rajnandan.com" target="_blank"  class="font-medium underline underline-offset-4">Raj Nandan Sharma</a>.
+      </p>
+   </div>
+</div>`,
   i18n: {
     defaultLocale: "en",
     locales: [{ code: "en", name: "English", selected: true, disabled: false }],
@@ -88,6 +100,7 @@ const seedSiteData = {
   categories: [{ name: "Home", description: "Monitors for Home Page" }],
   homeIncidentCount: 5,
   homeIncidentStartTimeWithin: 30,
+  kenerTheme: "default",
 };
 
 export default seedSiteData;
diff --git a/src/routes/(kener)/+layout.svelte b/src/routes/(kener)/+layout.svelte
index 916bb56..f9b5883 100644
--- a/src/routes/(kener)/+layout.svelte
+++ b/src/routes/(kener)/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
   import "../../app.postcss";
   import "../../kener.css";
+  import "../../theme.css";
   import Nav from "$lib/components/nav.svelte";
   import { onMount } from "svelte";
   import { Input } from "$lib/components/ui/input";
@@ -84,6 +85,8 @@
 
   let customCSS = `<style>${data.site.customCSS}</style>`;
   if (!!data.site.favicon && !data.site.favicon.startsWith("http")) data.site.favicon = `${base}${data.site.favicon}`;
+
+  let kenerTheme = data.site.kenerTheme || "default";
 </script>
 
 <svelte:head>
@@ -108,6 +111,7 @@
 	--down-color: {data.site.colors.DOWN};
 	--degraded-color: {data.site.colors.DEGRADED}
 	"
+  class="kener-theme-{kenerTheme}"
 >
   <Nav {data} />
   <div class="main-content min-h-[70vh]">
@@ -115,16 +119,8 @@
   </div>
 
   {#if !!data.site.footerHTML}
-    <footer class="z-10 py-6 md:px-8 md:py-0">
-      <div
-        class="container relative flex max-w-[655px] flex-col items-center justify-center gap-4 pl-0 md:h-24 md:flex-row"
-      >
-        <div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
-          <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-            {@html data.site.footerHTML}
-          </p>
-        </div>
-      </div>
+    <footer class="kener-footer z-10 py-6 md:px-8 md:py-0">
+      {@html data.site.footerHTML}
     </footer>
   {/if}
   <div class="fixed bottom-4 right-4 z-20 flex flex-col rounded-md bg-background">
diff --git a/src/routes/(kener)/+page.svelte b/src/routes/(kener)/+page.svelte
index eeed792..9af2428 100644
--- a/src/routes/(kener)/+page.svelte
+++ b/src/routes/(kener)/+page.svelte
@@ -77,24 +77,20 @@
 <div class="mt-12"></div>
 {#if data.hero}
   <section class="section-hero mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center">
-    <div class="mx-auto max-w-screen-xl px-4 lg:flex lg:items-center">
-      <div class="blurry-bg mx-auto max-w-3xl text-center">
-        {#if data.hero.image}
-          <GMI src={data.hero.image} classList="m-auto mb-2 h-14 w-14" alt="" srcset="" />
-        {/if}
-        {#if data.hero.title}
-          <h1
-            class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-5xl font-extrabold leading-tight text-transparent"
-          >
-            {@html data.hero.title}
-          </h1>
-        {/if}
-        {#if data.hero.subtitle}
-          <h2 class="mx-auto mt-4 max-w-xl sm:text-xl">
-            {@html data.hero.subtitle}
-          </h2>
-        {/if}
-      </div>
+    <div class="mx-auto max-w-3xl text-center">
+      {#if data.hero.image}
+        <GMI src={data.hero.image} classList="m-auto mb-2 h-14 w-14" alt="" srcset="" />
+      {/if}
+      {#if data.hero.title}
+        <h1 class="h1 text-5xl font-extrabold leading-tight">
+          {@html data.hero.title}
+        </h1>
+      {/if}
+      {#if data.hero.subtitle}
+        <h2 class="mx-auto mt-4 max-w-xl sm:text-xl">
+          {@html data.hero.subtitle}
+        </h2>
+      {/if}
     </div>
   </section>
 {/if}
@@ -123,7 +119,7 @@
 {/if}
 {#if data.allRecentIncidents.length + data.allRecentMaintenances.length > 0}
   <section
-    class="section-events mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center backdrop-blur-[2px]"
+    class="section-events mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center"
     id=""
   >
     <div class="mb-2 grid w-full grid-cols-2 gap-4">
diff --git a/src/routes/(manage)/manage/(app)/app/home/+page.server.js b/src/routes/(manage)/manage/(app)/app/home/+page.server.js
new file mode 100644
index 0000000..2e49845
--- /dev/null
+++ b/src/routes/(manage)/manage/(app)/app/home/+page.server.js
@@ -0,0 +1,7 @@
+import seedSiteData from "$lib/server/db/seedSiteData.js";
+
+export async function load({ parent }) {
+  return {
+    defaultFooterHTML: seedSiteData.footerHTML,
+  };
+}
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..70d5430
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,902 @@
+.dots-pattern {
+  position: absolute;
+  top: 0px;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background: linear-gradient(177deg, rgba(255, 137, 131, 0.5) 0%, rgba(35, 136, 224, 0.05) 60%);
+  clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%);
+}
+
+.dots-pattern::after {
+  content: "";
+  position: absolute;
+  background-image: radial-gradient(rgba(0, 0, 0, 0) 1.5px, var(--background-kener) 1px);
+  background-size: 14px 14px;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  transform: blur(3px);
+  left: 0;
+}
+
+.squares-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+
+  /* clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%); */
+}
+
+.squares-pattern::after {
+  content: "";
+  position: absolute;
+  background-image:
+    linear-gradient(#444cf7 1px, transparent 1px),
+    linear-gradient(to right, #444cf7 1px, var(--background-kener) 1px);
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.8) 20%,
+    rgba(0, 0, 0, 0.6) 40%,
+    rgba(0, 0, 0, 0.4) 60%,
+    rgba(0, 0, 0, 0.2) 80%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.2) 0%,
+    rgba(0, 0, 0, 0.1) 20%,
+    rgba(0, 0, 0, 0.05) 40%,
+    rgba(0, 0, 0, 0.025) 60%,
+    rgba(0, 0, 0, 0.0125) 80%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  background-size: 32px 32px;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+
+  left: 0;
+}
+.dark .squares-pattern::after {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0.25) 20%,
+    rgba(0, 0, 0, 0.125) 40%,
+    rgba(0, 0, 0, 0.0625) 60%,
+    rgba(0, 0, 0, 0.03125) 80%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0.25) 20%,
+    rgba(0, 0, 0, 0.125) 40%,
+    rgba(0, 0, 0, 0.0625) 60%,
+    rgba(0, 0, 0, 0.03125) 80%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  background-image:
+    linear-gradient(#616fbf 1px, transparent 1px),
+    linear-gradient(to right, #616fbf 1px, var(--background-kener) 1px);
+}
+
+.radial-blue-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image: radial-gradient(
+    circle at top right,
+    rgb(49, 157, 235) 0%,
+    rgb(49, 157, 235) 13%,
+    rgb(76, 166, 234) 13%,
+    rgb(76, 166, 234) 23%,
+    rgb(103, 176, 232) 23%,
+    rgb(103, 176, 232) 33%,
+    rgb(130, 185, 231) 33%,
+    rgb(130, 185, 231) 46%,
+    rgb(156, 194, 230) 46%,
+    rgb(156, 194, 230) 48%,
+    rgb(183, 203, 229) 48%,
+    rgb(183, 203, 229) 63%,
+    rgb(210, 213, 227) 63%,
+    rgb(210, 213, 227) 83%,
+    rgb(237, 222, 226) 83%,
+    rgb(237, 222, 226) 100%
+  );
+}
+.dark .radial-blue-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image: radial-gradient(
+    circle at bottom right,
+    rgb(42, 23, 131) 0%,
+    rgb(42, 23, 131) 20%,
+    rgb(42, 40, 158) 20%,
+    rgb(42, 40, 158) 40%,
+    rgb(29, 41, 133) 40%,
+    rgb(21, 34, 134) 60%,
+    rgb(29, 52, 145) 60%,
+    rgb(24, 47, 141) 80%,
+    rgb(25, 54, 140) 80%,
+    rgb(26, 58, 154) 100%
+  );
+}
+.radial-mono-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image: radial-gradient(
+    circle at top left,
+    rgb(195, 195, 195) 0%,
+    rgb(195, 195, 195) 2%,
+    rgb(202, 202, 202) 2%,
+    rgb(202, 202, 202) 23%,
+    rgb(209, 209, 209) 23%,
+    rgb(209, 209, 209) 55%,
+    rgb(217, 217, 217) 55%,
+    rgb(217, 217, 217) 80%,
+    rgb(224, 224, 224) 80%,
+    rgb(224, 224, 224) 86%,
+    rgb(231, 231, 231) 86%,
+    rgb(231, 231, 231) 96%,
+    rgb(238, 238, 238) 96%,
+    rgb(238, 238, 238) 100%
+  );
+}
+.dark .radial-mono-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image: radial-gradient(
+    circle at top left,
+    rgb(48, 48, 48) 0%,
+    rgb(48, 48, 48) 8%,
+    rgb(46, 46, 46) 8%,
+    rgb(46, 46, 46) 57%,
+    rgb(43, 43, 43) 57%,
+    rgb(43, 43, 43) 65%,
+    rgb(41, 41, 41) 65%,
+    rgb(41, 41, 41) 67%,
+    rgb(39, 39, 39) 67%,
+    rgb(39, 39, 39) 72%,
+    rgb(36, 36, 36) 72%,
+    rgb(36, 36, 36) 80%,
+    rgb(34, 34, 34) 80%,
+    rgb(34, 34, 34) 100%
+  );
+}
+.radial-midnight-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    radial-gradient(
+      circle at 11% 62%,
+      rgba(205, 205, 205, 0.04) 0%,
+      rgba(205, 205, 205, 0.04) 50%,
+      rgba(149, 149, 149, 0.04) 50%,
+      rgba(149, 149, 149, 0.04) 100%
+    ),
+    radial-gradient(
+      circle at 78% 10%,
+      rgba(49, 49, 49, 0.04) 0%,
+      rgba(49, 49, 49, 0.04) 50%,
+      rgba(254, 254, 254, 0.04) 50%,
+      rgba(254, 254, 254, 0.04) 100%
+    ),
+    radial-gradient(
+      circle at 92% 43%,
+      rgba(34, 34, 34, 0.04) 0%,
+      rgba(34, 34, 34, 0.04) 50%,
+      rgba(206, 206, 206, 0.04) 50%,
+      rgba(206, 206, 206, 0.04) 100%
+    ),
+    linear-gradient(329deg, rgb(241, 77, 33), rgb(218, 227, 61));
+}
+.dark .radial-midnight-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    radial-gradient(
+      circle at 90% 24%,
+      rgba(209, 209, 209, 0.04) 0%,
+      rgba(209, 209, 209, 0.04) 50%,
+      rgba(160, 160, 160, 0.04) 50%,
+      rgba(160, 160, 160, 0.04) 100%
+    ),
+    radial-gradient(
+      circle at 91% 63%,
+      rgba(45, 45, 45, 0.04) 0%,
+      rgba(45, 45, 45, 0.04) 50%,
+      rgba(87, 87, 87, 0.04) 50%,
+      rgba(87, 87, 87, 0.04) 100%
+    ),
+    radial-gradient(
+      circle at 17% 2%,
+      rgba(124, 124, 124, 0.04) 0%,
+      rgba(124, 124, 124, 0.04) 50%,
+      rgba(117, 117, 117, 0.04) 50%,
+      rgba(117, 117, 117, 0.04) 100%
+    ),
+    linear-gradient(88deg, rgb(33, 20, 105), rgb(1, 15, 13));
+}
+.circle-mono-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image: radial-gradient(
+    circle at center center,
+    rgb(252, 252, 252),
+    rgb(129, 129, 129)
+  );
+}
+.dark .circle-mono-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image: radial-gradient(circle at center center, rgb(71, 71, 71), rgb(8, 8, 8));
+}
+.carbon-fibre-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    radial-gradient(circle at center center, transparent, rgb(255, 255, 255)),
+    repeating-linear-gradient(
+      135deg,
+      rgb(255, 255, 255) 0px,
+      rgb(255, 255, 255) 12px,
+      transparent 12px,
+      transparent 19px,
+      rgb(255, 255, 255) 19px,
+      rgb(255, 255, 255) 24px,
+      transparent 24px,
+      transparent 28px
+    ),
+    repeating-linear-gradient(
+      45deg,
+      rgb(245, 245, 245) 0px,
+      rgb(245, 245, 245) 7px,
+      transparent 7px,
+      transparent 14px
+    ),
+    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
+}
+.dark .carbon-fibre-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    radial-gradient(circle at center center, rgba(33, 33, 33, 0), rgb(33, 33, 33)),
+    repeating-linear-gradient(
+      135deg,
+      rgb(33, 33, 33) 0px,
+      rgb(33, 33, 33) 1px,
+      transparent 1px,
+      transparent 4px
+    ),
+    repeating-linear-gradient(
+      45deg,
+      rgb(56, 56, 56) 0px,
+      rgb(56, 56, 56) 5px,
+      transparent 5px,
+      transparent 6px
+    ),
+    linear-gradient(90deg, rgb(33, 33, 33), rgb(33, 33, 33));
+}
+.texture-sky-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.08),
+      rgba(0, 0, 0, 0.05),
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.01),
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.09),
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.03),
+      transparent,
+      rgba(0, 0, 0, 0.07),
+      rgba(0, 0, 0, 0.03),
+      rgba(0, 0, 0, 0.06) 4px
+    ),
+    linear-gradient(90deg, rgb(193, 255, 253), rgb(59, 104, 247));
+}
+.dark .texture-sky-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.08),
+      rgba(0, 0, 0, 0.01),
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.05),
+      rgba(0, 0, 0, 0.08),
+      rgba(0, 0, 0, 0.1),
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.02),
+      rgba(0, 0, 0, 0.02),
+      rgba(0, 0, 0, 0.09),
+      rgba(0, 0, 0, 0.04),
+      rgba(0, 0, 0, 0.06),
+      rgba(0, 0, 0, 0.01) 3px
+    ),
+    linear-gradient(0deg, rgb(28, 117, 231), rgb(72, 64, 87));
+}
+.tiles-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(45deg, rgb(255, 255, 255) 0%, transparent 36%),
+    repeating-linear-gradient(
+      135deg,
+      rgba(197, 197, 197, 0.1) 0px,
+      rgba(197, 197, 197, 0.1) 1px,
+      transparent 1px,
+      transparent 11px
+    ),
+    repeating-linear-gradient(
+      45deg,
+      rgba(197, 197, 197, 0.1) 0px,
+      rgba(197, 197, 197, 0.1) 1px,
+      transparent 1px,
+      transparent 11px
+    ),
+    linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255));
+}
+.dark .tiles-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(90deg, rgb(33, 33, 33) 0%, transparent 59%),
+    repeating-linear-gradient(
+      45deg,
+      rgba(168, 168, 168, 0.1) 0px,
+      rgba(168, 168, 168, 0.1) 1px,
+      transparent 1px,
+      transparent 13px
+    ),
+    repeating-linear-gradient(
+      135deg,
+      rgba(168, 168, 168, 0.1) 0px,
+      rgba(168, 168, 168, 0.1) 1px,
+      transparent 1px,
+      transparent 13px
+    ),
+    linear-gradient(90deg, rgb(33, 33, 33), rgb(33, 33, 33));
+}
+.angular-mono-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(
+      67.5deg,
+      rgb(215, 215, 215) 0%,
+      rgb(215, 215, 215) 46%,
+      rgb(198, 198, 198) 46%,
+      rgb(198, 198, 198) 49%,
+      rgb(181, 181, 181) 49%,
+      rgb(181, 181, 181) 56%,
+      rgb(164, 164, 164) 56%,
+      rgb(164, 164, 164) 61%,
+      rgb(146, 146, 146) 61%,
+      rgb(146, 146, 146) 75%,
+      rgb(129, 129, 129) 75%,
+      rgb(129, 129, 129) 84%,
+      rgb(112, 112, 112) 84%,
+      rgb(112, 112, 112) 100%
+    ),
+    linear-gradient(
+      22.5deg,
+      rgb(215, 215, 215) 0%,
+      rgb(215, 215, 215) 46%,
+      rgb(198, 198, 198) 46%,
+      rgb(198, 198, 198) 49%,
+      rgb(181, 181, 181) 49%,
+      rgb(181, 181, 181) 56%,
+      rgb(164, 164, 164) 56%,
+      rgb(164, 164, 164) 61%,
+      rgb(146, 146, 146) 61%,
+      rgb(146, 146, 146) 75%,
+      rgb(129, 129, 129) 75%,
+      rgb(129, 129, 129) 84%,
+      rgb(112, 112, 112) 84%,
+      rgb(112, 112, 112) 100%
+    ),
+    linear-gradient(
+      112.5deg,
+      rgb(215, 215, 215) 0%,
+      rgb(215, 215, 215) 46%,
+      rgb(198, 198, 198) 46%,
+      rgb(198, 198, 198) 49%,
+      rgb(181, 181, 181) 49%,
+      rgb(181, 181, 181) 56%,
+      rgb(164, 164, 164) 56%,
+      rgb(164, 164, 164) 61%,
+      rgb(146, 146, 146) 61%,
+      rgb(146, 146, 146) 75%,
+      rgb(129, 129, 129) 75%,
+      rgb(129, 129, 129) 84%,
+      rgb(112, 112, 112) 84%,
+      rgb(112, 112, 112) 100%
+    ),
+    linear-gradient(90deg, rgb(231, 231, 231), rgb(195, 195, 195));
+  background-blend-mode: overlay, overlay, overlay, normal;
+}
+.dark .angular-mono-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(
+      45deg,
+      rgb(46, 46, 46) 0%,
+      rgb(46, 46, 46) 22%,
+      rgb(81, 81, 81) 22%,
+      rgb(81, 81, 81) 75%,
+      rgb(115, 115, 115) 75%,
+      rgb(115, 115, 115) 77%,
+      rgb(150, 150, 150) 77%,
+      rgb(150, 150, 150) 82%,
+      rgb(184, 184, 184) 82%,
+      rgb(184, 184, 184) 93%,
+      rgb(219, 219, 219) 93%,
+      rgb(219, 219, 219) 98%,
+      rgb(253, 253, 253) 98%,
+      rgb(253, 253, 253) 100%
+    ),
+    linear-gradient(
+      135deg,
+      rgb(46, 46, 46) 0%,
+      rgb(46, 46, 46) 22%,
+      rgb(81, 81, 81) 22%,
+      rgb(81, 81, 81) 75%,
+      rgb(115, 115, 115) 75%,
+      rgb(115, 115, 115) 77%,
+      rgb(150, 150, 150) 77%,
+      rgb(150, 150, 150) 82%,
+      rgb(184, 184, 184) 82%,
+      rgb(184, 184, 184) 93%,
+      rgb(219, 219, 219) 93%,
+      rgb(219, 219, 219) 98%,
+      rgb(253, 253, 253) 98%,
+      rgb(253, 253, 253) 100%
+    ),
+    linear-gradient(
+      22.5deg,
+      rgb(46, 46, 46) 0%,
+      rgb(46, 46, 46) 22%,
+      rgb(81, 81, 81) 22%,
+      rgb(81, 81, 81) 75%,
+      rgb(115, 115, 115) 75%,
+      rgb(115, 115, 115) 77%,
+      rgb(150, 150, 150) 77%,
+      rgb(150, 150, 150) 82%,
+      rgb(184, 184, 184) 82%,
+      rgb(184, 184, 184) 93%,
+      rgb(219, 219, 219) 93%,
+      rgb(219, 219, 219) 98%,
+      rgb(253, 253, 253) 98%,
+      rgb(253, 253, 253) 100%
+    ),
+    linear-gradient(
+      157.5deg,
+      rgb(46, 46, 46) 0%,
+      rgb(46, 46, 46) 22%,
+      rgb(81, 81, 81) 22%,
+      rgb(81, 81, 81) 75%,
+      rgb(115, 115, 115) 75%,
+      rgb(115, 115, 115) 77%,
+      rgb(150, 150, 150) 77%,
+      rgb(150, 150, 150) 82%,
+      rgb(184, 184, 184) 82%,
+      rgb(184, 184, 184) 93%,
+      rgb(219, 219, 219) 93%,
+      rgb(219, 219, 219) 98%,
+      rgb(253, 253, 253) 98%,
+      rgb(253, 253, 253) 100%
+    ),
+    linear-gradient(90deg, rgb(58, 58, 58), rgb(76, 76, 76));
+  background-blend-mode: overlay, overlay, overlay, overlay, normal;
+}
+.angular-spring-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(90deg, rgb(188, 188, 188), rgb(172, 172, 172)),
+    linear-gradient(
+      45deg,
+      rgb(164, 46, 188) 0%,
+      rgb(164, 46, 188) 14%,
+      rgb(165, 82, 189) 14%,
+      rgb(165, 82, 189) 20%,
+      rgb(165, 117, 190) 20%,
+      rgb(165, 117, 190) 23%,
+      rgb(166, 153, 191) 23%,
+      rgb(166, 153, 191) 30%,
+      rgb(166, 188, 192) 30%,
+      rgb(166, 188, 192) 37%,
+      rgb(167, 224, 193) 37%,
+      rgb(167, 224, 193) 100%
+    ),
+    linear-gradient(
+      135deg,
+      rgb(164, 46, 188) 0%,
+      rgb(164, 46, 188) 14%,
+      rgb(165, 82, 189) 14%,
+      rgb(165, 82, 189) 20%,
+      rgb(165, 117, 190) 20%,
+      rgb(165, 117, 190) 23%,
+      rgb(166, 153, 191) 23%,
+      rgb(166, 153, 191) 30%,
+      rgb(166, 188, 192) 30%,
+      rgb(166, 188, 192) 37%,
+      rgb(167, 224, 193) 37%,
+      rgb(167, 224, 193) 100%
+    );
+  background-blend-mode: overlay, overlay, normal;
+}
+.dark .angular-spring-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(0deg, rgb(59, 59, 59), rgb(197, 197, 197)),
+    linear-gradient(
+      45deg,
+      rgb(159, 116, 214) 0%,
+      rgb(159, 116, 214) 25%,
+      rgb(130, 95, 173) 25%,
+      rgb(130, 95, 173) 45%,
+      rgb(101, 74, 132) 45%,
+      rgb(101, 74, 132) 50%,
+      rgb(72, 54, 90) 50%,
+      rgb(72, 54, 90) 52%,
+      rgb(43, 33, 49) 52%,
+      rgb(43, 33, 49) 61%,
+      rgb(14, 12, 8) 61%,
+      rgb(14, 12, 8) 100%
+    ),
+    linear-gradient(
+      135deg,
+      rgb(159, 116, 214) 0%,
+      rgb(159, 116, 214) 25%,
+      rgb(130, 95, 173) 25%,
+      rgb(130, 95, 173) 45%,
+      rgb(101, 74, 132) 45%,
+      rgb(101, 74, 132) 50%,
+      rgb(72, 54, 90) 50%,
+      rgb(72, 54, 90) 52%,
+      rgb(43, 33, 49) 52%,
+      rgb(43, 33, 49) 61%,
+      rgb(14, 12, 8) 61%,
+      rgb(14, 12, 8) 100%
+    );
+  background-blend-mode: overlay, overlay, normal;
+}
+.angular-bloom-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(
+      157.5deg,
+      rgb(95, 97, 179) 0%,
+      rgb(95, 97, 179) 16%,
+      rgb(115, 120, 184) 16%,
+      rgb(115, 120, 184) 20%,
+      rgb(135, 142, 188) 20%,
+      rgb(135, 142, 188) 32%,
+      rgb(155, 165, 193) 32%,
+      rgb(155, 165, 193) 38%,
+      rgb(175, 187, 198) 38%,
+      rgb(175, 187, 198) 48%,
+      rgb(195, 210, 203) 48%,
+      rgb(195, 210, 203) 51%,
+      rgb(215, 232, 207) 51%,
+      rgb(215, 232, 207) 59%,
+      rgb(235, 255, 212) 59%,
+      rgb(235, 255, 212) 100%
+    ),
+    linear-gradient(
+      135deg,
+      rgb(95, 97, 179) 0%,
+      rgb(95, 97, 179) 16%,
+      rgb(115, 120, 184) 16%,
+      rgb(115, 120, 184) 20%,
+      rgb(135, 142, 188) 20%,
+      rgb(135, 142, 188) 32%,
+      rgb(155, 165, 193) 32%,
+      rgb(155, 165, 193) 38%,
+      rgb(175, 187, 198) 38%,
+      rgb(175, 187, 198) 48%,
+      rgb(195, 210, 203) 48%,
+      rgb(195, 210, 203) 51%,
+      rgb(215, 232, 207) 51%,
+      rgb(215, 232, 207) 59%,
+      rgb(235, 255, 212) 59%,
+      rgb(235, 255, 212) 100%
+    ),
+    linear-gradient(
+      112.5deg,
+      rgb(95, 97, 179) 0%,
+      rgb(95, 97, 179) 16%,
+      rgb(115, 120, 184) 16%,
+      rgb(115, 120, 184) 20%,
+      rgb(135, 142, 188) 20%,
+      rgb(135, 142, 188) 32%,
+      rgb(155, 165, 193) 32%,
+      rgb(155, 165, 193) 38%,
+      rgb(175, 187, 198) 38%,
+      rgb(175, 187, 198) 48%,
+      rgb(195, 210, 203) 48%,
+      rgb(195, 210, 203) 51%,
+      rgb(215, 232, 207) 51%,
+      rgb(215, 232, 207) 59%,
+      rgb(235, 255, 212) 59%,
+      rgb(235, 255, 212) 100%
+    ),
+    linear-gradient(90deg, rgb(236, 151, 145), rgb(201, 243, 43));
+  background-blend-mode: overlay, overlay, overlay, normal;
+}
+.dark .angular-bloom-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 100svh;
+  background-image:
+    linear-gradient(
+      90deg,
+      rgb(168, 86, 201) 0%,
+      rgb(168, 86, 201) 3%,
+      rgb(140, 74, 173) 3%,
+      rgb(140, 74, 173) 11%,
+      rgb(112, 61, 145) 11%,
+      rgb(112, 61, 145) 20%,
+      rgb(85, 49, 118) 20%,
+      rgb(85, 49, 118) 49%,
+      rgb(57, 37, 90) 49%,
+      rgb(57, 37, 90) 71%,
+      rgb(29, 24, 62) 71%,
+      rgb(29, 24, 62) 72%,
+      rgb(1, 12, 34) 72%,
+      rgb(1, 12, 34) 100%
+    ),
+    linear-gradient(
+      67.5deg,
+      rgb(168, 86, 201) 0%,
+      rgb(168, 86, 201) 3%,
+      rgb(140, 74, 173) 3%,
+      rgb(140, 74, 173) 11%,
+      rgb(112, 61, 145) 11%,
+      rgb(112, 61, 145) 20%,
+      rgb(85, 49, 118) 20%,
+      rgb(85, 49, 118) 49%,
+      rgb(57, 37, 90) 49%,
+      rgb(57, 37, 90) 71%,
+      rgb(29, 24, 62) 71%,
+      rgb(29, 24, 62) 72%,
+      rgb(1, 12, 34) 72%,
+      rgb(1, 12, 34) 100%
+    ),
+    linear-gradient(
+      112.5deg,
+      rgb(168, 86, 201) 0%,
+      rgb(168, 86, 201) 3%,
+      rgb(140, 74, 173) 3%,
+      rgb(140, 74, 173) 11%,
+      rgb(112, 61, 145) 11%,
+      rgb(112, 61, 145) 20%,
+      rgb(85, 49, 118) 20%,
+      rgb(85, 49, 118) 49%,
+      rgb(57, 37, 90) 49%,
+      rgb(57, 37, 90) 71%,
+      rgb(29, 24, 62) 71%,
+      rgb(29, 24, 62) 72%,
+      rgb(1, 12, 34) 72%,
+      rgb(1, 12, 34) 100%
+    ),
+    linear-gradient(
+      45deg,
+      rgb(168, 86, 201) 0%,
+      rgb(168, 86, 201) 3%,
+      rgb(140, 74, 173) 3%,
+      rgb(140, 74, 173) 11%,
+      rgb(112, 61, 145) 11%,
+      rgb(112, 61, 145) 20%,
+      rgb(85, 49, 118) 20%,
+      rgb(85, 49, 118) 49%,
+      rgb(57, 37, 90) 49%,
+      rgb(57, 37, 90) 71%,
+      rgb(29, 24, 62) 71%,
+      rgb(29, 24, 62) 72%,
+      rgb(1, 12, 34) 72%,
+      rgb(1, 12, 34) 100%
+    ),
+    linear-gradient(90deg, rgb(95, 3, 74), rgb(35, 65, 96));
+  background-blend-mode: overlay, overlay, overlay, overlay, normal;
+}
+
+.tiles-pattern::after,
+.radial-mono-pattern::after,
+.angular-mono-pattern::after,
+.angular-spring-pattern::after,
+.angular-bloom-pattern::after,
+.texture-sky-pattern::after,
+.carbon-fibre-pattern::after,
+.circle-mono-pattern::after,
+.radial-midnight-pattern::after,
+.radial-blue-pattern::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+    to bottom,
+    var(--background-kener-rgba) 0%,
+    var(--background-kener) 100%
+  );
+}
+
+.pets-pattern {
+  position: fixed;
+
+  left: -50px; /* Start offscreen */
+  width: 50px;
+  height: 50px;
+  z-index: 100;
+  background-repeat: no-repeat;
+  background-size: 100%;
+
+  animation: petWalking 45s linear infinite;
+}
+
+@keyframes petWalking {
+  0% {
+    left: -50px;
+    transform: scaleX(1); /* Dog facing right */
+  }
+  45% {
+    left: calc(100vw + 25px);
+    transform: scaleX(1); /* Still facing right */
+  }
+  50% {
+    left: calc(100vw + 50px);
+    transform: scaleX(-1); /* Flip to face left */
+  }
+  95% {
+    left: -25px;
+    transform: scaleX(-1); /* Still facing left */
+  }
+  100% {
+    left: -50px;
+    transform: scaleX(1); /* Flip back to face right */
+  }
+}
diff --git a/static/chicken.gif b/static/chicken.gif
new file mode 100644
index 0000000..c5250ec
Binary files /dev/null and b/static/chicken.gif differ
diff --git a/static/cockatiel.gif b/static/cockatiel.gif
new file mode 100644
index 0000000..57400d4
Binary files /dev/null and b/static/cockatiel.gif differ
diff --git a/static/crab.gif b/static/crab.gif
new file mode 100644
index 0000000..07891d2
Binary files /dev/null and b/static/crab.gif differ
diff --git a/static/dog.gif b/static/dog.gif
new file mode 100644
index 0000000..6054101
Binary files /dev/null and b/static/dog.gif differ
diff --git a/static/duck.gif b/static/duck.gif
new file mode 100644
index 0000000..67a2326
Binary files /dev/null and b/static/duck.gif differ
diff --git a/static/fox.gif b/static/fox.gif
new file mode 100644
index 0000000..8c9c835
Binary files /dev/null and b/static/fox.gif differ
diff --git a/static/horse.gif b/static/horse.gif
new file mode 100644
index 0000000..6ec5779
Binary files /dev/null and b/static/horse.gif differ
diff --git a/static/panda.gif b/static/panda.gif
new file mode 100644
index 0000000..cf07963
Binary files /dev/null and b/static/panda.gif differ
diff --git a/static/rabbit.gif b/static/rabbit.gif
new file mode 100644
index 0000000..4fab794
Binary files /dev/null and b/static/rabbit.gif differ
diff --git a/static/snake.gif b/static/snake.gif
new file mode 100644
index 0000000..1e2ef6c
Binary files /dev/null and b/static/snake.gif differ
diff --git a/static/totoro.gif b/static/totoro.gif
new file mode 100644
index 0000000..926a437
Binary files /dev/null and b/static/totoro.gif differ
diff --git a/static/turtle.gif b/static/turtle.gif
new file mode 100644
index 0000000..f72fcd2
Binary files /dev/null and b/static/turtle.gif differ
diff --git a/vite.config.js b/vite.config.js
index 44c2da5..564ac43 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -20,6 +20,8 @@ export default defineConfig(({ mode }) => ({
       "@uiw/codemirror-theme-github",
       "@codemirror/language-json",
       "@codemirror/language-markdown",
+      "@codemirror/language-css",
+      "@codemirror/language-html",
     ],
   },
   plugins: [