diff --git a/src/App.jsx b/src/App.jsx
index 4b2453d..c427ca7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,7 +4,6 @@ import Error from "./components/Error/Error";
 import SearchInput from "./components/Search/SearchInput";
 import Layout from "./components/Layout/Layout";
 import BGShape from "./components/BGShape";
-import { ThemeProvider } from "./context/ThemeContext";
 
 function App() {
   const [search, setSearch] = useState("");
@@ -12,12 +11,10 @@ function App() {
 
   return (
     <>
-      <ThemeProvider>
         <Layout>
           <SearchInput search={search} setSearch={setSearch} setType={setType} />
           <Error search={search} type={type} />
         </Layout>
-      </ThemeProvider>
     </>
   );
 }
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index 51086aa..250072f 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Header from '../Header/Header';
 import Footer from '../Footer/Footer';
+import { ThemeProvider } from '../../context/ThemeContext';
 
 /**
  * The Layout function is a React component that returns a div with a Header component and the children
@@ -9,7 +10,7 @@ import Footer from '../Footer/Footer';
  */
 const Layout = ({children}) => {
     return (
-        <>
+        <ThemeProvider>
           <Header 
               notice={"Under Construction"}
           />
@@ -17,7 +18,7 @@ const Layout = ({children}) => {
               {children}
           </div>
           <Footer />
-        </>
+        </ThemeProvider>
     );
 };