diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
index a37deb2..86eba1c 100644
--- a/my-app/src/App.jsx
+++ b/my-app/src/App.jsx
@@ -5,9 +5,10 @@ import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/portfolioimage";
+import { PortfolioImage } from "./Components/Portfolio/PortfolioImage/PortfolioImage.jsx";
 import { NotFound } from "./Components/NotFound/NotFound";
 import { ThemeProvider } from "./providers/theme.tsx";
+import { BasketProvider } from "./providers/basketContext.tsx";
 import { Footer } from "./Components/Footer/Footer";
 
 function App() {
@@ -19,23 +20,28 @@ function App() {
   return (
     <>
       <ThemeProvider>
-        <BrowserRouter>
-          <Header />
-          <div className="main__container">
-            <Routes>
-              <Route path="/" element={<LandingPage quotes={quotes} />}></Route>
-              <Route path="/portfolio" element={<Portfolio />}></Route>
-              <Route path="/pricing" element={<Pricing />}></Route>
-              <Route path="/contactform" element={<ContactForm />}></Route>
-              <Route
-                path="/portfolio/:imageId"
-                element={<PortfolioImage />}
-              ></Route>
-              <Route path="*" element={<NotFound />}></Route>
-            </Routes>
-          </div>
-          <Footer />
-        </BrowserRouter>
+        <BasketProvider>
+          <BrowserRouter>
+            <Header />
+            <div className="main__container">
+              <Routes>
+                <Route
+                  path="/"
+                  element={<LandingPage quotes={quotes} />}
+                ></Route>
+                <Route path="/portfolio" element={<Portfolio />}></Route>
+                <Route path="/pricing" element={<Pricing />}></Route>
+                <Route path="/contactform" element={<ContactForm />}></Route>
+                <Route
+                  path="/portfolio/:imageId"
+                  element={<PortfolioImage />}
+                ></Route>
+                <Route path="*" element={<NotFound />}></Route>
+              </Routes>
+            </div>
+            <Footer />
+          </BrowserRouter>
+        </BasketProvider>
       </ThemeProvider>
     </>
   );
diff --git a/my-app/src/providers/basketContext.tsx b/my-app/src/providers/basketContext.tsx
new file mode 100644
index 0000000..2dd5b1f
--- /dev/null
+++ b/my-app/src/providers/basketContext.tsx
@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, createContext, useContext, useState } from 'react';
+import { Product } from "./basketContext.types"
+
+interface BasketContextType {
+    basket: Product[];
+    addToBasket: (product: Product) => void;
+    removeFromBasket: (productId: number) => void;
+}
+
+const BasketContext = createContext<BasketContextType | undefined>(undefined);
+
+const BasketProvider: React.FC = ({ children }: PropsWithChildren) => {
+    const [basket, setBasket] = useState<Product[]>([]);
+
+    const addToBasket = (product: Product) => {
+        setBasket([...basket, product]);
+    }
+
+    const removeFromBasket = (productId: number) => {
+        setBasket(basket.filter(item => item.id !== productId));
+    }
+
+    return (
+        <BasketContext.Provider value={{ basket, addToBasket, removeFromBasket }}>
+            {children}
+        </BasketContext.Provider>
+    );
+}
+
+const useBasket = () => {
+    const context = useContext(BasketContext);
+    if (!context) {
+        throw new Error('useBasket must be used within a BasketProvider');
+    }
+    return context;
+}
+
+export { BasketProvider, useBasket };
diff --git a/my-app/src/providers/basketContext.types.ts b/my-app/src/providers/basketContext.types.ts
new file mode 100644
index 0000000..4642c57
--- /dev/null
+++ b/my-app/src/providers/basketContext.types.ts
@@ -0,0 +1,8 @@
+export interface Product {
+    author: string;
+    height: number;
+    id: number;
+    price: number;
+    url: string;
+    width: number;
+}
\ No newline at end of file
diff --git a/my-app/src/providers/theme.jsx b/my-app/src/providers/theme.jsx
deleted file mode 100644
index b837e40..0000000
--- a/my-app/src/providers/theme.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// import { createContext, useEffect, useState } from "react";
-
-// export const ThemeContext = createContext("theme");
-
-// export const ThemeProvider = ({ children }) => {
-//   const [theme, setTheme] = useState("light");
-//   const toggleLightTheme = () => {
-//     setTheme("light");
-//   };
-
-//   const toggleDarkTheme = ()=> {
-//     setTheme("dark");
-//   };
-
-//   useEffect(() => {
-//     document.body.className = theme;
-//   }, [theme]);
-
-//   console.log(theme);
-//   return (
-//     <ThemeContext.Provider value={{ theme, toggleLightTheme, toggleDarkTheme }}>
-//       {children}
-//     </ThemeContext.Provider>
-//   );
-// };