diff --git a/src/components/BrandLogo.tsx b/src/components/BrandLogo.tsx
new file mode 100644
index 000000000..f2352682e
--- /dev/null
+++ b/src/components/BrandLogo.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Logo, useTheme } from '@once-ui-system/core';
+
+export default function BrandLogo() {
+
+    const { theme } = useTheme();
+
+    return (
+        <Logo
+            dark={theme === "dark"}
+            light={theme === "light"}
+            icon={
+                theme === "light"
+                    ? "/trademarks/wordmark-light.svg"
+                    : "/trademarks/wordmark-dark.svg"
+            }
+            style={{
+                display: "inline-flex",
+                top: "0.25em",
+                marginLeft: "-0.25em",
+            }}
+        />
+    )
+}
diff --git a/src/resources/content.tsx b/src/resources/content.tsx
index 5804608a8..0511018c2 100644
--- a/src/resources/content.tsx
+++ b/src/resources/content.tsx
@@ -1,3 +1,4 @@
+import BrandLogo from "@/components/BrandLogo";
 import { About, Blog, Gallery, Home, Newsletter, Person, Social, Work } from "@/types";
 import { Line, Logo, Row, Text } from "@once-ui-system/core";
 
@@ -66,11 +67,7 @@ const home: Home = {
   subline: (
     <>
       I'm Selene, a design engineer at{" "}
-      <Logo
-        dark
-        icon="/trademarks/wordmark-dark.svg"
-        style={{ display: "inline-flex", top: "0.25em", marginLeft: "-0.25em" }}
-      />
+      <BrandLogo />
       , where I craft intuitive
       <br /> user experiences. After hours, I build my own projects.
     </>
@@ -223,7 +220,7 @@ const about: About = {
             height: 9,
           },
         ],
-      },  
+      },
     ],
   },
 };