diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
index 3709643..76a8517 100644
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -2,13 +2,15 @@ import { DotIcon } from "@phosphor-icons/react"
 import "@fontsource/knewave"
 
 export default function Logo() {
-
   return (
-    <div className="flex items-baseline leading-none align-baseline">
-      <span className="text-2xl font-light font-logo text-accent">&nbsp;Pi</span>
-      <DotIcon weight="fill" size={12} className="text-accent translate-y-px" />
-      <span className="text-2xl font-light font-logo text-accent ml-0.5">Ku</span>
-      <DotIcon weight="fill" size={12} className="text-accent translate-y-px" />
-    </div>
+    <span
+      className="inline-flex items-baseline justify-center leading-none select-none"
+      style={{ fontFamily: "'Knewave', serif" }}
+    >
+      <span className="text-2xl font-light text-accent">Pi</span>
+      <DotIcon weight="fill" size={12} className="text-accent translate-y-[0.3em] -mx-px" />
+      <span className="text-2xl font-light text-accent">Ku</span>
+      <DotIcon weight="fill" size={12} className="text-accent translate-y-[0.3em] -mx-px" />
+    </span>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bd0e23f..50c2291 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -37,7 +37,6 @@
 }
 
 @theme {
-  --font-logo: "Knewave", system-ui;
   --font-display: "Playwrite HR Lijeva Variable", cursive;
   --font-sans: "Jost Variable", sans-serif;
   --font-serif: "Playfair Display Variable", serif;