diff --git a/Template-01/src/App.tsx b/Template-01/src/App.tsx
index c46708b..69cffc3 100644
--- a/Template-01/src/App.tsx
+++ b/Template-01/src/App.tsx
@@ -1,3 +1,4 @@
+import { ThemeListener } from './components/layout/ThemeListener';
 import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
 import { Navbar } from './components/navbar';
@@ -27,6 +28,7 @@ export default function App() {
     <BrowserRouter>
       <ScrollToTop />
       <div className="min-h-screen flex flex-col font-sans">
+      <ThemeListener />
         <Navbar />
         <main className="flex-grow">
           <Routes>
diff --git a/Template-02/src/App.tsx b/Template-02/src/App.tsx
index f1316d3..35467db 100644
--- a/Template-02/src/App.tsx
+++ b/Template-02/src/App.tsx
@@ -1,3 +1,4 @@
+import { ThemeListener } from './components/layout/ThemeListener';
 import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
@@ -32,6 +33,7 @@ function RouteTracker() {
 export default function App() {
   return (
     <HelmetProvider>
+      <ThemeListener />
       <BrowserRouter>
         <RouteTracker />
         <div className="min-h-screen flex flex-col font-sans">