diff --git a/src/app/(protected)/_components/layout/Header.tsx b/src/app/(protected)/_components/layout/Header.tsx
index 6f69b04..1c59730 100644
--- a/src/app/(protected)/_components/layout/Header.tsx
+++ b/src/app/(protected)/_components/layout/Header.tsx
@@ -3,10 +3,10 @@
 import Button from "@/components/button/Button";
 import { RiLogoutBoxRLine } from "react-icons/ri";
 import { useLogout } from "@/hooks/auth/useLogout";
-import { ThemeToggle } from "@/components/button/ThemeButton";
+import { ThemeToggle } from "@/components/layout/header/ThemeButton";
 import MyMenu from "./Header/MyMenu";
 import NavBtn from "./Header/NavBtn";
-import Logo from "./Header/Logo";
+import Logo from "@/components/layout/header/Logo";
 
 export default function Header() {
   const { logout } = useLogout();
@@ -16,7 +16,7 @@ export default function Header() {
       <div className="mx-auto flex max-w-6xl items-center justify-between">
         <Logo />
 
-        <div className="relative flex items-center gap-1 text-gray-600">
+        <div className="relative flex items-center gap-">
           <ThemeToggle />
 
           <MyMenu />
diff --git a/src/app/(public)/_components/PublicHeader.tsx b/src/app/(public)/_components/PublicHeader.tsx
index 5427a55..8372587 100644
--- a/src/app/(public)/_components/PublicHeader.tsx
+++ b/src/app/(public)/_components/PublicHeader.tsx
@@ -1,21 +1,12 @@
 import Button from "@/components/button/Button";
-import { ThemeToggle } from "@/components/button/ThemeButton";
-import Link from "next/link";
+import Logo from "@/components/layout/header/Logo";
+import { ThemeToggle } from "@/components/layout/header/ThemeButton";
 
 export default function PublicHeader() {
   return (
     <header className="fixed top-0 left-0 z-20 w-full p-6 backdrop-blur-lg">
       <div className="mx-auto flex max-w-6xl items-center justify-between">
-        <Link
-          href="/"
-          className="font-sekuya text-xl text-foreground transition-colors hover:text-point group"
-        >
-          STACK
-          <span className="text-point transition-colors group-hover:text-foreground">
-            PLUS
-          </span>
-        </Link>
-
+        <Logo />
         <nav className="flex items-center gap-4">
           <ThemeToggle />
           <Button type="button" variant="text_underline" href="/dashboard">
diff --git a/src/app/(protected)/_components/layout/Header/Logo.tsx b/src/components/layout/header/Logo.tsx
similarity index 100%
rename from src/app/(protected)/_components/layout/Header/Logo.tsx
rename to src/components/layout/header/Logo.tsx
diff --git a/src/components/button/ThemeButton.tsx b/src/components/layout/header/ThemeButton.tsx
similarity index 68%
rename from src/components/button/ThemeButton.tsx
rename to src/components/layout/header/ThemeButton.tsx
index 9567acd..6c505db 100644
--- a/src/components/button/ThemeButton.tsx
+++ b/src/components/layout/header/ThemeButton.tsx
@@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
   const isMobile = useMobileSize();
@@ -13,19 +13,14 @@ export function ThemeToggle() {
   useEffect(() => setMounted(true), []);
   if (!mounted) return null;
 
+  const isDark = resolvedTheme === "dark";
   return (
     <button
       className={`
         font-sekuya text-sm md:text-md bg-whiterounded-sm px-2 py-1`}
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
     >
-      {theme === "dark"
-        ? isMobile
-          ? "☀️"
-          : "light"
-        : isMobile
-          ? "🌙"
-          : "dark"}
+      {isDark ? (isMobile ? "☀️" : "light") : isMobile ? "🌙" : "dark"}
     </button>
   );
 }