diff --git a/src/components/Icons.astro b/src/components/Icons.astro
index c3ce167..580141d 100644
--- a/src/components/Icons.astro
+++ b/src/components/Icons.astro
@@ -11,7 +11,7 @@ import { Icon } from "astro-icon";
     <div class="absolute xl:w-[28rem] top-10 left-8 z-10 xl:group-hover:opacity-100 transition-opacity opacity-0 pointer-events-none">
       <img
         class="pointer-events-none"
-        src="https://lanyard.cnrad.dev/api/134306884617371648?hideDiscrim=true&showDisplayName=true&bg=313244"
+        src="https://lanyard.cnrad.dev/api/134306884617371648?hideDiscrim=true&showDisplayName=true&bg=1e2030"
         alt="Discord Presence"
       />
     </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4110b5a..a3df2b1 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import sakura from "../assets/sakura.png"
+import sakura from "../assets/sakura.png";
 
 interface Props {
   title: string;
@@ -16,14 +16,14 @@ const { title } = Astro.props;
 
     <title>{title}</title>
     <meta name="description" content="a self-taught code archwizard" />
-    <meta name="author" content="artie">
+    <meta name="author" content="artie" />
     <meta name="theme-color" content="#f38ba8" />
 
-    <meta property="og:type" content="website">
-    <meta property="og:site_name" content="artie.moe">
-    <meta property="og:title" content={title}>
-    <meta property="og:description" content="a self-taught code archwizard">
-    <meta property="og:url" content="https://artie.moe/">
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="artie.moe" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content="a self-taught code archwizard" />
+    <meta property="og:url" content="https://artie.moe/" />
     <meta property="og:image" content={sakura} />
 
     <link rel="icon" href={sakura} />
@@ -33,10 +33,13 @@ const { title } = Astro.props;
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
-
   </head>
-  <body class="bg-ctp-base h-screen text-ctp-text flex flex-col justify-center items-center">
+  <body>
     <slot />
   </body>
 </html>
-<style is:global></style>
+<style is:global>
+  body {
+    @apply bg-ctp-base h-screen text-ctp-text flex flex-col justify-center items-center;
+  }
+</style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b6daed4..a87ceba 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,7 +4,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['"Ubuntu"', "sans-serif"],
+        sans: ["Ubuntu", "sans-serif"],
         mono: ['"JetBrains Mono"', "monospace"],
       },
     },
@@ -12,7 +12,7 @@ module.exports = {
   plugins: [
     require("@catppuccin/tailwindcss")({
       prefix: "ctp",
-      defaultFlavour: "mocha",
+      defaultFlavour: "macchiato",
     }),
   ],
 };
