diff --git a/my-app/firebase-config.js b/my-app/firebase-config.js
index 32a6500..d2c705e 100644
--- a/my-app/firebase-config.js
+++ b/my-app/firebase-config.js
@@ -1,15 +1,18 @@
-import { getFirestore } from 'firebase/firestore'
+import { getFirestore } from "firebase/firestore";
 import { initializeApp } from "firebase/app";
-
+import { getStorage } from "firebase/storage";
+import { getAuth } from "firebase/auth";
 
 export const firebaseConfig = {
-    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-    authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-    projectId: import.meta.env.VITE_PROJECT_ID,
-    storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-    messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
-    appId: import.meta.env.VITE_FIREBASE_APP_ID
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MSG_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
 
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
+export const auth = getAuth(app);
+export const storage = getStorage(app);
diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
index 86eba1c..f1adb0c 100644
--- a/my-app/src/App.jsx
+++ b/my-app/src/App.jsx
@@ -2,14 +2,19 @@ import "./App.css";
 import { Header } from "./Components/Header/Header";
 import { LandingPage } from "./Components/LandingPage/LandingPage.tsx";
 import { Portfolio } from "./Components/Portfolio/Portfolio.tsx";
+import { Login } from "./Components/Authentication/Login/Login.tsx";
+import { Register } from "./Components/Authentication/Register/Register.tsx";
 import { Pricing } from "./Components/Pricing/Pricing";
 import { ContactForm } from "./Components/ContactForm/ContactForm";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 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";
+import { auth } from "./../firebase-config.js";
+import { useState } from "react";
+import { onAuthStateChanged } from "firebase/auth";
+import { BasketModal } from "./Components/BasketModal/BasketModal.jsx";
 
 function App() {
   const quotes = [
@@ -17,31 +22,62 @@ function App() {
     "Capturing Moments, Creating Memories: Lens Studio, where photography meets artistry, offering stunning prints from our portfolio to adorn your world.",
   ];
 
+  const [user, setUser] = useState(null);
+
+  onAuthStateChanged(auth, (res) => {
+    setUser(res);
+  });
+
   return (
     <>
       <ThemeProvider>
-        <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>
+        <BrowserRouter>
+          <Header setUser={setUser} user={user} />
+          <div className="main__container">
+            <Routes>
+              {user ? (
+                <>
+                  <Route
+                    path="/"
+                    element={<LandingPage quotes={quotes} />}
+                  ></Route>
+                  <Route
+                    path="/portfolio"
+                    element={user ? <Portfolio /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/pricing"
+                    element={user ? <Pricing /> : <Login />}
+                  ></Route>
+                  <Route path="/contactform" element={<ContactForm />}></Route>
+                  <Route
+                    path="/portfolio/:imageId"
+                    element={user ? <PortfolioImage user={user} /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/basket"
+                    element={user ? <BasketModal user={user} /> : <Login />}
+                  ></Route>
+                </>
+              ) : (
+                <>
+                  <Route
+                    path="/login"
+                    element={user ? <Navigate to={"/"} replace /> : <Login />}
+                  ></Route>
+                  <Route
+                    path="/register"
+                    element={
+                      user ? <Navigate to={"/"} replace /> : <Register />
+                    }
+                  ></Route>
+                </>
+              )}
+              <Route path="*" element={<NotFound />}></Route>
+            </Routes>
+          </div>
+          <Footer />
+        </BrowserRouter>
       </ThemeProvider>
     </>
   );
diff --git a/my-app/src/Components/Authentication/Login/Login.module.css b/my-app/src/Components/Authentication/Login/Login.module.css
new file mode 100644
index 0000000..4c968af
--- /dev/null
+++ b/my-app/src/Components/Authentication/Login/Login.module.css
@@ -0,0 +1,32 @@
+.login__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+.login__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+}
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}
diff --git a/my-app/src/Components/Authentication/Login/Login.tsx b/my-app/src/Components/Authentication/Login/Login.tsx
new file mode 100644
index 0000000..0c6b312
--- /dev/null
+++ b/my-app/src/Components/Authentication/Login/Login.tsx
@@ -0,0 +1,31 @@
+import styles from "./Login.module.css"
+import { ThemeContext } from "../../../providers/theme.tsx";
+import { useContext } from "react";
+import classnames from "classnames";
+import { AuthForm } from "../../structure_components/AuthForm.jsx"
+import { useNavigate } from "react-router-dom";
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../../../firebase-config.js";
+
+
+export const Login = () => {
+    const { theme } = useContext(ThemeContext);
+    const navigate = useNavigate()
+    const handleSubmit = ({ login, password }) => {
+        signInWithEmailAndPassword(auth, login, password)
+            .then((e) => console.log(e))
+            .then(() => navigate("/"))
+    }
+    return (
+        <div className={classnames(styles["login__container"], styles[theme])}>
+            <h1 className={classnames(styles["login__header"], styles[theme])}>
+                Login page
+            </h1>
+            <div className={classnames(styles["login__form"], styles[theme])}>
+
+                <AuthForm submitText="Login" handleSubmit={handleSubmit}></AuthForm>
+            </div>
+
+        </div>
+    );
+};
diff --git a/my-app/src/Components/Authentication/Register/Register.module.css b/my-app/src/Components/Authentication/Register/Register.module.css
new file mode 100644
index 0000000..b5cb77f
--- /dev/null
+++ b/my-app/src/Components/Authentication/Register/Register.module.css
@@ -0,0 +1,32 @@
+.register__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.register__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+.register__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+}
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}
diff --git a/my-app/src/Components/Authentication/Register/Register.tsx b/my-app/src/Components/Authentication/Register/Register.tsx
new file mode 100644
index 0000000..4cb1e0e
--- /dev/null
+++ b/my-app/src/Components/Authentication/Register/Register.tsx
@@ -0,0 +1,27 @@
+import styles from "./Register.module.css"
+import { ThemeContext } from "../../../providers/theme.tsx";
+import { useContext } from "react";
+import classnames from "classnames";
+import { AuthForm } from "../../structure_components/AuthForm.jsx"
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../../../firebase-config.js";
+
+
+export const Register = () => {
+    const { theme } = useContext(ThemeContext);
+    const handleSubmit = ({ login, password }) => {
+        createUserWithEmailAndPassword(auth, login, password)
+            .then((e) => console.log(e))
+    }
+    return (
+        <div className={classnames(styles["register__container"], styles[theme])}>
+            <h1 className={classnames(styles["register__header"], styles[theme])}>
+                Registration page
+            </h1>
+            <div className={classnames(styles["register__form"], styles[theme])}>
+                <AuthForm submitText="Register" handleSubmit={handleSubmit}></AuthForm>
+            </div>
+
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/my-app/src/Components/BasketModal/BasketModal.jsx b/my-app/src/Components/BasketModal/BasketModal.jsx
index d671939..9391e73 100644
--- a/my-app/src/Components/BasketModal/BasketModal.jsx
+++ b/my-app/src/Components/BasketModal/BasketModal.jsx
@@ -1,13 +1,20 @@
 import styles from "./BasketModal.module.css";
-import { Modal } from "../Modal/Modal.jsx";
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../../providers/theme.tsx";
-import { BasketContext } from "../../providers/BasketContext";
 import { BasketItem } from "../BasketModal/BasketItem/BasketItem.tsx";
+import { db } from "../../../firebase-config.js";
+import { collection, doc, onSnapshot } from "firebase/firestore";
+import classNames from "classnames";
 
-export const BasketModal = ({ isOpen, onClose }) => {
+export const BasketModal = ({ isOpen, onClose, user }) => {
   const { theme } = useContext(ThemeContext);
-  const { basket } = useContext(BasketContext);
+  console.log("User from basket", user);
+
+  const [portfolioData, setPortfolioData] = useState([]);
+
+  const [basket, setBasket] = useState([]);
+  // const [photos, setPhotos] = useState([]);
+
   console.log("BASKET", basket);
 
   useEffect(() => {
@@ -32,31 +39,68 @@ export const BasketModal = ({ isOpen, onClose }) => {
     };
   }, [isOpen]);
 
+  const getData = () => {
+    const basketCollection = doc(db, "basket", user.uid);
+    onSnapshot(basketCollection, (doc) => {
+      const item = doc.data();
+      setBasket(item.photos);
+    });
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getPhotosData = () => {
+    const photosCollection = collection(db, "photos");
+    onSnapshot(photosCollection, (res) => {
+      const photos = res.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      }));
+
+      setPortfolioData(photos);
+    });
+  };
+  useEffect(() => {
+    getPhotosData();
+  }, []);
+
+  console.log("PORTFOLIO", portfolioData);
+  console.log("Basket", basket);
+
+  const result = portfolioData.filter((obj) => basket.includes(Number(obj.id)));
+
+  console.log("RESULT", result);
+
   return (
-    <div style={{ display: isOpen ? "block" : "none" }}>
-      <div
-        className={`${styles["basket-modal__overlay"]}`}
-        onClick={onClose}
-      ></div>
-      <Modal>
-        <button
-          className={`${styles["basket-modal__button-close"]} ${styles[theme]}`}
+    <div className={classNames(styles["basket__container"], styles[theme])}>
+      <h1 className={classNames(styles["basket__header"], styles[theme])}>
+        Basket
+      </h1>
+      <div className={classNames(styles["basket__form"], styles[theme])}>
+        <div
+          className={`${styles["basket-modal__overlay"]}`}
           onClick={onClose}
-        >
-          x
-        </button>
+        ></div>
         <div>
-          {basket.length > 0 ? (
-            <div>
-              {basket.map((product, index) => (
-                <BasketItem key={index} product={product} />
-              ))}
-            </div>
-          ) : (
-            <div>Empty basket</div>
-          )}
+          <div>
+            {basket ? (
+              <div>
+                {result.map((item, index) => (
+                  <div key={index}>
+                    <div>{item.author}</div>
+                    <img src={item.url} width={300} />
+                    <div>{item.price}$</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div>Empty basket</div>
+            )}
+          </div>
         </div>
-      </Modal>
+      </div>
     </div>
   );
 };
diff --git a/my-app/src/Components/BasketModal/BasketModal.module.css b/my-app/src/Components/BasketModal/BasketModal.module.css
index ee9c1b7..2318d07 100644
--- a/my-app/src/Components/BasketModal/BasketModal.module.css
+++ b/my-app/src/Components/BasketModal/BasketModal.module.css
@@ -1,4 +1,37 @@
-.basket-modal__button-close {
+.basket__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.basket__header {
+  margin: 100px auto 80px;
+  text-align: center;
+  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 2.4rem;
+}
+
+/* .basket__form {
+  height: 500px;
+  width: 500px;
+  border-radius: 20px;
+  padding-bottom: 20px;
+} */
+
+.light {
+  background: var(--box-light-color-light);
+  color: var(--main-text-color-light);
+}
+
+.dark {
+  background: var(--box-light-color-dark);
+  color: var(--main-text-color-dark);
+}
+
+/* .basket-modal__button-close {
   position: absolute;
   top: 20px;
   right: 10px;
@@ -27,4 +60,4 @@
   height: 100%;
   background: rgba(114, 111, 111, 0.5);
   z-index: 1;
-}
+} */
diff --git a/my-app/src/Components/Header/Header.jsx b/my-app/src/Components/Header/Header.jsx
index e16c45c..f2459af 100644
--- a/my-app/src/Components/Header/Header.jsx
+++ b/my-app/src/Components/Header/Header.jsx
@@ -4,8 +4,10 @@ import React, { useContext, useState } from "react";
 import { BasketModal } from "../BasketModal/BasketModal";
 import { NavLink } from "react-router-dom";
 import { ThemeContext } from "../../providers/theme.tsx";
+import { signOut } from "firebase/auth";
+import { auth } from "../../../firebase-config.js";
 
-export const Header = () => {
+export const Header = ({ setUser, user }) => {
   const [isCartModalOpen, setCartModalOpen] = useState(false);
   const { theme, toggleLightTheme, toggleDarkTheme } = useContext(ThemeContext);
 
@@ -32,23 +34,27 @@ export const Header = () => {
         </div>
         <div className={styles["header__links-container"]}>
           <ul className={styles["header__links"]}>
-            <li
-              className={classnames(
-                styles.header__link,
-                styles["header__links--examples"],
-                styles[theme]
-              )}
-            >
-              <NavLink to="/portfolio">Portfolio</NavLink>
-            </li>
-            <li
-              className={classnames(
-                styles.header__link,
-                styles["header__links--pricing"]
-              )}
-            >
-              <NavLink to="/pricing">Pricing</NavLink>
-            </li>
+            {user && (
+              <li
+                className={classnames(
+                  styles.header__link,
+                  styles["header__links--examples"],
+                  styles[theme]
+                )}
+              >
+                <NavLink to="/portfolio">Portfolio</NavLink>
+              </li>
+            )}
+            {user && (
+              <li
+                className={classnames(
+                  styles.header__link,
+                  styles["header__links--pricing"]
+                )}
+              >
+                <NavLink to="/pricing">Pricing</NavLink>
+              </li>
+            )}
             <li
               className={classnames(
                 styles.header__link,
@@ -57,15 +63,55 @@ export const Header = () => {
             >
               <NavLink to="/contactform">Contact</NavLink>
             </li>
-            <li
-              className={classnames(
-                styles.header__link,
-                styles["header__links--basket"]
-              )}
-              onClick={handleCartClick}
-            >
-              Basket
-            </li>
+            {user && (
+              <li
+                className={classnames(
+                  styles.header__link,
+                  styles["header__links--basket"]
+                )}
+                // onClick={handleCartClick}
+              >
+                <NavLink to="/basket">Basket</NavLink>
+                {/* Basket */}
+              </li>
+            )}
+            {!user && (
+              <li
+                className={classnames(
+                  styles.header__link,
+                  styles["header__links--contact"]
+                )}
+              >
+                <NavLink to="/login">Sign in</NavLink>
+              </li>
+            )}
+
+            {!user && (
+              <li
+                className={classnames(
+                  styles.header__link,
+                  styles["header__links--contact"]
+                )}
+              >
+                <NavLink to="/register">Sign up</NavLink>
+              </li>
+            )}
+            {user && (
+              <li
+                className={classnames(
+                  styles.header__link,
+                  styles["header__links--contact"]
+                )}
+              >
+                <div
+                  onClick={() => {
+                    signOut(auth);
+                  }}
+                >
+                  Sign out
+                </div>
+              </li>
+            )}
           </ul>
         </div>
         <div className={styles["header__theme-buttons-container"]}>
@@ -86,7 +132,11 @@ export const Header = () => {
           )}
         </div>
       </div>
-      <BasketModal isOpen={isCartModalOpen} onClose={handleCloseCartModal} />
+      {/* <BasketModal
+        isOpen={isCartModalOpen}
+        onClose={handleCloseCartModal}
+        user={user}
+      /> */}
     </>
   );
 };
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
index 0d77dd7..1f18386 100644
--- a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
+++ b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
@@ -4,17 +4,34 @@ import { ThemeContext } from "../../../providers/theme.tsx";
 import { useContext, useState, useEffect } from "react";
 import classnames from "classnames";
 import { db } from "../../../../firebase-config";
-import { doc, getDoc } from "firebase/firestore";
-import { BasketContext } from "../../../providers/BasketContext.tsx";
+import {
+  collection,
+  doc,
+  getDoc,
+  onSnapshot,
+  setDoc,
+} from "firebase/firestore";
 
-export const PortfolioImage = () => {
+export const PortfolioImage = ({ user }) => {
   const { imageId } = useParams();
   const { theme } = useContext(ThemeContext);
   const [photo, setPhoto] = useState(null);
-  const { addToBasket } = useContext(BasketContext);
+  const [users, setUsers] = useState([]);
 
-  const handleClick = (product) => {
-    addToBasket(product);
+  const handleClick = () => {
+    console.log("USER:", user);
+    //1.pobrac userów
+    //2. jak user istnieje to
+    //// Add a new document in collection "photos"
+    //pobieramy tablicę, dodajemy
+    // await setDoc(doc(db, "basket", user.uid, "photos"), {
+    //   id: id,
+    // });
+    //3.jak usera nie ma to
+    // Add a new document with a generated id
+    // const newUserRef = doc(collection(db, "basket", user.uid));
+    ///4. dodajemy dane to doc
+    // await setDoc(doc(db, "basket"), data); ---??? bo to arr?
   };
 
   useEffect(() => {
@@ -31,6 +48,25 @@ export const PortfolioImage = () => {
     fetchData();
   }, [imageId]);
 
+  // useEffect(() => {
+  //   const fetchData = async () => {
+  //     const docRef = collection(db, "basket");
+  //     console.log("docRef", docRef);
+  //     const docSnap = await getDoc(docRef);
+
+  //     if (docSnap.exists()) {
+  //       console.log("docSnap", docSnap);
+  //       console.log("docSnapData", docSnap.data());
+  //       setUsers(docSnap.data());
+  //     } else {
+  //       console.log("No such document!");
+  //     }
+  //   };
+
+  //   fetchData();
+  // }, []);
+  // console.log("USERS", users);
+
   if (!photo) {
     return <div>Loading...</div>;
   }
diff --git a/my-app/src/Components/structure_components/AuthForm.jsx b/my-app/src/Components/structure_components/AuthForm.jsx
new file mode 100644
index 0000000..d9005a7
--- /dev/null
+++ b/my-app/src/Components/structure_components/AuthForm.jsx
@@ -0,0 +1,49 @@
+import { useContext, useState } from "react";
+import { ThemeContext } from "../../providers/theme";
+import styles from "./AuthForm.module.css";
+
+// eslint-disable-next-line react/prop-types
+export const AuthForm = ({
+  submitText,
+  isPasswordHidden = false,
+  handleSubmit,
+}) => {
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
+  const { theme } = useContext(ThemeContext);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    return handleSubmit({ login, password });
+  };
+  return (
+    <form
+      onSubmit={onSubmit}
+      className={`${styles["modal__form"]} ${styles[theme]}`}
+    >
+      <div>
+        <label htmlFor="email">Login</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          value={login}
+          onChange={(e) => setLogin(e.target.value)}
+        />
+      </div>
+      {!isPasswordHidden && (
+        <div>
+          <label htmlFor="password">Haslo</label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+      )}
+      <button type="submit">{submitText}</button>
+    </form>
+  );
+};
diff --git a/my-app/src/Components/structure_components/AuthForm.module.css b/my-app/src/Components/structure_components/AuthForm.module.css
new file mode 100644
index 0000000..a93fcaa
--- /dev/null
+++ b/my-app/src/Components/structure_components/AuthForm.module.css
@@ -0,0 +1,10 @@
+.modal__form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.1rem;
+  padding-top: 20px;
+  border: 0.5px solid rgba(63, 63, 54, 30%);
+  border-radius: 20px;
+}