diff --git a/Template-01/src/App.tsx b/Template-01/src/App.tsx
index 1849eac..3261d92 100644
--- a/Template-01/src/App.tsx
+++ b/Template-01/src/App.tsx
@@ -1,3 +1,4 @@
+import { ThemeListener } from './components/layout/ThemeListener';
 import { motion, useScroll, useSpring } from 'framer-motion';
 import Navbar from './components/Navbar';
 import Hero from './components/Hero';
@@ -25,6 +26,7 @@ export default function App() {
 
   return (
     <div className="min-h-screen bg-background text-foreground selection:bg-white/20">
+      <ThemeListener />
       <motion.div
         className="fixed top-0 left-0 right-0 h-1 bg-white origin-left z-50"
         style={{ scaleX }}