diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml
index 7f20d99..c6a05d0 100644
--- a/.forgejo/workflows/deploy.yaml
+++ b/.forgejo/workflows/deploy.yaml
@@ -6,26 +6,15 @@ on:
       - main
       - astra/ci
 
-
 jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout main repo
+      - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Checkout overrides repo
-        uses: actions/checkout@v4
-        with:
-          repository: scientific-witchery/pds-dash-overrides
-          token: ${{ secrets.OVERRIDES_TOKEN}}
-          path: overrides
-
-      - name: Copy config file to root
-        run: cp overrides/config.ts ./config.ts
-      
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
diff --git a/.gitignore b/.gitignore
index 991a625..42a517f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -149,7 +149,4 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
-
-# Config files
-config.ts
\ No newline at end of file
+.pnp.*
\ No newline at end of file
diff --git a/README.md b/README.md
index 5fd9458..d9eb2ea 100644
--- a/README.md
+++ b/README.md
@@ -10,9 +10,7 @@ a frontend dashboard with stats for your ATProto PDS.
 
 ### installing
 
-clone the repo, copy `config.ts.example` to `config.ts` and edit it to your liking.
-
-then, install dependencies using deno:
+clone the repo, install dependencies using deno:
 
 ```sh
 deno install
@@ -46,11 +44,16 @@ we use our own CI/CD workflow at [`.forgejo/workflows/deploy.yaml`](.forgejo/wor
 
 ## theming
 
-themes are located in the `themes/` directory, you can create your own theme by copying one of the existing themes and modifying it to your liking.
+the colors are designated in [`src/app.css`](src/app.css) as variables, go crazy with them
 
-currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
+the rest is done by editing the css files and style tags directly, good luck
 
-you can switch themes by changing the `theme` property in `config.ts`.
+relevant files:
+
+- [`src/App.svelte`](src/App.svelte)
+- [`src/app.css`](src/app.css)
+- [`src/lib/AccountComponent.svelte`](src/lib/AccountComponent.svelte)
+- [`src/lib/PostComponent.svelte`](src/lib/PostComponent.svelte)
 
 the favicon is located at [`public/favicon.ico`](public/favicon.ico)
 
diff --git a/config.ts.example b/config.ts
similarity index 50%
rename from config.ts.example
rename to config.ts
index 87894d3..5f0ee66 100644
--- a/config.ts.example
+++ b/config.ts
@@ -3,20 +3,20 @@
  */
 export class Config {
   /**
-   * The base URL of the PDS (Personal Data Server).
-   * @default none
+   * The base URL of the PDS (Personal Data Server)
+   * @default "https://pds.witchcraft.systems"
    */
-  static readonly PDS_URL: string = "";
+  static readonly PDS_URL: string = "https://pds.witchcraft.systems";
 
   /**
-   * Theme to be used
-   * @default "default"
+   * Hue value for the color scheme
+   * @default 257
    */
-  static readonly THEME: string = "default";
+  static readonly HUE: number = 13;
 
   /**
    * The base URL of the frontend service for linking to replies/quotes/accounts etc.
-   * @default "https://deer.social" // or https://bsky.app if you're boring
+   * @default "https://deer.social"
    */
   static readonly FRONTEND_URL: string = "https://deer.social";
 
@@ -30,14 +30,13 @@ export class Config {
   static readonly MAX_POSTS: number = 20;
 
   /**
-   * Footer text for the dashboard, you probably want to change this. Supports HTML.
-   * @default "<a href='https://git.witchcraft.systems/scientific-witchery/pds-dash' target='_blank'>Source</a> (<a href='https://github.com/witchcraft-systems/pds-dash/' target='_blank'>github mirror</a>)"
+   * Footer text for the dashboard, you probably want to change this
    */
   static readonly FOOTER_TEXT: string =
-    "<a href='https://git.witchcraft.systems/scientific-witchery/pds-dash' target='_blank'>Source</a> (<a href='https://github.com/witchcraft-systems/pds-dash/' target='_blank'>github mirror</a>)";
+    "Astrally projected from <a href='https://witchcraft.systems' target='_blank'>witchcraft.systems</a><br><br><a href='https://git.witchcraft.systems/scientific-witchery/pds-dash' target='_blank'>Source</a> (<a href='https://github.com/witchcraft-systems/pds-dash/' target='_blank'>github mirror</a>)";
 
   /**
-   * Whether to show the posts with timestamps that are in the future.
+   * Whether to show the posts that are in the future
    * @default false
    */
   static readonly SHOW_FUTURE_POSTS: boolean = false;
diff --git a/src/App.svelte b/src/App.svelte
index 798b8a7..5dfdef8 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,31 +4,28 @@
   import InfiniteLoading from "svelte-infinite-loading";
   import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
   import { Config } from "../config";
-  const accountsPromise = getAllMetadataFromPds();
   import { onMount } from "svelte";
+  import { CssVarsFromHue } from "./lib/colorgenerator";
+  
+  
+  const accountsPromise = getAllMetadataFromPds();
+  let colors = CssVarsFromHue(Config.HUE);
 
   let posts: Post[] = [];
 
-  let hue: number = 1;
   const cycleColors = async () => {
-    while (true) {  
+    let hue = Config.HUE;
+    while (true) {
+      colors = CssVarsFromHue(hue);
       hue += 1;
       if (hue > 360) {
         hue = 0;
       }
-      document.documentElement.style.setProperty("--primary-h", hue.toString());
+      // Wait for 1 second before changing colors again
       await new Promise((resolve) => setTimeout(resolve, 10));
     }
   }
-  let clickCounter = 0;
-  const carameldansenfusion = async () => {
-    clickCounter++;
-    if (clickCounter >= 10) {
-      clickCounter = 0;
-      cycleColors();
-    }
-  };
-
+  cycleColors();
   onMount(() => {
     // Fetch initial posts
     getNextPosts().then((initialPosts) => {
@@ -53,13 +50,23 @@
   };
 </script>
 
-<main>
+<main style="
+  --background-color: {colors.background};
+  --header-background-color: {colors.header};
+  --content-background-color: {colors.content};
+  --text-color: {colors.text};
+  --border-color: {colors.accent};
+  --link-color: {colors.link};
+  --link-hover-color: {colors.linkHover};
+  --indicator-inactive-color: #4a4a4a;
+  --indicator-active-color: {colors.accent};
+">
   <div id="Content">
     {#await accountsPromise}
       <p>Loading...</p>
     {:then accountsData}
       <div id="Account">
-        <h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
+        <h1 id="Header">ATProto PDS</h1>
         <p>Home to {accountsData.length} accounts</p>
         <div id="accountsList">
           {#each accountsData as accountObject}
@@ -84,5 +91,89 @@
 </main>
 
 <style>
- 
+  /* desktop style */
+  #Content {
+    display: flex;
+    /* split the screen in half, left for accounts, right for posts */
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+  #Feed {
+    overflow-y: scroll;
+    width: 65%;
+    height: 100vh;
+    padding: 20px;
+    padding-bottom: 0;
+    padding-top: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  #spacer {
+    padding: 0;
+    margin: 0;
+    height: 10vh;
+    width: 100%;
+  }
+  #Account {
+    width: 35%;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+    background-color: var(--content-background-color);
+    height: 80vh;
+    padding: 20px;
+    margin-left: 20px;
+  }
+  #accountsList {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    height: 100%;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  #Header {
+    text-align: center;
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+
+  /* mobile style */
+  @media screen and (max-width: 600px) {
+    #Content {
+      flex-direction: column;
+      width: auto;
+      padding-left: 0px;
+      padding-right: 0px;
+      margin-top: 5%;
+    }
+    #Account {
+      width: 85%;
+      padding-left: 5%;
+      padding-right: 5%;
+      margin-bottom: 20px;
+      margin-left: 5%;
+      margin-right: 5%;
+      height: auto;
+    }
+    #Feed {
+      width: 95%;
+      margin: 0px;
+      margin-left: 10%;
+      margin-right: 10%;
+      padding: 0px;
+      overflow-y: visible;
+    }
+
+    #spacer {
+      height: 0;
+    }
+  }
 </style>
diff --git a/src/app.css b/src/app.css
index cb315e4..976484a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,77 @@
-@import url('./themes/colors.css');
+@font-face {
+  font-family: "ProggyClean";
+  src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
+}
+
+
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+}
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-button {
+  background: transparent;
+  border-radius: 0;
+}
+* {
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+  -ms-overflow-style: none; /* IE and Edge */
+  -webkit-overflow-scrolling: touch;
+  -webkit-scrollbar: none; /* Safari */
+}
+
+a {
+  font-weight: 500;
+  color: var(--link-color);
+  text-decoration: inherit;
+}
+a:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+
 body {
-  background-color: red;
-}
\ No newline at end of file
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--background-color);
+  font-family: "ProggyClean", monospace;
+  font-size: 24px;
+  color: var(--text-color);
+  border-color: var(--border-color);
+  overflow-wrap: break-word;
+  word-wrap: normal;
+  word-break: break-word;
+  hyphens: none;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1400px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
diff --git a/src/lib/AccountComponent.svelte b/src/lib/AccountComponent.svelte
index faf6251..880db3f 100644
--- a/src/lib/AccountComponent.svelte
+++ b/src/lib/AccountComponent.svelte
@@ -12,17 +12,38 @@
         alt="avatar of {account.displayName}"
         src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
       />
-      <div id="accountName">
-        {account.displayName || account.handle || account.did}
-      </div>
-    {:else}
-      <div id="accountName" class="no-avatar">
-        {account.displayName || account.handle || account.did}
-      </div>
     {/if}
+    <div id="accountName">
+      {account.displayName || account.handle || account.did}
+    </div>
   </div>
 </a>
 
 <style>
+  #accountContainer {
+    display: flex;
+    text-align: start;
+    align-items: center;
+    background-color: var(--background-color);
+    padding: 0px;
+    margin-bottom: 15px;
+    border: 1px solid var(--border-color);
+  }
+  #accountName {
+    margin-left: 10px;
+    font-size: 0.9em;
+    max-width: 80%;
 
+    /* replace overflow with ellipsis */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #avatar {
+    width: 50px;
+    height: 50px;
+    margin: 0px;
+    object-fit: cover;
+    border-right: var(--border-color) 1px solid;
+  }
 </style>
diff --git a/src/lib/PostComponent.svelte b/src/lib/PostComponent.svelte
index 1cacc28..43ad667 100644
--- a/src/lib/PostComponent.svelte
+++ b/src/lib/PostComponent.svelte
@@ -71,7 +71,7 @@
       >
       <p id="handle">
         <a href="{Config.FRONTEND_URL}/profile/{post.authorHandle}"
-          >@{post.authorHandle}</a
+          >{post.authorHandle}</a
         >
 
         <a
@@ -152,5 +152,167 @@
 </div>
 
 <style>
+  a:hover {
+    text-decoration: underline;
+  }
+  #postContainer {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    margin-bottom: 15px;
+    overflow-wrap: break-word;
+  }
+  #postHeader {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    background-color: var(--header-background-color);
+    padding: 0px 0px;
+    height: fit-content;
+    border-bottom: 1px solid var(--border-color);
+    font-weight: bold;
+    overflow-wrap: break-word;
+    height: 60px;
+  }
+  #displayName {
+    display: block;
+    color: var(--text-color);
+    font-size: 1.2em;
+    padding: 0;
+    margin: 0;
+    overflow-wrap:normal;
+    word-wrap: break-word;
+    word-break: break-word;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+  #handle {
+    display: block;
+    color: var(--border-color);
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
+  }
 
+  #postLink {
+    color: var(--border-color);
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
+  }
+  #postContent {
+    display: flex;
+    text-align: start;
+    flex-direction: column;
+    padding: 10px;
+    background-color: var(--content-background-color);
+    color: var(--text-color);
+    overflow-wrap: break-word;
+    white-space: pre-line;
+  }
+  #replyingText {
+    font-size: 0.7em;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 5px;
+  }
+  #quotingText {
+    font-size: 0.7em;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 5px;
+  }
+  #postText {
+    margin: 0;
+    padding: 0;
+    overflow-wrap: break-word;
+    word-wrap: normal;
+    word-break: break-word;
+    hyphens: none;
+  }
+  #headerText {
+    margin-left: 10px;
+    font-size: 0.9em;
+    text-align: start;
+    word-break: break-word;
+    max-width: 80%;
+    max-height: 95%;
+    overflow: hidden;
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  #avatar {
+    height: 60px;
+    width: 60px;
+    margin: 0px;
+    margin-left: 0px;
+    overflow: hidden;
+    object-fit: cover;
+    border-right: var(--border-color) 1px solid;
+  }
+  #carouselContainer {
+    position: relative;
+    width: 100%;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  #carouselControls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 500px;
+    margin-top: 5px;
+  }
+  #carouselIndicators {
+    display: flex;
+    gap: 5px;
+  }
+  .indicator {
+    width: 8px;
+    height: 8px;
+    background-color: var(--indicator-inactive-color);
+  }
+  .indicator.active {
+    background-color: var(--indicator-active-color);
+  }
+  #prevBtn,
+  #nextBtn {
+    background-color: rgba(31, 17, 69, 0.7);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #prevBtn:disabled,
+  #nextBtn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  #embedVideo {
+    width: 100%;
+    max-width: 500px;
+    margin-top: 10px;
+    align-self: center;
+  }
+
+  #embedImages {
+    min-width: min(100%, 500px);
+    max-width: min(100%, 500px);
+    max-height: 500px;
+    object-fit: contain;
+
+    margin: 0;
+  }
 </style>
diff --git a/src/lib/colorgenerator.ts b/src/lib/colorgenerator.ts
new file mode 100644
index 0000000..e34b3fc
--- /dev/null
+++ b/src/lib/colorgenerator.ts
@@ -0,0 +1,26 @@
+
+// :root {
+//     --link-color: #646cff;
+//     --link-hover-color: #535bf2;
+//     --background-color: #12082b; hsl(257, 69%, 10%)
+//     --header-background-color: #1f1145; hsl(257, 60%, 15%)
+//     --content-background-color: #0d0620; hsl(257, 68%, 7%)
+//     --text-color: white;
+//     --border-color: #8054f0; hsl(257, 84%, 64%)
+//     --indicator-inactive-color: #4a4a4a;
+//     --indicator-active-color: #8054f0;
+//   }
+export const CssVarsFromHue = (hue: number) => {
+    const h = hue % 360;
+    const cssVars = {
+        accent: `hsl(${h}, 85%, 65%)`,
+        background: `hsl(${h}, 69%, 10%)`,
+        header: `hsl(${h}, 60%, 15%)`,
+        content: `hsl(${h}, 68%, 7%)`,
+        text: `hsl(${h}, 0%, 100%)`,
+        link: `hsl(${h}, 100%, 50%)`,
+        linkHover: `hsl(${h}, 100%, 40%)`,
+    };
+    return cssVars;
+};
+
diff --git a/src/lib/pdsfetch.ts b/src/lib/pdsfetch.ts
index d57aff4..20120fb 100644
--- a/src/lib/pdsfetch.ts
+++ b/src/lib/pdsfetch.ts
@@ -132,13 +132,7 @@ const getDidsFromPDS = async (): Promise<At.Did[]> => {
 const getAccountMetadata = async (
   did: `did:${string}:${string}`,
 ) => {
-  const account: AccountMetadata = {
-    did: did,
-    handle: "", // Guaranteed to be filled out later
-    displayName: "",
-    avatarCid: null,
-  };
-
+  // gonna assume self exists in the app.bsky.actor.profile
   try {
     const { data } = await rpc.get("com.atproto.repo.getRecord", {
       params: {
@@ -148,22 +142,21 @@ const getAccountMetadata = async (
       },
     });
     const value = data.value as AppBskyActorProfile.Record;
-    account.displayName = value.displayName || "";
+    const handle = await blueskyHandleFromDid(did);
+    const account: AccountMetadata = {
+      did: did,
+      handle: handle,
+      displayName: value.displayName || "",
+      avatarCid: null,
+    };
     if (value.avatar) {
       account.avatarCid = value.avatar.ref["$link"];
     }
+    return account;
   } catch (e) {
-    console.warn(`Error fetching profile for ${did}:`, e);
-  }
-
-  try {
-    account.handle = await blueskyHandleFromDid(did);
-  } catch (e) {
-    console.error(`Error fetching handle for ${did}:`, e);
+    console.error(`Error fetching metadata for ${did}:`, e);
     return null;
   }
-
-  return account;
 };
 
 const getAllMetadataFromPds = async (): Promise<AccountMetadata[]> => {
diff --git a/themes/default/theme.css b/themes/default/theme.css
deleted file mode 100644
index e4061ec..0000000
--- a/themes/default/theme.css
+++ /dev/null
@@ -1,423 +0,0 @@
-/* Modern Theme for pds-dash */
-
-:root {
-  /* Modern color palette */
-  --primary-h: 243;
-  --link-color: hsl(var(--primary-h), 73%, 59%);
-  --link-hover-color: #4338ca;
-  --time-color: #8b5cf6;
-  --background-color: #f8fafc;
-  --header-background-color: #ffffff;
-  --content-background-color: #ffffff;
-  --text-color: #111827;
-  --text-secondary-color: #4b5563;
-  --border-color: #e2e8f0;
-  --indicator-inactive-color: #cbd5e1;
-  --indicator-active-color: #6366f1;
-  
-  /* Modern shadows */
-  --button-hover: #f3f4f6;
-}
-
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: var(--background-color);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-  font-size: 18px;
-  line-height: 1.5;
-  color: var(--text-color);
-  border-color: var(--border-color);
-  overflow-wrap: break-word;
-  word-break: break-word;
-  hyphens: none;
-}
-
-a {
-  font-weight: 500;
-  color: var(--link-color);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-a:hover {
-  color: var(--link-hover-color);
-}
-
-h1 {
-  font-size: 2.5em;
-  line-height: 1.2;
-  font-weight: 700;
-}
-
-#app {
-  max-width: 1400px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0;
-  text-align: center;
-}
-
-/* Post Component */
-#postContainer {
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
-  background-color: var(--content-background-color);
-  margin-bottom: 20px;
-  overflow-wrap: break-word;
-  overflow: hidden;
-  box-shadow: var(--card-shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-#postContainer:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-#postHeader {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-  background-color: var(--header-background-color);
-  padding: 12px 16px;
-  height: 60px;
-  border-bottom: 1px solid var(--border-color);
-  font-weight: 600;
-  overflow-wrap: break-word;
-}
-
-#displayName {
-  display: block;
-  color: var(--text-color);
-  font-size: 1.1em;
-  padding: 0;
-  margin: 0 0 2px 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  letter-spacing: -0.01em;
-}
-
-#handle {
-  display: flex;
-  align-items: center;
-  color: #6b7280;
-  font-size: 0.85em;
-  font-weight: 400;
-  padding: 0;
-  margin: 0;
-  gap: 8px;
-}
-
-#postLink {
-  color: var(--time-color);
-  font-size: 0.85em;
-  padding: 0;
-  margin: 0;
-  opacity: 0.9;
-}
-
-#postContent {
-  display: flex;
-  text-align: start;
-  flex-direction: column;
-  padding: 16px;
-  background-color: var(--content-background-color);
-  color: var(--text-color);
-  overflow-wrap: break-word;
-  white-space: pre-line;
-  line-height: 1.6;
-}
-
-#replyingText, #quotingText {
-  font-size: 0.8em;
-  margin: 0;
-  padding: 0 0 10px 0;
-  color: #6b7280;
-}
-
-#postText {
-  margin: 0 0 8px 0;
-  padding: 0;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  hyphens: none;
-  font-size: 1.05em;
-}
-
-#headerText {
-  margin-left: 12px;
-  font-size: 0.9em;
-  text-align: start;
-  word-break: break-word;
-  max-width: 80%;
-  max-height: 95%;
-  overflow: hidden;
-  align-self: flex-start;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-#carouselContainer {
-  position: relative;
-  width: 100%;
-  margin-top: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-#carouselControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  max-width: 500px;
-  margin-top: 10px;
-}
-
-#carouselIndicators {
-  display: flex;
-  gap: 6px;
-}
-
-.indicator {
-  width: 6px;
-  height: 6px;
-  background-color: var(--indicator-inactive-color);
-  border-radius: 50%;
-  transition: background-color 0.2s ease, transform 0.2s ease;
-}
-
-.indicator.active {
-  background-color: var(--indicator-active-color);
-  transform: scale(1.3);
-}
-
-#prevBtn,
-#nextBtn {
-  background-color: var(--button-bg);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background-color 0.15s ease, transform 0.15s ease;
-  font-size: 16px;
-}
-
-#prevBtn:hover:not(:disabled),
-#nextBtn:hover:not(:disabled) {
-  background-color: var(--button-hover);
-  transform: scale(1.05);
-}
-
-#prevBtn:disabled,
-#nextBtn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-#embedVideo {
-  width: 100%;
-  max-width: 500px;
-  margin-top: 12px;
-  align-self: center;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-#embedImages {
-  min-width: min(100%, 500px);
-  max-width: min(100%, 500px);
-  max-height: 500px;
-  object-fit: contain;
-  margin: 0;
-  border-radius: 8px;
-}
-
-/* Account Component */
-#accountContainer {
-  display: flex;
-  text-align: start;
-  align-items: center;
-  background-color: var(--content-background-color);
-  padding: 12px;
-  margin-bottom: 15px;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  transition: background-color 0.15s ease;
-}
-
-#accountContainer:hover {
-  background-color: var(--hover-bg);
-}
-
-#accountName {
-  margin-left: 12px;
-  font-size: 0.95em;
-  max-width: 80%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-}
-
-#avatar {
-  width: 48px;
-  height: 48px;
-  margin: 0;
-  object-fit: cover;
-  border-radius: 50%;
-  border: 2px solid white;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-/* App.Svelte Layout */
-#Content {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  gap: 24px;
-}
-
-#Feed {
-  overflow-y: auto;
-  width: 65%;
-  height: 100vh;
-  padding-right: 16px;
-  align-self: flex-start;
-}
-
-#spacer {
-  padding: 0;
-  margin: 0;
-  height: 10vh;
-  width: 100%;
-}
-
-#Account {
-  width: 35%;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-color);
-  background-color: var(--content-background-color);
-  max-height: 80vh;
-  padding: 24px;
-  margin-left: 16px;
-  border-radius: 12px;
-  box-shadow: var(--card-shadow);
-}
-
-#accountsList {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  height: 100%;
-  width: 100%;
-  padding: 8px 0;
-  margin: 0;
-}
-
-#Header {
-  text-align: center;
-  font-size: 1.8em;
-  margin-bottom: 16px;
-  font-weight: 700;
-  background: linear-gradient(to right, var(--link-color), #8b5cf6);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Mobile Styles */
-@media screen and (max-width: 768px) {
-  #Content {
-    flex-direction: column;
-    width: auto;
-    padding: 12px;
-    margin-top: 0;
-  }
-  
-  #Account {
-    width: calc(100% - 32px);
-    padding: 16px;
-    margin-bottom: 20px;
-    margin-left: 0;
-    margin-right: 0;
-    height: auto;
-    order: -1;
-  }
-  
-  #Feed {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    overflow-y: visible;
-  }
-  
-  #spacer {
-    height: 5vh;
-  }
-
-  body {
-    font-size: 16px;
-  }
-
-  #postHeader {
-    padding: 10px;
-    height: auto;
-    min-height: 50px;
-  }
-}
-
-/* Scrollbar Styles */
-::-webkit-scrollbar {
-  width: 0px;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-}
-::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-button {
-  background: transparent;
-  border-radius: 0;
-}
-
-* {
-  scrollbar-width: none;
-  scrollbar-color: transparent transparent;
-  -ms-overflow-style: none; /* IE and Edge */
-  -webkit-overflow-scrolling: touch;
-  -webkit-scrollbar: none; /* Safari */
-}
\ No newline at end of file
diff --git a/themes/express/theme.css b/themes/express/theme.css
deleted file mode 100644
index 58c399e..0000000
--- a/themes/express/theme.css
+++ /dev/null
@@ -1,375 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
-
-:root {
-  /* Color overrides, edit to whatever you want */
-  --primary-h: 341; /* Hue */
-  --background-color: hsl(var(--primary-h), 62%, 30%);
-  --text-color: hsl(var(--primary-h), 69%, 18%);
-  --link-color: hsl(var(--primary-h), 100%, 20%);
-  --link-hover-color: hsl(var(--primary-h), 20%, 20%);
-  --border-color: hsl(var(--primary-h), 59%, 52%);
-  --content-background-color: hsl(var(--primary-h), 97%, 73%);
-
-  --header-background-color: hsl(var(--primary-h), 97%, 73%);
-  --indicator-inactive-color: #4a4a4a;
-  --indicator-active-color: var(--border-color);
-}
-
-a {
-  font-weight: 500;
-  color: var(--link-color);
-  text-decoration: inherit;
-}
-a:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: var(--background-color);
-  font-family: "Share Tech Mono", monospace;
-  font-size: 24px;
-  color: var(--text-color);
-  border-color: var(--border-color);
-  overflow-wrap: break-word;
-  word-wrap: normal;
-  word-break: break-word;
-  hyphens: none;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1400px;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-/* Post Component */
-a:hover {
-  text-decoration: underline;
-}
-#postContainer {
-  display: flex;
-  flex-direction: column;
-  border: 4px solid var(--border-color);
-  background-color: var(--background-color);
-  margin-bottom: 15px;
-  overflow-wrap: break-word;
-  box-shadow: var(--border-color) 10px 10px;
-}
-#postHeader {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-  background-color: var(--header-background-color);
-  padding: 0px 0px;
-  height: fit-content;
-
-  font-weight: bold;
-  overflow-wrap: break-word;
-  height: 64px;
-}
-#displayName {
-  display: block;
-  color: var(--text-color);
-  font-size: 1.2em;
-  padding: 0;
-  margin: 0;
-  overflow-wrap: normal;
-  word-wrap: break-word;
-  word-break: break-word;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-}
-#handle {
-  display: block;
-  color: var(--border-color);
-  font-size: 0.8em;
-  padding: 0;
-  margin: 0;
-}
-
-#postLink {
-  color: var(--link-hover-color);
-  font-size: 0.8em;
-  padding: 0;
-  margin: 0;
-}
-#postContent {
-  display: flex;
-  text-align: start;
-  flex-direction: column;
-  padding: 10px;
-  background-color: var(--content-background-color);
-  color: var(--text-color);
-  overflow-wrap: break-word;
-  white-space: pre-line;
-}
-#replyingText {
-  font-size: 0.7em;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 5px;
-}
-#quotingText {
-  font-size: 0.7em;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 5px;
-}
-#postText {
-  margin: 0;
-  padding: 0;
-  overflow-wrap: break-word;
-  word-wrap: normal;
-  word-break: break-word;
-  hyphens: none;
-}
-#headerText {
-  margin-left: 10px;
-  font-size: 0.9em;
-  text-align: start;
-  word-break: break-word;
-  max-width: 80%;
-  max-height: 95%;
-  overflow: hidden;
-  align-self: flex-start;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-#avatar {
-  height: 30px;
-  width: 30px;
-  overflow: hidden;
-  object-fit: cover;
-}
-#postContainer #avatar {
-  height: 60px;
-  width: 60px;
-  border-right: var(--border-color) 4px solid;
-  border-bottom: var(--border-color) 4px solid;
-}
-#carouselContainer {
-  position: relative;
-  width: 100%;
-  margin-top: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-#carouselControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  max-width: 500px;
-  margin-top: 5px;
-}
-#carouselIndicators {
-  display: flex;
-  gap: 5px;
-}
-.indicator {
-  width: 8px;
-  height: 8px;
-  background-color: var(--indicator-inactive-color);
-}
-.indicator.active {
-  background-color: var(--indicator-active-color);
-}
-#prevBtn,
-#nextBtn {
-  background-color: rgba(31, 17, 69, 0.7);
-  color: var(--text-color);
-  border: 4px solid var(--border-color);
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-#prevBtn:disabled,
-#nextBtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-#embedVideo {
-  width: 100%;
-  max-width: 500px;
-  margin-top: 10px;
-  align-self: center;
-}
-
-#embedImages {
-  min-width: min(100%, 500px);
-  max-width: min(100%, 500px);
-  max-height: 500px;
-  object-fit: contain;
-
-  margin: 0;
-}
-
-/* Account Component */
-#accountContainer {
-  display: flex;
-  text-align: start;
-  align-items: center;
-  background-color: var(--header-background-color);
-  padding: 0px;
-  margin-bottom: 15px;
-  margin-right: 4px;
-  border: 4px solid var(--border-color);
-  box-shadow: var(--border-color) 10px 10px;
-  min-height: 30px;
-}
-#accountName {
-  margin-left: 10px;
-  font-size: 1em;
-  max-width: 80%;
-
-  /* replace overflow with ellipsis */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.no-avatar {
-    margin-left: 40px !important;
-}
-
-/* App.Svelte */
-/* desktop style */
-
-#Content {
-  display: flex;
-  /* split the screen in half, left for accounts, right for posts */
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-#Feed {
-  overflow-y: scroll;
-  width: 65%;
-  height: 100vh;
-  padding: 20px;
-  padding-bottom: 0;
-  padding-top: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-#spacer {
-  padding: 0;
-  margin: 0;
-  height: 10vh;
-  width: 100%;
-}
-#Account {
-  width: 35%;
-  display: flex;
-  flex-direction: column;
-  border: 4px solid var(--border-color);
-  background-color: var(--content-background-color);
-  box-shadow: var(--border-color) 10px 10px;
-  height: 80vh;
-  padding: 20px;
-  margin-left: 20px;
-}
-#accountsList {
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  height: 100%;
-  width: 100%;
-  padding: 0px;
-  margin: 0px;
-}
-
-#Header {
-  text-align: center;
-  font-size: 2em;
-  margin-bottom: 20px;
-}
-
-/* mobile style */
-@media screen and (max-width: 600px) {
-  #Content {
-    flex-direction: column;
-    width: auto;
-    padding-left: 0px;
-    padding-right: 0px;
-    margin-top: 5%;
-  }
-  #Account {
-    width: 85%;
-    padding-left: 5%;
-    padding-right: 5%;
-    margin-bottom: 20px;
-    margin-left: 5%;
-    margin-right: 5%;
-    height: auto;
-  }
-  #Feed {
-    width: 95%;
-    margin: 0px;
-    margin-left: 10%;
-    margin-right: 10%;
-    padding: 0px;
-    overflow-y: visible;
-  }
-
-  #spacer {
-    height: 0;
-  }
-}
-
-::-webkit-scrollbar {
-  width: 0px;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-}
-::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-button {
-  background: transparent;
-  border-radius: 0;
-}
-
-* {
-  scrollbar-width: none;
-  scrollbar-color: transparent transparent;
-  -ms-overflow-style: none; /* IE and Edge */
-  -webkit-overflow-scrolling: touch;
-  -webkit-scrollbar: none; /* Safari */
-}
diff --git a/themes/witchcraft/theme.css b/themes/witchcraft/theme.css
deleted file mode 100644
index 8ad63d4..0000000
--- a/themes/witchcraft/theme.css
+++ /dev/null
@@ -1,373 +0,0 @@
-@font-face {
-  font-family: "ProggyClean";
-  src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
-}
-
-:root {
-  /* Color overrides, edit to whatever you want */
-  --primary-h: 260; /* Hue */
-  
-  --link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
-  --link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
-  --background-color: hsl(var(--primary-h), 75%, 10%);
-  --header-background-color: hsl(var(--primary-h), 75%, 18%);
-  --content-background-color: hsl(var(--primary-h), 75%, 8%);
-  --text-color: #fff;
-  --border-color: hsl(var(--primary-h), 75%, 60%);
-  --indicator-inactive-color: #4a4a4a;
-  --indicator-active-color: var(--border-color);
-}
-
-
-a {
-  font-weight: 500;
-  color: var(--link-color);
-  text-decoration: inherit;
-}
-a:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-  background-color: var(--background-color);
-  font-family: "ProggyClean", monospace;
-  font-size: 24px;
-  color: var(--text-color);
-  border-color: var(--border-color);
-  overflow-wrap: break-word;
-  word-wrap: normal;
-  word-break: break-word;
-  hyphens: none;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1400px;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-/* Post Component */
-a:hover {
-  text-decoration: underline;
-}
-#postContainer {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-color);
-  background-color: var(--background-color);
-  margin-bottom: 15px;
-  overflow-wrap: break-word;
-}
-#postHeader {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: start;
-  background-color: var(--header-background-color);
-  padding: 0px 0px;
-  height: fit-content;
-  border-bottom: 1px solid var(--border-color);
-  font-weight: bold;
-  overflow-wrap: break-word;
-  height: 60px;
-}
-#displayName {
-  display: block;
-  color: var(--text-color);
-  font-size: 1.2em;
-  padding: 0;
-  margin: 0;
-  overflow-wrap: normal;
-  word-wrap: break-word;
-  word-break: break-word;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-}
-#handle {
-  display: block;
-  color: var(--border-color);
-  font-size: 0.8em;
-  padding: 0;
-  margin: 0;
-}
-
-#postLink {
-  color: var(--border-color);
-  font-size: 0.8em;
-  padding: 0;
-  margin: 0;
-}
-#postContent {
-  display: flex;
-  text-align: start;
-  flex-direction: column;
-  padding: 10px;
-  background-color: var(--content-background-color);
-  color: var(--text-color);
-  overflow-wrap: break-word;
-  white-space: pre-line;
-}
-#replyingText {
-  font-size: 0.7em;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 5px;
-}
-#quotingText {
-  font-size: 0.7em;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 5px;
-}
-#postText {
-  margin: 0;
-  padding: 0;
-  overflow-wrap: break-word;
-  word-wrap: normal;
-  word-break: break-word;
-  hyphens: none;
-}
-#headerText {
-  margin-left: 10px;
-  font-size: 0.9em;
-  text-align: start;
-  word-break: break-word;
-  max-width: 80%;
-  max-height: 95%;
-  overflow: hidden;
-  align-self: flex-start;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-#avatar {
-  height: 60px;
-  width: 60px;
-  margin: 0px;
-  margin-left: 0px;
-  overflow: hidden;
-  object-fit: cover;
-  border-right: var(--border-color) 1px solid;
-}
-#carouselContainer {
-  position: relative;
-  width: 100%;
-  margin-top: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-#carouselControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  max-width: 500px;
-  margin-top: 5px;
-}
-#carouselIndicators {
-  display: flex;
-  gap: 5px;
-}
-.indicator {
-  width: 8px;
-  height: 8px;
-  background-color: var(--indicator-inactive-color);
-}
-.indicator.active {
-  background-color: var(--indicator-active-color);
-}
-#prevBtn,
-#nextBtn {
-  background-color: rgba(31, 17, 69, 0.7);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-#prevBtn:disabled,
-#nextBtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-#embedVideo {
-  width: 100%;
-  max-width: 500px;
-  margin-top: 10px;
-  align-self: center;
-}
-
-#embedImages {
-  min-width: min(100%, 500px);
-  max-width: min(100%, 500px);
-  max-height: 500px;
-  object-fit: contain;
-
-  margin: 0;
-}
-
-/* Account Component */
-#accountContainer {
-  display: flex;
-  text-align: start;
-  align-items: center;
-  background-color: var(--background-color);
-  padding: 0px;
-  margin-bottom: 15px;
-  border: 1px solid var(--border-color);
-  min-height: 30px;
-}
-#accountName {
-  margin-left: 10px;
-  font-size: 1em;
-  max-width: 80%;
-
-  /* replace overflow with ellipsis */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-
-.no-avatar {
-    margin-left: 70px !important;
-}
-
-/* App.Svelte */
-/* desktop style */
-
-#Content {
-  display: flex;
-  /* split the screen in half, left for accounts, right for posts */
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-#Feed {
-  overflow-y: scroll;
-  width: 65%;
-  height: 100vh;
-  padding: 20px;
-  padding-bottom: 0;
-  padding-top: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-#spacer {
-  padding: 0;
-  margin: 0;
-  height: 10vh;
-  width: 100%;
-}
-#Account {
-  width: 35%;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-color);
-  background-color: var(--content-background-color);
-  height: 80vh;
-  padding: 20px;
-  margin-left: 20px;
-}
-#accountsList {
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  height: 100%;
-  width: 100%;
-  padding: 0px;
-  margin: 0px;
-}
-
-#Header {
-  text-align: center;
-  font-size: 2em;
-  margin-bottom: 20px;
-}
-
-/* mobile style */
-@media screen and (max-width: 600px) {
-  #Content {
-    flex-direction: column;
-    width: auto;
-    padding-left: 0px;
-    padding-right: 0px;
-    margin-top: 5%;
-  }
-  #Account {
-    width: 85%;
-    padding-left: 5%;
-    padding-right: 5%;
-    margin-bottom: 20px;
-    margin-left: 5%;
-    margin-right: 5%;
-    height: auto;
-  }
-  #Feed {
-    width: 95%;
-    margin: 0px;
-    margin-left: 10%;
-    margin-right: 10%;
-    padding: 0px;
-    overflow-y: visible;
-  }
-
-  #spacer {
-    height: 0;
-  }
-}
-
-::-webkit-scrollbar {
-  width: 0px;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-}
-::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-  border-radius: 0;
-}
-::-webkit-scrollbar-button {
-  background: transparent;
-  border-radius: 0;
-}
-
-* {
-  scrollbar-width: none;
-  scrollbar-color: transparent transparent;
-  -ms-overflow-style: none; /* IE and Edge */
-  -webkit-overflow-scrolling: touch;
-  -webkit-scrollbar: none; /* Safari */
-}
\ No newline at end of file
diff --git a/theming.ts b/theming.ts
deleted file mode 100644
index 3b5964b..0000000
--- a/theming.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Plugin } from 'vite';
-import { Config } from './config';
-
-
-// Replaces app.css with the contents of the file specified in the
-// config file.
-export const themePlugin = (): Plugin => {
-    const themeFolder = Config.THEME;
-    console.log(`Using theme folder: ${themeFolder}`);
-    return {
-        name: 'theme-generator',
-        enforce: 'pre', // Ensure this plugin runs first
-        transform(code, id) {
-            if (id.endsWith('app.css')) {
-                // Read the theme file and replace the contents of app.css with it
-                // Needs full path to the file
-                const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
-                // Replace the contents of app.css with the theme code
-
-                // and add a comment at the top
-                const themeComment = `/* Generated from ${themeFolder} */\n`;
-                const themeCodeWithComment = themeComment + themeCode;
-                // Return the theme code as the new contents of app.css
-                return {
-                    code: themeCodeWithComment,
-                    map: null,
-                };
-            }
-            return null;
-        }
-    };
-};
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 96d3c8c..20d2272 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,7 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { themePlugin } from "./theming";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    themePlugin(),
-    svelte(),
-  ],
+  plugins: [svelte()],
 });