diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..6a3095a
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,37 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.16.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build
+
+      - name: Install Netlify CLI
+        run: npm install netlify-cli -g
+
+      - name: Deploy to Netlify
+        run: npx netlify deploy --dir=src --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
diff --git a/package.json b/package.json
index 15f8115..576afc4 100644
--- a/package.json
+++ b/package.json
@@ -33,13 +33,17 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.10.1",
     "react-if": "^4.1.5",
+    "react-material-ui-carousel": "^3.4.2",
     "react-pro-sidebar": "^1.1.0-alpha.1",
     "react-redux": "^8.1.1",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
     "react-spinners": "^0.13.8",
     "react-stripe-checkout": "^2.6.3",
+    "react-swipeable-views": "^0.14.0",
+    "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.7.2",
     "stripe": "^12.14.0",
     "styled-components": "^6.0.5",
@@ -75,6 +79,7 @@
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "http-proxy-middleware": "^2.0.6",
     "prettier": "^3.0.0"
   }
 }
diff --git a/src/App.js b/src/App.js
index bfc7c23..2f136d0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,12 @@
 // External Imports
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import styled, { createGlobalStyle } from 'styled-components';
 
 // Component Imports
 import Header from './components/headings/header/Header';
 import Footer from './components/headings/footer/Footer';
-import PrivateRoute from './components/Auth/PrivateRoute';
+import PrivateRoute from './components/reusable/PrivateRoute';
 
 // Page Imports
 import SplashPage from './pages/SplashPage';
@@ -17,104 +16,72 @@ import CartPage from './pages/CartPage';
 import ProfilePage from './pages/ProfilePage';
 import CollectionPage from './pages/CollectionPage';
 import DeckBuilderPage from './pages/DeckBuilderPage';
-import ThreeJsCube from './pages/ThreeJsCube';
-import CardDeckAnimation from './pages/CardDeckAnimation';
+import ThreeJsCube from './assets/animations/ThreeJsCube';
+import CardDeckAnimation from './assets/animations/CardDeckAnimation';
 
 // Context Hooks Imports
-import { useCombinedContext } from './context/CombinedProvider';
 import { useUserContext } from './context/UserContext/UserContext';
+import { useCollectionStore } from './context/CollectionContext/CollectionContext';
 import { useUtilityContext } from './context/UtilityContext/UtilityContext';
+import { AppContainer } from './pages/pageStyles/StyledComponents';
+import { useCardImages } from './context/CardImagesContext/CardImagesContext';
+import { useCookies } from 'react-cookie';
+import { useDeckStore } from './context/DeckContext/DeckContext';
+import { useCartStore } from './context/CartContext/CartContext';
+const App = () => {
+  const [cookies] = useCookies(['user']);
 
-// Styled Components
-const AppContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-`;
-
-const GlobalStyle = createGlobalStyle`
-  /* Your global styles here */
-`;
-
-// Custom Hook for Cron Job
-const useCronJob = (lastCronJobTriggerTime, setLastCronJobTriggerTime) => {
-  const {
-    cronData,
-    handleSendAllCardsInCollections,
-    listOfMonitoredCards,
-    handleRetreiveListOfMonitoredCards,
-    retrievedListOfMonitoredCards,
-    allCollectionsUpdated,
-  } = useCombinedContext();
+  const user = cookies.user;
+  const [currentPage, setCurrentPage] = useState('');
+  // const { setContext } = useAppContext(); // Assuming useAppContext provides setContext
+  const { fetchAllCollectionsForUser, selectedCollection } =
+    useCollectionStore();
+  const { allDecks, fetchAllDecksForUser, selectedDeck } = useDeckStore();
+  const { fetchUserCart, cartData } = useCartStore();
+  const { isLoading, setIsLoading } = useUtilityContext();
 
-  const { user } = useUserContext();
-  const userId = user?.userID;
+  // const { getRandomCardImages } = useCardImages(); // Add this line
 
-  useEffect(() => {
-    setLastCronJobTriggerTime(new Date().getTime());
-  }, [setLastCronJobTriggerTime]);
+  // useEffect(() => {
+  //   getRandomCardImages(10); // Fetch 10 random images on app start
+  // }, []); // Add this useEffect
 
   useEffect(() => {
-    const handleTriggerCronJob = () => {
-      const currentTime = new Date().getTime();
-      if (currentTime - lastCronJobTriggerTime >= 60000) {
-        setLastCronJobTriggerTime(currentTime);
-        if (userId && listOfMonitoredCards && retrievedListOfMonitoredCards) {
-          handleSendAllCardsInCollections(
-            userId,
-            listOfMonitoredCards,
-            retrievedListOfMonitoredCards
-          );
-          console.log('SENDING ALL CARDS IN COLLECTIONS');
-        } else if (userId && listOfMonitoredCards) {
-          console.log('RETRIEVING LIST OF MONITORED CARDS');
-          handleSendAllCardsInCollections(
-            userId,
-            listOfMonitoredCards,
-            handleRetreiveListOfMonitoredCards()
-          );
-          console.log('Triggered the cron job.');
-        }
-      }
-    };
-
-    const interval = setInterval(handleTriggerCronJob, 60000);
-    return () => clearInterval(interval);
-  }, [
-    cronData,
-    lastCronJobTriggerTime,
-    allCollectionsUpdated,
-    handleRetreiveListOfMonitoredCards,
-    handleSendAllCardsInCollections,
-    listOfMonitoredCards,
-    retrievedListOfMonitoredCards,
-    userId,
-  ]);
-};
-
-// Main Component
-const App = () => {
-  const [lastCronJobTriggerTime, setLastCronJobTriggerTime] = useState(null);
-  const { isLoading, setIsContextLoading } = useUtilityContext();
-
+    if (user) {
+      fetchAllCollectionsForUser()
+        .then(() => {
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          console.error('Error fetching collections:', error);
+          setIsLoading(false);
+        });
+    }
+  }, [user, fetchAllCollectionsForUser, setIsLoading, selectedCollection]);
+  // useEffect(() => {
+  //   if (user) {
+  //     fetchAllDecksForUser(user?.id).catch((err) =>
+  //       console.error('Failed to get all decks:', err)
+  //     );
+  //   }
+  // }, [fetchAllDecksForUser]);
+  // useEffect(() => {
+  //   if (user) {
+  //     fetchUserCart(user?.id).catch((err) =>
+  //       console.error('Failed to get cart:', err)
+  //     );
+  //   }
+  // }, [fetchUserCart]);
+
+  // Handle initial loading state
   useEffect(() => {
     if (!isLoading) {
-      setIsContextLoading(false);
+      setIsLoading(false);
     }
-  }, [isLoading, setIsContextLoading]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsContextLoading(false);
-    }, 5500);
-    return () => clearTimeout(timer);
-  }, [setIsContextLoading]);
-
-  useCronJob(lastCronJobTriggerTime, setLastCronJobTriggerTime);
+  }, [isLoading, setIsLoading]);
 
   return (
     <>
-      <GlobalStyle />
       <Helmet>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
@@ -130,10 +97,12 @@ const App = () => {
       {isLoading ? (
         <SplashPage />
       ) : (
-        <Router>
+        <React.Fragment>
           <AppContainer>
             <Header />
             <Routes>
+              {/* {setCurrentPage(useLocation())} */}
+
               <Route path="/" element={<HomePage />} />
               <Route path="/home" element={<HomePage />} />
               <Route path="/store" element={<StorePage />} />
@@ -176,7 +145,7 @@ const App = () => {
             </Routes>
             <Footer />
           </AppContainer>
-        </Router>
+        </React.Fragment>
       )}
     </>
   );
diff --git a/src/AppWrapper.jsx b/src/AppWrapper.jsx
deleted file mode 100644
index e017a16..0000000
--- a/src/AppWrapper.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// import React from 'react';
-// import { BrowserRouter as Router } from 'react-router-dom';
-// import App from './App';
-
-// const AppWrapper = () => {
-//   return (
-//     <Router>
-//       <App />
-//     </Router>
-//   );
-// };
-
-// export default AppWrapper;
diff --git a/src/pages/CardDeckAnimation.js b/src/assets/animations/CardDeckAnimation.js
similarity index 97%
rename from src/pages/CardDeckAnimation.js
rename to src/assets/animations/CardDeckAnimation.js
index 18bbe07..bf6d528 100644
--- a/src/pages/CardDeckAnimation.js
+++ b/src/assets/animations/CardDeckAnimation.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import * as THREE from 'three';
-import placeholder from '../assets/images/placeholder.jpeg';
+import placeholder from '../images/placeholder.jpeg';
 
 const CardDeckAnimation = () => {
   // Initialize the scene, camera, and renderer here
diff --git a/src/pages/pageStyles/Cube.jsx b/src/assets/animations/Cube.jsx
similarity index 100%
rename from src/pages/pageStyles/Cube.jsx
rename to src/assets/animations/Cube.jsx
diff --git a/src/assets/animations/LoadingCardAnimation.jsx b/src/assets/animations/LoadingCardAnimation.jsx
new file mode 100644
index 0000000..12a4f02
--- /dev/null
+++ b/src/assets/animations/LoadingCardAnimation.jsx
@@ -0,0 +1,228 @@
+import React, { useEffect, useState } from 'react';
+import * as THREE from 'three';
+import { useCardImages } from '../../context/CardImagesContext/CardImagesContext';
+import placeholderImage from '../images/placeholder.jpeg'; // Adjust the path as necessary
+function LoadingCardAnimation() {
+  const { cards, isLoading, error } = useCardImages();
+  const [randomCardImage, setRandomCardImage] = useState();
+
+  useEffect(() => {
+    if (cards && cards.length > 0) {
+      const randomCard = cards[Math.floor(Math.random() * cards.length)];
+      if (randomCard.card_images && randomCard.card_images.length > 0) {
+        // Constructing the local file name
+        const name = randomCard.name.replace(/[/\\?%*:|"<>]/g, '');
+        console.log('name', name);
+        const folder = 'images';
+        console.log('folder', folder);
+        const folder2 = 'cards';
+        const folder3 = `${
+          randomCard?.type === 'Spell Card' || randomCard?.type === 'Trap Card'
+            ? 'spell_trap'
+            : 'monster'
+        }`;
+        console.log('folder2', folder2);
+        const extension = 'jpg'; // Assuming all images are jpg
+        console.log('naextensionme', extension);
+        const fullName = `${name}_${randomCard.race}_${randomCard.type}${
+          randomCard.level ? '_lvl' + randomCard.level : ''
+        }${
+          randomCard.attribute ? '_' + randomCard.attribute : ''
+        }.${extension}`;
+        console.log('fullName', fullName);
+        const filePath = `../${folder}/${folder2}/${folder3}/${fullName}`;
+        console.log('filePath', filePath);
+        console.log('placeholderImage', placeholderImage);
+        setRandomCardImage(filePath);
+      }
+    }
+    console.log('cards', cards);
+    console.log('randomCardImage', randomCardImage);
+  }, [cards]);
+
+  useEffect(() => {
+    if (!randomCardImage) return;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+    const loadingIconContainer = document.getElementById('loadingIcon');
+    if (!loadingIconContainer) return;
+
+    loadingIconContainer.appendChild(renderer.domElement);
+
+    // Load the placeholder texture
+    const placeholderTexture = new THREE.TextureLoader().load(placeholderImage);
+
+    // Load the card image texture
+    new THREE.TextureLoader().load(
+      randomCardImage,
+      (texture) => {
+        const cardMaterialFront = new THREE.MeshBasicMaterial({ map: texture });
+        const cardMaterialBack = new THREE.MeshBasicMaterial({
+          map: placeholderTexture,
+        });
+
+        const cardGeometry = new THREE.BoxGeometry(1, 1.4, 0.01);
+        const card = new THREE.Mesh(cardGeometry, [
+          cardMaterialBack, // Left side
+          cardMaterialBack, // Right side
+          cardMaterialBack, // Top side
+          cardMaterialBack, // Bottom side
+          cardMaterialFront, // Front side
+          cardMaterialBack, // Back side
+        ]);
+        scene.add(card);
+        camera.position.z = 5;
+
+        const animate = () => {
+          requestAnimationFrame(animate);
+          card.rotation.y += 0.05;
+          renderer.render(scene, camera);
+        };
+
+        animate();
+      },
+      undefined, // onProgress callback not supported
+      (err) => {
+        console.error('An error occurred while loading the texture:', err);
+      }
+    );
+
+    return () => {
+      if (loadingIconContainer.contains(renderer.domElement)) {
+        loadingIconContainer.removeChild(renderer.domElement);
+      }
+    };
+  }, [randomCardImage]);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div id="loadingIcon" style={{ width: '100%', height: '400px' }}>
+      Three.js animation should appear here
+    </div>
+  );
+}
+
+export default LoadingCardAnimation;
+
+// import * as THREE from 'three';
+// import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+// import placeholderImage from '../images/placeholder.jpeg';
+// import { useCardImages } from '../../context/CardImagesContext/CardImagesContext';
+
+// function LoadingCardAnimation() {
+//   const { selectedCollection, allCollections } = useCollectionStore();
+//   const [randomCardImage, setRandomCardImage] = useState(null);
+//   const { images, isLoading, error, downloadCardImages, getRandomCardImages } =
+//     useCardImages();
+
+//   if (isLoading) {
+//     console.log('Loading...');
+//     return <div>Loading...</div>;
+//   }
+
+//   if (error) {
+//     console.error(error);
+//     return <div>Error: {error}</div>;
+//   }
+
+//   if (images && images.length > 0) {
+//     return (
+//       <div>
+//         {images.map((image, index) => (
+//           <img src={image} alt="card" key={index} />
+//         ))}
+//       </div>
+//     );
+//   }
+
+//   useEffect(() => {
+//     const selectRandomCardImage = (collection) => {
+//       const filteredCards = collection.cards.filter(
+//         (card) => card.card_images && card.card_images.length > 0
+//       );
+//       if (filteredCards.length > 0) {
+//         const randomCard =
+//           filteredCards[Math.floor(Math.random() * filteredCards.length)];
+//         return randomCard.card_images[0].image_url;
+//       }
+//       return placeholderImage;
+//     };
+
+//     const collection =
+//       selectedCollection ||
+//       (allCollections.length > 0
+//         ? allCollections[Math.floor(Math.random() * allCollections.length)]
+//         : null);
+//     if (collection) {
+//       setRandomCardImage(selectRandomCardImage(collection));
+//     } else {
+//       setRandomCardImage(placeholderImage);
+//     }
+//   }, [selectedCollection, allCollections]);
+
+//   useEffect(() => {
+//     if (!randomCardImage) return;
+
+//     const loadingIconContainer = document.getElementById('loadingIcon');
+//     if (!loadingIconContainer) {
+//       console.error('Loading icon container not found');
+//       return;
+//     }
+
+//     const scene = new THREE.Scene();
+//     const camera = new THREE.PerspectiveCamera(75, 400 / 400, 0.1, 1000);
+//     const renderer = new THREE.WebGLRenderer({ alpha: true });
+//     renderer.setSize(400, 400);
+
+//     loadingIconContainer.appendChild(renderer.domElement);
+
+//     const placeholderTexture = new THREE.TextureLoader().load(placeholderImage);
+//     const randomCardTexture = new THREE.TextureLoader().load(randomCardImage);
+//     const cardMaterialFront = new THREE.MeshBasicMaterial({
+//       map: placeholderTexture,
+//     });
+//     const cardMaterialBack = new THREE.MeshBasicMaterial({
+//       map: randomCardTexture,
+//     });
+
+//     const cardGeometry = new THREE.BoxGeometry(1, 1.4, 0.01);
+//     const card = new THREE.Mesh(cardGeometry, [
+//       cardMaterialBack,
+//       cardMaterialBack,
+//       cardMaterialBack,
+//       cardMaterialBack,
+//       cardMaterialFront,
+//       cardMaterialBack,
+//     ]);
+//     scene.add(card);
+
+//     camera.position.z = 5;
+
+//     const animate = function () {
+//       requestAnimationFrame(animate);
+//       card.rotation.y += 0.05;
+//       renderer.render(scene, camera);
+//     };
+
+//     animate();
+
+//     return () => {
+//       loadingIconContainer.removeChild(renderer.domElement);
+//     };
+//   }, [randomCardImage]);
+
+//   return <div id="loadingIcon"></div>;
+// }
+
+// export default LoadingCardAnimation;
diff --git a/src/pages/ThreeJsCube.js b/src/assets/animations/ThreeJsCube.js
similarity index 100%
rename from src/pages/ThreeJsCube.js
rename to src/assets/animations/ThreeJsCube.js
diff --git a/src/assets/example.json b/src/assets/example.json
deleted file mode 100644
index 88ce308..0000000
--- a/src/assets/example.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "chartData": {
-    "_id": 64163367,
-    "name": "\"A\" Cell Incubator",
-    "userId": "Spell Card",
-    "collectionId": "spell",
-    "chartId": "Each time an A-Counter(s) is removed from play by a card effect, place 1 A-Counter on this card. When this card is destroyed, distribute the A-Counters on this card among face-up monsters.",
-    "datasets": [
-      {
-        "label": "Set x",
-				"totalquantity": 37,
-        "data": {
-					"points": [
-						"card name": {
-							"x": "x/x/2023",
-							"y": 3,
-							"price change": "prev y - y",
-							"price change %": "price change / prev y",
-							"total quantity": "totalquantity",
-							"total price": "totalquantity * y"
-						},
-
-						}
-				],
-			},
-        "backgroundColor": "rgba(255, 99, 132, 0.2)",
-        "borderColor": "rgb(255, 99, 132)",
-        "borderWidth": 1
-      }
-    ]
-  }
-}
diff --git a/src/assets/icons/css.png b/src/assets/icons/tech/css.png
similarity index 100%
rename from src/assets/icons/css.png
rename to src/assets/icons/tech/css.png
diff --git a/src/assets/icons/express.png b/src/assets/icons/tech/express.png
similarity index 100%
rename from src/assets/icons/express.png
rename to src/assets/icons/tech/express.png
diff --git a/src/assets/icons/figma.png b/src/assets/icons/tech/figma.png
similarity index 100%
rename from src/assets/icons/figma.png
rename to src/assets/icons/tech/figma.png
diff --git a/src/assets/icons/git.png b/src/assets/icons/tech/git.png
similarity index 100%
rename from src/assets/icons/git.png
rename to src/assets/icons/tech/git.png
diff --git a/src/assets/icons/html.png b/src/assets/icons/tech/html.png
similarity index 100%
rename from src/assets/icons/html.png
rename to src/assets/icons/tech/html.png
diff --git a/src/assets/icons/java.png b/src/assets/icons/tech/java.png
similarity index 100%
rename from src/assets/icons/java.png
rename to src/assets/icons/tech/java.png
diff --git a/src/assets/icons/javascript.png b/src/assets/icons/tech/javascript.png
similarity index 100%
rename from src/assets/icons/javascript.png
rename to src/assets/icons/tech/javascript.png
diff --git a/src/assets/icons/mongodb.png b/src/assets/icons/tech/mongodb.png
similarity index 100%
rename from src/assets/icons/mongodb.png
rename to src/assets/icons/tech/mongodb.png
diff --git a/src/assets/icons/nodejs.png b/src/assets/icons/tech/nodejs.png
similarity index 100%
rename from src/assets/icons/nodejs.png
rename to src/assets/icons/tech/nodejs.png
diff --git a/src/assets/icons/reactjs.png b/src/assets/icons/tech/reactjs.png
similarity index 100%
rename from src/assets/icons/reactjs.png
rename to src/assets/icons/tech/reactjs.png
diff --git a/src/assets/icons/redux.png b/src/assets/icons/tech/redux.png
similarity index 100%
rename from src/assets/icons/redux.png
rename to src/assets/icons/tech/redux.png
diff --git a/src/assets/icons/tailwind.png b/src/assets/icons/tech/tailwind.png
similarity index 100%
rename from src/assets/icons/tailwind.png
rename to src/assets/icons/tech/tailwind.png
diff --git a/src/assets/icons/threejs.svg b/src/assets/icons/tech/threejs.svg
similarity index 100%
rename from src/assets/icons/threejs.svg
rename to src/assets/icons/tech/threejs.svg
diff --git a/src/assets/styles/CSStoRemove.css b/src/assets/styles/CSStoRemove.css
deleted file mode 100644
index 5dacdbe..0000000
--- a/src/assets/styles/CSStoRemove.css
+++ /dev/null
@@ -1,769 +0,0 @@
-code {
-  font-family:
-    source-code-pro,
-    Menlo,
-    Monaco,
-    Consolas,
-    Courier New,
-    monospace;
-}
-#header {
-  background-color: #4caf50;
-  color: #fff;
-  padding: 10px;
-}
-
-#header:after {
-  clear: both;
-  content: '';
-  display: table;
-}
-
-#navbar {
-  float: left;
-  margin: 0;
-  padding: 0;
-}
-
-#navbar li {
-  display: inline-block;
-  margin-left: 70px;
-}
-
-#navbar li a {
-  color: #fff;
-  display: block;
-  padding: 14px 16px;
-  text-align: center;
-  text-decoration: none;
-}
-
-#navbar li a:hover {
-  background-color: #111;
-}
-#home .header-content {
-  color: #fff;
-  position: relative;
-  text-align: center;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-#home .header-content h1 {
-  font-size: 3.5rem;
-  margin: 0;
-}
-
-#home .header-content p {
-  font-size: 1.5rem;
-  margin-bottom: 1.25rem;
-}
-
-#about .about-heading {
-  text-align: center;
-}
-
-#about .about-heading h2 {
-  font-size: 3rem;
-}
-
-#about .about-content {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-#about .about-content .left-column {
-  flex-basis: 50%;
-  padding-right: 1rem;
-}
-
-#about .about-content .right-column {
-  flex-basis: 50%;
-  padding-left: 1rem;
-}
-
-#services .service-item {
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-#services .service-item h2 {
-  font-size: 2.5rem;
-}
-
-#services .service-item p {
-  font-size: 1rem;
-}
-#portfolio .portfolio-item .how-title {
-  color: #fff;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-#portfolio .portfolio-item .skill {
-  align-items: center;
-  display: flex;
-  margin-top: 5px;
-}
-
-#portfolio .portfolio-item .skill p {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 0;
-}
-
-#portfolio .portfolio-item .skill-bar {
-  background-color: #fff;
-  height: 6px;
-  margin: 0 5px;
-  position: relative;
-  width: 100%;
-}
-
-#portfolio .portfolio-item .skill-bar:before {
-  background-color: #00baff;
-  content: '';
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  transition: width 0.3s ease-out;
-}
-
-#portfolio .portfolio-item .skill1 .skill-count1:after,
-#portfolio .portfolio-item .skill2 .skill-count2:after,
-#portfolio .portfolio-item .skill3 .skill-count3:after {
-  content: '%';
-}
-
-#portfolio .portfolio-item .skill-count1,
-#portfolio .portfolio-item .skill-count2,
-#portfolio .portfolio-item .skill-count3 {
-  color: #00baff;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-#portfolio .portfolio-item .skill1 .skill-bar:before {
-  width: 95%;
-}
-
-#portfolio .portfolio-item .skill2 .skill-bar:before {
-  width: 85%;
-}
-
-#portfolio .portfolio-item .skill3 .skill-bar:before {
-  width: 75%;
-}
-
-#portfolio .portfolio-item .skill .skill-count {
-  color: #18d26e;
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  position: absolute;
-  right: -40px;
-  top: -35px;
-}
-
-#portfolio .portfolio-item .skill1 .skill-count1 {
-  content: '95%';
-}
-
-#portfolio .portfolio-item .skill2 .skill-count2 {
-  content: '85%';
-}
-
-#portfolio .portfolio-item .skill3 .skill-count3 {
-  content: '75%';
-}
-.project-choices {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.skill-bar {
-  background-color: #f5f5f5;
-  border-radius: 50px;
-  height: 15px;
-  position: relative;
-}
-
-.skill-count1,
-.skill-count2,
-.skill-count3 {
-  font-size: 12px;
-  font-weight: 600;
-  position: absolute;
-  right: 0;
-  top: -25px;
-}
-
-.skill1 .skill-bar:before {
-  background-color: #007bff;
-  width: 95%;
-}
-
-.skill1 .skill-bar:before,
-.skill2 .skill-bar:before {
-  border-radius: 50px;
-  bottom: 0;
-  content: '';
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
-.skill2 .skill-bar:before {
-  background-color: #dc3545;
-  width: 85%;
-}
-
-.skill3 .skill-bar:before {
-  background-color: #ffc107;
-  border-radius: 50px;
-  bottom: 0;
-  content: '';
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 75%;
-}
-#portfolio .portfolio-item .wrapper {
-  background-color: rgba(0, 0, 0, 0.7);
-  color: #fff;
-  margin-bottom: auto;
-  margin-top: auto;
-  position: absolute;
-  width: auto;
-}
-.modal-dialog {
-  margin: 1.75rem auto;
-  max-width: 800px;
-}
-
-.modal-body {
-  padding: 20px 30px;
-}
-
-.modal-content .close {
-  background-color: #f5f5f5;
-  padding: 1rem;
-  right: 0;
-  top: 0;
-  z-index: 1;
-}
-
-.modal-content .close:hover {
-  color: #f6a50b;
-}
-
-.modal-dialog {
-  max-width: 80%;
-}
-
-.modal-header {
-  background-color: #f6a50b;
-  color: #fff;
-}
-
-.modal-header .modal-title {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.modal-body .project-date {
-  font-size: 14px;
-  font-weight: 700;
-  margin-top: 15px;
-}
-
-.modal-body .project-description {
-  margin-top: 15px;
-}
-
-.modal-body .project-description p {
-  margin-bottom: 5px;
-}
-
-.modal-body .project-title-settings {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 24px;
-  margin-bottom: 0;
-  margin-top: 30px;
-}
-
-.modal-body p {
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0;
-}
-
-.modal-body .project-description {
-  font-size: 16px;
-  line-height: 24px;
-  margin-bottom: 0;
-  margin-top: 30px;
-}
-
-.modal-body ul {
-  margin-bottom: 0;
-  margin-top: 30px;
-  padding-left: 20px;
-}
-
-.modal-body ul li {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.modal-content {
-  border: none;
-  border-radius: 0;
-}
-
-.modal-header {
-  border-bottom: none;
-}
-
-.modal-footer {
-  border-top: none;
-}
-
-.modal-content .close {
-  color: #222;
-  font-size: 28px;
-  font-weight: 400;
-  opacity: 1;
-  position: absolute;
-  right: 15px;
-  top: 15px;
-}
-
-.modal-content .close:hover {
-  color: #4c4c4c;
-  opacity: 1;
-}
-
-.modal-content .close:focus {
-  outline: none;
-}
-
-.modal-dialog {
-  margin: 0;
-  max-width: none;
-  width: 100%;
-}
-
-@media (min-width: 576px) {
-  .modal-dialog {
-    max-width: 750px;
-  }
-}
-
-@media (min-width: 768px) {
-  .modal-dialog {
-    max-width: 970px;
-  }
-}
-
-@media (min-width: 992px) {
-  .modal-dialog {
-    max-width: 1170px;
-  }
-
-  .modal-content {
-    min-height: 600px;
-  }
-
-  .modal-body {
-    padding: 60px 80px;
-  }
-
-  .modal-body .project-title-settings {
-    font-size: 30px;
-    line-height: 36px;
-    margin-top: 40px;
-  }
-
-  .modal-body .project-date {
-    font-size: 18px;
-    font-weight: 500;
-    margin-top: 10px;
-  }
-
-  .modal-body .project-description {
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 26px;
-    margin-top: 20px;
-  }
-
-  .modal-body .project-link {
-    margin-top: 30px;
-  }
-
-  .modal-body .project-link a {
-    background-color: #6c63ff;
-    border-color: #6c63ff;
-    border-radius: 5px;
-    color: #fff;
-    font-size: 20px;
-    font-weight: 600;
-    padding: 10px 25px;
-    text-decoration: none;
-    transition: all 0.3s ease;
-  }
-
-  .modal-body .project-link a:hover {
-    background-color: #5b54d5;
-    border-color: #5b54d5;
-    transition: all 0.3s ease;
-  }
-}
-.title-styles {
-  font-family: Raleway, sans-serif;
-  font-size: 250%;
-}
-#about .background .transparentbox #portfolio .aboutCol {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  justify-content: center;
-  padding: 10px;
-  width: 50%;
-}
-.input-group > div {
-  border: 1px solid #ddd;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.input-group-icon {
-  background: #eee;
-  color: #777;
-  padding: 0 12px;
-}
-
-.input-group-area {
-  width: 100%;
-}
-.github-corner:hover .octo-arm {
-  -webkit-animation: octocat-wave 0.56s ease-in-out;
-  animation: octocat-wave 0.56s ease-in-out;
-}
-
-@-webkit-keyframes octocat-wave {
-  0%,
-  to {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-
-  20%,
-  60% {
-    -webkit-transform: rotate(-25deg);
-    transform: rotate(-25deg);
-  }
-
-  40%,
-  80% {
-    -webkit-transform: rotate(10deg);
-    transform: rotate(10deg);
-  }
-}
-
-@keyframes octocat-wave {
-  0%,
-  to {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-
-  20%,
-  60% {
-    -webkit-transform: rotate(-25deg);
-    transform: rotate(-25deg);
-  }
-
-  40%,
-  80% {
-    -webkit-transform: rotate(10deg);
-    transform: rotate(10deg);
-  }
-}
-
-@media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
-    -webkit-animation: none;
-    animation: none;
-  }
-
-  .github-corner .octo-arm {
-    -webkit-animation: octocat-wave 0.56s ease-in-out;
-    animation: octocat-wave 0.56s ease-in-out;
-  }
-}
-.slider-image {
-  border: 5px solid #d7caaa;
-}
-
-.slider-tab {
-  background-color: #d7caaa;
-  height: 25px;
-}
-
-.slider-iconfiy {
-  margin-top: 10px;
-}
-
-.styles_typicalWrapper__1_Uvh:after {
-  cursor: none !important;
-  display: none;
-}
-.polaroid span {
-  background: #fff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-  display: inline-block;
-  margin: 55px 75px 30px;
-  padding: 15px 15px 30px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: all 0.2s linear;
-  z-index: 0;
-}
-
-.link-href {
-  color: #a3a3a3;
-}
-
-.wave {
-  font-size: 160%;
-}
-
-.font-trebuchet {
-  font-family:
-    Trebuchet MS,
-    Lucida Sans Unicode,
-    Lucida Grande,
-    Lucida Sans,
-    Arial,
-    sans-serif;
-}
-
-#preview {
-  background-color: #ebeaf5;
-  margin-bottom: 15%;
-  padding: 15px;
-  position: relative;
-  width: 500px;
-}
-.modal-inside .modal-content {
-  background: #fff;
-}
-
-.bars {
-  float: left;
-  padding: 0;
-  text-align: left;
-  width: 95%;
-}
-
-.bars .skills {
-  list-style: none;
-  margin-top: 36px;
-}
-
-.bars li {
-  background: #ccc;
-  border-radius: 3px;
-  height: 42px;
-  margin-bottom: 60px;
-  position: relative;
-}
-
-.bars li em {
-  color: #313131;
-  font:
-    15px opensans-bold,
-    sans-serif;
-  font-weight: 400;
-  letter-spacing: 2px;
-  position: relative;
-  text-transform: uppercase;
-  top: -36px;
-}
-
-.bar-expand {
-  background: #313131;
-  border-radius: 3px 0 0 3px;
-  display: inline-block;
-  height: 42px;
-  left: 0;
-  line-height: 42px;
-  margin: 0;
-  padding-right: 24px;
-  position: absolute;
-  top: 0;
-}
-
-.modal-close {
-  cursor: pointer;
-  padding: 10px 15px;
-  text-align: right;
-}
-
-.close-icon {
-  color: #000;
-  font-weight: lighter !important;
-}
-
-.modal-description {
-  font-size: 12px;
-  margin-bottom: 20px;
-  padding: 5px 5px 0;
-  text-align: justify;
-}
-
-.awssld__next,
-.awssld__prev {
-  outline: none !important;
-}
-
-.loader-bar-color {
-  color: #000 !important;
-}
-.portfolio .portfolio-item .portfolio-item-caption {
-  background-color: rgba(51, 51, 51, 0.9);
-  opacity: 0;
-  transition: all 0.5s ease;
-}
-
-.portfolio .portfolio-item .portfolio-item-caption:hover {
-  opacity: 1;
-}
-
-.portfolio
-  .portfolio-item
-  .portfolio-item-caption
-  .portfolio-item-caption-content {
-  font-size: 1.5rem;
-}
-
-@media (min-width: 576px) {
-  .portfolio .closeButtonResponsive {
-    display: block;
-  }
-
-  .portfolio .portfolio-item {
-    margin-bottom: 30px;
-  }
-}
-@-webkit-keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(1.2);
-  }
-
-  to {
-    -webkit-transform: scale(1);
-  }
-}
-
-@keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(1.2);
-    transform: scale(1.2);
-  }
-
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@-webkit-keyframes cd-bounce-2 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(20px);
-  }
-
-  to {
-    -webkit-transform: translateX(0);
-  }
-}
-
-@keyframes cd-bounce-2 {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100px);
-    transform: translateX(-100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(20px);
-    transform: translateX(20px);
-  }
-
-  to {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-
-@-webkit-keyframes cd-bounce-2-inverse {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(-20px);
-  }
-
-  to {
-    -webkit-transform: translateX(0);
-  }
-}
-
-@keyframes cd-bounce-2-inverse {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(100px);
-    transform: translateX(100px);
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translateX(-20px);
-    transform: translateX(-20px);
-  }
-
-  to {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
diff --git a/src/assets/styles/ProductListing.css b/src/assets/styles/ProductListing.css
deleted file mode 100644
index e6a0a59..0000000
--- a/src/assets/styles/ProductListing.css
+++ /dev/null
@@ -1,24 +0,0 @@
-/* src/styles/ProductListing.css */
-.product-listing {
-  padding: 20px;
-}
-
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-}
-
-.product-card {
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.product-card img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  border-radius: 8px;
-  margin-bottom: 10px;
-}
diff --git a/src/assets/styles/chakraStylesReset.css b/src/assets/styles/chakraStylesReset.css
deleted file mode 100644
index 80fe103..0000000
--- a/src/assets/styles/chakraStylesReset.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '@chakra-ui/css-reset';
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
deleted file mode 100644
index a3f7681..0000000
--- a/src/assets/styles/reset.css
+++ /dev/null
@@ -1,129 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
diff --git a/src/assets/styles/themes.js b/src/assets/styles/themes.js
deleted file mode 100644
index da1f593..0000000
--- a/src/assets/styles/themes.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-
-const theme = createTheme({
-  typography: {
-    fontFamily: "'Bebas Neue', sans-serif",
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 950, // Set md breakpoint to 950px
-      lg: 1280,
-      xl: 1920,
-    },
-  },
-  palette: {
-    background: {
-      default: '#fafafa', // You can set your default background color here
-    },
-    primary: {
-      main: '#1976d2', // Add the main property with the desired color value
-      contrastText: '#ffffff', // You can set your contrast text color here
-      spacing: 4, // You can set your spacing scale here
-    },
-  },
-  spacing: 4, // You can set your spacing scale here
-});
-
-export default theme;
diff --git a/src/themeSettings.jsx b/src/assets/themeSettings.jsx
similarity index 61%
rename from src/themeSettings.jsx
rename to src/assets/themeSettings.jsx
index 997a5ff..e3c7751 100644
--- a/src/themeSettings.jsx
+++ b/src/assets/themeSettings.jsx
@@ -8,9 +8,24 @@ export const themeSettings = (mode) => {
     palette: {
       mode: mode,
       primary: {
-        main: mode === 'dark' ? colors.primary[500] : colors.primary[100],
+        // main: mode === 'dark' ? colors.primary[500] : colors.primary[100],
+        main: colors.greenAccent[500],
+        light: colors.greenAccent[200],
+        dark: colors.greenAccent[600],
+        default: colors.grey[700],
+        // contrastText: '#fff',
         contrastText: mode === 'dark' ? '#ffffff' : '#000000',
+
+        // main: colors.greenAccent[500],
       },
+
+      chartColors: [
+        colors.greenAccent[500],
+        colors.greenAccent[400],
+        colors.greenAccent[300],
+        colors.greenAccent[200],
+        colors.greenAccent[100],
+      ],
       primaryLight: {
         main: colors.primary[300],
       },
@@ -22,24 +37,41 @@ export const themeSettings = (mode) => {
         black: colors.grey[900],
       },
       secondary: {
-        main: colors.greenAccent[500],
+        // main: colors.greenAccent[500],
+        main: colors.greenAccent[200],
+        light: colors.greenAccent[100],
+        dark: colors.greenAccent[400],
+        contrastText: '#000',
       },
       neutral: {
         dark: colors.grey[700],
-        main: colors.grey[500],
+        main: colors.primary[300],
         light: colors.grey[100],
       },
       background: {
-        default: mode === 'dark' ? colors.primary[500] : '#fcfcfc',
+        main: '#333',
+        dark: '#222',
+        secondary: '#444',
+        tertiary: '#555',
+        quaternary: '#666',
+        quinternary: '#999',
+        default: mode === 'dark' ? '#777' : '#ffffff',
+        paper: colors.greenAccent[100],
+        // paper: mode === 'dark' ? colors.grey[300] : '#ffffff',
       },
       error: {
         main: colors.redAccent[500],
+        dark: colors.redAccent[700],
+        contrastText: '#fff',
       },
       warning: {
         main: colors.redAccent[500],
       },
       success: {
+        light: colors.greenAccent[100],
         main: colors.greenAccent[500],
+        dark: colors.greenAccent[200],
+        contrastText: '#fff',
       },
       info: {
         main: colors.blueAccent[500],
@@ -53,6 +85,41 @@ export const themeSettings = (mode) => {
         hover: mode === 'dark' ? colors.grey[800] : colors.grey[200],
       },
     },
+    // chart: {
+    //   palette: {
+    //     primary: {
+    //       main: colors.greenAccent[500],
+    //       light: colors.greenAccent[300],
+    //       dark: colors.greenAccent[700],
+    //       contrastText: '#fff',
+    //     },
+    //     secondary: {
+    //       main: colors.greenAccent[200],
+    //       light: colors.greenAccent[100],
+    //       dark: colors.greenAccent[400],
+    //       contrastText: '#000',
+    //     },
+    //     background: {
+    //       paper: colors.greenAccent[100],
+    //       default: colors.greenAccent[200],
+    //     },
+    //     text: {
+    //       primary: colors.greenAccent[800],
+    //       secondary: colors.greenAccent[600],
+    //     },
+    //     chartColors: [
+    //       colors.greenAccent[500],
+    //       colors.greenAccent[400],
+    //       colors.greenAccent[300],
+    //       colors.greenAccent[200],
+    //       colors.greenAccent[100],
+    //     ],
+    //   },
+    //   typography: {
+    //     // Define typography styles if needed
+    //   },
+    // },
+
     spacing: (factor) => `${0.25 * factor}rem`,
     shape: {
       borderRadius: 4,
diff --git a/src/tokens.jsx b/src/assets/tokens.jsx
similarity index 100%
rename from src/tokens.jsx
rename to src/assets/tokens.jsx
diff --git a/src/components/buttons/topButton/TopButton.css b/src/assets/topButton/TopButton.css
similarity index 100%
rename from src/components/buttons/topButton/TopButton.css
rename to src/assets/topButton/TopButton.css
diff --git a/src/components/buttons/topButton/TopButton.js b/src/assets/topButton/TopButton.js
similarity index 100%
rename from src/components/buttons/topButton/TopButton.js
rename to src/assets/topButton/TopButton.js
diff --git a/src/components/Auth/PrivateRoute.jsx b/src/components/Auth/PrivateRoute.jsx
deleted file mode 100644
index 8a7495d..0000000
--- a/src/components/Auth/PrivateRoute.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useContext } from 'react';
-import { Route, Navigate } from 'react-router-dom';
-import { AuthContext } from '../../context/Auth/authContext';
-
-// function PrivateRoute({ children, capability }) {
-//   const authContext = useContext(AuthContext);
-//   const isloggedin = authContext.isloggedin;
-
-//   if (!isloggedin) {
-//     // Redirect to a login page or another appropriate route
-//     return <Navigate to="/login" />;
-//   }
-
-//   // Check if the user has the required capability (optional)
-//   // if (capability && !authContext.can(capability)) {
-//   //   // Redirect to a forbidden page or another appropriate route
-//   //   return <Navigate to="/forbidden" />;
-//   // }
-
-//   // Render the protected route with children
-//   return children;
-// }
-const PrivateRoute = ({ children }) => {
-  const authContext = useContext(AuthContext);
-  const isloggedin = authContext.isloggedin;
-  return isloggedin ? children : <Navigate to="/profile" />;
-};
-
-export default PrivateRoute;
diff --git a/src/components/Auth/auth.jsx b/src/components/Auth/auth.jsx
index 6d183bf..eb2aacf 100644
--- a/src/components/Auth/auth.jsx
+++ b/src/components/Auth/auth.jsx
@@ -3,12 +3,12 @@ import { Routes, Route } from 'react-router-dom';
 import { AuthContext } from '../../context/Auth/authContext';
 
 function Auth({ children }) {
-  const { isloggedin, user, can } = useContext(AuthContext);
+  const { isLoggedIn, user, can } = useContext(AuthContext);
 
-  console.log('isloggedin', isloggedin);
+  console.log('isLoggedIn', isLoggedIn);
   console.log('user', user);
 
-  return isloggedin ? (
+  return isLoggedIn ? (
     <Routes>
       {/* {can('admin') && <Route exact path="/admin" element={<AdminPage />} />} */}
       {children}
diff --git a/src/components/buttons/CollectionActionButtons.jsx b/src/components/buttons/CollectionActionButtons.jsx
deleted file mode 100644
index 5e207ee..0000000
--- a/src/components/buttons/CollectionActionButtons.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@mui/styles';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext'; // Assuming you have a separate context for Collections
-import CardActionButtons from './CardActionButtons';
-import CollectionDialog from '../dialogs/CollectionDialog'; // Assuming you have a separate dialog for Collections
-import CardCountDisplay from '../other/CardCountDisplay';
-import { useCartStore } from '../../context/CartContext/CartContext';
-
-const useStyles = makeStyles({
-  root: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  button: {
-    flex: 1,
-    height: '100%',
-    padding: '4px',
-  },
-  fullWidthButton: {
-    width: '100%',
-    padding: '4px',
-  },
-});
-
-const CollectionActionButtons = ({ card }) => {
-  const classes = useStyles();
-  const {
-    addOneToCollection,
-    removeOneFromCollection,
-    removeAllFromCollection,
-    createUserCollection,
-    collectionCardQuantity,
-  } = useCollectionStore();
-
-  const { getCardQuantity } = useCartStore();
-  const [openDialog, setOpenDialog] = useState(false);
-
-  const handleDialogClose = (newCollectionInfo) => {
-    createUserCollection(newCollectionInfo);
-    addOneToCollection(card);
-    setOpenDialog(false);
-  };
-
-  // let collectionCardQuantity = getCardQuantity(card?.id);
-  console.log('CARD', card);
-  console.log('getCardQuantity', getCardQuantity(card?.id));
-  return (
-    <div className={classes.root}>
-      <CardCountDisplay
-        label="In Cart"
-        quantity={getCardQuantity(card?.id)}
-        className="some-cart-class"
-      />
-
-      <CardActionButtons
-        card={card}
-        quantity={getCardQuantity(card?.id)}
-        addOne={addOneToCollection}
-        removeOne={removeOneFromCollection}
-        removeAll={removeAllFromCollection}
-        context="Collection"
-        buttonClassName={classes.button}
-        fullWidthButtonClassName={classes.fullWidthButton}
-      />
-      <CollectionDialog open={openDialog} onClose={handleDialogClose} />
-    </div>
-  );
-};
-
-export default CollectionActionButtons;
-
-// will having collectionActionButtons and cartActionButtons in the same component cause errors:
diff --git a/src/components/buttons/actionButtons/CardActionButtons.jsx b/src/components/buttons/actionButtons/CardActionButtons.jsx
index 7a4c705..1e1314f 100644
--- a/src/components/buttons/actionButtons/CardActionButtons.jsx
+++ b/src/components/buttons/actionButtons/CardActionButtons.jsx
@@ -1,89 +1,222 @@
 import React, { useCallback } from 'react';
-import { Button, Grid } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { useModal } from '../../../context/hooks/modal';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexGrow: 1,
-    background: '#f1f1f1',
-    borderRadius: '8px',
-  },
-  buttonGrid: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: '8px',
-  },
-  fullWidthButton: {
-    width: '100%',
-    height: '100%',
-    borderRadius: '4px',
-  },
-}));
-
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  IconButton,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import { useStyles } from '../buttonStyles';
+import useAppContext from '../../../context/hooks/useAppContext';
+import { useMode } from '../../../context/hooks/colormode';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+import Logger from '../../grids/collectionGrids/Logger';
+import { useDeckStore } from '../../../context/DeckContext/DeckContext';
+import { useCartStore } from '../../../context/CartContext/CartContext';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
+import DeleteIcon from '@material-ui/icons/Delete';
+const cardOtherLogger = new Logger([
+  'Action',
+  'Card Name',
+  'Quantity',
+  'Total Price',
+]);
 const CardActionButtons = ({
   card,
-  quantity,
   context,
-  contextProps,
-  handleOpenDialog,
+  closeModal,
+  modifiedContextProps,
 }) => {
+  const { theme } = useMode(); // Using the theme hook
+
   const classes = useStyles();
+  // const { contextProps, isContextAvailable } = useAppContext(context);
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const { addOneToCollection, removeOneFromCollection } = useCollectionStore();
+  const { addOneToDeck, removeOneFromDeck } = useDeckStore();
+  const { addOneToCart, removeOneFromCart } = useCartStore();
+  const styles = {
+    box: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexGrow: 1,
+      width: '100%', // Using theme spacing
+      padding: theme.spacing(2), // Using theme spacing
+      backgroundColor: theme.palette.background.paper, // Using theme background color
+    },
+    grid: {
+      // display: 'flex',
+      flexGrow: 1,
+      // flexDirection: 'column',
+      width: '100%', // Using theme spacing
+    },
+    grid2: {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'row',
+      width: '100%', // Using theme spacing
+      justifyContent: 'space-between',
+    },
+    button: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.background.primary, // Using theme text color
+      backgroundColor: theme.palette.success.main, // Using theme background color
+    },
+    removeButton: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.error.contrastText, // Using theme text color
+      backgroundColor: theme.palette.error.main, // Using theme background color
+    },
+    addButton: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.success.contrastText, // Using theme text color
+      backgroundColor: theme.palette.success.main, // Using theme background color
+    },
+    gridItem: {
+      textAlign: 'center',
+    },
+  };
+  const ADD = 'add';
+  const REMOVE_ONE = 'removeOne';
+  const REMOVE_ALL = 'removeAll';
+  const performAction = useCallback(
+    (action, card) => {
+      try {
+        switch (context) {
+          case 'Collection':
+            if (action === 'add') {
+              addOneToCollection(card, card.id);
+            } else if (action === 'removeOne') {
+              removeOneFromCollection(card, card.id);
+            }
+            break;
+          case 'Deck':
+            if (action === 'add') {
+              addOneToDeck(card);
+            } else if (action === 'removeOne') {
+              removeOneFromDeck(card);
+            }
+            break;
+          case 'Cart':
+            if (action === 'add') {
+              addOneToCart(card);
+            } else if (action === 'removeOne') {
+              removeOneFromCart(card);
+            }
+            break;
+          default:
+            console.error(`Unhandled context: ${context}`);
+        }
+        cardOtherLogger.logCardAction(`${action} Card`, card);
+      } catch (error) {
+        console.error(
+          `Error performing action '${action}' with payload`,
+          card,
+          error
+        );
+      }
+    },
+    [
+      addOneToCollection,
+      removeOneFromCollection,
+      addOneToDeck,
+      removeOneFromDeck,
+      addOneToCart,
+      removeOneFromCart,
+      context,
+    ]
+  );
+
+  const handleAddClick = () => {
+    console.log('handleAddClick', card, context);
+    performAction(ADD, card);
+    closeModal?.();
+  };
 
-  const handleAddToContext = useCallback(() => {
-    console.log(`Context is: ${context}`);
-    const addMethod = contextProps[`addOneTo${context}`];
-    if (typeof addMethod === 'function') {
-      addMethod(card);
-    } else if (context === 'Collection') {
-      console.log(
-        "Opening ChooseCollectionDialog because the context is 'Collection'"
-      );
-      handleOpenDialog();
-    } else {
-      console.error(`Method addOneTo${context} not found in contextProps`);
-    }
-  }, [context, contextProps, card, handleOpenDialog]);
+  const handleRemoveOne = () => {
+    performAction(REMOVE_ONE, card);
+    closeModal?.();
+  };
+
+  const handleRemoveAll = () => {
+    performAction(REMOVE_ALL, card);
+    closeModal?.();
+  };
 
   return (
-    <div className={classes.root}>
-      {quantity > 0 ? (
+    <Box sx={styles.box} onClick={closeModal}>
+      {!isLargeScreen && (
         <>
-          <Grid container>
-            <Grid item xs={6}>
-              {`In ${context}: `} {quantity}
+          <Grid container spacing={2} sx={styles.grid}>
+            <Grid
+              item
+              xs={6}
+              sx={{ textAlign: 'center', justifyContent: 'center' }}
+            >
+              <Typography variant="h8" component="span">
+                {`In ${context}: `}
+              </Typography>
+              <Typography variant="h6" component="span">
+                {card.quantity}
+              </Typography>
+            </Grid>
+
+            <Grid item xs={6} sx={styles.gridItem}>
+              <Button sx={styles.addButton} onClick={handleAddClick}>
+                +
+              </Button>
+              <Button sx={styles.removeButton} onClick={handleRemoveOne}>
+                -
+              </Button>
+            </Grid>
+          </Grid>
+          <Divider />
+          <Grid container spacing={2} sx={styles.grid2}>
+            <Grid item xs={6} sx={styles.gridItem}>
+              <IconButton
+                aria-label="delete"
+                size="medium"
+                sx={styles.addButton}
+                onClick={handleAddClick}
+              >
+                <AddCircleOutlineIcon fontSize="inherit" />
+              </IconButton>
             </Grid>
-            <Grid item xs={6} className={classes.buttonGrid}>
-              <Button onClick={() => contextProps.addOne(card)}>+</Button>
-              <Button onClick={() => contextProps.removeOne(card)}>-</Button>
+            <Grid item xs={6} sx={styles.gridItem}>
+              <IconButton
+                aria-label="delete"
+                size="medium"
+                sx={styles.removeButton}
+                onClick={handleRemoveOne}
+              >
+                <DeleteIcon fontSize="inherit" />
+              </IconButton>
             </Grid>
           </Grid>
-          <Button
-            variant="contained"
-            color="secondary"
-            className={classes.fullWidthButton}
-            onClick={() => contextProps.removeAll(card)}
-          >
-            {`Remove from ${context}`}
-          </Button>
         </>
-      ) : (
-        <Button
-          variant="contained"
-          color="primary"
-          className={classes.fullWidthButton}
-          onClick={handleAddToContext}
-        >
-          {`Add To ${context}`}
-        </Button>
       )}
-    </div>
+      <Button
+        variant="contained"
+        color="secondary"
+        sx={{ ...styles.addButton, width: '100%' }}
+        onClick={handleAddClick}
+      >
+        {`Add to ${context}`}
+      </Button>
+      <Button
+        variant="contained"
+        color="secondary"
+        sx={{ ...styles.removeButton, width: '100%' }}
+        onClick={handleRemoveOne}
+      >
+        {`Remove from ${context}`}
+      </Button>
+    </Box>
   );
 };
 
diff --git a/src/components/buttons/actionButtons/ChooseCollectionDialog.jsx b/src/components/buttons/actionButtons/ChooseCollectionDialog.jsx
deleted file mode 100644
index 77eb817..0000000
--- a/src/components/buttons/actionButtons/ChooseCollectionDialog.jsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import {
-  Dialog,
-  DialogTitle,
-  Typography,
-  List,
-  ListItem,
-  ButtonBase,
-  ListItemText,
-  Divider,
-  Snackbar,
-} from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { useCollectionStore } from '../../../context/hooks/collection';
-
-const useStyles = makeStyles((theme) => ({
-  listItem: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: theme.spacing(2),
-    backgroundColor: '#ffffff',
-    borderRadius: '8px',
-    marginBottom: theme.spacing(2),
-    boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-  },
-  listItemText: {
-    flex: 1,
-    textAlign: 'left',
-    marginLeft: theme.spacing(3),
-  },
-}));
-
-const ChooseCollectionDialog = ({ onSave, isOpen, onClose }) => {
-  const { setSelectedCollection, allCollections } = useCollectionStore();
-  const classes = useStyles();
-  const [error, setError] = useState(null);
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-
-  const handleSelectCollection = useCallback(
-    (collectionId) => {
-      const foundCollection = allCollections.find(
-        (collection) => collection._id === collectionId
-      );
-
-      if (foundCollection) {
-        setSelectedCollection(foundCollection);
-        if (onSave) onSave(foundCollection);
-        onClose();
-        setSnackbarOpen(true); // open snackbar on successful selection
-      } else {
-        setError('Collection not found!');
-      }
-    },
-    [allCollections, setSelectedCollection, onSave, onClose]
-  );
-  if (isOpen) {
-    console.log('DIALOG OPEEPEPPE opened!)');
-  }
-
-  return (
-    <Dialog open={false} onClose={onClose}>
-      <DialogTitle>Select a Collection</DialogTitle>
-
-      <List className={classes.list}>
-        {allCollections.map((collection) => (
-          <React.Fragment key={collection._id}>
-            <ListItem className={classes.listItem}>
-              <ButtonBase
-                sx={{ width: '100%' }}
-                onClick={() => handleSelectCollection(collection._id)}
-              >
-                <ListItemText
-                  primary={collection.name}
-                  className={classes.listItemText}
-                />
-              </ButtonBase>
-            </ListItem>
-            <Divider />
-          </React.Fragment>
-        ))}
-      </List>
-
-      {error && (
-        <Typography variant="body2" color="error" align="center">
-          {error}
-        </Typography>
-      )}
-
-      <Snackbar
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        open={snackbarOpen}
-        onClose={() => setSnackbarOpen(false)}
-        message="Collection selected successfully!"
-        autoHideDuration={3000}
-      />
-    </Dialog>
-  );
-};
-
-export default ChooseCollectionDialog;
-
-// import React, { useCallback, useState } from 'react';
-// import {
-//   Dialog,
-//   DialogTitle,
-//   List,
-//   ListItem,
-//   ListItemText,
-//   ButtonBase,
-//   Typography,
-//   ListItemButton,
-// } from '@mui/material';
-// import { useCollectionStore } from '../../../context/hooks/collection';
-// import { useModal } from '../../../context/hooks/modal';
-// import SelectCollectionList from '../../grids/collectionGrids/SelectCollectionList';
-
-// const ChooseCollectionDialog = ({
-//   onSave,
-//   isOpen,
-//   onClose,
-//   card,
-//   deckDialogIsOpen,
-// }) => {
-//   const {
-//     allCollections,
-//     setSelectedCollection,
-//     selectedCollection,
-//     setOpenChooseCollectionDialog,
-//   } = useCollectionStore();
-//   const { hideModal } = useModal();
-//   const [error, setError] = useState(null);
-
-//   // If handleSelectCollection is a function, define it
-//   const handleSelectCollection = (collectionId) => {
-//     if (!collectionId) return;
-
-//     const foundCollection = allCollections?.find(
-//       (collection) => collection._id === collectionId
-//     );
-
-//     if (!foundCollection) {
-//       console.error('Collection not found with ID:', collectionId);
-//       setError('Collection not found!');
-//       return;
-//     }
-
-//     setSelectedCollection(foundCollection);
-//     onSave(foundCollection);
-//     setOpenChooseCollectionDialog(false);
-//     hideModal();
-//   };
-
-//   const handleAddToCollection = (collectionId) => {
-//     if (!collectionId) return;
-
-//     const foundCollection = allCollections?.find(
-//       (collection) => collection._id === collectionId
-//     );
-
-//     if (!foundCollection) {
-//       console.error('Collection not found with ID:', collectionId);
-//       setError('Collection not found!');
-//       return;
-//     }
-
-//     setSelectedCollection(foundCollection);
-//     onSave(foundCollection);
-//     setOpenChooseCollectionDialog(false);
-//     hideModal();
-//   };
-
-//   const handleSave = useCallback(
-//     (collection) => {
-//       setSelectedCollection(collection);
-//       if (collection) {
-//         // Assuming you have some logic to add the card to the selected collection
-//         // handleAddToCollection(card);
-//         onSave(collection);
-//         // setOpenChooseCollectionDialog(false);
-//         onClose();
-//       } else {
-//         setError('Collection not found!');
-//       }
-//     },
-//     [setSelectedCollection, onClose]
-//   );
-
-//   const handleOpenDialog = () => {
-//     if (deckDialogIsOpen) {
-//       hideModal();
-//     }
-//   };
-//   const openDialog = useCallback(
-//     (isNewCollection) => {
-//       setDialogOpen(true);
-//       setIsNew(isNewCollection);
-
-//       if (isNewCollection) {
-//         setEditedName('');
-//         setEditedDescription('');
-//       } else if (selectedCollection) {
-//         setEditedName(selectedCollection.name);
-//         setEditedDescription(selectedCollection.description);
-//       }
-//     },
-//     [selectedCollection]
-//   );
-
-//   const handleSave = useCallback(
-//     (collection) => {
-//       setSelectedCollection(collection);
-//       setShowCollections(false);
-//       setShowPortfolio(true);
-//       closeDialog();
-//     },
-//     [setSelectedCollection, closeDialog]
-//   );
-//   console.log('SELECTED COLLECTION (SELECT COLLECTION):', selectedCollection);
-
-//   return (
-//     // <Dialog onClose={hideModal} open={true}>
-//     <Dialog open={isOpen} onClose={onClose}>
-//       <DialogTitle>Select a Collection</DialogTitle>
-//       <SelectCollectionList
-//         handleSelectCollection={handleSelectCollection}
-//         onSave={handleSave}
-//         openDialog={handleOpenDialog}
-//       />
-//       {error && (
-//         <Typography variant="body2" color="error" align="center">
-//           {error}
-//         </Typography>
-//       )}
-//     </Dialog>
-//   );
-// };
-
-// export default ChooseCollectionDialog;
diff --git a/src/components/buttons/actionButtons/GenericActionButtons.jsx b/src/components/buttons/actionButtons/GenericActionButtons.jsx
index 4f56698..cf898e9 100644
--- a/src/components/buttons/actionButtons/GenericActionButtons.jsx
+++ b/src/components/buttons/actionButtons/GenericActionButtons.jsx
@@ -1,84 +1,168 @@
-// Dependencies
-import React, { useState, useEffect, useContext } from 'react';
-import { makeStyles } from '@mui/styles';
-import { CollectionContext } from '../../../context/CollectionContext/CollectionContext';
-import { DeckContext } from '../../../context/DeckContext/DeckContext';
-import { CartContext } from '../../../context/CartContext/CartContext';
-import GenericCardModal from '../../modals/GenericCardModal';
+import React, { useContext } from 'react';
 import CardActionButtons from './CardActionButtons';
-// import ChooseCollectionDialog from './ChooseCollectionDialog';
-
-const useStyles = makeStyles({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-    height: '100%',
-  },
-});
-
-const GenericActionButtons = ({
-  card,
-  context,
-  open,
-  component,
-  closeModal,
-  // handleOpenDialog,
-}) => {
-  const classes = useStyles();
-
-  const collectionContext = useContext(CollectionContext);
-
-  if (!collectionContext) {
-    console.error("The component isn't wrapped with CollectionProvider");
-    return null;
-  }
-
-  const contexts = {
-    Deck: useContext(DeckContext),
-    Cart: useContext(CartContext),
-    Store: useContext(CartContext),
-    Collection: collectionContext,
-  };
+import useAppContext from '../../../context/hooks/useAppContext';
+import { ModalContext } from '../../../context/ModalContext/ModalContext';
+import { Box } from '@mui/material';
 
-  const [openDialog, setOpenDialog] = useState(false);
+const GenericActionButtons = ({ card, context }) => {
+  const contextProps = useAppContext(); // Assuming useAppContext returns the context object
+  const { closeModal, isModalOpen, setModalOpen } = useContext(ModalContext);
 
-  const contextProps = contexts[context] || {};
+  if (!contextProps) {
+    return (
+      <Box sx={{ color: 'error.main' }}>Provider not found for {context}</Box>
+    );
+  }
 
-  // useEffect(() => {
-  //   console.log(`openChooseCollectionDialog is: ${openChooseCollectionDialog}`);
-  // }, [openChooseCollectionDialog]);
+  let modifiedContextProps = contextProps[context];
 
-  const toggleDialog = (setState) => () => {
-    setState((prevState) => !prevState);
-  };
+  if (!modifiedContextProps) {
+    return (
+      <Box sx={{ color: 'error.main' }}>
+        Invalid context provided: {context}
+      </Box>
+    );
+  }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' }, // Vertical layout on small screens, horizontal on larger
+        justifyContent: 'space-between', // Spread buttons evenly
+        alignItems: 'center', // Center align the buttons
+        gap: 1, // Add a small gap between buttons
+        flexGrow: 1,
+      }}
+    >
       <CardActionButtons
         card={card}
         context={context}
-        contextProps={contextProps}
-        // handleOpenDialog={handleOpenDialog}
-        handleOpenDialog={toggleDialog(setOpenDialog)}
+        contextProps={modifiedContextProps}
+        closeModal={() => setModalOpen(false)}
+        open={isModalOpen}
       />
-      {context in contexts && (
-        <GenericCardModal
-          open={open}
-          onClose={closeModal}
-          handleCloseDialog={toggleDialog(setOpenDialog)}
-          context={context}
-          card={card}
-        />
-      )}
-      {/* <ChooseCollectionDialog
-        isOpen={openChooseCollectionDialog}
-        onClose={toggleDialog(setOpenChooseCollectionDialog)}
-        context={context}
-        card={card}
-      /> */}
-    </div>
+    </Box>
   );
 };
 
 export default GenericActionButtons;
+
+// import React, { useContext } from 'react';
+// import CardActionButtons from './CardActionButtons';
+// import useAppContext from '../../../context/hooks/useAppContext';
+// import { ModalContext } from '../../../context/ModalContext/ModalContext';
+// import { Box } from '@mui/material';
+
+// const GenericActionButtons = ({ card, context }) => {
+//   const contextProps = useAppContext(); // Assuming useAppContext returns the context object
+//   const { closeModal, isModalOpen, setModalOpen } = useContext(ModalContext);
+
+//   if (!contextProps) {
+//     return (
+//       <Box sx={{ color: 'error.main' }}>Provider not found for {context}</Box>
+//     );
+//   }
+
+//   let modifiedContextProps = contextProps[context];
+
+//   if (!modifiedContextProps) {
+//     return (
+//       <Box sx={{ color: 'error.main' }}>
+//         Invalid context provided: {context}
+//       </Box>
+//     );
+//   }
+
+//   return (
+//     <Box
+//       sx={{
+//         display: 'flex',
+//         flexDirection: 'column',
+//         justifyContent: 'space-evenly',
+//         height: '100%',
+//       }}
+//     >
+//       <CardActionButtons
+//         card={card}
+//         context={context}
+//         contextProps={modifiedContextProps}
+//         closeModal={() => setModalOpen(false)}
+//         open={isModalOpen}
+//       />
+//     </Box>
+//   );
+// };
+
+// export default GenericActionButtons;
+
+// import React, { useContext, useEffect } from 'react';
+// import { makeStyles } from '@mui/styles';
+// import GenericCardModal from '../../modals/GenericCardModal';
+// import CardActionButtons from './CardActionButtons';
+// import useAppContext from '../../../context/hooks/useAppContext';
+// import { ModalContext } from '../../../context/ModalContext/ModalContext';
+
+// const useStyles = makeStyles({
+//   root: {
+//     display: 'flex',
+//     flexDirection: 'column',
+//     justifyContent: 'space-evenly',
+//     height: '100%',
+//   },
+// });
+
+// const GenericActionButtons = ({
+//   card,
+//   context,
+//   open,
+//   openModal,
+//   // closeModal,
+//   // isModalOpen,
+//   // setModalOpen,
+// }) => {
+//   const classes = useStyles();
+//   const [contextProps, isContextAvailable] = useAppContext(context);
+//   const {
+//     openModalWithCard,
+//     closeModal,
+//     isModalOpen,
+//     setModalOpen,
+//     modalContent,
+//   } = useContext(ModalContext);
+//   if (!isContextAvailable) {
+//     console.error(`The component isn't wrapped with the ${context}Provider`);
+//     return null; // Consider rendering an error boundary or user-friendly error message instead.
+//   }
+
+//   // Ensure contextProps is an object with the expected methods before using them
+//   if (
+//     typeof contextProps !== 'object' ||
+//     typeof contextProps[context] !== 'object'
+//   ) {
+//     console.error(`Invalid contextProps provided for the context: ${context}`);
+//     return null; // Consider rendering an error boundary or user-friendly error message instead.
+//   }
+
+//   return (
+//     <div className={classes.root}>
+//       <CardActionButtons
+//         card={card}
+//         quantity={0}
+//         context={context}
+//         contextProps={contextProps}
+//         openModal={openModal}
+//         closeModal={() => setModalOpen(false)}
+//         open={open}
+//       />
+//       {/* <GenericCardModal
+//         open={isModalOpen}
+//         closeModal={closeModal}
+//         context={context}
+//         card={card}
+//       /> */}
+//     </div>
+//   );
+// };
+
+// export default GenericActionButtons;
diff --git a/src/components/buttons/button/Button.css b/src/components/buttons/button/Button.css
deleted file mode 100644
index 2245749..0000000
--- a/src/components/buttons/button/Button.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.main-button {
-  background-color: #55198b;
-  border: solid 1px #55198b;
-  color: white;
-  font-weight: 500;
-  line-height: 1.1;
-  width: max-content;
-  padding: 13px 22px;
-  margin-right: 0px;
-  /* text-transform: uppercase; */
-  border-radius: 6px;
-  text-align: center;
-  text-decoration: none;
-  font-family: 'Google Sans Regular';
-  display: block;
-  margin-top: 20px;
-  font-size: 18px;
-  cursor: pointer;
-  letter-spacing: 2px;
-}
-.main-button:hover {
-  /* background-color: #ffffff; */
-  /* color: black; */
-  transition: ease-in 0.3s;
-}
-.project-button {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-/* Media Query */
-@media (max-width: 768px) {
-  .main-button {
-    font-size: 15px;
-    padding: 12px 18px;
-    margin-right: 0px;
-  }
-}
-@media (max-width: 320px) {
-  .main-button {
-    font-size: 12px;
-  }
-}
diff --git a/src/components/buttons/button/Button.js b/src/components/buttons/button/Button.js
deleted file mode 100644
index da3b188..0000000
--- a/src/components/buttons/button/Button.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// import React from 'react';
-// import './Button.css';
-
-// const onMouseEnter = (event, color, bgColor) => {
-//   const el = event.target;
-//   el.style.color = color;
-//   el.style.backgroundColor = bgColor;
-// };
-
-// const onMouseOut = (event, color, bgColor) => {
-//   const el = event.target;
-//   el.style.color = color;
-//   el.style.backgroundColor = bgColor;
-// };
-
-// export default function Button({ text, className, href, newTab, theme }) {
-//   return (
-//     <div className={className}>
-//       <a
-//         className="main-button"
-//         href={href}
-//         target={newTab && '_blank'}
-//         style={{
-//           color: theme.body,
-//           backgroundColor: theme.text,
-//           border: `solid 1px ${theme.text}`,
-//         }}
-//         onMouseEnter={(event) => onMouseEnter(event, theme.text, theme.body)}
-//         onMouseOut={(event) => onMouseOut(event, theme.body, theme.text)}
-//       >
-//         {text}
-//       </a>
-//     </div>
-//   );
-// }
diff --git a/src/components/buttons/buttonStyles.jsx b/src/components/buttons/buttonStyles.jsx
new file mode 100644
index 0000000..838e89a
--- /dev/null
+++ b/src/components/buttons/buttonStyles.jsx
@@ -0,0 +1,30 @@
+import { makeStyles } from '@mui/styles';
+export const useStyles = makeStyles((theme) => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexGrow: 1,
+    background: '#f1f1f1',
+    borderRadius: '8px',
+  },
+  buttonGrid: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: '8px',
+  },
+  fullWidthButton: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '4px',
+  },
+  fitWidthButton: {
+    width: 'fit-content',
+    height: '100%',
+    // transform: scale(0.9),
+    borderRadius: '4px',
+  },
+}));
diff --git a/src/components/buttons/CronTrigger.jsx b/src/components/buttons/other/CronTrigger.jsx
similarity index 82%
rename from src/components/buttons/CronTrigger.jsx
rename to src/components/buttons/other/CronTrigger.jsx
index 41875ce..bcbb357 100644
--- a/src/components/buttons/CronTrigger.jsx
+++ b/src/components/buttons/other/CronTrigger.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button } from '@mui/material';
-import { useCombinedContext } from '../../context/CombinedProvider';
-import { useUserContext } from '../../context/UserContext/UserContext';
+import { useCombinedContext } from '../../../context/CombinedProvider';
+import { useUserContext } from '../../../context/UserContext/UserContext';
 
 const CronTrigger = () => {
   const { stopCronJob, handleSendAllCardsInCollections, listOfMonitoredCards } =
diff --git a/src/components/buttons/other/SearchButton.js b/src/components/buttons/other/SearchButton.js
index a82ec7c..f32054d 100644
--- a/src/components/buttons/other/SearchButton.js
+++ b/src/components/buttons/other/SearchButton.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button, Grid } from '@mui/material';
 import { useCardStore } from '../../../context/CardContext/CardStore';
+import { useMode } from '../../../context/hooks/colormode';
 
-const SearchButton = ({ searchParams }) => {
-  const { handleRequest } = useCardStore();
+const SearchButton = ({ searchParams, handleSubmit }) => {
+  // const { handleRequest } = useCardStore();
+  const { theme } = useMode();
 
   return (
     <Grid item xs={12}>
@@ -11,7 +13,8 @@ const SearchButton = ({ searchParams }) => {
         fullWidth
         variant="contained"
         color="primary"
-        onClick={() => handleRequest(searchParams)}
+        sx={{ mt: 1, mb: 1, background: theme.palette.primary.main }}
+        onClick={() => handleSubmit()} // Corrected onClick
       >
         Search
       </Button>
diff --git a/src/components/buttons/ThemeToggleButton.jsx b/src/components/buttons/other/ThemeToggleButton.jsx
similarity index 94%
rename from src/components/buttons/ThemeToggleButton.jsx
rename to src/components/buttons/other/ThemeToggleButton.jsx
index 23e35b5..35020e7 100644
--- a/src/components/buttons/ThemeToggleButton.jsx
+++ b/src/components/buttons/other/ThemeToggleButton.jsx
@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { IconButton, Menu, MenuItem } from '@mui/material';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
-import { ColorModeContext } from '../../context/ColorModeProvider';
+import { ColorModeContext } from '../../../context/ColorModeProvider';
 
 const ThemeToggleButton = () => {
   const [anchorEl, setAnchorEl] = useState(null);
diff --git a/src/components/cards/CardToolTip.jsx b/src/components/cards/CardToolTip.jsx
index 47585b9..14f9b48 100644
--- a/src/components/cards/CardToolTip.jsx
+++ b/src/components/cards/CardToolTip.jsx
@@ -2,25 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@mui/styles';
 import { Tooltip } from '@mui/material';
-
-const useStyles = makeStyles((theme) => ({
-  tooltip: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    overflow: 'hidden',
-  },
-  tooltipTitle: {
-    marginBottom: theme.spacing(1),
-  },
-  attributeSpan: {
-    display: 'block',
-    marginBottom: theme.spacing(0.5),
-  },
-  descriptionSpan: {
-    marginTop: theme.spacing(1),
-  },
-}));
+import { useStyles } from './cardStyles';
 
 const formatKey = (key) => {
   return key
diff --git a/src/components/cards/CustomPopover.jsx b/src/components/cards/CustomPopover.jsx
deleted file mode 100644
index 47e744b..0000000
--- a/src/components/cards/CustomPopover.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import Popover from '@mui/material/Popover';
-import CardToolTip from './CardToolTip';
-import { makeStyles } from '@mui/styles';
-import GenericCard from './GenericCard';
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    padding: theme.spacing(1),
-  },
-}));
-
-const CustomPopover = ({
-  card,
-  children,
-  isHovering,
-  cardRef,
-  anchorEl,
-  open,
-  setAnchorEl,
-  // handleMouseEnter,
-  // handleMouseLeave,
-  handlePopoverClose,
-}) => {
-  const classes = useStyles();
-
-  const id = open ? 'mouse-over-popover' : undefined;
-  // console.log('card:', card);
-  // console.log('cardRef:', cardRef);
-  // console.log('anchorEl:', anchorEl);
-  // console.log('open:', open);
-  // console.log('handlePopoverClose:', handlePopoverClose);
-  return (
-    <div>
-      {children}
-      {/* <Popover
-        id={id}
-        sx={{
-          pointerEvents: 'none',
-        }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-      >
-        <CardToolTip card={card} />
-      </Popover> */}
-      {/* <div style={{ position: 'absolute', top: '-9999px' }} ref={cardRef}>
-        <GenericCard card={card} />
-      </div> */}
-    </div>
-  );
-};
-
-CustomPopover.propTypes = {
-  card: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-export default CustomPopover;
diff --git a/src/components/cards/GenericCard.jsx b/src/components/cards/GenericCard.jsx
index a563a1b..8c6ceea 100644
--- a/src/components/cards/GenericCard.jsx
+++ b/src/components/cards/GenericCard.jsx
@@ -1,221 +1,242 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
+import React, { useContext, useEffect } from 'react';
 import {
   Card,
   CardContent,
   CardActions,
-  CardMedia,
   Typography,
-  Button,
-  Popover,
-  Grid,
-  ButtonGroup,
+  styled,
+  useMediaQuery,
+  Container,
 } from '@mui/material';
 import CardMediaSection from '../media/CardMediaSection';
 import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
 import placeholderImage from '../../assets/images/placeholder.jpeg';
-import { DeckContext } from '../../context/DeckContext/DeckContext';
-import { CartContext } from '../../context/CartContext/CartContext';
-import { CollectionContext } from '../../context/CollectionContext/CollectionContext';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) => ({
-  card: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    maxHeight: '300px', // or any desired max height
-    minHeight: '300px', // make sure it matches max height
-    overflow: 'hidden', // ensures content doesn't spill out
-    borderRadius: theme.spacing(1), // Add border radius for cards
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)', // Add shadow for cards
-    transition: 'transform 0.2s',
-    '&:hover': {
-      transform: 'scale(1.03)', // Add a slight scale effect on hover
-    },
-  },
-  image: {
-    maxHeight: '200px',
-    width: '100%',
-    objectFit: 'cover', // Ensure the image covers the entire space
-  },
-  text: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-  button: {
-    // maxWidth: '200px',
-    minHeight: '40px',
-    maxHeight: '60px',
-    width: '100%',
-  },
-  content: {
-    transform: 'scale(0.9)', // scales down to 90% of the original size
-    padding: 0,
-  },
-  cardActions: {
-    marginTop: 'auto', // pushes the actions to the bottom
-    display: 'flex',
-    justifyContent: 'center', // centers the buttons
-    width: '100%',
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import { ModalContext } from '../../context/ModalContext/ModalContext';
+import { PopoverContext } from '../../context/PopoverContext/PopoverContext';
+import { useMode } from '../../context/hooks/colormode';
+
+const AspectRatioBox = styled('div')(({ theme }) => ({
+  width: '100%', // Full width of the parent container
+  // paddingTop: '2%', // Aspect ratio of 16:9
+  position: 'relative',
+}));
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  maxWidth: '100%', // Ensure it doesn't exceed the parent width
+  width: 'auto', // Adjust if needed
+  maxHeight: '80vh', // Max height based on the viewport height
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[5],
+  transition: 'transform 0.3s ease-in-out',
+  '&:hover': {
+    transform: 'scale(1.03)',
   },
 }));
 
-const GenericCard = ({
-  card,
-  context,
-  cardInfo,
-  cardRef,
-  setHoveredCard,
-  hoveredCard,
-  setIsPopoverOpen,
-  isPopoverOpen,
-  // anchorEl,
-  // handlePopoverOpen,
-  // handlePopoverClose,
-  // open,
-}) => {
-  const deckContext = useContext(DeckContext);
-  const cartContext = useContext(CartContext);
-  const collectionContext = useContext(CollectionContext);
-  const contextProps =
-    {
-      Deck: deckContext,
-      Cart: cartContext,
-      Collection: collectionContext,
-    }[context] || {};
-  // const tooltipRef = useRef(null);
-  // const cardRef = useRef(null);
-
-  const [buttonVariant, setButtonVariant] = useState('contained');
-  const [isModalOpen, setModalOpen] = useState(false);
-  // const [anchorEl, setAnchorEl] = useState(null);
-  const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
-  const open = Boolean(hoveredCard === card);
-
-  const openModal = () => setModalOpen(true);
-  const closeModal = () => setModalOpen(false);
-  const openProductModal = openModal;
-  // const handlePopoverOpen = () => {
-  //   setHoveredCard(card);
-  // };
-
-  // const handlePopoverClose = () => {
-  //   setHoveredCard(null);
-  // };
-
-  const classes = useStyles();
-  const handleCardHover = (cardData) => {
-    setHoveredCard(cardData);
-    setIsPopoverOpen(true); // or based on other logic you might have
+const GenericCard = React.forwardRef((props, ref) => {
+  const { theme } = useMode();
+  const { card, context, setClickedCard } = props;
+  // const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const { selectedCollection } = useCollectionStore();
+  const { openModalWithCard, setModalOpen } = useContext(ModalContext);
+  const { setHoveredCard, setIsPopoverOpen, hoveredCard } =
+    useContext(PopoverContext);
+
+  const handleClick = () => {
+    openModalWithCard(card);
+    setModalOpen(true);
+    setIsPopoverOpen(false);
+  };
+
+  const handleInteraction = (hoverState) => {
+    if (!hoverState) {
+      setHoveredCard(hoverState ? card : null);
+      setIsPopoverOpen(hoverState);
+    }
   };
 
-  const CardContentByContext = ({ context }) => {
-    const price = `Price: ${card?.card_prices?.[0]?.tcgplayer_price}`;
+  useEffect(() => {
+    setIsPopoverOpen(hoveredCard === card);
+  }, [hoveredCard, card, setIsPopoverOpen]);
+
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
+  const price = `Price: ${card?.card_prices?.[0]?.tcgplayer_price || 'N/A'}`;
+
+  const renderCardContent = () => {
+    // Adjust content based on the screen size
+    let variant = 'body2';
+    if (isSmallScreen) {
+      // variant = 'caption';
+      variant = 'h6';
+    } else if (isMediumScreen) {
+      variant = 'body2';
+    } else if (isLargeScreen) {
+      variant = 'body2';
+    }
+
     return (
-      <>
-        <Typography variant="body3" color="text.secondary" noWrap>
+      <CardContent>
+        <Typography variant={variant}>{card?.name}</Typography>
+        <Typography variant={variant} color="text.secondary" noWrap>
           {price}
         </Typography>
-        <Typography variant="body2" color="text.secondary" noWrap>
-          {/* Quantity: {contextProps?.deckCardQuantity?.quantityOfSameId || `Not in ${context?.toLowerCase()}`} */}
-        </Typography>
-      </>
+      </CardContent>
     );
   };
-  // console.log('cardRef:', cardRef.current);
-  // console.log('anchorEl:', anchorEl);
-  // console.log('open:', open);
-  // console.log('handlePopoverClose:', handlePopoverClose);
-  // console.log('handlePopoverOpen:', handlePopoverOpen);
   return (
-    <Card
-      className={classes.card}
-      // aria-owns={open ? 'mouse-over-popover' : undefined}
-      // aria-haspopup="true"
-      // onMouseEnter={handlePopoverOpen}
-      // onMouseLeave={handlePopoverClose}
-    >
-      {context === 'Deck' ? (
+    <StyledCard ref={ref}>
+      <AspectRatioBox>
         <CardMediaSection
+          isRequired={true}
           imgUrl={imgUrl}
           card={card}
-          onCardHover={handleCardHover}
-          cardData={hoveredCard}
-          openModal={openModal}
-          closeModal={closeModal}
-          setIsPopoverOpen={setIsPopoverOpen}
-          isPopoverOpen={isPopoverOpen}
-          cardRef={cardRef}
-          // hoveredCard={hoveredCard}
-          setHoveredCard={setHoveredCard}
-          modalIsOpen={isModalOpen}
-          // anchorEl={anchorEl}
-        />
-      ) : (
-        <CardMedia
-          component="img"
-          alt={card?.name}
-          // cardRef={ref}
-          image={imgUrl}
-          className={classes.image}
+          setClickedCard={setClickedCard}
+          isHovered={hoveredCard === card}
+          handleInteraction={handleInteraction}
+          handleClick={handleClick}
         />
-      )}
-      <Grid item xs zeroMinWidth>
-        <CardContent className={classes.content}>
-          <Typography variant="h6">{card?.name}</Typography>
-          <CardContentByContext context={context} />
-        </CardContent>
-        <CardActions className={classes.cardActions}>
-          {context === 'Store' || context === 'Cart' ? (
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <GenericActionButtons
-                card={card}
-                context={context}
-                // handleOpenDialog={openModal}
-                open={openModal}
-                variant={buttonVariant}
-              />
-              <Button
-                variant={buttonVariant}
-                color="primary"
-                onClick={openProductModal}
-                className={classes.button}
-              >
-                View Details
-              </Button>
-            </div>
-          ) : (
-            <ButtonGroup
-              variant="contained"
-              aria-label="outlined primary button group"
-              // fullWidth={true}//
-              display="flex"
-              // maxWidth="110px"
-              margin="0"
-              padding="0"
-              left="0"
-            >
-              {/* <GenericActionButtons
-                card={card}
-                open={isModalOpen}
-                closeModal={closeModal}
-                context={context}
-                variant={buttonVariant}
-              /> */}
-              <GenericActionButtons
-                card={card}
-                open={isModalOpen}
-                closeModal={closeModal}
-                context={'Collection'}
-                variant={buttonVariant}
-              />
-            </ButtonGroup>
-          )}
-        </CardActions>
-      </Grid>
-    </Card>
+      </AspectRatioBox>
+
+      {renderCardContent()}
+      <CardActions container>
+        <GenericActionButtons card={card} context={context} />
+      </CardActions>
+    </StyledCard>
   );
-};
+});
+
+GenericCard.displayName = 'GenericCard';
 
 export default GenericCard;
+
+// import React, { useContext, useEffect } from 'react';
+// import { Card, CardContent, CardActions, Typography } from '@mui/material';
+// import CardMediaSection from '../media/CardMediaSection';
+// import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
+// import placeholderImage from '../../assets/images/placeholder.jpeg';
+// import { useStyles } from './cardStyles';
+// import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+// import { ModalContext } from '../../context/ModalContext/ModalContext';
+// import { PopoverContext } from '../../context/PopoverContext/PopoverContext';
+
+// const GenericCard = React.forwardRef((props, ref) => {
+//   const {
+//     card,
+//     context,
+//     // isModalOpen,
+//     // setModalOpen,
+//     // hoveredCard,
+//     // setHoveredCard,
+//     // setIsPopoverOpen,
+//     setClickedCard,
+//   } = props;
+//   const classes = useStyles();
+//   const { selectedCollection } = useCollectionStore();
+//   const {
+//     openModalWithCard,
+//     closeModal,
+//     isModalOpen,
+//     setModalOpen,
+//     modalContent,
+//   } = useContext(ModalContext);
+//   const { setHoveredCard, setIsPopoverOpen, hoveredCard } =
+//     useContext(PopoverContext);
+
+//   const requiresDoubleButtons = context === 'Deck' || context === 'Collection'; // Added this line
+//   const checkCardInCollection = () => {
+//     if (selectedCollection) {
+//       const cardIds = selectedCollection?.cards?.map((card) => card.id);
+//       return cardIds?.includes(card.id);
+//     }
+//     return false;
+//   };
+
+//   const handleClick = () => {
+//     const cardIsInCollection = checkCardInCollection();
+//     console.log('Modal opened with card:', card);
+//     openModalWithCard(card);
+//     console.log('Card is in collection:', cardIsInCollection);
+
+//     setModalOpen(true);
+//     setIsPopoverOpen(false);
+//   };
+//   // setIsPopoverOpen(false);
+
+//   // Function to handle hover interactions with the card
+//   // const handleInteraction = (hoverState) => {
+//   //   if (!isModalOpen) {
+//   //     setHoveredCard((prev) => (hoverState ? card : null));
+//   //     setIsPopoverOpen(hoverState);
+//   //   }
+//   // };
+//   const handleInteraction = (hoverState) => {
+//     if (!isModalOpen) {
+//       setHoveredCard(hoverState ? card : null);
+//       setIsPopoverOpen(hoverState);
+//     }
+//   };
+//   // Effect to close popover when modal is open or reactivate when modal closes
+//   useEffect(() => {
+//     setIsPopoverOpen(isModalOpen ? false : hoveredCard === card);
+//     if (isModalOpen) {
+//       setHoveredCard(null);
+//     }
+//   }, [isModalOpen, hoveredCard, card, setIsPopoverOpen, setHoveredCard]);
+
+//   // Get the card image URL, or use placeholder if not available
+//   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
+//   const price = `Price: ${card?.card_prices?.[0]?.tcgplayer_price || 'N/A'}`;
+//   console.log(typeof handleInteraction); // Should log 'function'
+
+//   return (
+//     <Card className={classes.card} ref={ref}>
+//       <CardMediaSection
+//         isRequired={true}
+//         imgUrl={imgUrl}
+//         card={card}
+//         setClickedCard={setClickedCard}
+//         isHovered={hoveredCard === card}
+//         handleInteraction={handleInteraction}
+//         handleClick={handleClick}
+//         ref={ref}
+//       />
+//       <CardContent className={classes.content}>
+//         <Typography variant="h6">{card?.name}</Typography>
+//         <Typography variant="body2" color="text.secondary" noWrap>
+//           {price}
+//         </Typography>
+//       </CardContent>
+//       <CardActions className={classes.cardActions}>
+//         {requiresDoubleButtons ? (
+//           <>
+//             <GenericActionButtons
+//               card={card}
+//               context="Collection"
+//               // setModalOpen={setModalOpen}
+//             />
+//             {/* TODO fix card to display buttons for both collections and decks */}
+//           </>
+//         ) : (
+//           <GenericActionButtons
+//             card={card}
+//             context={context}
+//             // setModalOpen={setModalOpen}
+//           />
+//         )}
+//       </CardActions>
+//     </Card>
+//   );
+// });
+
+// GenericCard.displayName = 'GenericCard';
+
+// export default GenericCard;
diff --git a/src/components/cards/cardStyles.js b/src/components/cards/cardStyles.js
deleted file mode 100644
index a818c1a..0000000
--- a/src/components/cards/cardStyles.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { makeStyles } from '@mui/styles';
-
-export const commonStyles = makeStyles((theme) => ({
-  card: {
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '16px',
-    // Enhanced responsiveness:
-    // Use percentage widths and media queries to better adjust card size on various screens
-    width: '100%',
-    [theme?.breakpoints?.up('sm')]: {
-      width: '80%',
-    },
-    [theme?.breakpoints?.up('md')]: {
-      width: '60%',
-    },
-  },
-  media: {
-    flex: 1,
-    objectFit: 'cover',
-  },
-  content: {
-    flex: 1,
-    overflow: 'auto',
-  },
-  button: {
-    margin: '4px',
-  },
-  actionButtons: {
-    backgroundColor: '#f5f5f5',
-    padding: '12px',
-    margin: '8px 0',
-    borderRadius: '8px',
-  },
-  tooltip: {
-    display: 'none',
-    position: 'absolute',
-    top: 0,
-    left: '100%',
-    zIndex: 999,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    color: 'white',
-    padding: '10px',
-    borderRadius: '5px',
-    width: '40vw',
-    height: 'auto',
-    maxHeight: '40vh',
-    overflowY: 'auto',
-    '&.show': {
-      display: 'block',
-    },
-    span: {
-      display: 'block',
-      marginBottom: '4px',
-      lineHeight: 1.2,
-      '&:last-child': {
-        marginBottom: 0,
-      },
-    },
-    strong: {
-      fontWeight: 'bold',
-    },
-    tooltipTitle: {
-      fontWeight: 'bold',
-      fontSize: '14px',
-      marginBottom: '8px',
-      textAlign: 'center',
-    },
-  },
-}));
-
-export const deckCardStyles = makeStyles({
-  card: {
-    position: 'relative',
-    maxHeight: 100,
-    height: '100%',
-    width: '100%',
-  },
-  content: {
-    overflow: 'hidden',
-  },
-  media: {
-    width: '100%',
-    objectFit: 'contain',
-  },
-  text: {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-});
-
-export const productCardStyles = makeStyles({
-  card: {
-    maxWidth: '100%',
-    minHeight: 300,
-    padding: '16px',
-  },
-  largerButton: {
-    margin: '0 8px',
-    padding: '10px',
-    fontSize: '20px',
-    '@media(max-width: 600px)': {
-      fontSize: '16px',
-    },
-  },
-  actionButtons: {
-    padding: '10px',
-    margin: '10px 0',
-    borderRadius: '4px',
-  },
-});
-
-// Function to merge common and specific styles
-export const mergeStyles = (common, specific) => {
-  const mergedStyles = {
-    ...common,
-    ...specific,
-  };
-
-  // Convert the merged styles into valid class names
-  const classNames = {
-    card: {
-      ...common.card,
-      ...specific.card,
-    },
-    media: {
-      ...common.media,
-      ...specific.media,
-    },
-    content: {
-      ...common.content,
-      ...specific.content,
-    },
-    button: {
-      ...common.button,
-      ...specific.button,
-    },
-    actionButtons: {
-      ...common.actionButtons,
-      ...specific.actionButtons,
-    },
-  };
-  for (const key in mergedStyles) {
-    classNames[key] = Object.keys(mergedStyles[key]).join(' ');
-  }
-  return classNames;
-};
diff --git a/src/components/cards/cardStyles.jsx b/src/components/cards/cardStyles.jsx
new file mode 100644
index 0000000..95af636
--- /dev/null
+++ b/src/components/cards/cardStyles.jsx
@@ -0,0 +1,208 @@
+import { makeStyles } from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    maxHeight: '300px', // or any desired max height
+    minHeight: '300px', // make sure it matches max height
+    overflow: 'hidden', // ensures content doesn't spill out
+    borderRadius: theme.spacing(1), // Add border radius for cards
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)', // Add shadow for cards
+    transition: 'transform 0.2s',
+    '&:hover': {
+      transform: 'scale(1.03)', // Add a slight scale effect on hover
+    },
+  },
+  image: {
+    maxHeight: '200px',
+    width: '100%',
+    objectFit: 'cover', // Ensure the image covers the entire space
+  },
+  text: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  button: {
+    // maxWidth: '200px',
+    minHeight: '40px',
+    maxHeight: '60px',
+    width: '100%',
+  },
+  content: {
+    transform: 'scale(0.9)', // scales down to 90% of the original size
+    padding: 0,
+  },
+  cardActions: {
+    marginTop: 'auto', // pushes the actions to the bottom
+    display: 'flex',
+    justifyContent: 'center', // centers the buttons
+    width: '100%',
+  },
+  tooltip: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    overflow: 'hidden',
+  },
+  tooltipTitle: {
+    marginBottom: theme.spacing(1),
+  },
+  attributeSpan: {
+    display: 'block',
+    marginBottom: theme.spacing(0.5),
+  },
+  descriptionSpan: {
+    marginTop: theme.spacing(1),
+  },
+}));
+// import { makeStyles } from '@mui/styles';
+
+// export const commonStyles = makeStyles((theme) => ({
+//   card: {
+//     display: 'flex',
+//     flexDirection: 'column',
+//     margin: '16px',
+//     // Enhanced responsiveness:
+//     // Use percentage widths and media queries to better adjust card size on various screens
+//     width: '100%',
+//     [theme?.breakpoints?.up('sm')]: {
+//       width: '80%',
+//     },
+//     [theme?.breakpoints?.up('md')]: {
+//       width: '60%',
+//     },
+//   },
+//   media: {
+//     flex: 1,
+//     objectFit: 'cover',
+//   },
+//   content: {
+//     flex: 1,
+//     overflow: 'auto',
+//   },
+//   button: {
+//     margin: '4px',
+//   },
+//   actionButtons: {
+//     backgroundColor: '#f5f5f5',
+//     padding: '12px',
+//     margin: '8px 0',
+//     borderRadius: '8px',
+//   },
+//   tooltip: {
+//     display: 'none',
+//     position: 'absolute',
+//     top: 0,
+//     left: '100%',
+//     zIndex: 999,
+//     backgroundColor: 'rgba(0, 0, 0, 0.8)',
+//     color: 'white',
+//     padding: '10px',
+//     borderRadius: '5px',
+//     width: '40vw',
+//     height: 'auto',
+//     maxHeight: '40vh',
+//     overflowY: 'auto',
+//     '&.show': {
+//       display: 'block',
+//     },
+//     span: {
+//       display: 'block',
+//       marginBottom: '4px',
+//       lineHeight: 1.2,
+//       '&:last-child': {
+//         marginBottom: 0,
+//       },
+//     },
+//     strong: {
+//       fontWeight: 'bold',
+//     },
+//     tooltipTitle: {
+//       fontWeight: 'bold',
+//       fontSize: '14px',
+//       marginBottom: '8px',
+//       textAlign: 'center',
+//     },
+//   },
+// }));
+
+// export const deckCardStyles = makeStyles({
+//   card: {
+//     position: 'relative',
+//     maxHeight: 100,
+//     height: '100%',
+//     width: '100%',
+//   },
+//   content: {
+//     overflow: 'hidden',
+//   },
+//   media: {
+//     width: '100%',
+//     objectFit: 'contain',
+//   },
+//   text: {
+//     textOverflow: 'ellipsis',
+//     overflow: 'hidden',
+//     whiteSpace: 'nowrap',
+//   },
+// });
+
+// export const productCardStyles = makeStyles({
+//   card: {
+//     maxWidth: '100%',
+//     minHeight: 300,
+//     padding: '16px',
+//   },
+//   largerButton: {
+//     margin: '0 8px',
+//     padding: '10px',
+//     fontSize: '20px',
+//     '@media(max-width: 600px)': {
+//       fontSize: '16px',
+//     },
+//   },
+//   actionButtons: {
+//     padding: '10px',
+//     margin: '10px 0',
+//     borderRadius: '4px',
+//   },
+// });
+
+// // Function to merge common and specific styles
+// export const mergeStyles = (common, specific) => {
+//   const mergedStyles = {
+//     ...common,
+//     ...specific,
+//   };
+
+//   // Convert the merged styles into valid class names
+//   const classNames = {
+//     card: {
+//       ...common.card,
+//       ...specific.card,
+//     },
+//     media: {
+//       ...common.media,
+//       ...specific.media,
+//     },
+//     content: {
+//       ...common.content,
+//       ...specific.content,
+//     },
+//     button: {
+//       ...common.button,
+//       ...specific.button,
+//     },
+//     actionButtons: {
+//       ...common.actionButtons,
+//       ...specific.actionButtons,
+//     },
+//   };
+//   for (const key in mergedStyles) {
+//     classNames[key] = Object.keys(mergedStyles[key]).join(' ');
+//   }
+//   return classNames;
+// };
diff --git a/src/components/chart/ChartTooltip.jsx b/src/components/chart/ChartTooltip.jsx
new file mode 100644
index 0000000..c5dee1b
--- /dev/null
+++ b/src/components/chart/ChartTooltip.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles, Tooltip, Typography } from '@mui/material';
+
+// Define your styles here
+const useStyles = makeStyles((theme) => ({
+  // ... your other styles
+  tooltipTarget: {
+    cursor: 'pointer', // Change the cursor to indicate it's hoverable
+  },
+}));
+
+const ChartTooltip = ({ point, lastData, hoveredData, latestData }) => {
+  const classes = useStyles();
+
+  if (!point) return null;
+
+  // Formatting the date just once to be used in multiple places
+  const formattedTime = hoveredData
+    ? new Date(hoveredData.x).toLocaleString()
+    : new Date((latestData || lastData).x).toLocaleString();
+
+  const formattedValue = `$${
+    hoveredData ? hoveredData.y : (latestData || lastData)?.y
+  }`;
+
+  return (
+    <>
+      <Tooltip title={`Time: ${formattedTime}`} arrow>
+        <Typography className={classes.tooltipTarget}>
+          {formattedTime}
+        </Typography>
+      </Tooltip>
+      <Tooltip title={`Value: ${formattedValue}`} arrow>
+        <Typography className={classes.tooltipTarget}>
+          {formattedValue}
+        </Typography>
+      </Tooltip>
+    </>
+  );
+};
+
+export default ChartTooltip;
diff --git a/src/components/chart/LinearChart.js b/src/components/chart/LinearChart.js
new file mode 100644
index 0000000..3e6ab33
--- /dev/null
+++ b/src/components/chart/LinearChart.js
@@ -0,0 +1,241 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { ResponsiveLine } from '@nivo/line';
+import { Typography, Box, Tooltip, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import ChartErrorBoundary from '../reusable/ChartErrorBoundary';
+import { tokens } from '../../assets/tokens';
+import { useMode } from '../../context/hooks/colormode';
+
+const AxisLabel = styled(Typography)(({ theme, axis }) => ({
+  position: 'absolute',
+  [axis === 'x' ? 'bottom' : 'top']: 0,
+  [axis === 'x' ? 'left' : 'right']: '50%',
+  transform:
+    axis === 'x' ? 'translateX(-50%)' : 'translateY(-50%) rotate(-90deg)',
+  textAlign: 'center',
+  margin: theme.spacing(2),
+  fontSize: '1rem',
+  fontWeight: 'bold',
+  color: theme.palette.text.primary,
+}));
+
+const CustomTooltip = ({ point }) => {
+  const theme = useTheme();
+  const { serieId, data: { label, xFormatted, yFormatted } = {} } = point;
+  return (
+    <Tooltip title={`Series: ${serieId}`}>
+      <Box
+        p={2}
+        boxShadow={3}
+        bgcolor={theme.palette.background.paper}
+        borderRadius={2}
+        borderColor={theme.palette.divider}
+        border={1}
+      >
+        <Typography variant="subtitle1" color="textPrimary">
+          {`Card: ${label}`}
+        </Typography>
+        <Typography variant="body2">
+          {`Time: ${new Date(xFormatted).toLocaleString()}`}
+        </Typography>
+        <Typography variant="h6" color="textSecondary">
+          {`Value: $${parseFloat(yFormatted).toFixed(2)}`}
+        </Typography>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export const useEventHandlers = () => {
+  const [hoveredData, setHoveredData] = useState(null);
+  const handleMouseMove = useCallback((point) => {
+    setHoveredData(point ? { x: point.data.x, y: point.data.y } : null);
+  }, []);
+  const handleMouseLeave = useCallback(() => setHoveredData(null), []);
+  return { hoveredData, handleMouseMove, handleMouseLeave };
+};
+
+const LinearChart = ({
+  filteredChartData,
+  nivoReadyData,
+  dimensions,
+  timeRange,
+}) => {
+  const { theme } = useMode();
+  // const colors = tokens(theme.palette.mode);
+  const greenAccent = {
+    100: '#dbf5ee',
+    200: '#b7ebde',
+    300: '#94e2cd',
+    400: '#70d8bd',
+    500: '#4cceac',
+    600: '#3da58a',
+    700: '#2e7c67',
+    800: '#1e5245',
+    900: '#0f2922',
+  };
+  const [isZoomed, setIsZoomed] = useState(false);
+  const { handleMouseMove, handleMouseLeave } = useEventHandlers();
+
+  // const { tickValues, xFormat } = useMemo(() => {
+  //   const timeFormats = {
+  //     '2 hours': { format: '%H:%M', ticks: 'every 15 minutes' },
+  //     '24 hours': { format: '%H:%M', ticks: 'every 1 hour' },
+  //     '7 days': { format: '%b %d', ticks: 'every 1 day' },
+  //     '1 month': { format: '%b %d', ticks: 'every 3 days' },
+  //     default: { format: '%b %d', ticks: 'every 1 day' },
+  //   };
+  //   return timeFormats[timeRange] || timeFormats.default;
+  // }, [timeRange]);
+
+  const { tickValues, xFormat } = useMemo(() => {
+    let format, ticks;
+    switch (timeRange) {
+      case '2 hours':
+        format = '%H:%M';
+        ticks = 'every 15 minutes';
+        break;
+      case '24 hours':
+        format = '%H:%M';
+        ticks = 'every 1 hour';
+        break;
+      case '7 days':
+        format = '%b %d';
+        ticks = 'every 1 day';
+        break;
+      case '1 month':
+        format = '%b %d';
+        ticks = 'every 3 days';
+        break;
+      default:
+        format = '%b %d';
+        ticks = 'every 1 day';
+    }
+    return { tickValues: ticks, xFormat: `time:${format}` };
+  }, [timeRange]);
+
+  if (
+    !Array.isArray(filteredChartData) ||
+    filteredChartData.some((d) => !d.x || !d.y)
+  ) {
+    return (
+      <Typography variant="body1" color="textSecondary">
+        No valid data available
+      </Typography>
+    );
+  }
+
+  const chartProps = {
+    // theme: theme.chart,
+    margin: { top: 50, right: 110, bottom: 50, left: 60 },
+    data: nivoReadyData,
+    animate: true,
+    motionStiffness: 90,
+    motionDamping: 15,
+    background: '#2c2121',
+
+    xScale: {
+      type: 'time',
+      format: '%Y-%m-%dT%H:%M:%S.%LZ',
+      useUTC: false,
+      precision: 'second',
+    },
+    xFormat: 'time:%Y-%m-%d %H:%M:%S',
+    axisBottom: {
+      tickRotation: 0,
+      legendOffset: -24,
+      legend: 'Time',
+      tickPadding: 10,
+      tickSize: 1,
+      format: xFormat,
+      tickValues: tickValues,
+    },
+    yScale: { type: 'linear', min: 'auto', max: 'auto' },
+
+    axisLeft: {
+      orient: 'left',
+      legend: 'Value ($)',
+      legendOffset: 12,
+      legendPosition: 'middle',
+      format: (value) => `$${value}`,
+      tickPadding: 10,
+      tickSize: 10,
+    },
+    pointSize: 8,
+    pointBorderWidth: 2,
+
+    pointColor: theme.palette.success.light,
+    colors: theme.palette.primaryDark.main,
+    lineWidth: 3,
+    curve: 'monotoneX',
+    useMesh: true,
+    theme: {
+      chart: {
+        axis: {
+          domain: {
+            line: {
+              stroke: greenAccent[800],
+              strokeWidth: 1,
+            },
+          },
+          ticks: {
+            line: {
+              stroke: greenAccent[700],
+              strokeWidth: 1,
+            },
+            text: {
+              fill: greenAccent[900],
+              fontSize: 12,
+            },
+          },
+        },
+        grid: {
+          line: {
+            stroke: greenAccent[200],
+            strokeWidth: 1,
+          },
+        },
+        legends: {
+          text: {
+            fill: greenAccent[800],
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          container: {
+            background: greenAccent[100],
+            color: greenAccent[800],
+            fontSize: 12,
+            borderRadius: 4,
+            boxShadow: '0 2px 4px rgba(0,0,0,0.25)',
+          },
+        },
+        points: {
+          borderColor: greenAccent[800],
+        },
+      },
+    },
+    onMouseMove: handleMouseMove,
+    onMouseLeave: handleMouseLeave,
+    onClick: () => setIsZoomed(!isZoomed),
+    tooltip: CustomTooltip,
+    // sliceTooltip: ({ slice }) => {
+    //   const point = slice.points.find(
+    //     (p) => p.id === 'Data' && p.data.x === latestData.x
+    //   );
+    // xFormat,
+    // tickValues,
+  };
+
+  return (
+    <ChartErrorBoundary>
+      <div style={{ width: '100%', height: dimensions?.height ?? '100%' }}>
+        <ResponsiveLine {...chartProps} />
+        {/* <AxisLabel axis="x">Time</AxisLabel>
+        <AxisLabel axis="y">Value ($)</AxisLabel> */}
+      </div>
+    </ChartErrorBoundary>
+  );
+};
+
+export default LinearChart;
diff --git a/src/components/chart/PortfolioChart.jsx b/src/components/chart/PortfolioChart.jsx
new file mode 100644
index 0000000..8c25bd6
--- /dev/null
+++ b/src/components/chart/PortfolioChart.jsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Container, Grid, Paper, styled, useTheme } from '@mui/material';
+import LinearChart from './LinearChart';
+import { useChartContext } from '../../context/ChartContext/ChartContext';
+import ErrorBoundary from '../../context/ErrorBoundary';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import { useCombinedContext } from '../../context/CombinedProvider';
+import debounce from 'lodash/debounce';
+import {
+  convertDataForNivo2,
+  getUniqueValidData,
+  groupAndAverageData,
+} from '../reusable/chartUtils';
+
+const ChartPaper = styled(Paper)(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[5],
+  backgroundColor: theme.palette.background.paper,
+  color: theme.palette.text.secondary,
+  padding: theme.spacing(2),
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  minHeight: '400px',
+  overflow: 'hidden',
+  margin: theme.spacing(2, 0),
+}));
+
+function handleThresholdUpdate(lastUpdateTime, setLastUpdateTime) {
+  const currentTime = new Date().getTime();
+  if (!lastUpdateTime || currentTime - lastUpdateTime >= 600000) {
+    // 10 minutes
+    setLastUpdateTime(currentTime);
+    return currentTime;
+  }
+  return lastUpdateTime;
+}
+const getFilteredData2 = (collection) => {
+  if (!collection) {
+    console.error('Invalid input: selectedCollection should not be null');
+    return [];
+  }
+  return getUniqueValidData(collection.currentChartDataSets2 || []);
+};
+const PortfolioChart = () => {
+  const theme = useTheme();
+  const { latestData, setLatestData, timeRange } = useChartContext();
+  const [lastUpdateTime, setLastUpdateTime] = useState(null);
+  const chartContainerRef = useRef(null);
+  const [chartDimensions, setChartDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const { selectedCollection } = useCollectionStore();
+
+  const threshold = useMemo(
+    () => handleThresholdUpdate(lastUpdateTime, setLastUpdateTime),
+    [lastUpdateTime]
+  );
+  const filteredChartData2 = useMemo(
+    () => getFilteredData2(selectedCollection),
+    [selectedCollection]
+  );
+  const rawData2 = useMemo(
+    () => groupAndAverageData(filteredChartData2, threshold),
+    [filteredChartData2, threshold]
+  );
+  const nivoReadyData2 = useMemo(
+    () => convertDataForNivo2(rawData2),
+    [rawData2]
+  );
+
+  console.log('Selected Collection:', selectedCollection);
+  console.log('Filtered Chart Data:', filteredChartData2);
+  console.log('Raw Data:', rawData2);
+  console.log('Nivo Ready Data:', nivoReadyData2);
+  const HEIGHT_TO_WIDTH_RATIO = 7 / 10;
+
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      if (chartContainerRef.current) {
+        const width = chartContainerRef.current.offsetWidth;
+        const height = width * HEIGHT_TO_WIDTH_RATIO;
+        setChartDimensions({ width, height });
+      }
+    }, 100);
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      handleResize.cancel();
+    };
+  }, []);
+
+  return (
+    <Container
+      maxWidth="lg"
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: theme.spacing(2),
+        gap: theme.spacing(2),
+        // backgroundColor: theme.palette.background.paper,
+        background: '#333', // Darker background for Paper
+
+        color: '#fff', // White text color
+        border: '1px solid #555',
+        borderRadius: 2,
+        // color: theme.palette.text.primary,
+      }}
+    >
+      <ErrorBoundary>
+        <Grid
+          container
+          spacing={2}
+          sx={
+            {
+              // background: '#333', // Darker background for Paper
+            }
+          }
+        >
+          <Grid
+            item
+            xs={12}
+            sx={{ height: '100%', borderRadius: 2, width: '100%' }}
+          >
+            <ChartPaper elevation={3} ref={chartContainerRef}>
+              {filteredChartData2?.length > 0 && rawData2?.length > 0 ? (
+                <LinearChart
+                  nivoReadyData={nivoReadyData2}
+                  filteredChartData={filteredChartData2}
+                  latestData={latestData}
+                  dimensions={chartDimensions}
+                  timeRanges={timeRange}
+                />
+              ) : (
+                <div>No data available</div>
+              )}
+            </ChartPaper>
+          </Grid>
+        </Grid>
+      </ErrorBoundary>
+    </Container>
+  );
+};
+
+export default PortfolioChart;
diff --git a/src/components/cleanUp/CardModal.js b/src/components/cleanUp/CardModal.js
deleted file mode 100644
index 68fc78e..0000000
--- a/src/components/cleanUp/CardModal.js
+++ /dev/null
@@ -1,123 +0,0 @@
-// import React, { useContext } from 'react';
-// import {
-//   Box,
-//   Button,
-//   CardMedia,
-//   Dialog,
-//   DialogContent,
-//   DialogTitle,
-//   Grid,
-//   Typography,
-// } from '@mui/material';
-// import {
-//   FaDragon,
-//   FaLevelUpAlt,
-//   FaRegCopy,
-//   FaRegLightbulb,
-//   FaShieldAlt,
-//   FaVenusMars,
-// } from 'react-icons/fa';
-// import { makeStyles } from '@mui/styles';
-// import placeholderImage from '../../../assets/placeholder.jpeg';
-// import {
-//   CartContext,
-//   useCartStore,
-// } from '../../../context/CartContext/CartContext';
-// import CardDetailsContainer from './CardDetailsContainer';
-// import CollectionActionButtons from '../../buttons/CollectionActionButtons';
-// import GenericActionButtons from '../../buttons/GenericActionButtons';
-// import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
-// import CollectionDialog from '../../dialogs/CollectionDialog';
-
-// const useStyles = (context) =>
-//   makeStyles((theme) => ({
-//     actionButtons: {
-//       display: 'flex',
-//       justifyContent: 'center',
-//       alignItems: 'center',
-//       gap: '1.5rem',
-//     },
-//     media: {
-//       objectFit: 'cover',
-//       borderRadius: '4px',
-//       boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-//     },
-//     details: {
-//       display: 'flex',
-//       alignItems: 'center',
-//       gap: '1.5rem',
-//       marginBottom: '1.5rem',
-//     },
-//     dialogTitle: {
-//       fontSize: '1.5rem',
-//       fontWeight: 600,
-//       color: theme.palette.primary.dark,
-//     },
-//     dialogContent: {
-//       padding: '2rem',
-//     },
-//   }));
-
-// const CardModal = ({ isOpen, onClose, card, context }) => {
-//   const classes = useStyles();
-//   const { getCardQuantity } = useContext(CartContext);
-//   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
-//   const productQuantity = getCardQuantity(card?.id);
-
-//   return (
-//     <Dialog open={isOpen} onClose={onClose} fullWidth maxWidth="md">
-//       <DialogTitle className={classes.dialogTitle}>{card?.name}</DialogTitle>
-//       <DialogContent className={classes.dialogContent}>
-//         <Grid container spacing={4}>
-//           <Grid
-//             item
-//             xs={12}
-//             sm={6}
-//             container
-//             direction="column"
-//             justifyContent="space-between"
-//             alignItems="center"
-//           >
-//             <CardMedia
-//               component="img"
-//               alt={card?.name}
-//               className={classes.media}
-//               image={imgUrl}
-//               height="300"
-//             />
-//             <GenericActionButtons
-//               card={card}
-//               // storeHook={useCartStore}
-//               context={context}
-//               label="In Cart"
-//               className="some-cart-class"
-//             />
-//             <GenericActionButtons
-//               card={card}
-//               // storeHook={useCollectionStore}
-//               dialogComponent={CollectionDialog}
-//               context={context}
-//               label="In Collection"
-//               className="some-collection-class"
-//             />
-//             {/* <CartActionButtons
-//               card={card}
-//               productQuantity={productQuantity}
-//               className={classes.actionButtons}
-//             />
-//             <CollectionActionButtons
-//               card={card}
-//               productQuantity={productQuantity}
-//               className={classes.actionButtons}
-//             /> */}
-//           </Grid>
-//           <Grid item xs={12} sm={6} container direction="column">
-//             <CardDetailsContainer card={card} className={classes.details} />
-//           </Grid>
-//         </Grid>
-//       </DialogContent>
-//     </Dialog>
-//   );
-// };
-
-// export default CardModal;
diff --git a/src/components/cleanUp/CartActionButtons.js b/src/components/cleanUp/CartActionButtons.js
deleted file mode 100644
index 44e7f1d..0000000
--- a/src/components/cleanUp/CartActionButtons.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// // src/components/CartActionButtons.js
-// import React from 'react';
-// import { useCartStore } from '../../context/CartContext/CartContext';
-// import { makeStyles } from '@mui/styles';
-// import CardActionButtons from './CardActionButtons'; // Import the reusable component
-// import CardCountDisplay from './CardCountDisplay';
-
-// const useStyles = makeStyles({
-//   root: {},
-// });
-
-// const CartActionButtons = ({ card, productQuantity }) => {
-//   const classes = useStyles();
-//   const { addOneToCart, deleteFromCart, removeOneFromCart } = useCartStore();
-
-//   return (
-//     <div className={classes.root}>
-//       <CardCountDisplay
-//         label="In Cart"
-//         quantity={productQuantity}
-//         className="some-cart-class"
-//       />
-
-//       <CardActionButtons
-//         card={card}
-//         quantity={productQuantity}
-//         addOne={addOneToCart}
-//         removeOne={removeOneFromCart}
-//         removeAll={deleteFromCart}
-//         context="Cart"
-//       />
-//     </div>
-//   );
-// };
-
-// export default CartActionButtons;
diff --git a/src/components/cleanUp/CollectionForm.jsx b/src/components/cleanUp/CollectionForm.jsx
deleted file mode 100644
index 8f9f420..0000000
--- a/src/components/cleanUp/CollectionForm.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// CollectionForm.js
-
-import React, { useState } from 'react';
-import { Dialog, DialogContent, Button, TextField } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) => ({
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-  },
-  buttonContainer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    marginTop: theme.spacing(2),
-  },
-}));
-
-const CollectionForm = ({ isDialogOpen, closeDialog, onSave, userId }) => {
-  const classes = useStyles();
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-
-  const handleSave = () => {
-    const newCollectionInfo = {
-      name,
-      description,
-    };
-    onSave(userId, newCollectionInfo);
-    closeDialog();
-  };
-
-  return (
-    <Dialog open={isDialogOpen} onClose={closeDialog}>
-      <DialogContent>
-        <form className={classes.form}>
-          <TextField
-            label="Collection Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            variant="outlined"
-          />
-          <TextField
-            label="Collection Description"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            variant="outlined"
-            multiline
-            rows={4}
-          />
-          <div className={classes.buttonContainer}>
-            <Button variant="contained" onClick={handleSave} color="primary">
-              Save
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default CollectionForm;
diff --git a/src/components/cleanUp/DeckActionButtons.js b/src/components/cleanUp/DeckActionButtons.js
deleted file mode 100644
index 8a66b54..0000000
--- a/src/components/cleanUp/DeckActionButtons.js
+++ /dev/null
@@ -1,65 +0,0 @@
-// import React, { useState } from 'react';
-// import { makeStyles } from '@mui/styles';
-// import { useDeckStore } from '../../context/DeckContext/DeckContext';
-// import CardActionButtons from './CardActionButtons';
-// import DeckDialog from '../cleanUp/DeckDialog';
-// import DeckCountDisplay from './DeckCountDisplay';
-// import CardCountDisplay from './CardCountDisplay';
-
-// const useStyles = makeStyles({
-//   root: {
-//     height: '100%',
-//     display: 'flex',
-//     flexDirection: 'column',
-//   },
-//   button: {
-//     flex: 1,
-//     height: '100%',
-//     padding: '4px',
-//   },
-//   fullWidthButton: {
-//     width: '100%',
-//     padding: '4px',
-//   },
-// });
-
-// const DeckActionButtons = ({ card }) => {
-//   const classes = useStyles();
-//   const {
-//     addOneToDeck,
-//     removeOneFromDeck,
-//     removeAllFromDeck,
-//     createUserDeck,
-//     deckCardQuantity,
-//   } = useDeckStore();
-//   const [openDialog, setOpenDialog] = useState(false);
-
-//   const handleDialogClose = (newDeckInfo) => {
-//     createUserDeck(newDeckInfo);
-//     addOneToDeck(card);
-//     setOpenDialog(false);
-//   };
-
-//   return (
-//     <div className={classes.root}>
-//       <CardCountDisplay
-//         label="In Deck"
-//         quantity={deckCardQuantity}
-//         className="some-deck-class"
-//       />
-//       <CardActionButtons
-//         card={card}
-//         quantity={deckCardQuantity}
-//         addOne={addOneToDeck}
-//         removeOne={removeOneFromDeck}
-//         removeAll={removeAllFromDeck}
-//         context="Deck"
-//         buttonClassName={classes.button}
-//         fullWidthButtonClassName={classes.fullWidthButton}
-//       />
-//       <DeckDialog open={openDialog} onClose={handleDialogClose} />
-//     </div>
-//   );
-// };
-
-// export default DeckActionButtons;
diff --git a/src/components/cleanUp/DeckCard.js b/src/components/cleanUp/DeckCard.js
deleted file mode 100644
index 071b888..0000000
--- a/src/components/cleanUp/DeckCard.js
+++ /dev/null
@@ -1,118 +0,0 @@
-// import React, { useState, useEffect, useRef } from 'react';
-// import DeckCardMedia from '../media/DeckCardMedia';
-// import CardToolTip from './CardToolTip';
-// import DeckCardDialog from '../dialogs/DeckCardDialog';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-// import './deckcard.css'; // Assuming you have styles here
-// import { makeStyles } from '@mui/styles';
-// import CardMediaSection from '../media/CardMediaSection';
-
-// const useStyles = makeStyles((theme) => ({
-//   card: {
-//     position: 'relative', // Add this
-//     display: 'flex',
-//     flexDirection: 'column',
-//     height: '100%',
-//     width: '100%',
-//     flexGrow: 1,
-//   },
-//   media: {
-//     width: '100%',
-//     objectFit: 'contain',
-//   },
-//   content: {
-//     flex: '1 1 auto',
-//     overflow: 'hidden',
-//     // padding: theme.spacing(1),
-//   },
-//   text: {
-//     textOverflow: 'ellipsis',
-//     overflow: 'hidden',
-//     whiteSpace: 'nowrap',
-//   },
-//   actionButtons: {
-//     backgroundColor: '#f5f5f5',
-//     // padding: theme.spacing(1),
-//     margin: theme.spacing(1, 0),
-//     borderRadius: '4px',
-//     overflow: 'auto',
-//   },
-//   dialog: {
-//     position: 'absolute', // Add this
-//     top: 0,
-//     right: 0,
-//     zIndex: 1000, // High z-index value
-//   },
-// }));
-
-// const DeckCard = ({ card, cardInfo }) => {
-//   const [isDeckModalOpen, setDeckModalOpen] = useState(false);
-//   const [isHovering, setHovering] = useState(false);
-//   const [hasLoggedCard, setHasLoggedCard] = useState(false);
-//   const [imgLoadError, setImgLoadError] = useState(false); // For error handling
-
-//   const tooltipRef = useRef(null);
-//   const cardRef = useRef(null);
-//   const classes = useStyles();
-
-//   const imgUrl =
-//     !imgLoadError && (card?.card_images?.[0]?.image_url || placeholderImage);
-
-//   const openDeckModal = () => setDeckModalOpen(true);
-//   const closeDeckModal = () => setDeckModalOpen(false);
-
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       // Log only in development mode
-//       if (!hasLoggedCard) {
-//         console.log('CARD:', card);
-//         setHasLoggedCard(true);
-//       }
-//     }
-
-//     if (isHovering && tooltipRef.current && cardRef.current) {
-//       const cardRect = cardRef.current.getBoundingClientRect();
-//       tooltipRef.current.style.top = `${cardRect.top}px`;
-//       tooltipRef.current.style.left = `${cardRect.right}px`;
-//     }
-//   }, [isHovering, card, hasLoggedCard]);
-
-//   // This useEffect is for debugging, remove in production
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       console.log('isHovering:', isHovering);
-//       console.log('isDeckModalOpen:', isDeckModalOpen);
-//     }
-//   }, [isHovering, isDeckModalOpen]);
-
-//   return (
-//     <>
-//       <CardMediaSection
-//         imgUrl={imgUrl}
-//         card={card}
-//         cardInfo={cardInfo}
-//         classes={classes}
-//         openDeckModal={openDeckModal}
-//         setHovering={setHovering}
-//         cardRef={cardRef}
-//       />
-//       <CardToolTip
-//         cardInfo={cardInfo}
-//         classes={classes}
-//         isHovering={isHovering}
-//         isDeckModalOpen={isDeckModalOpen}
-//         tooltipRef={tooltipRef}
-//       />
-//       <DeckCardDialog
-//         isOpen={isDeckModalOpen}
-//         classes={classes}
-//         onClose={closeDeckModal}
-//         card={card}
-//         cardInfo={cardInfo}
-//         cardRef={cardRef}
-//       />
-//     </>
-//   );
-// };
-
-// export default DeckCard;
diff --git a/src/components/cleanUp/DeckCardDialog.jsx b/src/components/cleanUp/DeckCardDialog.jsx
deleted file mode 100644
index 8f8cdfa..0000000
--- a/src/components/cleanUp/DeckCardDialog.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// import React from 'react';
-// import GenericCardModal from '../modals/GenericCardModal';
-
-// const DeckCardDialog = ({ isOpen, onClose, card, cardInfo, context }) => {
-//   return (
-//     <GenericCardModal
-//       isOpen={isOpen}
-//       onClose={onClose}
-//       context={context}
-//       card={card}
-//       cardInfo={cardInfo}
-//     />
-//   );
-// };
-
-// export default DeckCardDialog;
diff --git a/src/components/cleanUp/DeckCardDialogue.js b/src/components/cleanUp/DeckCardDialogue.js
deleted file mode 100644
index d0cb703..0000000
--- a/src/components/cleanUp/DeckCardDialogue.js
+++ /dev/null
@@ -1,96 +0,0 @@
-// import React from 'react';
-// import Button from '@mui/material/Button';
-// import { Box } from '@mui/system';
-// import { Popover, Typography } from '@mui/material';
-// import { makeStyles } from '@mui/styles';
-// import DeckCardModal from '../modals/DeckCardModal';
-
-// const useStyles = makeStyles((theme) => ({
-//   card: {
-//     display: 'flex',
-//     flexDirection: 'column',
-//     flexGrow: 1,
-//     overflow: 'hidden',
-//   },
-//   media: {
-//     objectFit: 'contain',
-//   },
-//   content: {
-//     flexGrow: 1,
-//     display: 'flex',
-//     flexDirection: 'row',
-//     // padding: theme.spacing(0.5), // reduce padding
-//   },
-//   reducedBox: {
-//     flexGrow: 1,
-//     display: 'flex',
-//     flexDirection: 'row',
-//     padding: theme.spacing(0.5), // reduce padding
-//   },
-//   button: {
-//     flexGrow: 1,
-//     fontSize: '0.7rem', // reduce font size
-//     padding: theme.spacing(0.5), // reduce padding
-//   },
-//   text: {
-//     fontSize: '0.8rem', // reduce font size
-//     whiteSpace: 'nowrap',
-//     overflow: 'hidden',
-//     textOverflow: 'ellipsis',
-//   },
-//   popover: {
-//     pointerEvents: 'none',
-//   },
-//   paper: {
-//     padding: theme.spacing(1),
-//   },
-// }));
-
-// const DeckCardDialogue = ({
-//   anchorEl,
-//   isOpen,
-//   onClose,
-//   card,
-//   openCardModal,
-//   closeCardModal,
-//   isCardModalOpen,
-// }) => {
-//   const classes = useStyles();
-
-//   return (
-//     <Popover
-//       id="mouse-over-popover"
-//       className={classes.popover}
-//       classes={{
-//         paper: classes.paper,
-//       }}
-//       anchorEl={anchorEl}
-//       anchorOrigin={{
-//         vertical: 'bottom',
-//         horizontal: 'left',
-//       }}
-//       open={isOpen}
-//       onClose={onClose}
-//       disableRestoreFocus
-//     >
-//       <Typography>{card?.name}</Typography>
-//       <Box className={classes.reducedBox} container>
-//         <Button
-//           // size="xs"
-//           color="primary"
-//           onClick={openCardModal}
-//           className={classes.button}
-//         >
-//           View Details
-//         </Button>
-//         <DeckCardModal
-//           isOpen={isCardModalOpen}
-//           onClose={closeCardModal}
-//           card={card}
-//         />
-//       </Box>
-//     </Popover>
-//   );
-// };
-
-// export default DeckCardDialogue;
diff --git a/src/components/cleanUp/DeckCardModal.js b/src/components/cleanUp/DeckCardModal.js
deleted file mode 100644
index 17db76a..0000000
--- a/src/components/cleanUp/DeckCardModal.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// import React, { useContext } from 'react';
-// import { Dialog, DialogContent, DialogTitle, Grid } from '@mui/material';
-// import { DeckContext } from '../../context/DeckContext/DeckContext';
-// import CardMediaSection from '../media/CardMediaSection';
-// import CardDetailsContainer from './cardModal/CardDetailsContainer';
-// import DeckActionButtons from '../cleanUp/DeckActionButtons';
-// import { makeStyles } from '@mui/styles';
-// import GenericActionButtons from '../buttons/GenericActionButtons';
-
-// const useStyles = (context) =>
-//   makeStyles({
-//     dialogTitle: {
-//       backgroundColor: '#0066cc',
-//       color: 'white',
-//       padding: '16px',
-//       fontWeight: 'bold',
-//     },
-//   });
-
-// const DeckCardModal = ({ isOpen, onClose, card, userDecks, context }) => {
-//   const classes = useStyles();
-//   if (!card) return null; // or some other placeholder
-
-//   const { getCardQuantity } = useContext(DeckContext);
-//   const productQuantity = getCardQuantity(card?.id);
-
-//   const handleClose = (event, reason) => {
-//     if (reason === 'backdropClick') {
-//       onClose();
-//     }
-//   };
-
-//   return (
-//     <Dialog open={isOpen} onClose={handleClose} fullWidth maxWidth="md">
-//       <DialogTitle className={classes.dialogTitle}>{card?.name}</DialogTitle>
-//       <DialogContent>
-//         <Grid container spacing={2}>
-//           <Grid item xs={12} sm={6}>
-//             <CardMediaSection card={card} />
-//           </Grid>
-//           <Grid item xs={12} sm={6}>
-//             <CardDetailsContainer
-//               card={card}
-//               className={classes.someClassForDeckCardDetail}
-//             />
-//           </Grid>
-//         </Grid>
-//         {/* <DeckActionButtons card={card} deckCardQuantity={productQuantity} /> */}
-//         <GenericActionButtons card={card} deckCardQuantity={productQuantity} />
-//       </DialogContent>
-//     </Dialog>
-//   );
-// };
-
-// export default DeckCardModal;
diff --git a/src/components/cleanUp/DeckCountDisplay.jsx b/src/components/cleanUp/DeckCountDisplay.jsx
deleted file mode 100644
index f1224b8..0000000
--- a/src/components/cleanUp/DeckCountDisplay.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// import React from 'react';
-// import { Grid } from '@mui/material';
-
-// const DeckCountDisplay = ({ quantity }) => (
-//   <Grid container>
-//     <Grid item xs={6}>
-//       In Deck: {quantity}
-//     </Grid>
-//   </Grid>
-// );
-
-// export default DeckCountDisplay;
diff --git a/src/components/cleanUp/DeckDialog.jsx b/src/components/cleanUp/DeckDialog.jsx
deleted file mode 100644
index a9dcfbe..0000000
--- a/src/components/cleanUp/DeckDialog.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// import React, { useState } from 'react';
-// import {
-//   Dialog,
-//   DialogActions,
-//   DialogContent,
-//   DialogContentText,
-//   DialogTitle,
-//   TextField,
-//   Button,
-// } from '@mui/material';
-
-// const DeckDialog = ({ open, onClose }) => {
-//   const [newDeckInfo, setNewDeckInfo] = useState({ name: '', description: '' });
-
-//   const handleInputChange = (e) => {
-//     const { name, value } = e.target;
-//     setNewDeckInfo((prev) => ({ ...prev, [name]: value }));
-//   };
-
-//   return (
-//     <Dialog open={open} onClose={() => onClose(null)}>
-//       <DialogTitle>Create a New Deck</DialogTitle>
-//       <DialogContent>
-//         <DialogContentText>
-//           You don&apos;t have an existing deck. Would you like to create one?
-//         </DialogContentText>
-//         <TextField
-//           autoFocus
-//           margin="dense"
-//           name="name"
-//           label="Deck Name"
-//           type="text"
-//           fullWidth
-//           onChange={handleInputChange}
-//         />
-//         <TextField
-//           margin="dense"
-//           name="description"
-//           label="Deck Description"
-//           type="text"
-//           fullWidth
-//           onChange={handleInputChange}
-//         />
-//       </DialogContent>
-//       <DialogActions>
-//         <Button onClick={() => onClose(null)} color="primary">
-//           Cancel
-//         </Button>
-//         <Button onClick={() => onClose(newDeckInfo)} color="primary">
-//           Create
-//         </Button>
-//       </DialogActions>
-//     </Dialog>
-//   );
-// };
-
-// export default DeckDialog;
diff --git a/src/components/cleanUp/PortfolioCard.jsx b/src/components/cleanUp/PortfolioCard.jsx
deleted file mode 100644
index ce16ac2..0000000
--- a/src/components/cleanUp/PortfolioCard.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-// import React, { useState, useEffect, useRef } from 'react';
-// import DeckCardMedia from '../media/DeckCardMedia';
-// import CardToolTip from './CardToolTip';
-// import DeckCardDialog from './DeckCardDialog';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-// import './deckcard.css'; // Assuming you have styles here
-// import { makeStyles } from '@mui/styles';
-
-// const useStyles = makeStyles((theme) => ({
-//   card: {
-//     position: 'relative', // Add this
-//     display: 'flex',
-//     flexDirection: 'column',
-//     height: '100%',
-//     width: '100%',
-//     flexGrow: 1,
-//   },
-//   media: {
-//     width: '100%',
-//     objectFit: 'contain',
-//   },
-//   content: {
-//     flex: '1 1 auto',
-//     overflow: 'hidden',
-//     // padding: theme.spacing(1),
-//   },
-//   text: {
-//     textOverflow: 'ellipsis',
-//     overflow: 'hidden',
-//     whiteSpace: 'nowrap',
-//   },
-//   actionButtons: {
-//     backgroundColor: '#f5f5f5',
-//     // padding: theme.spacing(1),
-//     margin: theme.spacing(1, 0),
-//     borderRadius: '4px',
-//     overflow: 'auto',
-//   },
-//   dialog: {
-//     position: 'absolute', // Add this
-//     top: 0,
-//     right: 0,
-//     zIndex: 1000, // High z-index value
-//   },
-// }));
-
-// const PortfolioCard = ({ card, cardInfo }) => {
-//   const [isDeckModalOpen, setDeckModalOpen] = useState(false);
-//   const [isHovering, setHovering] = useState(false);
-//   const [hasLoggedCard, setHasLoggedCard] = useState(false);
-//   const [imgLoadError, setImgLoadError] = useState(false); // For error handling
-
-//   const tooltipRef = useRef(null);
-//   const cardRef = useRef(null);
-
-//   const imgUrl =
-//     !imgLoadError && (card?.card_images?.[0]?.image_url || placeholderImage);
-
-//   const openDeckModal = () => setDeckModalOpen(true);
-//   const closeDeckModal = () => setDeckModalOpen(false);
-
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       // Log only in development mode
-//       if (!hasLoggedCard) {
-//         console.log('CARD:', card);
-//         setHasLoggedCard(true);
-//       }
-//     }
-
-//     if (isHovering && tooltipRef.current && cardRef.current) {
-//       const cardRect = cardRef.current.getBoundingClientRect();
-//       tooltipRef.current.style.top = `${cardRect.top}px`;
-//       tooltipRef.current.style.left = `${cardRect.right}px`;
-//     }
-//   }, [isHovering, card, hasLoggedCard]);
-
-//   // This useEffect is for debugging, remove in production
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       console.log('isHovering:', isHovering);
-//       console.log('isDeckModalOpen:', isDeckModalOpen);
-//     }
-//   }, [isHovering, isDeckModalOpen]);
-
-//   const handleImgError = () => {
-//     setImgLoadError(true);
-//   };
-
-//   return (
-//     <>
-//       <DeckCardMedia
-//         imgUrl={imgUrl}
-//         openDeckModal={openDeckModal}
-//         setHovering={setHovering}
-//         cardRef={cardRef}
-//         card={card}
-//         cardInfo={cardInfo}
-//         onError={handleImgError} // To handle image errors
-//       />
-//       <CardToolTip
-//         cardInfo={cardInfo}
-//         isHovering={isHovering}
-//         isDeckModalOpen={isDeckModalOpen}
-//         tooltipRef={tooltipRef}
-//       />
-//       <DeckCardDialog
-//         isOpen={isDeckModalOpen}
-//         onClose={closeDeckModal}
-//         card={card}
-//         cardInfo={cardInfo}
-//         cardRef={cardRef}
-//       />
-//     </>
-//   );
-// };
-
-// export default PortfolioCard;
diff --git a/src/components/cleanUp/PracticeScraperPage.js b/src/components/cleanUp/PracticeScraperPage.js
deleted file mode 100644
index 06ad132..0000000
--- a/src/components/cleanUp/PracticeScraperPage.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import ScraperContainer from './ScraperContainer';
-import { BeatLoader } from 'react-spinners';
-import { useCookies } from 'react-cookie';
-import { ScraperContext } from '../../context/ScraperContext/ScraperContext';
-
-const ErrorIndicator = ({ error }) => {
-  return <div>Error: {error}</div>;
-};
-
-const PracticeScraperPage = () => {
-  const [cookies] = useCookies(['userCookie']);
-  const { fetchExistingScrapeData, loading, error } =
-    useContext(ScraperContext);
-
-  // const cardName = cookies.cardName;
-  // console.log('cardName:', cardName);
-
-  useEffect(() => {
-    fetchExistingScrapeData()
-      .then((data) => {
-        console.log('Successfully fetched scrape data:', data);
-        // Optionally, display a success message to the user.
-        // This would require you to manage a 'message' state.
-        // setMessage('Successfully fetched scrape data.');
-      })
-      .catch((err) => {
-        console.error('Failed to get card scrape data', err);
-      });
-  }, [fetchExistingScrapeData]);
-
-  if (loading) {
-    return <LoadingIndicator loading={loading} />;
-  }
-
-  if (error) {
-    return <ErrorIndicator error={error} />;
-  }
-
-  return (
-    <div>
-      <h1>Web Scraper Page</h1>
-      <ScraperContainer />
-    </div>
-  );
-};
-
-export default PracticeScraperPage;
diff --git a/src/components/cleanUp/ProductCard.js b/src/components/cleanUp/ProductCard.js
deleted file mode 100644
index b23a052..0000000
--- a/src/components/cleanUp/ProductCard.js
+++ /dev/null
@@ -1,98 +0,0 @@
-// import { Card, Button, CardContent, CardActions } from '@mui/material';
-// import { makeStyles } from '@mui/styles';
-// import { useContext, useState } from 'react';
-// import CardMedia from '@mui/material/CardMedia';
-// import Typography from '@mui/material/Typography';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-// import CardModal from '../modals/cardModal/CardModal';
-// import CartActionButtons from '../buttons/CartActionButtons';
-// import { useCartStore } from '../../context/CartContext/CartContext';
-
-// const useStyles = makeStyles({
-//   card: {
-//     display: 'flex',
-//     flexDirection: 'column',
-//     maxWidth: '100%',
-//     minHeight: 200,
-//     margin: '16px',
-//     padding: '16px',
-//   },
-//   media: {
-//     flex: 0.75, // 3/4 of the card
-//   },
-//   content: {
-//     flex: 0.25, // 1/4 of the card
-//   },
-//   button: {
-//     margin: '0 8px',
-//   },
-//   largerButton: {
-//     margin: '0 8px',
-//     padding: '10px',
-//     fontSize: '20px',
-//   },
-//   actionButtons: {
-//     // Custom styles for CartActionButtons in ProductCard go here
-//     backgroundColor: '#f5f5f5',
-//     padding: '10px',
-//     margin: '10px 0',
-//     borderRadius: '4px',
-//   },
-// });
-
-// const ProductCard = ({ card, page }) => {
-//   const { cartData, getCardQuantity } = useCartStore();
-//   const classes = useStyles();
-
-//   const { id, name } = card;
-//   const [isCardModalOpen, setCardModalOpen] = useState(false);
-//   const openCardModal = () => setCardModalOpen(true);
-//   const closeCardModal = () => setCardModalOpen(false);
-//   const productQuantity = getCardQuantity(card?.id);
-//   console.log('productQuantity', productQuantity);
-//   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
-
-//   return (
-//     <Card key={id} className={classes.card}>
-//       <CardMedia
-//         className={classes.media}
-//         component="img"
-//         alt={name}
-//         image={imgUrl}
-//       />
-//       <div className={classes.content}>
-//         <CardContent>
-//           <Typography gutterBottom variant="h5" component="div">
-//             {name}
-//           </Typography>
-//           <Typography variant="body2" color="text.secondary">
-//             Price: {card?.card_prices?.[0]?.tcgplayer_price}
-//           </Typography>
-//           <Typography variant="body2" color="text.secondary">
-//             Quantity:{' '}
-//             {productQuantity.quantityOfSameId > 0
-//               ? productQuantity.quantityOfSameId
-//               : 'Not in cart'}
-//           </Typography>
-//         </CardContent>
-//         <CardActions>
-//           <Button size="small" color="primary" onClick={openCardModal}>
-//             Product Details
-//           </Button>
-//           <CardModal
-//             isOpen={isCardModalOpen}
-//             onClose={closeCardModal}
-//             card={card}
-//           />
-//           <CartActionButtons
-//             card={card}
-//             productQuantity={productQuantity}
-//             className={classes.actionButtons}
-//           />
-//         </CardActions>
-//       </div>
-//     </Card>
-//   );
-// };
-
-// export default ProductCard;
diff --git a/src/components/cleanUp/ScrapeDisplay.js b/src/components/cleanUp/ScrapeDisplay.js
deleted file mode 100644
index caadcaa..0000000
--- a/src/components/cleanUp/ScrapeDisplay.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// src/components/other/ScrapeDisplay.js
-import React, { useState, useEffect } from 'react';
-
-const ScrapeDisplay = () => {
-  const [results, setResults] = useState([]); // You'd probably be fetching this from an API or context.
-
-  // Simulating getting some results for demonstration.
-  useEffect(() => {
-    // Fetch results from an API or context here.
-    const dummyResults = ['Result 1', 'Result 2', 'Result 3']; // Placeholder data
-    setResults(dummyResults);
-  }, []);
-
-  return (
-    <div>
-      <h3>Scraping Results:</h3>
-      <ul>
-        {results.map((result, index) => (
-          <li key={index}>{result}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default ScrapeDisplay;
diff --git a/src/components/cleanUp/ScrapeSearch.js b/src/components/cleanUp/ScrapeSearch.js
deleted file mode 100644
index f654f2c..0000000
--- a/src/components/cleanUp/ScrapeSearch.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { Button, TextField } from '@mui/material';
-import axios from 'axios';
-
-const ScrapeSearch = ({ onCardNameChange }) => {
-  const [cardName, setCardName] = useState('');
-
-  const handleScrape = async () => {
-    const finalCardName = cardName || 'Dark Magician';
-    try {
-      onCardNameChange(finalCardName);
-
-      const response = await axios.get(
-        `${
-          process.env.REACT_APP_SERVER
-        }/api/scrape?cardName=${encodeURIComponent(finalCardName)}`,
-        {
-          withCredentials: true,
-        }
-      );
-
-      alert(response.data);
-    } catch (error) {
-      alert('Error while scraping: ' + error.message);
-    }
-  };
-
-  return (
-    <div>
-      <h3>Initiate Scraping</h3>
-      <TextField
-        label="Card Name"
-        variant="outlined"
-        value={cardName || 'Dark Magician'} // Set default value here
-        onChange={(e) => setCardName(e.target.value)}
-      />
-      <Button variant="contained" color="primary" onClick={handleScrape}>
-        Scrape TCGPLAYER
-      </Button>
-    </div>
-  );
-};
-
-export default ScrapeSearch;
diff --git a/src/components/cleanUp/ScraperContainer.js b/src/components/cleanUp/ScraperContainer.js
deleted file mode 100644
index 5d3fd3b..0000000
--- a/src/components/cleanUp/ScraperContainer.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@mui/styles';
-import { Grid } from '@mui/material';
-import ScrapeDisplay from './ScrapeDisplay';
-import ScrapeSearch from './ScrapeSearch';
-import { useCookies } from 'react-cookie';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-    padding: theme.spacing(2),
-  },
-}));
-
-const ScraperContainer = () => {
-  const classes = useStyles();
-  const [cookies, setCookie] = useCookies(['userCookie']);
-  console.log('cookies:', cookies);
-  const handleCardNameChange = (newCardName) => {
-    // Set the new card name as a cookie
-    setCookie('cardName', newCardName, { path: '/' });
-  };
-
-  return (
-    <Grid container spacing={3} className={classes.root}>
-      <Grid item xs={12} sm={6} md={4}>
-        <ScrapeSearch onCardNameChange={handleCardNameChange} />
-      </Grid>
-      <Grid item xs={12} sm={6} md={8}>
-        <ScrapeDisplay />
-      </Grid>
-    </Grid>
-  );
-};
-
-export default ScraperContainer;
diff --git a/src/components/cleanUp/UpdateChartData.jsx b/src/components/cleanUp/UpdateChartData.jsx
deleted file mode 100644
index 9744a17..0000000
--- a/src/components/cleanUp/UpdateChartData.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// import { useCallback, useEffect } from 'react';
-// import moment from 'moment';
-// import { useCollectionStore } from '../../context/hooks/collection';
-// import { useCombinedContext } from '../../context/CombinedProvider';
-
-// const transformChartData = (chartData) => {
-//   let pointsArray = [];
-
-//   if (Array.isArray(chartData)) {
-//     chartData?.forEach((item) => {
-//       item.datasets.forEach((dataset) => {
-//         dataset.data.forEach((data) => {
-//           pointsArray.push(...data.points);
-//         });
-//       });
-//     });
-//   } else {
-//     console.error('Expected chartData to be an array, but got:', chartData);
-//   }
-
-//   return pointsArray;
-// };
-
-// const useUpdateChartData = () => {
-//   const { totalCost } = useCollectionStore() || {};
-//   const {
-//     updateServerData,
-//     isCronJobTriggered,
-//     setIsCronJobTriggered,
-//     chartData,
-//   } = useCombinedContext() || {};
-
-//   const transformedData = transformChartData(chartData);
-
-//   const createDataset = (label, priceData) => ({
-//     name: label,
-//     color: 'blue',
-//     data: priceData?.map(({ x, y }) => ({ x, y })),
-//   });
-
-//   const newDataPoint = useCallback(() => {
-//     return {
-//       x: moment().format('YYYY-MM-DD HH:mm'),
-//       y: totalCost ? parseFloat(totalCost).toFixed(2) : null,
-//     };
-//   }, [totalCost]);
-
-//   const updateChart = useCallback(() => {
-//     let updatedDatasets = [];
-
-//     if (transformedData.length && totalCost != null) {
-//       updatedDatasets.push(
-//         createDataset('totalPrice', [...transformedData, newDataPoint()])
-//       );
-//     }
-
-//     if (updatedDatasets.length) {
-//       updateServerData(updatedDatasets);
-//     }
-//   }, [transformedData, newDataPoint, updateServerData, totalCost]);
-
-//   useEffect(() => {
-//     if (isCronJobTriggered) {
-//       updateChart();
-//       setIsCronJobTriggered(false);
-//     }
-//   }, [isCronJobTriggered, updateChart, setIsCronJobTriggered]);
-
-//   return { datasets: transformedData };
-// };
-
-// export default useUpdateChartData;
diff --git a/src/components/collection/CardPortfolio.jsx b/src/components/collection/CardPortfolio.jsx
index 3b6cc28..aa2b248 100644
--- a/src/components/collection/CardPortfolio.jsx
+++ b/src/components/collection/CardPortfolio.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import SelectCollection from './SelectCollection';
-import PortfolioContent from '../content/PortfolioContent';
+import PortfolioContent from '../../containers/collectionPageContainers/PortfolioContent';
 import { Box, Typography } from '@mui/material';
 import CollectionContainer from '../../containers/collectionPageContainers/CollectionContainer';
-import { useCollectionStore } from '../../context/hooks/collection';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
 // import UpdateChartData from './UpdateChartData';
 
 const CardPortfolio = ({ allCollections }) => {
@@ -20,14 +20,14 @@ const CardPortfolio = ({ allCollections }) => {
     // allCollections,
     selectedCollection,
     setSelectedCollection,
-    fetchAllCollectionsForUser,
+    // fetchAllCollectionsForUser,
     addOneToCollection,
     removeOneFromCollection,
   } = useCollectionStore();
 
-  useEffect(() => {
-    fetchAllCollectionsForUser();
-  }, []);
+  // useEffect(() => {
+  //   fetchAllCollectionsForUser();
+  // }, []);
 
   useEffect(() => {
     setSelectedCards(selectedCollection?.cards?.slice(0, 30));
@@ -59,29 +59,11 @@ const CardPortfolio = ({ allCollections }) => {
     hasRun.current = true; // Set the ref to true after the function has been run
   };
 
-  // console.log('ALL COLLECTIONS:', allCollections);
-  // console.log('SELECTED COLLECTION:', selectedCollection);
-  // console.log('SELECTED CARDS:', selectedCards);
-  // console.log('SELECTED COLLECTION (CARD PORT):', selectedCollection);
   return (
     <CollectionContainer>
       {showCollections ? (
         <SelectCollection
-          allCollections={allCollections}
           handleSelectCollection={handleSelectCollection}
-          // userCollection={userCollection}
-          error={error}
-          newCard={newCard}
-          setNewCard={setNewCard}
-          newCardPrice={newCardPrice}
-          setNewCardPrice={setNewCardPrice}
-          newCardCondition={newCardCondition}
-          setSelectedCards={setSelectedCards}
-          selectedCollection={selectedCollection}
-          setSelectedCollection={setSelectedCollection}
-          selectedCards={selectedCards}
-          setNewCardCondition={setNewCardCondition}
-          addCard={addOneToCollection}
           setShowCollections={setShowCollections}
           setShowPortfolio={setShowPortfolio}
         />
@@ -101,21 +83,13 @@ const CardPortfolio = ({ allCollections }) => {
           selectedCollection={selectedCollection}
           setSelectedCollection={setSelectedCollection}
           removeCard={removeOneFromCollection}
-
-          // allCollections={allCollections}
-          // selectedCollection={selectedCollection}
-          // setSelectedCollection={setSelectedCollection}
-          // selectedCards={selectedCards}
-          // setSelectedCards={setSelectedCards}
-          // removeCard={removeOneFromCollection}
-          // chartData={UpdateChartData()}
         />
       ) : (
         <Box
           display="flex"
           alignItems="center"
           justifyContent="center"
-          minHeight="100vh"
+          // minHeight="100vh"
           backgroundColor="#f1f1f1"
         >
           <Typography variant="h6">No Collection Selected</Typography>
diff --git a/src/components/collection/SelectCollection.jsx b/src/components/collection/SelectCollection.jsx
index 395cdb1..ba03979 100644
--- a/src/components/collection/SelectCollection.jsx
+++ b/src/components/collection/SelectCollection.jsx
@@ -5,8 +5,8 @@ import { useCookies } from 'react-cookie';
 import PropTypes from 'prop-types';
 import SimpleReusableButton from '../reusable/SimpleReusableButton';
 import SelectCollectionList from '../grids/collectionGrids/SelectCollectionList';
-import { useCollectionStore } from '../../context/hooks/collection';
-import SelectCollectionDialog from '../dialogs/SelectCollectionDialog';
+import CreateOrEditCollectionDialog from '../dialogs/CreateOrEditCollectionDialog';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'space-between',
     alignItems: 'stretch',
     height: '100%',
-    width: '50vw',
+    // width: '50vw',
     padding: theme.spacing(2),
   },
   button: {
@@ -97,7 +97,7 @@ const SelectCollection = ({
           openDialog={() => openDialog(false)} // Indicate that this is not a new collection
         />
       </div>
-      <SelectCollectionDialog
+      <CreateOrEditCollectionDialog
         {...{
           isDialogOpen,
           closeDialog,
diff --git a/src/components/collection/example-data.json b/src/components/collection/example-data.json
deleted file mode 100644
index 601be24..0000000
--- a/src/components/collection/example-data.json
+++ /dev/null
@@ -1,64 +0,0 @@
-[
-  {
-    "id": "totalPrice",
-    "color": "hsl(351, 70%, 50%)",
-    "data": [
-      {
-        "x": "1:00",
-        "y": 2170
-      },
-      {
-        "x": "1:30",
-        "y": 2176
-      },
-      {
-        "x": "2:00",
-        "y": 2200
-      },
-      {
-        "x": "2:30",
-        "y": 2150
-      },
-      {
-        "x": "3:00",
-        "y": 2250
-      },
-      {
-        "x": "3:30",
-        "y": 2300
-      },
-      {
-        "x": "4:00",
-        "y": 2400
-      },
-      {
-        "x": "4:30",
-        "y": 2450
-      },
-      {
-        "x": "5:00",
-        "y": 2500
-      },
-      {
-        "x": "5:30",
-        "y": 2550
-      },
-      {
-        "x": "6:00",
-        "y": 2600
-      },
-      {
-        "x": "6:30",
-        "y": 2650
-      },
-      {
-        "x": "7:00",
-        "y": 2700
-      },
-      {
-        "x": "7:30",
-        "y": 2750
-      }
-    ]
-  }
-]
\ No newline at end of file
diff --git a/src/components/content/PortfolioContent.jsx b/src/components/content/PortfolioContent.jsx
deleted file mode 100644
index d7a70fb..0000000
--- a/src/components/content/PortfolioContent.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/system';
-import PortfolioHeader from '../headings/PortfolioHeader';
-import PortfolioListContainer from '../../containers/PortfolioListContainer';
-import { useCollectionStore } from '../../context/hooks/collection';
-import PortfolioChartContainer from '../../containers/PortfolioChartContainer';
-
-const PortfolioContent = ({ error, selectedCards, removeCard }) => {
-  const { selectedCollection } = useCollectionStore();
-
-  return (
-    <Box
-      sx={{
-        height: '100vh',
-        width: '100vw',
-        display: 'flex',
-        m: 'auto',
-        justifyContent: 'center',
-        flexDirection: 'column',
-        alignItems: 'center',
-        p: 2,
-      }}
-    >
-      <PortfolioHeader error={error} />
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', md: 'row' },
-          justifyContent: 'space-between',
-          alignItems: 'stretch', // Make child elements stretch to maximum available height
-          width: '100%',
-          mt: 2,
-          height: '100%',
-        }}
-      >
-        <Box
-          sx={{
-            flex: { md: 1, lg: 7 },
-            mb: { xs: 1, md: 0 },
-            mr: { md: 1 },
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          <PortfolioChartContainer
-            selectedCards={selectedCards}
-            removeCard={removeCard}
-          />
-        </Box>
-        <Box
-          sx={{
-            flex: { md: 1, lg: 3 },
-            mt: { xs: 1, md: 0 },
-            ml: { md: 1 },
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          <PortfolioListContainer
-            selectedCards={selectedCards}
-            removeCard={removeCard}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default PortfolioContent;
diff --git a/src/components/dialogs/ChooseCollectionDialog.jsx b/src/components/dialogs/ChooseCollectionDialog.jsx
new file mode 100644
index 0000000..ea68b2d
--- /dev/null
+++ b/src/components/dialogs/ChooseCollectionDialog.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  Typography,
+  List,
+  ListItem,
+  ButtonBase,
+  ListItemText,
+  Divider,
+  Snackbar,
+} from '@mui/material';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import { useStyles } from './dialogStyles';
+
+const ChooseCollectionDialog = ({ onSave, isOpen, onClose }) => {
+  const { setSelectedCollection, allCollections } = useCollectionStore();
+  const classes = useStyles();
+  const [error, setError] = useState(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  const handleSelectCollection = useCallback(
+    (collectionId) => {
+      const foundCollection = allCollections.find(
+        (collection) => collection._id === collectionId
+      );
+
+      if (foundCollection) {
+        setSelectedCollection(foundCollection);
+        if (onSave) onSave(foundCollection);
+        onClose();
+        setSnackbarOpen(true); // open snackbar on successful selection
+      } else {
+        setError('Collection not found!');
+      }
+    },
+    [allCollections, setSelectedCollection, onSave, onClose]
+  );
+  if (isOpen) {
+    console.log('DIALOG OPEEPEPPE opened!)');
+  }
+
+  return (
+    <Dialog open={false} onClose={onClose}>
+      <DialogTitle>Select a Collection</DialogTitle>
+
+      <List className={classes.list}>
+        {allCollections.map((collection) => (
+          <React.Fragment key={collection._id}>
+            <ListItem className={classes.listItem}>
+              <ButtonBase
+                sx={{ width: '100%' }}
+                onClick={() => handleSelectCollection(collection._id)}
+              >
+                <ListItemText
+                  primary={collection.name}
+                  className={classes.listItemText}
+                />
+              </ButtonBase>
+            </ListItem>
+            <Divider />
+          </React.Fragment>
+        ))}
+      </List>
+
+      {error && (
+        <Typography variant="body2" color="error" align="center">
+          {error}
+        </Typography>
+      )}
+
+      <Snackbar
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        open={snackbarOpen}
+        onClose={() => setSnackbarOpen(false)}
+        message="Collection selected successfully!"
+        autoHideDuration={3000}
+      />
+    </Dialog>
+  );
+};
+
+export default ChooseCollectionDialog;
diff --git a/src/components/dialogs/CollectionDialog.jsx b/src/components/dialogs/CollectionDialog.jsx
deleted file mode 100644
index 107d6ba..0000000
--- a/src/components/dialogs/CollectionDialog.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  TextField,
-  Button,
-} from '@mui/material';
-
-const CollectionDialog = ({ open, onClose }) => {
-  const [newCollectionInfo, setNewCollectionInfo] = useState({
-    name: '',
-    description: '',
-  });
-
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setNewCollectionInfo((prev) => ({ ...prev, [name]: value }));
-  };
-
-  return (
-    <Dialog open={open} onClose={() => onClose(null)}>
-      <DialogTitle>Create a New Collection</DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          You don&apos;t have an existing collection. Would you like to create
-          one?
-        </DialogContentText>
-        <TextField
-          autoFocus
-          margin="dense"
-          name="name"
-          label="Collection Name"
-          type="text"
-          fullWidth
-          onChange={handleInputChange}
-        />
-        <TextField
-          margin="dense"
-          name="description"
-          label="Collection Description"
-          type="text"
-          fullWidth
-          onChange={handleInputChange}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => onClose(null)} color="primary">
-          Cancel
-        </Button>
-        <Button onClick={() => onClose(newCollectionInfo)} color="primary">
-          Create
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default CollectionDialog;
diff --git a/src/components/dialogs/CollectionSelectorDialog.jsx b/src/components/dialogs/CollectionSelectorDialog.jsx
new file mode 100644
index 0000000..bf7661a
--- /dev/null
+++ b/src/components/dialogs/CollectionSelectorDialog.jsx
@@ -0,0 +1,59 @@
+// CollectionSelectorDialog.js
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  List,
+  ListItem,
+  ButtonBase,
+  ListItemText,
+  Divider,
+} from '@mui/material';
+import { useStyles } from './dialogStyles';
+
+const CollectionSelectorDialog = ({
+  open,
+  allCollections,
+  onClose,
+  onCollectionSelect,
+}) => {
+  const classes = useStyles();
+
+  if (!Array.isArray(allCollections)) {
+    console.error('collection is not an array', allCollections);
+    return null; // or return a default empty array or some placeholder content
+  }
+
+  const handleSelectCollection = (collection) => {
+    onCollectionSelect(
+      `Collection "${collection.name}" selected successfully!`
+    );
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Select a Collection</DialogTitle>
+      <List>
+        {allCollections?.map((collection) => (
+          <React.Fragment key={collection._id}>
+            <ListItem className={classes.listItem}>
+              <ButtonBase
+                style={{ width: '100%' }}
+                onClick={() => handleSelectCollection(collection)}
+              >
+                <ListItemText
+                  primary={collection.name}
+                  className={classes.listItemText}
+                />
+              </ButtonBase>
+            </ListItem>
+            <Divider />
+          </React.Fragment>
+        ))}
+      </List>
+    </Dialog>
+  );
+};
+
+export default CollectionSelectorDialog;
diff --git a/src/components/dialogs/SelectCollectionDialog.jsx b/src/components/dialogs/CreateOrEditCollectionDialog.jsx
similarity index 81%
rename from src/components/dialogs/SelectCollectionDialog.jsx
rename to src/components/dialogs/CreateOrEditCollectionDialog.jsx
index f1425e0..1740e0b 100644
--- a/src/components/dialogs/SelectCollectionDialog.jsx
+++ b/src/components/dialogs/CreateOrEditCollectionDialog.jsx
@@ -7,10 +7,10 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { useCollectionStore } from '../../context/hooks/collection';
 import { useCookies } from 'react-cookie';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
 
-const SelectCollectionDialog = ({
+const CreateOrEditCollectionDialog = ({
   isDialogOpen,
   closeDialog,
   onSave,
@@ -26,21 +26,34 @@ const SelectCollectionDialog = ({
     addOneToCollection,
     removeCollection,
     selectedCollection,
+    updateCollectionDetails,
   } = useCollectionStore();
-  const [cookies] = useCookies(['userCookie']);
-  const userId = cookies.userCookie?.id;
+  const [cookies] = useCookies(['user']);
+  const userId = cookies.user?.id;
 
   const handleSave = () => {
     const newCollectionInfo = {
       name: editedName,
       description: editedDescription,
       userId: userId,
+      tag: 'new',
     };
 
     if (isNew) {
-      createUserCollection(newCollectionInfo);
+      createUserCollection(
+        userId,
+        newCollectionInfo,
+        editedName,
+        editedDescription,
+        userId
+      );
     } else if (editedName && editedDescription) {
-      addOneToCollection(newCollectionInfo);
+      // addOneToCollection(newCollectionInfo);
+      updateCollectionDetails(
+        newCollectionInfo,
+        userId,
+        selectedCollection._id
+      );
     } else {
       console.error('No card to add to the collection');
     }
@@ -112,7 +125,7 @@ const SelectCollectionDialog = ({
   );
 };
 
-SelectCollectionDialog.propTypes = {
+CreateOrEditCollectionDialog.propTypes = {
   isDialogOpen: PropTypes.bool.isRequired,
   closeDialog: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
@@ -124,4 +137,4 @@ SelectCollectionDialog.propTypes = {
   setEditedDescription: PropTypes.func.isRequired,
 };
 
-export default SelectCollectionDialog;
+export default CreateOrEditCollectionDialog;
diff --git a/src/components/dialogs/LoginDialog.jsx b/src/components/dialogs/LoginDialog.jsx
index 9445f7a..3d24e74 100644
--- a/src/components/dialogs/LoginDialog.jsx
+++ b/src/components/dialogs/LoginDialog.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useRef } from 'react';
 import {
   Button,
   Dialog,
@@ -16,7 +16,7 @@ import { useNavigate } from 'react-router-dom';
 import { useCookies } from 'react-cookie';
 
 function LoginDialog({ open, onClose, onLogin }) {
-  const authContext = useAuthContext();
+  const authContext = useAuthContext(); // <-- Make sure this line is updated
   const navigate = useNavigate();
 
   const [username, setUsername] = useState('');
@@ -26,40 +26,59 @@ function LoginDialog({ open, onClose, onLogin }) {
   const [name, setName] = useState('');
   const [roleData, setRoleData] = useState('admin'); // Adjusted to handle string value
   const { toggleColorMode, mode } = useMode();
-  const [cookies, setCookie, removeCookie] = useCookies(['isloggedin']);
+  const [cookies, setCookie, removeCookie] = useCookies(['isLoggedIn']);
+  const setLoginState = (isLoggedIn, userId) => {
+    const expires = new Date();
+    expires.setMinutes(expires.getMinutes() + 45);
+    setCookie('isLoggedIn', isLoggedIn, { expires });
+    setCookie('userId', userId, { expires });
+    onLogin(isLoggedIn, userId);
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    try {
+      let response = null;
 
-    if (signupMode) {
-      await authContext.signup(username, password, email, name, roleData);
-    } else {
-      try {
-        const loggedIn = await authContext.login(username, password);
-        if (loggedIn) {
-          setCookie('isloggedin', 'true', {
-            path: '/',
-            secure: true, // set to true if using https
-            sameSite: 'strict',
-          });
-          onLogin();
-        }
-      } catch (error) {
-        console.error('Login failed:', error);
+      if (signupMode) {
+        response = await authContext.signup(
+          username,
+          password,
+          email,
+          name,
+          roleData
+        );
+      } else {
+        response = await authContext.login(username, password);
       }
+
+      if (response?.loggedIn) {
+        const expires = new Date();
+        expires.setMinutes(expires.getMinutes() + 45);
+        setCookie('isLoggedIn', true, { expires });
+        setCookie('userId', response.userId, { expires });
+
+        setLoginState(true, response.userId);
+      }
+    } catch (error) {
+      console.error('Login failed:', error);
     }
   };
 
   const handleLogout = () => {
-    removeCookie('isloggedin', { path: '/' });
+    removeCookie('userId', { path: '/' }); // Remove userId cookie
     authContext.logout();
   };
 
   useEffect(() => {
-    if (authContext.isloggedin && window.location.pathname !== '/profile') {
-      onLogin();
+    if (authContext.isLoggedIn && window.location.pathname !== '/profile') {
+      const isLoggedInFromCookie = cookies['isLoggedIn'];
+      const userIdFromCookie = cookies['userId'];
+      if (isLoggedInFromCookie && userIdFromCookie) {
+        setLoginState(isLoggedInFromCookie, userIdFromCookie);
+      }
     }
-  }, [authContext.isloggedin, onLogin, navigate]);
+  }, [authContext.isLoggedIn, onLogin, navigate, cookies]);
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
@@ -71,7 +90,7 @@ function LoginDialog({ open, onClose, onLogin }) {
         {!mode ? <Brightness7Icon /> : <Brightness4Icon />}
       </IconButton>
       <DialogContent>
-        {authContext.isloggedin ? (
+        {authContext.isLoggedIn ? (
           <Button color="primary" variant="outlined" onClick={handleLogout}>
             Log Out
           </Button>
diff --git a/src/components/dialogs/dialogStyles.jsx b/src/components/dialogs/dialogStyles.jsx
new file mode 100644
index 0000000..a7f112c
--- /dev/null
+++ b/src/components/dialogs/dialogStyles.jsx
@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'stretch',
+    height: '100%',
+    width: '50vw',
+    padding: theme.spacing(2),
+  },
+  button: {
+    marginBottom: theme.spacing(2),
+  },
+  list: {
+    flexGrow: 1,
+  },
+  listItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(2),
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    marginBottom: theme.spacing(2),
+    boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+  },
+  listItemText: {
+    flex: 1,
+    textAlign: 'left',
+    marginLeft: theme.spacing(3),
+  },
+}));
diff --git a/src/components/dialogs/login.jsx b/src/components/dialogs/login.jsx
deleted file mode 100644
index e564868..0000000
--- a/src/components/dialogs/login.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// // Login.js
-// import React, { useState, useContext, useEffect } from 'react';
-// import { useNavigate } from 'react-router-dom';
-// import { When } from 'react-if';
-// import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
-// import { AuthContext } from '../../context/Auth/authContext.js';
-// import LoginForm from '../forms/LoginForm.jsx';
-// import SignupSwitch from '../Auth/SignupSwitch.jsx';
-
-// function Login() {
-//   let authContext = useContext(AuthContext);
-//   let navigate = useNavigate();
-
-//   const [username, setUsername] = React.useState('');
-//   const [password, setPassword] = React.useState('');
-//   const [email, setEmail] = React.useState('');
-//   const [signupMode, setSignupMode] = React.useState(false);
-//   const [roleData, setRoleData] = useState('');
-//   const [name, setName] = useState('');
-
-//   const handleSubmit = async (e) => {
-//     e.preventDefault();
-//     if (signupMode) {
-//       await authContext.signup(
-//         username,
-//         password,
-//         email,
-//         { name },
-//         { name: roleData }
-//       );
-//     } else {
-//       try {
-//         console.log('username', username);
-//         const loggedIn = await authContext.login(username, password);
-//         if (loggedIn) {
-//           // Store login status in local storage
-//           localStorage.setItem('isLoggedIn', 'true');
-//         }
-//       } catch (error) {
-//         console.error('Login failed:', error);
-//       }
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (
-//       authContext.isLoggedIn ||
-//       localStorage.getItem('isLoggedIn') === 'true'
-//     ) {
-//       navigate('/profile');
-//     }
-//   }, [authContext.isLoggedIn, navigate]);
-
-//   return (
-//     <Dialog open={!authContext.isLoggedIn} maxWidth="xs" fullWidth>
-//       <DialogTitle>{signupMode ? 'Sign Up' : 'Login'}</DialogTitle>
-//       <DialogContent>
-//         <When condition={authContext.isLoggedIn}>
-//           <Button
-//             color="primary"
-//             variant="outlined"
-//             onClick={authContext.logout}
-//           >
-//             Log Out
-//           </Button>
-//         </When>
-
-//         <When condition={!authContext.isLoggedIn}>
-//           <LoginForm
-//             username={username}
-//             password={password}
-//             email={email}
-//             signupMode={signupMode}
-//             name={name}
-//             roleData={roleData}
-//             setUsername={setUsername}
-//             setPassword={setPassword}
-//             setEmail={setEmail}
-//             setName={setName}
-//             setRoleData={setRoleData}
-//             handleSubmit={handleSubmit}
-//           />
-//           <SignupSwitch signupMode={signupMode} setSignupMode={setSignupMode} />
-//         </When>
-//         {authContext.error && <p>{authContext.error}</p>}
-//         {authContext.isLoading && <p>Loading...</p>}
-//       </DialogContent>
-//     </Dialog>
-//   );
-// }
-
-// export default Login;
diff --git a/src/components/forms/AddCardForm.jsx b/src/components/forms/AddCardForm.jsx
index b52ecf7..0f47efb 100644
--- a/src/components/forms/AddCardForm.jsx
+++ b/src/components/forms/AddCardForm.jsx
@@ -1,39 +1,39 @@
-import React from 'react';
-import { Box, Input, Button } from '@mui/material';
+// import React from 'react';
+// import { Box, Input, Button } from '@mui/material';
 
-const AddCardForm = ({
-  newCard,
-  setNewCard,
-  newCardPrice,
-  setNewCardPrice,
-  newCardCondition,
-  setNewCardCondition, // New prop for card condition
-  addCard,
-}) => {
-  return (
-    <Box mb={4}>
-      <Input
-        placeholder="Enter card name"
-        value={newCard}
-        onChange={(e) => setNewCard(e.target.value)}
-      />
-      <Input
-        placeholder="Enter card price"
-        value={newCardPrice}
-        onChange={(e) => setNewCardPrice(e.target.value)}
-        mt={2}
-      />
-      <Input
-        placeholder="Enter card condition"
-        value={newCardCondition} // New state variable
-        onChange={(e) => setNewCardCondition(e.target.value)} // New state setter function
-        mt={2}
-      />
-      <Button onClick={addCard} mt={2}>
-        Add Card
-      </Button>
-    </Box>
-  );
-};
+// const AddCardForm = ({
+//   newCard,
+//   setNewCard,
+//   newCardPrice,
+//   setNewCardPrice,
+//   newCardCondition,
+//   setNewCardCondition, // New prop for card condition
+//   addCard,
+// }) => {
+//   return (
+//     <Box mb={4}>
+//       <Input
+//         placeholder="Enter card name"
+//         value={newCard}
+//         onChange={(e) => setNewCard(e.target.value)}
+//       />
+//       <Input
+//         placeholder="Enter card price"
+//         value={newCardPrice}
+//         onChange={(e) => setNewCardPrice(e.target.value)}
+//         mt={2}
+//       />
+//       <Input
+//         placeholder="Enter card condition"
+//         value={newCardCondition} // New state variable
+//         onChange={(e) => setNewCardCondition(e.target.value)} // New state setter function
+//         mt={2}
+//       />
+//       <Button onClick={addCard} mt={2}>
+//         Add Card
+//       </Button>
+//     </Box>
+//   );
+// };
 
-export default AddCardForm;
+// export default AddCardForm;
diff --git a/src/components/forms/SearchForm.jsx b/src/components/forms/SearchForm.jsx
new file mode 100644
index 0000000..c992696
--- /dev/null
+++ b/src/components/forms/SearchForm.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { TextField, Button, Paper } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import { useMode } from '../../context/hooks/colormode';
+
+const SearchForm = ({ searchTerm, handleChange, handleSubmit }) => {
+  const { theme } = useMode();
+
+  return (
+    <Paper
+      sx={{
+        width: '100%',
+        padding: theme.spacing(3),
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.default,
+        boxShadow: theme.shadows[3], // Use the theme's predefined shadows
+        maxWidth: 400,
+        margin: 'auto',
+      }}
+    >
+      <Paper
+        sx={{
+          width: '100%',
+          padding: theme.spacing(3),
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.secondary.light,
+          boxShadow: theme.shadows[3], // Use the theme's predefined shadows
+          maxWidth: 400,
+          margin: 'auto',
+        }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing(2),
+            padding: theme.spacing(2),
+          }}
+        >
+          <TextField
+            value={searchTerm}
+            onChange={handleChange}
+            label="Search for cards"
+            variant="outlined"
+            fullWidth
+            sx={{
+              '& label.Mui-focused': {
+                color: theme.palette.primary.main,
+              },
+              '& .MuiOutlinedInput-root': {
+                '&:hover fieldset': {
+                  borderColor: theme.palette.primary.light,
+                },
+                '&.Mui-focused fieldset': {
+                  borderColor: theme.palette.primary.main,
+                },
+              },
+            }}
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            sx={{
+              backgroundColor: theme.palette.success.main,
+              color: theme.palette.getContrastText(theme.palette.success.main),
+              '&:hover': {
+                backgroundColor: theme.palette.success.dark,
+              },
+            }}
+            fullWidth
+          >
+            Search
+          </Button>
+        </form>
+      </Paper>
+    </Paper>
+  );
+};
+
+export default SearchForm;
diff --git a/src/components/forms/customerCheckoutForm/CartActions.jsx b/src/components/forms/customerCheckoutForm/CartActions.jsx
index 3fab6cb..65ba644 100644
--- a/src/components/forms/customerCheckoutForm/CartActions.jsx
+++ b/src/components/forms/customerCheckoutForm/CartActions.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import CartSummary from '../../other/CartSummary';
+import CartSummary from '../../other/dataDisplay/CartSummary';
 import OrderSubmitButton from '../../buttons/other/OrderSubmitButton';
 
 const CartActions = ({ quantity, getTotalCost, handleModalOpen }) => {
diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js
index 080959d..7be8582 100644
--- a/src/components/forms/customerCheckoutForm/CustomerForm.js
+++ b/src/components/forms/customerCheckoutForm/CustomerForm.js
@@ -1,17 +1,27 @@
-import React, { useState, useCallback } from 'react';
-import { Box, Container, Typography } from '@mui/material';
+import React, { useState, useCallback, useContext } from 'react';
+import { Box, Container, Typography, Grid } from '@mui/material';
 import { useCartStore } from '../../../context/CartContext/CartContext';
 import CustomerInfoFields from './CustomerInfoFields';
 import CartActions from './CartActions';
 import StripeCheckoutModal from '../../modals/stripeModal/StripeCheckoutModal';
+import { ModalContext } from '../../../context/ModalContext/ModalContext';
 
 const CustomerForm = () => {
   const { getTotalCost, cartData } = useCartStore();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const handleModalOpen = useCallback(() => setIsModalOpen(true), []);
-  const handleModalClose = useCallback(() => setIsModalOpen(false), []);
+  const {
+    openModalWithCard,
+    closeModal,
+    isModalOpen,
+    setModalOpen,
+    modalContent,
+  } = useContext(ModalContext);
+  const { cartCardQuantity } = useCartStore();
 
+  const handleModalOpen = useCallback(() => setModalOpen(true), [setModalOpen]);
+  const handleModalClose = useCallback(
+    () => setModalOpen(false),
+    [setModalOpen]
+  );
   const onToken = useCallback(
     (token) => {
       console.log(token);
@@ -20,7 +30,8 @@ const CustomerForm = () => {
     [handleModalClose]
   );
 
-  console.log('CUSTOMER FORM QUANTITY FROM CARTDATA', cartData.quantity);
+  console.log('CUSTOMER FORM QUANTITY FROM CARTDATA', cartCardQuantity);
+
   return (
     <Container maxWidth={false}>
       <Box sx={{ width: '100%', padding: '2rem' }}>
@@ -31,14 +42,21 @@ const CustomerForm = () => {
           Customer Info
         </Typography>
         <form>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-            <CustomerInfoFields />
-            <CartActions
-              quantity={cartData.quantity}
-              getTotalCost={getTotalCost}
-              handleModalOpen={handleModalOpen}
-            />
-          </Box>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={8}>
+              <CustomerInfoFields />
+            </Grid>
+            <Grid item xs={12} md={4}>
+              {/* This space can be used for additional components if needed */}
+            </Grid>
+            <Grid item xs={12}>
+              <CartActions
+                quantity={cartCardQuantity}
+                getTotalCost={getTotalCost}
+                handleModalOpen={handleModalOpen}
+              />
+            </Grid>
+          </Grid>
         </form>
       </Box>
       <StripeCheckoutModal
diff --git a/src/components/forms/formStyles.jsx b/src/components/forms/formStyles.jsx
new file mode 100644
index 0000000..8e4eaa9
--- /dev/null
+++ b/src/components/forms/formStyles.jsx
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Button, TextField } from '@mui/material';
+
+export const FormWrapper = styled('form')`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 400px;
+  margin: auto;
+`;
+
+export const StyledTextField = styled(TextField)`
+  && {
+    margin-bottom: 12px;
+    width: 100%; // Ensures that the text fields take the full width
+  }
+`;
+
+export const StyledButton = styled(Button)`
+  && {
+    margin-top: 16px;
+  }
+`;
diff --git a/src/components/grids/DeckDisplay.js b/src/components/grids/DeckDisplay.js
new file mode 100644
index 0000000..ebafdd4
--- /dev/null
+++ b/src/components/grids/DeckDisplay.js
@@ -0,0 +1,99 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Paper, Button, Typography, Box } from '@mui/material';
+import { DeckContext } from '../../context/DeckContext/DeckContext';
+import DeckButtonList from './deckBuilderGrids/DeckButtonList';
+import CardsGrid from './deckBuilderGrids/CardsGrid';
+import DeckEditPanel from '../other/InputComponents/DeckEditPanel';
+import { useMode } from '../../context/hooks/colormode';
+
+const DeckDisplay = ({ userDecks = [] }) => {
+  const { theme } = useMode();
+  const { setSelectedDeck, selectedDeck, updateAndSyncDeck } =
+    useContext(DeckContext);
+  const [selectedCards, setSelectedCards] = useState([]);
+  const [showAllDecks, setShowAllDecks] = useState(false);
+
+  useEffect(() => {
+    setSelectedCards(selectedDeck?.cards?.slice(0, 30) || []);
+  }, [selectedDeck]);
+
+  const handleSelectDeck = (deckId) => {
+    const foundDeck = userDecks.find((deck) => deck?._id === deckId);
+    if (foundDeck) {
+      setSelectedDeck(foundDeck);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        padding: theme.spacing(3),
+        backgroundColor: theme.palette.background.default,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        margin: 'auto', // Centering the form
+      }}
+    >
+      <Paper
+        sx={{
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: theme.shadows[4],
+          backgroundColor: theme.palette.background.paper,
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{
+            fontWeight: 'bold',
+            color: theme.palette.text.primary,
+            marginBottom: theme.spacing(2),
+          }}
+        >
+          Your Decks
+        </Typography>
+        <Button
+          onClick={() => setShowAllDecks(!showAllDecks)}
+          sx={{
+            margin: theme.spacing(1),
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+            '&:hover': {
+              backgroundColor: theme.palette.primary.dark,
+            },
+          }}
+        >
+          {showAllDecks ? 'Hide Decks' : 'Show All Decks'}
+        </Button>
+        {showAllDecks && (
+          <DeckButtonList
+            userDecks={userDecks}
+            handleSelectDeck={handleSelectDeck}
+          />
+        )}
+        {selectedDeck && (
+          <DeckEditPanel
+            selectedDeck={selectedDeck}
+            onSave={updateAndSyncDeck}
+          />
+        )}
+        {selectedCards.length > 0 ? (
+          <CardsGrid selectedCards={selectedCards} />
+        ) : (
+          <Typography
+            sx={{
+              marginTop: theme.spacing(2),
+              textAlign: 'center',
+              color: theme.palette.text.secondary,
+              fontStyle: 'italic',
+            }}
+          >
+            No cards to display
+          </Typography>
+        )}
+      </Paper>
+    </Box>
+  );
+};
+
+export default DeckDisplay;
diff --git a/src/components/grids/StoreItem.jsx b/src/components/grids/StoreItem.jsx
new file mode 100644
index 0000000..862668e
--- /dev/null
+++ b/src/components/grids/StoreItem.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import GenericCard from '../cards/GenericCard';
+
+const StoreItem = ({ card, page, index, context }) => (
+  <Box sx={{ marginBottom: '1rem', flexGrow: '1' }}>
+    <GenericCard card={card} page={page} index={index} context={context} />
+  </Box>
+);
+
+export default StoreItem;
diff --git a/src/components/grids/collectionGrids/CardList.jsx b/src/components/grids/collectionGrids/CardList.jsx
index 41e0cb0..787831d 100644
--- a/src/components/grids/collectionGrids/CardList.jsx
+++ b/src/components/grids/collectionGrids/CardList.jsx
@@ -13,12 +13,18 @@ import {
   TablePagination,
   TableRow,
   Button,
+  TableHead,
+  useTheme,
+  ButtonGroup,
+  Divider,
 } from '@mui/material';
-import { useCollectionStore } from '../../../context/hooks/collection';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import TablePaginationActions from './TablePaginationActions';
+import PropTypes from 'prop-types';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+import { makeStyles, styled } from '@mui/styles';
+import { useMode } from '../../../context/hooks/colormode';
 import Logger from './Logger';
-
 // Instantiate logger outside of the component
 const cardLogger = new Logger([
   'Action',
@@ -27,19 +33,123 @@ const cardLogger = new Logger([
   'Total Price',
 ]);
 
+const StyledContainer = styled(Container)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  alignItems: 'center',
+  background: theme.palette.background.dark,
+  color: '#fff', // White text color
+  padding: 2,
+  borderRadius: 2,
+}));
+
+// const Paper = styled(MuiPaper)(({ theme }) => ({
+//   padding: theme.spacing(2),
+//   borderRadius: 2,
+//   width: '100%',
+//   color: '#fff',
+//   background: theme.palette.background.main,
+// }));
+
+const StyledButtonGroup = styled(ButtonGroup)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  borderRadius: '5px',
+  overflow: 'hidden',
+
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+}));
+
+// const TableContainer = styled(MuiTableContainer)(({ theme }) => ({
+//   background: theme.palette.background.secondary,
+// }));
+
+// const TableHead = styled(MuiTableHead)(({ theme }) => ({
+//   backgroundColor: '#555',
+//   color: '#fff',
+// }));
+
+// const TablePagination = styled(MuiTablePagination)(({ theme }) => ({
+//   color: '#fff',
+// }));
+const StyledTableHeader = styled(TableHead)(({ theme }) => ({
+  backgroundColor: '#555', // Darker shade for header
+  color: '#fff',
+}));
+// const TableFooter = styled(MuiTableFooter)(({ theme }) => ({
+//   color: '#fff',
+// }));
+
+// const TableBody = styled(MuiTableBody)(({ theme }) => ({
+//   color: '#fff',
+// }));
+
+// const Table = styled(MuiTable)(({ theme }) => ({
+//   color: '#fff',
+// }));
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  color: '#ddd', // Lighter text for better readability
+}));
+const Title = styled(TableCell)(({ theme }) => ({
+  color: '#4cceac', // Green color for the title
+}));
+
+// const Button = styled(MuiButton)(({ theme }) => ({
+//   margin: theme.spacing(1),
+//   color: theme.palette.primary.contrastText,
+//   backgroundColor: theme.palette.primary.main,
+//   '&:hover': {
+//     backgroundColor: theme.palette.primary.dark,
+//   },
+// }));
+
+// const ButtonGroup = styled(MuiButtonGroup)(({ theme }) => ({
+//   display: 'flex',
+//   width: '100%',
+//   borderRadius: '5px',
+//   overflow: 'hidden',
+//   flexDirection: 'column',
+//   justifyContent: 'space-between',
+//   alignItems: 'center',
+//   boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+// }));
+
+// const TablePaginationActions = styled(MuiTablePaginationActions)(
+//   ({ theme }) => ({
+//     color: '#fff',
+//   })
+// );
+
 const CardList = ({ selectedCards }) => {
+  const { theme } = useMode();
   const {
     getTotalCost,
     selectedCollection,
+    getTotalPrice,
+    totalCost,
+    // totalPrice,
     removeOneFromCollection,
     addOneToCollection,
   } = useCollectionStore();
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
   const chartContainerRef = useRef(null);
-
-  const emptyRows =
-    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - selectedCards.length) : 0;
+  const count = selectedCards?.length || 0;
+  const [chartDimensions, setChartDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const emptyRows = useMemo(() => {
+    // <-- Use useMemo for better performance
+    return page > 0
+      ? Math.max(0, (1 + page) * rowsPerPage - (selectedCards?.length || 0))
+      : 0;
+  }, [page, rowsPerPage, selectedCards]); // <-- Dependencies for useMemo
 
   const handleChangePage = (event, newPage) => {
     cardLogger.logCardAction('Change Page', {});
@@ -62,99 +172,152 @@ const CardList = ({ selectedCards }) => {
     cardLogger.logCardAction('Add Card', card);
   };
 
-  const chartDimensions = useMemo(
-    () =>
-      chartContainerRef.current?.getBoundingClientRect() || {
-        width: 400,
-        height: 600,
-      },
-    [chartContainerRef.current]
-  );
-
   return (
-    <Container
-      maxWidth="lg"
-      sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
-    >
+    <StyledContainer maxWidth="lg">
       <Paper
         elevation={8}
         ref={chartContainerRef}
-        sx={{ padding: 2, borderRadius: 2, width: '100%' }}
+        sx={{
+          // padding: theme.spacing(2),
+          // borderRadius: theme.shape.borderRadius,
+          padding: 2,
+          borderRadius: 2,
+          width: '100%',
+          color: '#fff', // White text color
+          background: theme.palette.background.main,
+        }}
       >
         <Typography
           variant="h4"
           gutterBottom
           sx={{
-            color: 'primary.main',
             fontWeight: 'bold',
-            paddingLeft: '8px',
+            paddingLeft: theme.spacing(1),
             display: 'flex',
             alignItems: 'center',
+            color: theme.palette.primary.main,
           }}
         >
-          <IconButton color="primary">
+          <IconButton
+            color="primary"
+            // className={classes.title}
+            sx={{
+              color: theme.palette.primary.main,
+              marginRight: '4px',
+            }}
+          >
             <AssessmentIcon />
           </IconButton>
           Cards in Portfolio
         </Typography>
         {/* Include the CronTrigger button */}
-        <TableContainer component={Paper} dimensions={chartDimensions}>
+        <TableContainer
+          component={Paper}
+          dimensions={chartDimensions}
+          sx={{ background: theme.palette.background.secondary }}
+        >
           <Table aria-label="custom pagination table">
+            <StyledTableHeader>
+              <TableRow>
+                <StyledTableCell>Name</StyledTableCell>
+                <StyledTableCell align="right">Price</StyledTableCell>
+                <StyledTableCell align="right">Total Price</StyledTableCell>
+                <StyledTableCell align="right">Quantity</StyledTableCell>
+                <StyledTableCell align="right">TCGPlayer Price</StyledTableCell>
+                <StyledTableCell align="right">Actions</StyledTableCell>
+              </TableRow>
+            </StyledTableHeader>
+
             <TableBody>
               {(rowsPerPage > 0
-                ? selectedCards.slice(
+                ? // eslint-disable-next-line no-unsafe-optional-chaining
+                  selectedCards?.slice(
                     page * rowsPerPage,
                     page * rowsPerPage + rowsPerPage
                   )
                 : selectedCards
-              ).map((card, index) => (
+              )?.map((card, index) => (
                 <TableRow key={card.id || index}>
-                  <TableCell component="th" scope="row">
+                  <StyledTableCell component="th" scope="row">
                     {card?.name}
-                  </TableCell>
-                  <TableCell align="right">{card?.price}</TableCell>
-                  <TableCell align="right">{card?.totalPrice}</TableCell>
-                  <TableCell align="right">{card?.quantity}</TableCell>
-                  <TableCell align="right">
+                  </StyledTableCell>
+                  <StyledTableCell>{card?.price}</StyledTableCell>
+                  <StyledTableCell align="right">
+                    {card?.totalPrice}
+                  </StyledTableCell>
+                  <StyledTableCell align="right">
+                    {card?.quantity}
+                  </StyledTableCell>
+                  <StyledTableCell align="right">
                     {card.card_prices &&
                     card.card_prices[0] &&
                     card.card_prices[0].tcgplayer_price
                       ? `$${card.card_prices[0].tcgplayer_price}`
                       : 'Price not available'}
-                  </TableCell>
-                  <TableCell align="right">
-                    <Button
-                      size="small"
-                      variant="contained"
-                      color="secondary"
-                      onClick={() => handleRemoveCard(card)}
-                      sx={{
-                        fontSize: '0.6rem',
-                        minWidth: 'inherit',
-                        padding: '2px 4px',
-                      }}
-                    >
-                      Remove
-                    </Button>
-                    <Button
-                      size="small"
-                      variant="contained"
-                      color="primary"
-                      onClick={() => handleAddCard(card)}
-                      sx={{
-                        fontSize: '0.6rem',
-                        minWidth: 'inherit',
-                        padding: '2px 4px',
-                      }}
-                    >
-                      Add
-                    </Button>
-                  </TableCell>
+                  </StyledTableCell>
+                  <StyledTableCell align="right">
+                    <StyledButtonGroup>
+                      <Button
+                        size="small"
+                        variant="contained"
+                        onClick={() => handleRemoveCard(card)}
+                        sx={{
+                          padding: '10px 20px',
+                          border: 'none',
+                          borderRadius: '5px',
+                          cursor: 'pointer',
+                          backgroundColor: theme.palette.error.main,
+                          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+                          width: '100%',
+                          hover: {
+                            backgroundColor: theme.palette.error.dark,
+                          },
+                          fontSize: '0.6rem',
+                          minWidth: 'inherit',
+                          color: 'white',
+                          fontWeight: 'bold',
+                          // fontSize: '14px',
+                          letterSpacing: '1px',
+                          outline: 'none',
+                        }}
+                      >
+                        Remove
+                      </Button>
+                      <Divider orientation="horizontal" flexItem />
+                      <Button
+                        size="small"
+                        // className={classes.successButton}
+                        variant="contained"
+                        onClick={() => handleAddCard(card)}
+                        sx={{
+                          border: 'none',
+                          borderRadius: '5px',
+                          cursor: 'pointer',
+                          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+                          width: '100%',
+                          backgroundColor: theme.palette.success.main,
+                          hover: {
+                            backgroundColor: theme.palette.success.dark,
+                          },
+                          fontSize: '0.6rem',
+                          minWidth: 'inherit',
+                          padding: '2px 4px',
+                          color: 'black',
+                          fontWeight: 'bold',
+                          letterSpacing: '1px',
+                          outline: 'none',
+                        }}
+                      >
+                        Add
+                      </Button>
+                    </StyledButtonGroup>
+                  </StyledTableCell>
                 </TableRow>
               ))}
+
               {emptyRows > 0 && (
                 <TableRow style={{ height: 53 * emptyRows }}>
-                  <TableCell colSpan={3} />
+                  <StyledTableCell colSpan={3} />
                 </TableRow>
               )}
             </TableBody>
@@ -163,7 +326,7 @@ const CardList = ({ selectedCards }) => {
                 <TablePagination
                   rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                   colSpan={3}
-                  count={selectedCards.length}
+                  count={count}
                   rowsPerPage={rowsPerPage}
                   page={page}
                   SelectProps={{
@@ -184,10 +347,12 @@ const CardList = ({ selectedCards }) => {
           mt={2}
           sx={{ width: '100%' }}
         >
-          <Typography variant="h5">{`Total: $${selectedCollection?.totalPrice}`}</Typography>
+          <Typography variant="h5" sx={{ color: '#fff' }}>
+            {`Total: $${totalCost}`}
+          </Typography>
         </Box>
       </Paper>
-    </Container>
+    </StyledContainer>
   );
 };
 
diff --git a/src/components/grids/collectionGrids/SelectCollectionList.jsx b/src/components/grids/collectionGrids/SelectCollectionList.jsx
index d966b4a..7b5de9b 100644
--- a/src/components/grids/collectionGrids/SelectCollectionList.jsx
+++ b/src/components/grids/collectionGrids/SelectCollectionList.jsx
@@ -6,11 +6,14 @@ import {
   ListItemText,
   Divider,
   Button,
+  Grid,
+  Typography,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useCookies } from 'react-cookie';
 import PropTypes from 'prop-types';
-import { useCollectionStore } from '../../../context/hooks/collection';
+import LoadingIndicator from '../../reusable/indicators/LoadingIndicator';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
 
 const useStyles = makeStyles((theme) => ({
   listItem: {
@@ -28,6 +31,12 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'left',
     marginLeft: theme.spacing(3),
   },
+  loadingContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+  },
   editButton: {
     marginLeft: theme.spacing(2),
     backgroundColor: theme.palette.primary.main,
@@ -36,6 +45,16 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.primary.dark,
     },
   },
+  gridItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    padding: theme.spacing(1),
+  },
+  gridItemText: {
+    fontWeight: 'bold',
+  },
 }));
 
 const SelectCollectionList = ({
@@ -47,6 +66,7 @@ const SelectCollectionList = ({
   const { allCollections, setSelectedCollection, selectedCollection } =
     useCollectionStore();
   const [cookies] = useCookies(['userCookie']);
+  const [isLoading, setIsLoading] = useState(false);
   // const userId = cookies.userCookie?.id;
   // const [collections, setCollections] = useState([]);
 
@@ -75,38 +95,64 @@ const SelectCollectionList = ({
     [openDialog, setSelectedCollection]
   );
 
-  // console.log(
-  //   'SELECTED COLLECTION (SELECT COLLECTIN LIST):',
-  //   selectedCollection
-  // );
-  // The rendering part of the component
   return (
-    <List className={classes.list}>
-      {allCollections
-        ?.filter((collection) => !!collection?._id)
-        .map((collection) => (
-          <React.Fragment key={collection?._id}>
-            <ListItem className={classes.listItem}>
-              <ButtonBase
-                sx={{ width: '100%' }}
-                onClick={() => handleSelect(collection?._id)}
-              >
-                <ListItemText
-                  primary={collection?.name}
-                  className={classes.listItemText}
-                />
-              </ButtonBase>
-              <Button
-                className={classes.editButton}
-                onClick={() => handleOpenDialog(collection)} // Pass the collection object here
-              >
-                Edit
-              </Button>
-            </ListItem>
-            <Divider />
-          </React.Fragment>
-        ))}
-    </List>
+    <>
+      {isLoading ? (
+        <LoadingIndicator />
+      ) : (
+        <List className={classes.list}>
+          {allCollections
+            ?.filter((collection) => !!collection?._id)
+            .map((collection) => (
+              <React.Fragment key={collection?._id}>
+                <ListItem className={classes.listItem}>
+                  <ButtonBase
+                    sx={{ width: '100%' }}
+                    onClick={() => handleSelect(collection?._id)}
+                  >
+                    <Grid container>
+                      <Grid item xs={3} className={classes.gridItem}>
+                        <Typography className={classes.gridItemText}>
+                          Name:
+                        </Typography>
+                        <Typography>{collection?.name}</Typography>
+                      </Grid>
+                      <Grid item xs={3} className={classes.gridItem}>
+                        <Typography className={classes.gridItemText}>
+                          Value:
+                        </Typography>
+                        {/* Replace with actual value */}
+                        <Typography>${collection?.currentValue}</Typography>
+                      </Grid>
+                      <Grid item xs={3} className={classes.gridItem}>
+                        <Typography className={classes.gridItemText}>
+                          Performance:
+                        </Typography>
+                        {/* Replace with actual data */}
+                        <Typography>{collection?.performance} %</Typography>
+                      </Grid>
+                      <Grid item xs={3} className={classes.gridItem}>
+                        <Typography className={classes.gridItemText}>
+                          Cards:
+                        </Typography>
+                        {/* Replace with actual count */}
+                        <Typography>{collection?.numberOfCards}</Typography>
+                      </Grid>
+                    </Grid>
+                  </ButtonBase>
+                  <Button
+                    className={classes.editButton}
+                    onClick={() => handleOpenDialog(collection)} // Pass the collection object here
+                  >
+                    Edit
+                  </Button>
+                </ListItem>
+                <Divider />
+              </React.Fragment>
+            ))}
+        </List>
+      )}
+    </>
   );
 };
 
diff --git a/src/components/grids/collectionGrids/TablePaginationActions.jsx b/src/components/grids/collectionGrids/TablePaginationActions.jsx
index a8d7193..9477839 100644
--- a/src/components/grids/collectionGrids/TablePaginationActions.jsx
+++ b/src/components/grids/collectionGrids/TablePaginationActions.jsx
@@ -7,9 +7,10 @@ import FirstPageIcon from '@mui/icons-material/FirstPage';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import LastPageIcon from '@mui/icons-material/LastPage';
+import { useMode } from '../../../context/hooks/colormode';
 
 const TablePaginationActions = (props) => {
-  const theme = useTheme();
+  const { theme } = useMode();
   const { count, page, rowsPerPage, onPageChange } = props;
 
   const handleFirstPageButtonClick = (event) => {
diff --git a/src/components/grids/deckBuilderGrids/CardsGrid.js b/src/components/grids/deckBuilderGrids/CardsGrid.js
index cb460f1..40b2bd9 100644
--- a/src/components/grids/deckBuilderGrids/CardsGrid.js
+++ b/src/components/grids/deckBuilderGrids/CardsGrid.js
@@ -1,47 +1,8 @@
 import React from 'react';
 import { Grid } from '@mui/material';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import DeckCard from '../../cleanUp/DeckCard';
 import GenericCard from '../../cards/GenericCard';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) => ({
-  card: {
-    position: 'relative', // Add this
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-    flexGrow: 1,
-  },
-  media: {
-    width: '100%',
-    objectFit: 'contain',
-  },
-  content: {
-    flex: '1 1 auto',
-    overflow: 'hidden',
-    // padding: theme.spacing(1),
-  },
-  text: {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-  actionButtons: {
-    backgroundColor: '#f5f5f5',
-    // padding: theme.spacing(1),
-    margin: theme.spacing(1, 0),
-    borderRadius: '4px',
-    overflow: 'auto',
-  },
-  dialog: {
-    position: 'absolute', // Add this
-    top: 0,
-    right: 0,
-    zIndex: 1000, // High z-index value
-  },
-}));
+import { useDeckStyles } from '../gridStyles';
 
 const CardsGrid = ({ selectedCards }) => {
   const flattenSelectedCards = selectedCards.reduce((acc, card) => {
@@ -54,7 +15,7 @@ const CardsGrid = ({ selectedCards }) => {
     return [...acc, ...filledArray];
   }, []);
 
-  const classes = useStyles();
+  const classes = useDeckStyles();
 
   return (
     <Grid container spacing={2}>
@@ -66,11 +27,6 @@ const CardsGrid = ({ selectedCards }) => {
             classNames="card"
           >
             <Grid item xs={6} sm={4} md={3} lg={3}>
-              {/* <DeckCard
-                card={card}
-                cardInfo={card}
-                className={classes?.deckCard}
-              /> */}
               <GenericCard
                 card={card}
                 cardInfo={card}
diff --git a/src/components/grids/deckBuilderGrids/DeckButtonList.js b/src/components/grids/deckBuilderGrids/DeckButtonList.js
index 0a87a9b..02a29c1 100644
--- a/src/components/grids/deckBuilderGrids/DeckButtonList.js
+++ b/src/components/grids/deckBuilderGrids/DeckButtonList.js
@@ -1,60 +1,16 @@
 import React, { useContext } from 'react';
 import { Grid, Button, Typography } from '@mui/material';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-import { makeStyles } from '@mui/styles';
 import { DeckContext } from '../../../context/DeckContext/DeckContext';
-
-const useDeckButtonListStyles = makeStyles((theme) => ({
-  grid: {
-    marginBottom: theme?.spacing(2),
-  },
-  deckButton: {
-    width: '100%',
-    padding: '6px 0',
-    borderRadius: '5px',
-    transition: '0.3s',
-    '&:hover': {
-      backgroundColor: 'rgba(0, 0, 0, 0.04)',
-    },
-    margin: theme?.spacing(1),
-    [theme?.breakpoints.down('xs')]: {
-      fontSize: '0.7rem',
-      padding: '5px 8px',
-    },
-    [theme?.breakpoints.up('sm')]: {
-      fontSize: '0.8rem',
-    },
-    [theme?.breakpoints.up('md')]: {
-      fontSize: '1rem',
-    },
-  },
-  icon: {
-    fontSize: '16px',
-  },
-  text: {
-    fontSize: '12px',
-    fontWeight: '600',
-  },
-}));
-const useStyles = makeStyles((theme) => ({
-  root: {
-    [theme?.breakpoints.up('md')]: {
-      backgroundColor: 'blue',
-    },
-    [theme?.breakpoints.down('sm')]: {
-      backgroundColor: 'red',
-    },
-    [theme?.breakpoints.between('sm', 'md')]: {
-      backgroundColor: 'green',
-    },
-  },
-}));
+import { useDeckButtonListStyles } from '../gridStyles';
 
 const DeckButtonList = ({ userDecks, handleSelectDeck }) => {
   const classes = useDeckButtonListStyles();
   const { selectedDeck } = useContext(DeckContext);
   // console.log('SELECTED DECK:', selectedDeck.name);
   // console.log('userDecks', userDecks);
+  console.log('userDecks', userDecks);
+  console.log('selectedDeck', selectedDeck);
   return (
     <Grid container spacing={1} className={classes.grid}>
       {userDecks?.map((deck) => (
diff --git a/src/components/grids/gridStyles.jsx b/src/components/grids/gridStyles.jsx
new file mode 100644
index 0000000..4c04821
--- /dev/null
+++ b/src/components/grids/gridStyles.jsx
@@ -0,0 +1,120 @@
+import { makeStyles } from '@mui/styles';
+export const useStyles = makeStyles((theme) => ({
+  cardContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    maxHeight: '300px', // or any desired max height
+    minHeight: '300px', // make sure it matches max height
+    overflow: 'hidden', // ensures content doesn't spill out
+  },
+  card: {
+    width: '100%',
+    // transform: 'scale(0.9)', // scales down to 90% of the original size
+  },
+  loading: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+  },
+  root: { backgroundColor: '#f4f6f8' },
+  paper: {
+    padding: theme.spacing(3),
+    borderRadius: '10px',
+    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+  },
+  deckEditPanel: {
+    padding: theme.spacing(2),
+    backgroundColor: '#ffffff',
+    border: '1px solid #ddd',
+    borderRadius: theme.spacing(1),
+    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+    transition: 'opacity 0.5s ease-in-out',
+  },
+  noCardsText: {
+    color: '#666',
+    fontStyle: 'italic',
+  },
+}));
+
+export const useDeckStyles = makeStyles((theme) => ({
+  card: {
+    position: 'relative', // Add this
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    flexGrow: 1,
+  },
+  media: {
+    width: '100%',
+    objectFit: 'contain',
+  },
+  content: {
+    flex: '1 1 auto',
+    overflow: 'hidden',
+    // padding: theme.spacing(1),
+  },
+  text: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+  actionButtons: {
+    backgroundColor: '#f5f5f5',
+    // padding: theme.spacing(1),
+    margin: theme.spacing(1, 0),
+    borderRadius: '4px',
+    overflow: 'auto',
+  },
+  dialog: {
+    position: 'absolute', // Add this
+    top: 0,
+    right: 0,
+    zIndex: 1000, // High z-index value
+  },
+}));
+
+export const useDeckButtonListStyles = makeStyles((theme) => ({
+  grid: {
+    marginBottom: theme?.spacing(2),
+  },
+  deckButton: {
+    width: '100%',
+    padding: '6px 0',
+    borderRadius: '5px',
+    transition: '0.3s',
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    },
+    margin: theme?.spacing(1),
+    [theme?.breakpoints?.down('xs')]: {
+      fontSize: '0.7rem',
+      padding: '5px 8px',
+    },
+    [theme?.breakpoints?.up('sm')]: {
+      fontSize: '0.8rem',
+    },
+    [theme?.breakpoints?.up('md')]: {
+      fontSize: '1rem',
+    },
+  },
+  icon: {
+    fontSize: '16px',
+  },
+  text: {
+    fontSize: '12px',
+    fontWeight: '600',
+  },
+  root: {
+    [theme?.breakpoints?.up('md')]: {
+      backgroundColor: 'blue',
+    },
+    [theme?.breakpoints?.down('sm')]: {
+      backgroundColor: 'red',
+    },
+    [theme?.breakpoints?.between('sm', 'md')]: {
+      backgroundColor: 'green',
+    },
+  },
+}));
diff --git a/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx b/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
index 316ece7..4cf85d7 100644
--- a/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
+++ b/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
@@ -1,162 +1,64 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Box, Grid, useMediaQuery, useTheme } from '@mui/material';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Container, Grid, useMediaQuery } from '@mui/material';
 import GenericCard from '../../cards/GenericCard';
-import { makeStyles } from '@mui/styles';
-import CustomPopover from '../../cards/CustomPopover';
-import LoadingIndicator from '../../indicators/LoadingIndicator';
+import { useMode } from '../../../context/hooks/colormode';
+import { styled } from '@mui/system';
+import LoadingIndicator from '../../reusable/indicators/LoadingIndicator';
 
-const useStyles = makeStyles((theme) => ({
-  cardContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    maxHeight: '300px', // or any desired max height
-    minHeight: '300px', // make sure it matches max height
-    overflow: 'hidden', // ensures content doesn't spill out
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  // margin: theme.spacing(1),
+  [theme.breakpoints.down('sm')]: {
+    margin: theme.spacing(0.5),
   },
-  card: {
-    width: '100%',
-    // transform: 'scale(0.9)', // scales down to 90% of the original size
+  [theme.breakpoints.up('md')]: {
+    margin: theme.spacing(1.5),
   },
-  loading: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100vh',
+  [theme.breakpoints.up('lg')]: {
+    margin: theme.spacing(2),
+  },
+}));
+
+const StyledGridItem = styled(Grid)(({ theme }) => ({
+  // padding: theme.spacing(2),
+  [theme.breakpoints.down('sm')]: {
+    // padding: theme.spacing(1),
+  },
+  [theme.breakpoints.up('md')]: {
+    // padding: theme.spacing(2),
+  },
+  [theme.breakpoints.up('lg')]: {
+    // padding: theme.spacing(2),
   },
 }));
 
 const DeckSearchCardGrid = ({ cards, userDecks }) => {
-  const classes = useStyles();
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme?.breakpoints?.down('sm'));
-  const [hoveredCard, setHoveredCard] = useState(null);
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const { theme } = useMode();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const [isLoading, setIsLoading] = useState(true);
 
-  const cardRef = useRef(null);
-
   useEffect(() => {
-    // Mock fetching data or some asynchronous action
-    // Remove this if you have actual data fetching logic
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 1000);
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+    return () => clearTimeout(timer);
   }, []);
 
+  const uniqueCards = useMemo(
+    () => new Map(cards.map((card) => [card.id, card])).values(),
+    [cards]
+  );
+
   if (isLoading) {
-    return (
-      <Box className={classes.loading}>
-        <LoadingIndicator
-          // className={classes.loading}
-          size={100}
-          thickness={4}
-        />
-      </Box>
-    );
+    return <LoadingIndicator />;
   }
 
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Grid
-        container
-        spacing={{ xs: 2, md: 1 }}
-        columns={{ xs: 4, sm: 8, md: 12 }}
-      >
-        {cards?.map((card, i) => (
-          <Grid key={i} item xs={4} sm={4} md={4} marginTop={1}>
-            <div className={classes.cardContainer}>
-              <GenericCard
-                card={card}
-                userDecks={userDecks}
-                context={'Deck'}
-                className={classes.card}
-                cardRef={cardRef}
-                hoveredCard={hoveredCard}
-                setHoveredCard={setHoveredCard}
-                isPopoverOpen={isPopoverOpen}
-                setIsPopoverOpen={setIsPopoverOpen}
-              />
-            </div>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
+    <StyledGrid container spacing={isSmallScreen ? 1 : 2}>
+      {Array.from(uniqueCards).map((card) => (
+        <StyledGridItem item xs={12} sm={6} md={4} lg={4} key={card.id}>
+          <GenericCard card={card} userDecks={userDecks} context={'Deck'} />
+        </StyledGridItem>
+      ))}
+    </StyledGrid>
   );
 };
 
 export default DeckSearchCardGrid;
-
-// const DeckSearchCardGrid = ({ cards, userDecks }) => {
-//   const theme = useTheme();
-//   const isSmallScreen = useMediaQuery(theme?.breakpoints?.down('sm'));
-//   const classes = useStyles();
-//   // const [anchorEl, setAnchorEl] = useState(null);
-//   const [isHovering, setHovering] = useState(false);
-//   const cardRef = useRef(null);
-//   const [hoveredCard, setHoveredCard] = useState(null);
-//   const [anchorEl, setAnchorEl] = React.useState(null);
-
-//   const handlePopoverOpen = (event) => {
-//     setAnchorEl(event.currentTarget);
-//   };
-
-//   const handlePopoverClose = () => {
-//     setAnchorEl(null);
-//   };
-//   // const handlePopoverOpen = (card) => {
-//   //   setHoveredCard(card);
-//   // };
-
-//   // const handlePopoverClose = () => {
-//   //   setHoveredCard(null);
-//   // };
-
-//   const open = Boolean(anchorEl);
-
-//   return (
-//     <Grid container spacing={1}>
-//       {cards?.map((card, i) => (
-//         <Grid
-//           key={i}
-//           item
-//           xs={isSmallScreen ? 6 : 4}
-//           marginTop={1}
-//           // onMouseEnter={handleMouseEnter}
-//           // onMouseLeave={handleMouseLeave}
-//         >
-//           {/* <CustomPopover
-//             card={card}
-//             // anchorEl={hoveredCard === card ? cardRef.current : null}
-//             // setAnchorEl={setHoveredCard}
-//             open={open}
-//             anchorEl={anchorEl}
-//             handlePopoverClose={handlePopoverClose}
-//             // handleMouseEnter={() => handlePopoverOpen(card)}
-//             // handleMouseLeave={handlePopoverClose} */}
-//           {/* > */}
-//           <div className={classes.cardContainer}>
-//             <GenericCard
-//               card={card}
-//               item
-//               cardInfo={card}
-//               userDecks={userDecks}
-//               context={'Deck'}
-//               className={classes.card}
-//               cardRef={cardRef}
-//               open={open}
-//               anchorEl={anchorEl}
-//               handlePopoverClose={handlePopoverClose}
-//               // handlePopoverOpen={() => handlePopoverOpen(card)}
-//               handlePopoverOpen={handlePopoverOpen}
-//               isHovering={hoveredCard === card}
-//               setHovering={setHoveredCard}
-//             />
-//           </div>
-//           {/* </CustomPopover> */}
-//         </Grid>
-//       ))}
-//     </Grid>
-//   );
-// };
-
-// export default DeckSearchCardGrid;
diff --git a/src/components/grids/storeSearchResultsGrid/ProductGrid.js b/src/components/grids/storeSearchResultsGrid/ProductGrid.js
index c7d67a4..2e2ab0d 100644
--- a/src/components/grids/storeSearchResultsGrid/ProductGrid.js
+++ b/src/components/grids/storeSearchResultsGrid/ProductGrid.js
@@ -1,27 +1,13 @@
 import React, { useMemo } from 'react';
 import { Grid } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import ProductCard from '../../cleanUp/ProductCard';
-import { useCardStore } from '../../../context/CardContext/CardStore';
 import GenericCard from '../../cards/GenericCard';
-
-const useStyles = makeStyles((theme) => ({
-  grid: {
-    maxWidth: '90%',
-    justifyContent: 'center',
-    margin: '0 auto',
-  },
-  gridItem: {
-    padding: theme.spacing(2),
-    height: 'auto', // Set a specific value if required
-    width: '100%',
-  },
-}));
+import { useCardStore } from '../../../context/CardContext/CardStore';
+import StoreItem from '../StoreItem';
+import { useCartStore } from '../../../context/CartContext/CartContext';
 
 const ProductGrid = () => {
   const { searchData } = useCardStore();
-
-  const classes = useStyles();
+  const { addOneToCart, removeOneFromCart } = useCartStore();
 
   const isCardDataValid = searchData && Array.isArray(searchData);
 
@@ -30,8 +16,28 @@ const ProductGrid = () => {
     [searchData]
   );
 
+  const handleModifyItemInCart = async (cardId, operation) => {
+    try {
+      if (operation === 'add') {
+        addOneToCart(cardId);
+      } else if (operation === 'remove') {
+        removeOneFromCart(cardId);
+      }
+    } catch (error) {
+      console.error('Failed to adjust quantity in cart: ', error);
+    }
+  };
+
   return (
-    <Grid container spacing={3} className={classes.grid}>
+    <Grid
+      container
+      spacing={3}
+      sx={{
+        maxWidth: '90%',
+        justifyContent: 'center',
+        margin: '0 auto',
+      }}
+    >
       {isCardDataValid &&
         limitedCardsToRender.map((card, index) => (
           <Grid
@@ -41,9 +47,22 @@ const ProductGrid = () => {
             md={4}
             lg={3}
             key={`${card.id}-${index}`}
-            className={classes.gridItem}
+            sx={{
+              padding: (theme) => theme.spacing(2),
+              height: 'auto', // Set a specific value if required
+              width: '100%',
+            }}
           >
-            <GenericCard card={card} context="Cart" page="storepage" />
+            {/* <GenericCard card={card} context="Cart" page="storepage" /> */}
+            <StoreItem
+              card={card}
+              context={'Cart'}
+              page={'storepage'}
+              // onAddToCart={(cardId) => handleAddToCart(cardId)}
+              onQuantityChange={(cardId, operation) =>
+                handleModifyItemInCart(cardId, operation)
+              }
+            />
           </Grid>
         ))}
     </Grid>
diff --git a/src/components/headings/PortfolioHeader.jsx b/src/components/headings/PortfolioHeader.jsx
deleted file mode 100644
index cdbdc5a..0000000
--- a/src/components/headings/PortfolioHeader.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// components/PortfolioHeader.js
-
-import React from 'react';
-import { AlertTitle, Box, Typography } from '@mui/material';
-import Alert from '@mui/material/Alert';
-import { useCollectionStore } from '../../context/hooks/collection';
-import HeaderTitle from '../reusable/HeaderTitle';
-
-export const PortfolioHeader = ({ error }) => {
-  const { allCollections, selectedCollection } = useCollectionStore();
-  return (
-    <Box flexGrow={0}>
-      {/* <HeaderTitle title="Collection Portfolio" /> */}
-      {error && (
-        <Alert severity="error" sx={{ mt: 2 }}>
-          <AlertTitle>Error</AlertTitle>
-          This is an error alert — <strong> {error}</strong>
-        </Alert>
-      )}
-    </Box>
-  );
-};
-
-export default PortfolioHeader;
diff --git a/src/components/headings/header/Header.js b/src/components/headings/header/Header.js
index 717d265..91c1fec 100644
--- a/src/components/headings/header/Header.js
+++ b/src/components/headings/header/Header.js
@@ -1,135 +1,74 @@
-import React, { useState, useEffect } from 'react';
-import { useAuthContext } from '../../../context/hooks/auth';
+import React, { useEffect, useState } from 'react';
 import TopBar from '../navigation/TopBar';
 import SideBar from '../navigation/SideBar';
 import { useSidebarContext } from '../../../context/SideBarProvider';
-import {
-  Home as HomeIcon,
-  Store as StoreIcon,
-  ShoppingCart as CartIcon,
-  Assessment as AssessmentIcon,
-  Deck as DeckOfCardsIcon,
-  Person as LoginIcon,
-} from '@mui/icons-material';
-import { Box } from '@mui/system';
+import { useAuthContext } from '../../../context/hooks/auth';
+import { getMenuItemsData } from './menuItemsData';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import LoginDialog from '../../dialogs/LoginDialog';
 
 const Header = () => {
-  const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 598);
-  const {
-    isOpen,
-    toggleSidebar,
-    sidebarBackgroundColor,
-    sidebarImage,
-    setIsOpen,
-  } = useSidebarContext();
-  const menuItemsData = [
-    {
-      title: 'Store',
-      items: [
-        {
-          name: 'Home',
-          index: 0,
-          icon: <HomeIcon />,
-          to: '/home',
-          requiresLogin: false,
-        },
-        {
-          name: 'Store',
-          index: 1,
-          icon: <StoreIcon />,
-          to: '/store',
-          requiresLogin: true,
-        },
-        {
-          name: 'Deck Builder',
-          index: 2,
-          icon: <DeckOfCardsIcon />,
-          to: '/deckbuilder',
-          requiresLogin: true,
-        },
-        {
-          name: 'Cart',
-          index: 3,
-          icon: <CartIcon />,
-          to: '/cart',
-          requiresLogin: true,
-        },
-        {
-          name: 'Collection',
-          index: 4,
-          icon: <AssessmentIcon />,
-          to: '/collection',
-          requiresLogin: true,
-        },
-        {
-          name: 'Login',
-          index: 5,
-          icon: <LoginIcon />,
-          to: '/login',
-          requiresLogin: false,
-        },
-      ],
-    },
-  ];
-  const handleDrawerOpen = () => {
-    if (isMobileView && !isOpen) {
-      setIsOpen(true);
-    }
-  };
+  const { isOpen, toggleSidebar, setIsOpen } = useSidebarContext();
+  const { isLoggedIn } = useAuthContext();
+  const [isLoginDialogOpen, setLoginDialogOpen] = useState(false);
 
-  const handleDrawerClose = () => {
-    setIsOpen(false);
-  };
+  const theme = useTheme();
+  const isMobileView = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const updateView = () => {
-    setIsMobileView(window.innerWidth <= 598);
-  };
+  const filteredMenuItems = getMenuItemsData(isLoggedIn).filter(
+    (item) => !item.requiresLogin || isLoggedIn
+  );
 
+  // Combine useEffect hooks to a single one
   useEffect(() => {
-    window.addEventListener('resize', updateView);
-    if (!isMobileView && isOpen) {
-      handleDrawerClose();
-    }
-    if (!isMobileView && !isOpen) {
-      handleDrawerClose();
-    }
-    if (isMobileView && isOpen) {
-      handleDrawerOpen();
-    }
-    if (isMobileView && !isOpen) {
-      handleDrawerClose();
+    if (isMobileView) {
+      setIsOpen(false);
     }
-    return () => window.removeEventListener('resize', updateView);
-  }, [isMobileView]);
+  }, [isMobileView, setIsOpen]);
+
+  const handleDrawerState = () => toggleSidebar();
+
+  const handleLoginDialogState = () => setLoginDialogOpen(!isLoginDialogOpen);
+
+  const handleLoginDialogClose = () => setLoginDialogOpen(false);
+
+  const handleLoginSuccess = () => setLoginDialogOpen(false); // Implement additional logic if required
 
   return (
     <>
       <TopBar
-        handleDrawerOpen={handleDrawerOpen}
-        handleDrawerClose={handleDrawerClose}
+        handleDrawerState={handleDrawerState}
+        handleLoginDialogState={handleLoginDialogState}
         isOpen={isOpen}
         isMobileView={isMobileView}
-        menuSections={isMobileView ? [] : menuItemsData} // Adjust menu items based on view
+        menuSections={filteredMenuItems}
       />
-      {isMobileView && ( // Only render SideBar in mobile view
+      {isMobileView && (
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
             textDecoration: 'none',
             marginLeft: '1em',
+            backgroundColor: theme.palette.primary.main,
           }}
         >
           <SideBar
-            handleDrawerClose={handleDrawerClose}
+            handleDrawerState={handleDrawerState}
+            handleLoginDialogState={handleLoginDialogState}
             isOpen={isOpen}
             isMobileView={isMobileView}
-            toggleSidebar={toggleSidebar}
-            menuSections={menuItemsData}
+            menuSections={filteredMenuItems}
           />
         </Box>
       )}
+      <LoginDialog
+        open={isLoginDialogOpen}
+        onClose={handleLoginDialogClose}
+        onLogin={handleLoginSuccess}
+      />
     </>
   );
 };
+
 export default Header;
diff --git a/src/components/headings/header/MenuItemComponent.jsx b/src/components/headings/header/MenuItemComponent.jsx
new file mode 100644
index 0000000..71d87b3
--- /dev/null
+++ b/src/components/headings/header/MenuItemComponent.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  styled,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+// import { Link } from 'react-router-dom';
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover,
+  },
+  '& .MuiListItemIcon-root': {
+    minWidth: '35px',
+  },
+  '& .MuiTypography-root': {
+    fontSize: '1.2em',
+    fontWeight: 500,
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: '1.5em',
+    marginRight: theme.spacing(1),
+  },
+}));
+
+const MenuItemComponent = ({ item, onClick }) => {
+  const navigate = useNavigate();
+  const { icon, to, name } = item;
+
+  const handleClick = () => {
+    navigate(to); // Navigate to the desired path
+    onClick(); // Perform any additional onClick logic (like closing the drawer)
+  };
+
+  return (
+    <StyledMenuItem onClick={handleClick}>
+      <ListItemIcon>{icon}</ListItemIcon>
+      <ListItemText
+        disableTypography
+        primary={<Typography variant="body1">{name}</Typography>}
+      />
+    </StyledMenuItem>
+  );
+};
+
+export default MenuItemComponent;
diff --git a/src/components/headings/header/menuItemsData.jsx b/src/components/headings/header/menuItemsData.jsx
new file mode 100644
index 0000000..77ce330
--- /dev/null
+++ b/src/components/headings/header/menuItemsData.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Home as HomeIcon,
+  Store as StoreIcon,
+  ShoppingCart as CartIcon,
+  Assessment as AssessmentIcon,
+  Deck as DeckOfCardsIcon,
+} from '@mui/icons-material';
+
+export const getMenuItemsData = (isLoggedIn) => {
+  // Error handling: Check if 'isLoggedIn' is a boolean
+  if (typeof isLoggedIn !== 'boolean') {
+    console.error("Invalid argument: 'isLoggedIn' should be a boolean");
+    return [];
+  }
+
+  try {
+    const baseMenuItems = [
+      { name: 'Home', icon: <HomeIcon />, to: '/home', requiresLogin: false },
+      {
+        name: 'Store',
+        icon: <StoreIcon />,
+        to: '/store',
+        requiresLogin: !isLoggedIn,
+      },
+      {
+        name: 'Deck Builder',
+        icon: <DeckOfCardsIcon />,
+        to: '/deckbuilder',
+        requiresLogin: false,
+      },
+      {
+        name: 'Cart',
+        icon: <CartIcon />,
+        to: '/cart',
+        requiresLogin: !isLoggedIn,
+      },
+      {
+        name: 'Collection',
+        icon: <AssessmentIcon />,
+        to: '/collection',
+        requiresLogin: !isLoggedIn,
+      },
+    ];
+
+    // If the user is logged in, set all requiresLogin fields to false
+    if (isLoggedIn) {
+      // console.log('isLoggedIn is true', isLoggedIn);
+      return baseMenuItems.map((item) => ({
+        ...item,
+        requiresLogin: false,
+      }));
+    }
+
+    return baseMenuItems;
+  } catch (error) {
+    console.error('An error occurred in getMenuItemsData:', error);
+    return [];
+  }
+};
+
+export default getMenuItemsData;
diff --git a/src/components/headings/navigation/MenuItems.js b/src/components/headings/navigation/MenuItems.js
deleted file mode 100644
index 4a1c397..0000000
--- a/src/components/headings/navigation/MenuItems.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  MenuItem,
-  Box,
-  Typography,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogActions,
-  Button,
-  List,
-  Divider,
-  ListItemIcon,
-  useTheme,
-} from '@mui/material';
-import {
-  Home as HomeIcon,
-  Store as StoreIcon,
-  ShoppingCart as CartIcon,
-  Logout as LogoutIcon,
-  Assessment as AssessmentIcon,
-  Deck as DeckOfCardsIcon,
-  Person as LoginIcon,
-} from '@mui/icons-material';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { styled } from '@mui/system';
-import LoginDialog from '../../dialogs/LoginDialog';
-import { useAuthContext } from '../../../context/hooks/auth';
-import { AuthContext } from '../../../context/Auth/authContext';
-import { StyledListItem, StyledTypography } from './styled';
-
-const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
-  '& .MuiTypography-root': {
-    fontSize: '1.2em',
-    fontWeight: 500,
-  },
-  '& .MuiSvgIcon-root': {
-    marginRight: theme.spacing(1),
-  },
-}));
-
-const StyledLink = styled(Link)(({ theme }) => ({
-  color: '#000',
-  textDecoration: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  height: '100%',
-}));
-
-const MenuBox = styled(Box)(({ theme }) => ({
-  padding: (props) => (props.isLoggedIn ? '1em' : '2em'),
-  display: 'flex',
-  flexDirection: 'column',
-  [theme.breakpoints.up('sm')]: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-}));
-
-const menuItemsData = [
-  { name: 'Home', icon: <HomeIcon />, to: '/home', requiresLogin: false },
-  { name: 'Store', icon: <StoreIcon />, to: '/store', requiresLogin: true },
-  {
-    name: 'Deck Builder',
-    icon: <DeckOfCardsIcon />,
-    to: '/deckbuilder',
-    requiresLogin: false,
-    // requiresLogin: true,
-  },
-  { name: 'Cart', icon: <CartIcon />, to: '/cart', requiresLogin: true },
-  {
-    name: 'Collection',
-    icon: <AssessmentIcon />,
-    to: '/collection',
-    requiresLogin: true,
-  },
-];
-
-const MenuItems = ({
-  handleDrawerClose,
-  variant,
-  isMenuOpen,
-  setIsLoginDialogOpen,
-  isLoginDialogOpen,
-  menuSections,
-  handleItemClick,
-  isMobileView,
-  selectedItem,
-  isOpen,
-  sections,
-}) => {
-  const location = useLocation();
-  const previousPageRef = useRef();
-  const isSidebar = variant === 'sidebar';
-  const isDialogOpen = isLoginDialogOpen === true ? true : false;
-  const { isloggedin, logout } = useAuthContext();
-  const navigate = useNavigate(); // Use the useNavigate hook to navigate programmatically
-
-  useEffect(() => {
-    if (location.pathname !== previousPageRef.current) {
-      console.log('CURRENT PAGE:', location.pathname);
-      previousPageRef.current = location.pathname;
-    }
-  }, [location.pathname]);
-  // console.log('isloggedin:', isloggedin);
-  // console.log('isDialogOpen:', isDialogOpen);
-  // console.log('isLoginDialogOpen:', isLoginDialogOpen);
-  // console.log('isMenuOpen:', isMenuOpen);
-  // console.log('isSidebar:', isSidebar);
-  // console.log('menuSections:', menuSections);
-  // console.log('sections:', sections);
-  // console.log('selectedItem:', selectedItem);
-  // console.log('isOpen:', isOpen);
-  // console.log('isMobileView:', isMobileView);
-  const handleLoginClick = () => {
-    setIsLoginDialogOpen(true);
-  };
-
-  const handleLoginDialogClose = () => {
-    setIsLoginDialogOpen(false);
-  };
-
-  const handleLoginSuccess = () => {
-    setIsLoginDialogOpen(false);
-    // Handle additional logic upon successful login if needed
-  };
-  useEffect(() => {
-    if (location.pathname !== previousPageRef.current) {
-      console.log('CURRENT PAGE:', location.pathname);
-      previousPageRef.current = location.pathname;
-    }
-  }, [location.pathname]);
-
-  const handleMenuItemClick = (to) => {
-    // Use history.push to navigate to the desired route
-    navigate(to);
-  };
-
-  const renderMenuItems = (items) => {
-    return items.map((item) => {
-      // console.log('ITEM:', item);
-      const { name, icon, to, requiresLogin } = item;
-      // console.log('REQUIRES LOGIN:', requiresLogin);
-      // console.log('IS LOGGED IN:', isloggedin);
-      // console.log('NAME:', name);
-      // console.log('TO:', to);
-
-      return isloggedin || !requiresLogin ? ( // Allow non-logged in users to access items marked as not requiring login
-        <StyledMenuItem
-          key={name}
-          component="div"
-          onClick={() => handleMenuItemClick(to)}
-        >
-          {icon} {name}
-        </StyledMenuItem>
-      ) : null;
-    });
-  };
-
-  return (
-    <div
-      style={{
-        display: isMenuOpen ? (isSidebar ? 'block' : 'flex') : 'none',
-        flexDirection: isSidebar ? 'column' : 'row',
-      }}
-    >
-      <MenuBox>
-        {renderMenuItems(menuItemsData)}
-
-        {isloggedin ? (
-          <StyledMenuItem onClick={logout}>
-            <LogoutIcon /> Logout
-          </StyledMenuItem>
-        ) : (
-          <StyledMenuItem onClick={handleLoginClick}>
-            <LoginIcon /> Login
-          </StyledMenuItem>
-        )}
-      </MenuBox>
-      <LoginDialog
-        // open={isMenuOpen}
-        open={isDialogOpen}
-        onClose={handleLoginDialogClose}
-        onLogin={handleLoginSuccess}
-      />
-    </div>
-  );
-};
-
-export default MenuItems;
diff --git a/src/components/headings/navigation/SideBar.jsx b/src/components/headings/navigation/SideBar.jsx
index 979346c..8c0ce68 100644
--- a/src/components/headings/navigation/SideBar.jsx
+++ b/src/components/headings/navigation/SideBar.jsx
@@ -1,151 +1,58 @@
 import React, { useState } from 'react';
-import {
-  Drawer,
-  List,
-  ListItem,
-  ListItemIcon,
-  Typography,
-  Divider,
-  AppBar,
-  Container,
-  Toolbar,
-  Box,
-} from '@mui/material';
-import MenuItems from './MenuItems';
-import { useSidebarContext } from '../../../context/SideBarProvider';
+import { Drawer, List, Divider, Hidden } from '@mui/material';
+import LogoutIcon from '@mui/icons-material/Logout';
+import LoginIcon from '@mui/icons-material/Login';
+import MenuItemComponent from '../header/MenuItemComponent';
 import { useAuthContext } from '../../../context/hooks/auth';
-import { StyledDrawer, StyledListItem, StyledTypography } from './styled'; // Import styled components
-import LoginDialog from '../../dialogs/LoginDialog';
-// import theme from '../../../assets/styles/themes';
-import { Home as HomeIcon, Map as MapIcon } from '@mui/icons-material';
-const SideBar = ({
-  handleDrawerClose,
-  isMobileView,
-  isOpen,
-  toggleSidebar,
-  menuSections,
-}) => {
-  const { sidebarBackgroundColor, sidebarImage } = useSidebarContext();
-  const [selected, setSelected] = useState('Dashboard');
-  const [isLoginDialogOpen, setIsLoginDialogOpen] = useState(false);
+import getMenuItemsData from '../header/menuItemsData';
 
-  const handleLoginClick = () => {
-    setIsLoginDialogOpen(true);
-  };
+const SideBar = ({ handleDrawerState, isOpen, handleLoginDialogState }) => {
+  const [selected, setSelected] = useState('Dashboard');
+  const { isLoggedIn } = useAuthContext();
+  const menuItemsData = getMenuItemsData(isLoggedIn);
 
   const handleItemClick = (name) => {
     setSelected(name);
-    handleDrawerClose();
+    handleDrawerState();
   };
-
-  if (!isMobileView) {
-    handleDrawerClose();
-  }
-
   return (
-    // <AppBar
-    //   position="sticky"
-    //   elevation={4}
-    //   sx={{ backgroundColor: theme.palette.primary.main, padding: '0 2em' }}
-    // >
-    //   <Container maxWidth="lg">
-    //     <Toolbar
-    //       sx={{
-    //         display: 'flex',
-    //         justifyContent: 'space-between',
-    //         alignItems: 'center',
-    //         maxWidth: '100vw',
-    //       }}
-    //     >
-    //       <Box sx={{ display: 'flex', alignItems: 'center' }}>
-    <StyledDrawer
-      anchor="right"
-      open={isOpen}
-      onClose={toggleSidebar}
-      bgColor={sidebarBackgroundColor} // pass bgColor as prop
-    >
-      {/* <List
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-        }}
-      >
-        <MenuItems
-          // logout={logout}
-          variant="topbar"
-          isMenuOpen={isOpen}
-          onLoginClick={handleLoginClick}
-          menuSections={menuSections}
-          sections={menuSections?.section}
-          selectedItem={selected}
-          isMobileView={isMobileView}
-        />
-        {menuSections.map((section, index) => (
-          <div key={index}>
-            <Divider />
-            <StyledTypography variant="h6">{section.title}</StyledTypography>
-            {section.items.map((item) => (
-              <StyledListItem
-                key={item.name}
-                selectedItem={selected === item.name}
-                onClick={() => handleItemClick(item.name)}
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  // backgroundColor: theme?.palette?.primary?.main || 'defaultColor',
-                  padding: '0 2em',
-                }}
-              >
-                <ListItemIcon>{item.icon}</ListItemIcon>
-                <Typography variant="body1">{item.name}</Typography>
-              </StyledListItem>
-            ))}
-          </div>
-        ))}
-      </List> */}
-      <List>
-        <MenuItems
-          setIsLoginDialogOpen={setIsLoginDialogOpen}
-          isLoginDialogOpen={isLoginDialogOpen}
-          isMenuOpen={isOpen}
-          onLoginClick={handleLoginClick}
-          handleDrawerClose={handleDrawerClose}
-          variant="sidebar"
-          selectedItem={selected}
-          sections={menuSections?.section}
-          menuSections={menuSections}
-          isMobileView={isMobileView}
-        />
-        {menuSections?.map((section, index) => (
-          <div key={index}>
-            <Divider />
-            <StyledTypography variant="h6">{section?.title}</StyledTypography>
-            {section?.items?.map((item) => (
-              <StyledListItem
-                key={item.index}
-                selectedItem={selected === item.name}
-                onClick={() => handleItemClick(item.name)}
-              >
-                <ListItemIcon>{item.icon}</ListItemIcon>
-                <Typography variant="body1">{item.name}</Typography>
-              </StyledListItem>
-            ))}
-          </div>
-        ))}
-      </List>
-      <LoginDialog
-        open={isLoginDialogOpen}
-        onClose={() => setIsLoginDialogOpen(false)}
-        onLogin={() => setIsLoginDialogOpen(false)}
-      />
-    </StyledDrawer>
-    //       </Box>
-    //     </Toolbar>
-    //   </Container>
-    // </AppBar>
+    <Hidden smDown implementation="css">
+      <Drawer anchor="right" open={isOpen} onClose={handleDrawerState}>
+        <List>
+          {menuItemsData.map((item) => {
+            const { name, icon, to, requiresLogin } = item;
+            return isLoggedIn || !requiresLogin ? (
+              <MenuItemComponent
+                key={name}
+                name={name}
+                item={item}
+                icon={icon}
+                to={to}
+                onClick={handleDrawerState}
+              />
+            ) : null;
+          })}
+          <Divider />
+          {/* Additional items based on login status */}
+          {isLoggedIn ? (
+            <MenuItemComponent
+              item={{ name: 'Logout', icon: <LogoutIcon /> }}
+              onClick={handleLoginDialogState}
+            />
+          ) : (
+            <MenuItemComponent
+              item={{
+                name: 'Login',
+                icon: <LoginIcon />,
+                to: '',
+                requiresLogin: false,
+              }}
+              onClick={handleLoginDialogState}
+            />
+          )}
+        </List>
+      </Drawer>
+    </Hidden>
   );
 };
 
diff --git a/src/components/headings/navigation/TopBar.jsx b/src/components/headings/navigation/TopBar.jsx
index ce6ba86..d0be08c 100644
--- a/src/components/headings/navigation/TopBar.jsx
+++ b/src/components/headings/navigation/TopBar.jsx
@@ -1,115 +1,72 @@
 import React, { useState } from 'react';
-import {
-  AppBar,
-  Toolbar,
-  IconButton,
-  Typography,
-  Box,
-  Container,
-  List,
-  Divider,
-  ListItemIcon,
-  useTheme,
-  createTheme,
-} from '@mui/material';
+import { AppBar, Toolbar, IconButton, Hidden } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
-import { Link } from 'react-router-dom';
-import logo from '../../../assets/images/navlogo.png';
-// import theme from '../../../assets/styles/themes';
-import MenuItems from './MenuItems';
-import { Image } from '@mui/icons-material';
-import {
-  StyledAppBar,
-  StyledBox,
-  StyledIconButton,
-  StyledListItem,
-  StyledToolbar,
-  StyledTypography,
-} from './styled';
-import ThemeToggleButton from '../../buttons/ThemeToggleButton';
+import LogoutIcon from '@mui/icons-material/Logout';
+import LoginIcon from '@mui/icons-material/Login';
+import MenuItemComponent from '../header/MenuItemComponent';
+import { useAuthContext } from '../../../context/hooks/auth';
+import getMenuItemsData from '../header/menuItemsData';
+import { StyledToolbar } from './styled';
+import { useMode } from '../../../context/hooks/colormode';
 
 const TopBar = ({
-  handleDrawerOpen,
+  handleDrawerState,
+  handleLoginDialogState,
   handleDrawerClose,
-  logout,
-  isOpen,
-  isMobileView,
-  menuSections,
 }) => {
+  const { theme } = useMode();
   const [selected, setSelected] = useState('Dashboard');
-  // const theme = React.useMemo(() => createTheme(themeSettings(mode)), [mode]);
-  // const theme = useTheme();
-  // console.log('theme', theme);
-  const [isLoginDialogOpen, setIsLoginDialogOpen] = useState(false);
-  const handleLoginClick = () => {
-    setIsLoginDialogOpen(true);
-  };
+  const { isLoggedIn } = useAuthContext();
+  const menuItemsData = getMenuItemsData(isLoggedIn);
 
   const handleItemClick = (name) => {
     setSelected(name);
-    handleDrawerClose();
+    handleDrawerState();
   };
-  if (!isMobileView) {
-    handleDrawerClose();
-  }
   return (
-    <StyledAppBar
-      position="sticky"
-      elevation={4}
-      sx={{
-        padding: '0 2em',
-      }}
-    >
-      <Container maxWidth="lg">
-        <StyledToolbar>
-          <StyledBox>
-            {isMobileView && (
-              <StyledIconButton
-                edge="start"
-                color="inherit"
-                aria-label="menu"
-                onClick={handleDrawerOpen}
-              >
-                <MenuIcon />
-              </StyledIconButton>
-            )}
-            <Typography
-              variant="h6"
-              component={Link}
-              to="/home"
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                textDecoration: 'none',
-                marginLeft: '1em',
-              }}
-            >
-              <Image
-                src={logo}
-                alt="Logo"
-                sx={{ height: '3em', marginRight: '0.5em' }}
-              />
-              SiteName
-            </Typography>
-          </StyledBox>
-          {!isMobileView && (
-            <MenuItems
-              handleDrawerClose={handleDrawerClose}
-              variant="topbar"
-              isMenuOpen={!isMobileView}
-              setIsLoginDialogOpen={setIsLoginDialogOpen}
-              isLoginDialogOpen={isLoginDialogOpen}
-              menuSections={menuSections}
-              handleItemClick={handleItemClick}
-              isMobileView={isMobileView}
-              selectedItem={selected}
-              isOpen={isOpen}
+    <AppBar position="static">
+      <StyledToolbar theme={theme}>
+        <Hidden mdUp implementation="css">
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            onClick={handleDrawerState}
+          >
+            <MenuIcon />
+          </IconButton>
+        </Hidden>
+        {menuItemsData.map((item) => {
+          const { name, icon, to, requiresLogin } = item;
+          return isLoggedIn || !requiresLogin ? (
+            <MenuItemComponent
+              key={name}
+              name={name}
+              item={item}
+              icon={icon}
+              to={to}
+              onClick={handleDrawerState}
             />
-          )}
-          <ThemeToggleButton />
-        </StyledToolbar>
-      </Container>
-    </StyledAppBar>
+          ) : null;
+        })}
+        {isLoggedIn ? (
+          <MenuItemComponent
+            item={{ name: 'Logout', icon: <LogoutIcon /> }}
+            onClick={handleLoginDialogState}
+          />
+        ) : (
+          <MenuItemComponent
+            item={{
+              name: 'Login',
+              icon: <LoginIcon />,
+              to: '',
+              requiresLogin: false,
+            }}
+            onClick={handleLoginDialogState}
+          />
+        )}
+      </StyledToolbar>
+    </AppBar>
   );
 };
 
diff --git a/src/components/headings/navigation/styled.js b/src/components/headings/navigation/styled.js
index 3e8726c..47c86b9 100644
--- a/src/components/headings/navigation/styled.js
+++ b/src/components/headings/navigation/styled.js
@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 export const StyledDrawer = styled(Drawer)(({ theme, bgColor }) => ({
   '.MuiPaper-root': {
-    backgroundColor: bgColor || theme.palette.background.paper,
+    backgroundColor: theme.palette.primary.dark,
   },
 }));
 
@@ -35,6 +35,7 @@ export const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   justifyContent: 'space-between',
   alignItems: 'center',
   maxWidth: '100vw',
+  backgroundColor: theme.palette.primary.dark,
 }));
 
 export const StyledIconButton = styled(IconButton)(({ theme }) => ({
diff --git a/src/components/icons/DeckOfCardsIcon.jsx b/src/components/icons/DeckOfCardsIcon.jsx
deleted file mode 100644
index f9fab42..0000000
--- a/src/components/icons/DeckOfCardsIcon.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import DeckIcon from '@mui/icons-material/Deck'; // Import the deck icon
-
-const DeckOfCardsIcon = () => {
-  return <DeckIcon />;
-};
-
-export default DeckOfCardsIcon;
diff --git "a/Icon\r" b/src/components/index.jsx
similarity index 100%
rename from "Icon\r"
rename to src/components/index.jsx
diff --git a/src/components/media/CardMedia.jsx b/src/components/media/CardMedia.jsx
index 9233a7b..3cd9fdd 100644
--- a/src/components/media/CardMedia.jsx
+++ b/src/components/media/CardMedia.jsx
@@ -1,27 +1,53 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { CardMedia } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { useStyles } from './mediaStyles';
+import { ModalContext } from '../../context/ModalContext/ModalContext';
+import { PopoverContext } from '../../context/PopoverContext/PopoverContext';
 
-const useStyles = makeStyles({
-  media: {
-    width: '100%', // Make it responsive
-    // minHeight: '50%', // Set minimum height
-    // '@media (min-width:600px)': {
-    //   minHeight: '400px',
-    // },
-  },
-});
+const ReusableCardMedia = React.forwardRef(
+  (
+    {
+      imgUrl,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      // isModalOpen,
+      // setIsPopoverOpen,
+    },
+    ref
+  ) => {
+    const classes = useStyles();
+    const altText = `Image for ${imgUrl || 'the card'}`;
+    const {
+      openModalWithCard,
+      closeModal,
+      isModalOpen,
+      setModalOpen,
+      modalContent,
+    } = useContext(ModalContext);
+    const { setHoveredCard, setIsPopoverOpen, hoveredCard } =
+      useContext(PopoverContext);
+    useEffect(() => {
+      if (isModalOpen) {
+        setIsPopoverOpen(false);
+      }
+    }, [isModalOpen, setIsPopoverOpen]);
 
-const ReusableCardMedia = ({ imgUrl }) => {
-  const classes = useStyles();
-  return (
-    <CardMedia
-      className={classes.media}
-      component="img"
-      alt="Card Name"
-      image={imgUrl}
-    />
-  );
-};
+    return (
+      <CardMedia
+        ref={ref}
+        className={classes.media}
+        component="img"
+        alt={altText}
+        image={imgUrl}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onClick={onClick}
+      />
+    );
+  }
+);
+
+ReusableCardMedia.displayName = 'ReusableCardMedia';
 
 export default ReusableCardMedia;
diff --git a/src/components/media/CardMediaAndDetails.jsx b/src/components/media/CardMediaAndDetails.jsx
new file mode 100644
index 0000000..9df541c
--- /dev/null
+++ b/src/components/media/CardMediaAndDetails.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import CardMediaSection from './CardMediaSection'; // Ensure correct import
+import CardDetailsContainer from '../../containers/CardDetailsContainer';
+
+const CardMediaAndDetails = ({ card }) => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6}>
+        <CardMediaSection
+          isRequired={false}
+          card={card}
+          imgUrl={card?.card_images[0]?.image_url}
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <CardDetailsContainer card={card} />
+      </Grid>
+    </Grid>
+  );
+};
+
+// Using React.memo to avoid unnecessary re-renders
+export default React.memo(CardMediaAndDetails);
diff --git a/src/components/media/CardMediaSection.js b/src/components/media/CardMediaSection.js
index dd19fc5..95037f9 100644
--- a/src/components/media/CardMediaSection.js
+++ b/src/components/media/CardMediaSection.js
@@ -1,106 +1,133 @@
-import React, { useState, useEffect } from 'react';
+// CardMediaSection.js
+import React from 'react';
 import ReusableCardMedia from './CardMedia';
-import placeholderImage from '../../assets/images/placeholder.jpeg';
+import CardToolTip from '../cards/CardToolTip';
 import { makeStyles } from '@mui/styles';
 import { Popover } from '@mui/material';
-import CardToolTip from '../cards/CardToolTip';
+import PropTypes from 'prop-types';
 
 const useStyles = makeStyles({
   mediaContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: 0.7,
-    },
+    position: 'relative',
+  },
+  popover: {
+    pointerEvents: 'none', // Ensure popover doesn't block mouse events
   },
 });
 
-const CardMediaSection = ({
-  imgUrl = placeholderImage,
-  card,
-  // open,
-  openModal,
-  cardRef,
-  modalIsOpen,
-  onCardHover,
-  cardData,
-  setIsPopoverOpen,
-  isPopoverOpen,
-}) => {
-  const classes = useStyles();
-  const [hasLoggedCard, setHasLoggedCard] = useState(false);
-
-  useEffect(() => {
-    if (!hasLoggedCard) {
-      // console.log('CARD:', card);
-      setHasLoggedCard(true);
-    }
-  }, [hasLoggedCard, card]);
-
-  // useEffect(() => {
-  //   if (!modalIsOpen) {
-  //     setIsPopoverOpen(false);
-  //   }
-  // }, [modalIsOpen]);
-
-  const open = Boolean(cardData === card) && !modalIsOpen;
-
-  const handleMouseEnter = () => {
-    if (!modalIsOpen && typeof onCardHover === 'function') {
-      onCardHover(card);
-    }
-  };
+const anchorOrigin = {
+  vertical: 'bottom',
+  horizontal: 'left',
+};
 
-  const handleMouseLeave = () => {
-    if (!modalIsOpen && typeof onCardHover === 'function') {
-      onCardHover(null);
-      // setIsPopoverOpen(false);
-    }
-  };
+const transformOrigin = {
+  vertical: 'top',
+  horizontal: 'left',
+};
 
-  // const handleClick = () => {
-  //   // Close the popover and open the modal
-  //   setIsPopoverOpen(false);
-  //   openModal();
-  // };
+const CardMediaSection = React.forwardRef(
+  (
+    {
+      imgUrl,
+      card,
+      isHovered,
+      handleInteraction,
+      handleClick,
+      setClickedCard,
+      isRequired,
+    },
+    ref
+  ) => {
+    const classes = useStyles();
 
-  return (
-    <div
-      ref={cardRef}
-      className={classes.mediaContainer}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div
-        onClick={() => {
-          openModal();
-          setIsPopoverOpen(false);
-        }}
-      >
+    // Event handlers are now only assigned if isRequired is true
+    const eventHandlers = isRequired
+      ? {
+          onMouseEnter: () => {
+            if (typeof handleInteraction === 'function') {
+              handleInteraction(true);
+            }
+          },
+          onMouseLeave: () => {
+            if (typeof handleInteraction === 'function') {
+              handleInteraction(false);
+            }
+          },
+          onClick: () => {
+            if (typeof handleClick === 'function') {
+              handleClick();
+            }
+            if (typeof setClickedCard === 'function') {
+              setClickedCard(card);
+            }
+          },
+        }
+      : {};
+    return (
+      <div className={classes.mediaContainer} ref={ref} {...eventHandlers}>
         <ReusableCardMedia imgUrl={imgUrl} />
+        {isRequired && isHovered && (
+          <Popover
+            className={classes.popover}
+            open={isHovered}
+            anchorEl={ref?.current}
+            onClose={() => handleInteraction(false)}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            disableRestoreFocus
+          >
+            <CardToolTip card={card} />
+          </Popover>
+        )}
       </div>
+    );
+  }
+);
+//     return (
+//       <div className={classes.mediaContainer} ref={ref}>
+//         <ReusableCardMedia
+//           imgUrl={imgUrl}
+//           {...eventHandlers} // Spread event handlers conditionally
+//         />
+//         {isRequired && isHovered && ref.current && (
+//           <Popover
+//             open={isHovered}
+//             anchorEl={ref?.current}
+//             anchorOrigin={anchorOrigin}
+//             transformOrigin={transformOrigin}
+//             onClose={() => {
+//               if (typeof handleInteraction === 'function') {
+//                 handleInteraction(false);
+//               }
+//             }}
+//             disableRestoreFocus
+//           >
+//             <CardToolTip card={card} />
+//           </Popover>
+//         )}
+//       </div>
+//     );
+//   }
+// );
 
-      <Popover
-        id={open ? 'mouse-over-popover' : undefined}
-        sx={{ pointerEvents: 'none' }}
-        open={open}
-        anchorEl={cardRef?.current || undefined}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-        onClose={() => onCardHover(null)}
-        disableRestoreFocus
-      >
-        <CardToolTip card={card} />
-      </Popover>
-    </div>
-  );
-};
+CardMediaSection.displayName = 'CardMediaSection';
 
-export default CardMediaSection;
+CardMediaSection.propTypes = {
+  imgUrl: PropTypes.string.isRequired,
+  card: PropTypes.object.isRequired,
+  isHovered: PropTypes.bool,
+  handleInteraction: PropTypes.func,
+  handleClick: PropTypes.func,
+  setClickedCard: PropTypes.func,
+  isRequired: PropTypes.bool,
+};
 
 CardMediaSection.defaultProps = {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onCardHover: () => {}, // provide a no-op function as default
+  isHovered: false,
+  handleInteraction: null,
+  handleClick: null,
+  setClickedCard: null,
+  isRequired: true,
 };
+
+export default CardMediaSection;
diff --git a/src/components/media/DeckCardMedia.jsx b/src/components/media/DeckCardMedia.jsx
deleted file mode 100644
index a4d94f3..0000000
--- a/src/components/media/DeckCardMedia.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// import React, { useState, useRef, useEffect } from 'react';
-// import { CardMedia } from '@mui/material';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-
-// const DeckCardMedia = ({
-//   card,
-//   classes,
-//   openDeckModal,
-//   setHovering,
-//   cardRef,
-// }) => {
-//   const [hasLoggedCard, setHasLoggedCard] = useState(false);
-//   // const cardRef = useRef(null);
-
-//   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
-
-//   useEffect(() => {
-//     if (!hasLoggedCard) {
-//       console.log('CARD:', card);
-//       setHasLoggedCard(true);
-//     }
-//   }, [hasLoggedCard, card]);
-
-//   return (
-//     <div ref={cardRef}>
-//       <CardMedia
-//         component="img"
-//         alt={card?.name || 'Card Name'}
-//         image={imgUrl}
-//         onClick={openDeckModal}
-//         onMouseOver={() => setHovering(true)}
-//         onMouseOut={() => setHovering(false)}
-//       />
-//     </div>
-//   );
-// };
-
-// export default DeckCardMedia;
diff --git a/src/components/media/mediaStyles.jsx b/src/components/media/mediaStyles.jsx
new file mode 100644
index 0000000..e4d45fe
--- /dev/null
+++ b/src/components/media/mediaStyles.jsx
@@ -0,0 +1,19 @@
+import { makeStyles } from '@mui/styles';
+
+export const useStyles = makeStyles({
+  mediaContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: 0.7,
+    },
+  },
+  media: {
+    width: '100%',
+    flexGrow: 1, // Allow the media part to fill the space
+    // paddingTop: '140%', // Aspect ratio 7:10 (height 10, width 7)
+    // backgroundSize: 'cover',
+  },
+});
diff --git a/src/components/modals/GenericCardModal.jsx b/src/components/modals/GenericCardModal.jsx
deleted file mode 100644
index c4e201a..0000000
--- a/src/components/modals/GenericCardModal.jsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import React, { useContext, useEffect, useState, useCallback } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  Snackbar,
-  List,
-  ListItem,
-  ButtonBase,
-  ListItemText,
-  Divider,
-  Typography,
-} from '@mui/material';
-import CardMediaSection from '../media/CardMediaSection';
-import CardDetailsContainer from './cardModal/CardDetailsContainer';
-import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
-import { DeckContext } from '../../context/DeckContext/DeckContext';
-import { CartContext } from '../../context/CartContext/CartContext';
-import { CollectionContext } from '../../context/CollectionContext/CollectionContext';
-import { makeStyles } from '@mui/styles';
-import { useCollectionStore } from '../../context/hooks/collection';
-
-const useStyles = makeStyles((theme) => ({
-  actionButtons: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '1.5rem',
-  },
-  media: {
-    objectFit: 'cover',
-    borderRadius: '4px',
-    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-  },
-  details: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '1.5rem',
-    marginBottom: '1.5rem',
-  },
-  dialogTitle: {
-    fontSize: '1.5rem',
-    fontWeight: 600,
-    color: theme.palette.primary.dark,
-  },
-  dialogContent: {
-    padding: '2rem',
-  },
-  listItem: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: theme.spacing(2),
-    backgroundColor: '#ffffff',
-    borderRadius: '8px',
-    marginBottom: theme.spacing(2),
-    boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-  },
-  listItemText: {
-    flex: 1,
-    textAlign: 'left',
-    marginLeft: theme.spacing(3),
-  },
-}));
-
-const GenericCardModal = ({ open, onClose, card, cardInfo, context }) => {
-  const classes = useStyles();
-  const deckContext = useContext(DeckContext);
-  const cartContext = useContext(CartContext);
-  const collectionContext = useContext(CollectionContext);
-  const [openSnackbar, setOpenSnackbar] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-
-  if (!collectionContext) {
-    console.error("The component isn't wrapped with CollectionProvider");
-    return null;
-  }
-
-  const contextProps =
-    {
-      Deck: deckContext,
-      Cart: cartContext,
-      Store: cartContext,
-      Collection: collectionContext,
-    }[context] || {};
-
-  const {
-    openChooseCollectionDialog,
-    setOpenChooseCollectionDialog,
-    allCollections,
-    fetchAllCollectionsForUser,
-    setSelectedCollection,
-  } = contextProps;
-  const handleSelectCollection = useCallback(
-    (collectionId) => {
-      const foundCollection = allCollections.find(
-        (collection) => collection._id === collectionId
-      );
-
-      if (foundCollection) {
-        setSelectedCollection(foundCollection);
-        setOpenChooseCollectionDialog(false);
-        setSnackbarMessage('Collection selected successfully!');
-        setOpenSnackbar(true);
-      } else {
-        setSnackbarMessage('Collection not found!');
-        setOpenSnackbar(true);
-      }
-    },
-    [allCollections, setSelectedCollection]
-  );
-
-  const handleClose = (event, reason) => {
-    if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
-      setSnackbarMessage(`${context} successfully updated`);
-      setOpenSnackbar(true);
-      onClose();
-    }
-  };
-
-  // console.log('openChooseCollectionDialog', openChooseCollectionDialog);
-
-  // useEffect(() => {
-  //   if (openChooseCollectionDialog === true) {
-  //     // console.log('Fetching collections...', openChooseCollectionDialog);
-  //     fetchAllCollectionsForUser();
-  //   }
-  // }, [openChooseCollectionDialog]);
-  // console.log('open --------> ', open);
-  return (
-    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="md">
-      <DialogTitle className={classes.dialogTitle}>{card?.name}</DialogTitle>
-      <DialogContent className={classes.dialogContent}>
-        <Grid container spacing={2}>
-          <Grid item xs={12} sm={6}>
-            <CardMediaSection
-              card={card}
-              imgUrl={card?.card_images[0].image_url}
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <CardDetailsContainer card={card} />
-          </Grid>
-        </Grid>
-      </DialogContent>
-
-      {['Deck', 'Cart', 'Store', 'Collection'].includes(context) && (
-        <>
-          <GenericActionButtons
-            card={card}
-            cardInfo={cardInfo}
-            context={context}
-            component={'GenericCardModal'}
-            label={`In ${context}`}
-            productQuantity={contextProps.productQuantity}
-          />
-          {context === 'Deck' && (
-            <>
-              <GenericActionButtons
-                card={card}
-                cardInfo={cardInfo}
-                context={'Collection'}
-                component={'GenericCardModal'}
-                label={'In Collection'}
-                productQuantity={
-                  contextProps.productQuantity || contextProps.totalQuantity
-                }
-              />
-              <button onClick={() => setOpenChooseCollectionDialog(true)}>
-                Open Dialog
-              </button>
-            </>
-          )}
-        </>
-      )}
-      {openChooseCollectionDialog && (
-        <Dialog
-          open={open}
-          onClose={() => setOpenChooseCollectionDialog(false)}
-        >
-          <DialogTitle>Select a Collection</DialogTitle>
-
-          <List className={classes.list}>
-            {allCollections.map((collection) => (
-              <React.Fragment key={collection._id}>
-                <ListItem className={classes.listItem}>
-                  <ButtonBase
-                    sx={{ width: '100%' }}
-                    onClick={() => handleSelectCollection(collection._id)}
-                  >
-                    <ListItemText
-                      primary={collection.name}
-                      className={classes.listItemText}
-                    />
-                  </ButtonBase>
-                </ListItem>
-                <Divider />
-              </React.Fragment>
-            ))}
-          </List>
-
-          <Snackbar
-            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-            open={openSnackbar}
-            onClose={() => setOpenSnackbar(false)}
-            message={snackbarMessage}
-            autoHideDuration={3000}
-          />
-        </Dialog>
-      )}
-      <Snackbar
-        open={openSnackbar}
-        autoHideDuration={6000}
-        onClose={() => setOpenSnackbar(false)}
-        message={snackbarMessage}
-      />
-    </Dialog>
-  );
-};
-
-export default GenericCardModal;
diff --git a/src/components/modals/cardModal/GenericCardModal.jsx b/src/components/modals/cardModal/GenericCardModal.jsx
new file mode 100644
index 0000000..4161d78
--- /dev/null
+++ b/src/components/modals/cardModal/GenericCardModal.jsx
@@ -0,0 +1,100 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Snackbar,
+  Alert,
+} from '@mui/material';
+import { useStyles } from '../modalStyles';
+import useAppContext from '../../../context/hooks/useAppContext';
+import useSnackbar from '../../../context/hooks/useSnackBar';
+import CardMediaAndDetails from '../../media/CardMediaAndDetails';
+import GenericActionButtons from '../../buttons/actionButtons/GenericActionButtons';
+import { ModalContext } from '../../../context/ModalContext/ModalContext';
+
+const GenericCardModal = ({ open, card, context }) => {
+  const classes = useStyles();
+  const { contextProps, isContextAvailable } = useAppContext(context);
+  const [snackbar, handleSnackbar, handleCloseSnackbar] = useSnackbar();
+  // const [isOpen, setIsOpen] = useState(false);
+  const [hasLoggedCard, setHasLoggedCard] = useState(false);
+  const { openModalWithCard, closeModal, isModalOpen, modalContent } =
+    useContext(ModalContext);
+
+  const requiresDoubleButtons = context === 'Deck' || context === 'Collection';
+
+  useEffect(() => {
+    if (open && card && !hasLoggedCard) {
+      console.log('Modal opened with card:', card);
+      handleSnackbar('Card details loaded successfully.', 'success');
+      setHasLoggedCard(true);
+    }
+  }, [open, card, hasLoggedCard, handleSnackbar]);
+
+  useEffect(() => {
+    if (!open) {
+      setHasLoggedCard(false); // Reset hasLoggedCard when modal closes
+    }
+  }, [open]); // Removed hasLoggedCard from dependency array
+
+  // Example function to be called when an action is successful
+  const handleActionSuccess = () => {
+    handleSnackbar('Action was successful!', 'success');
+  };
+
+  // Example function to be called when an action fails
+  const handleActionFailure = (error) => {
+    console.error('Action failed:', error);
+    handleSnackbar('Action failed. Please try again.', 'error');
+  };
+
+  return (
+    <Dialog
+      open={open} // Use 'open' prop directly
+      onClose={() => {
+        closeModal(); // Call closeModal directly
+      }}
+      fullWidth
+      maxWidth="md"
+    >
+      <DialogTitle className={classes.dialogTitle}>{card?.name}</DialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        <CardMediaAndDetails card={card} />
+        {requiresDoubleButtons && (
+          <>
+            <GenericActionButtons
+              card={card}
+              context="Deck"
+              onSuccess={handleActionSuccess}
+              onFailure={handleActionFailure}
+              // setModalOpen={setModalOpen}
+            />
+            <GenericActionButtons
+              card={card}
+              context="Collection"
+              onSuccess={handleActionSuccess}
+              onFailure={handleActionFailure}
+              // setModalOpen={setModalOpen}
+            />
+          </>
+        )}
+      </DialogContent>
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={6000}
+        onClose={handleCloseSnackbar}
+      >
+        <Alert
+          onClose={handleCloseSnackbar}
+          severity={snackbar.severity}
+          sx={{ width: '100%' }}
+        >
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </Dialog>
+  );
+};
+
+export default GenericCardModal;
diff --git a/src/components/modals/modalStyles.jsx b/src/components/modals/modalStyles.jsx
new file mode 100644
index 0000000..1badb2e
--- /dev/null
+++ b/src/components/modals/modalStyles.jsx
@@ -0,0 +1,44 @@
+import { makeStyles } from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  actionButtons: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '1.5rem',
+  },
+  media: {
+    objectFit: 'cover',
+    borderRadius: '4px',
+    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+  },
+  details: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '1.5rem',
+    marginBottom: '1.5rem',
+  },
+  dialogTitle: {
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    color: theme.palette.primary.dark,
+  },
+  dialogContent: {
+    padding: '2rem',
+  },
+  listItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(2),
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    marginBottom: theme.spacing(2),
+    boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+  },
+  listItemText: {
+    flex: 1,
+    textAlign: 'left',
+    marginLeft: theme.spacing(3),
+  },
+}));
diff --git a/src/components/modals/stripeModal/StripeCheckoutModal.js b/src/components/modals/stripeModal/StripeCheckoutModal.js
index 17931bf..8189dc6 100644
--- a/src/components/modals/stripeModal/StripeCheckoutModal.js
+++ b/src/components/modals/stripeModal/StripeCheckoutModal.js
@@ -1,72 +1,69 @@
 import React from 'react';
-import { Modal, Backdrop, Fade, Box, Typography } from '@mui/material';
+import { Modal, Fade, Box, Typography, Backdrop } from '@mui/material';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
 import StripeForm from '../../forms/customerCheckoutForm/StripeForm';
 
-// Make sure to call `loadStripe` outside of a component’s render to avoid recreating the `Stripe` object on every render.
-console.log('Stripe key: ', process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
 const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
 
 const StripeCheckoutModal = ({ open, onClose, onToken, purchases, total }) => {
-  // Rest of your component code...
   return (
     <Modal
       open={open}
       onClose={onClose}
       closeAfterTransition
-      BackdropComponent={Backdrop}
-      BackdropProps={{
-        timeout: 500,
-      }}
       sx={{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <Fade in={open}>
-        <Box
-          sx={{
-            zIndex: 2000, // add this line
-            width: 400,
-            backgroundColor: '#fff',
-            boxShadow: 24,
-            borderRadius: '8px',
-            p: 4,
-            maxHeight: '80vh',
-            overflow: 'auto',
-          }}
-        >
-          <Typography variant="h6" gutterBottom>
-            Your Purchases
-          </Typography>
-          {purchases.map((purchase, index) => (
-            <Box
-              key={index}
-              sx={{ display: 'flex', justifyContent: 'space-between' }}
-            >
-              <Typography>{purchase.name}</Typography>
-              <Typography>
-                ${purchase.card_prices[0].tcgplayer_price}
-              </Typography>
-            </Box>
-          ))}
+      <Backdrop
+        open={open}
+        onClose={onClose}
+        timeout={500}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} // Ensures the backdrop is above other elements but below the modal
+      >
+        <Fade in={open}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              marginTop: '1rem',
+              position: 'absolute', // Needed for proper positioning within the backdrop
+              zIndex: 2000, // Ensure this is above the backdrop
+              width: 400,
+              bgcolor: 'background.paper',
+              boxShadow: 24,
+              borderRadius: 2,
+              p: 4,
+              maxHeight: '80vh',
+              overflow: 'auto',
             }}
           >
-            <Typography variant="subtitle1">Total:</Typography>
-            <Typography variant="subtitle1">${total}</Typography>
+            <Typography variant="h6" gutterBottom>
+              Your Purchases
+            </Typography>
+            {purchases.map((purchase, index) => (
+              <Box
+                key={index}
+                sx={{ display: 'flex', justifyContent: 'space-between' }}
+              >
+                <Typography>{purchase.name}</Typography>
+                <Typography>
+                  ${purchase.card_prices[0].tcgplayer_price}
+                </Typography>
+              </Box>
+            ))}
+            <Box
+              sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}
+            >
+              <Typography variant="subtitle1">Total:</Typography>
+              <Typography variant="subtitle1">${total}</Typography>
+            </Box>
+            <Elements stripe={stripePromise}>
+              <StripeForm total={total} onToken={onToken} />
+            </Elements>
           </Box>
-          <Elements stripe={stripePromise}>
-            <StripeForm total={total} onToken={onToken} />
-          </Elements>
-        </Box>
-      </Fade>
+        </Fade>
+      </Backdrop>
     </Modal>
   );
 };
diff --git a/src/components/other/CardCountDisplay.jsx b/src/components/other/CardCountDisplay.jsx
deleted file mode 100644
index 46f3362..0000000
--- a/src/components/other/CardCountDisplay.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Grid } from '@mui/material';
-
-const CardCountDisplay = ({ quantity, label, className }) => {
-  // Destructure only if `quantity` is not null or undefined
-  const { totalItems, quantityOfSameId } = quantity || {};
-
-  console.log('Quantity:', quantity, 'Type:', typeof quantity);
-  console.log('Label:', label, 'Type:', typeof label);
-  console.log('ClassName:', className, 'Type:', typeof className);
-  console.log('Total Items:', totalItems, 'Type:', typeof totalItems);
-
-  return (
-    <Grid container className={className}>
-      <Grid item xs={6}>
-        {/* Use optional chaining to safely access `totalItems` */}
-        {label}: {quantity?.totalItems || 0}
-      </Grid>
-    </Grid>
-  );
-};
-
-export default CardCountDisplay;
diff --git a/src/components/other/CardNameInput.js b/src/components/other/CardNameInput.js
deleted file mode 100644
index d9b600b..0000000
--- a/src/components/other/CardNameInput.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Input } from '@mui/material';
-import { useCardStore } from '../../context/CardContext/CardStore';
-
-const CardNameInput = ({ value, setValue }) => {
-  const { handleRequest } = useCardStore();
-
-  // const handleKeyDown = (event) => {
-  //   if (event.key === 'Enter') {
-  //     handleRequest(searchParams); // Use handleRequest from context
-  //   }
-  // };
-
-  // const handleChange = (event) => {
-  //   setSearchParams((prevState) => ({
-  //     ...prevState,
-  //     name: event.target.value,
-  //   }));
-  // };
-  const handleKeyDown = (event) => {
-    if (event.key === 'Enter') {
-      handleRequest(); // Use handleRequest from context
-    }
-  };
-
-  const handleChange = (event) => {
-    setValue(event.target.value);
-  };
-  return (
-    <Input
-      fullWidth
-      placeholder="Type card name"
-      onChange={handleChange}
-      onKeyDown={handleKeyDown}
-    />
-  );
-};
-
-export default CardNameInput;
diff --git a/src/components/other/CollectionEditPanel.jsx b/src/components/other/CollectionEditPanel.jsx
deleted file mode 100644
index 01df715..0000000
--- a/src/components/other/CollectionEditPanel.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@mui/styles';
-import { Button, TextField, Paper, Typography } from '@mui/material';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(4),
-    borderRadius: '12px',
-    backgroundColor: theme.palette.grey[100],
-    boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
-  },
-  header: {
-    paddingBottom: theme.spacing(2),
-    borderBottom: `2px solid ${theme.palette.secondary.main}`,
-  },
-  textField: {
-    marginTop: theme.spacing(3),
-    '& .MuiOutlinedInput-root': {
-      '&:hover fieldset': {
-        borderColor: theme.palette.secondary.main,
-      },
-      '&.Mui-focused fieldset': {
-        borderColor: theme.palette.secondary.dark,
-      },
-    },
-  },
-  saveButton: {
-    marginTop: theme.spacing(3),
-    borderRadius: '24px',
-    textTransform: 'none',
-    fontSize: 18,
-    padding: theme.spacing(1, 4),
-  },
-}));
-
-const CollectionEditPanel = ({
-  collection,
-  onSave,
-  isNew,
-  name,
-  setName,
-  setDescription,
-  description,
-}) => {
-  const classes = useStyles();
-
-  const handleSave = () => {
-    onSave({
-      ...collection,
-      name,
-      description,
-    });
-  };
-
-  return (
-    <Paper elevation={6} className={classes.root}>
-      <Typography variant="h5" className={classes.header}>
-        {isNew ? 'Create Collection' : 'Edit Collection'}
-      </Typography>
-      <TextField
-        className={classes.textField}
-        label="Collection Name"
-        value={name}
-        variant="outlined"
-        fullWidth
-        onChange={(e) => setName(e.target.value)}
-      />
-      <TextField
-        className={classes.textField}
-        label="Collection Description"
-        value={description}
-        variant="outlined"
-        fullWidth
-        multiline
-        rows={5}
-        onChange={(e) => setDescription(e.target.value)}
-      />
-      <Button
-        variant="contained"
-        className={classes.saveButton}
-        onClick={handleSave}
-      >
-        {isNew ? 'Create Collection' : 'Save Changes'}
-      </Button>
-    </Paper>
-  );
-};
-
-export default CollectionEditPanel;
diff --git a/src/components/other/CustomSelector.js b/src/components/other/CustomSelector.js
deleted file mode 100644
index d3978e5..0000000
--- a/src/components/other/CustomSelector.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Grid, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
-
-const CustomSelector = ({ label, name, value, setValue, values }) => {
-  const handleChange = (event) => {
-    setValue(
-      event.target.value.toLowerCase() === 'unset' ? '' : event.target.value
-    );
-  };
-
-  return (
-    <Grid item xs={12} sm={6} md={3}>
-      <FormControl fullWidth variant="filled">
-        <InputLabel id={name}>{label}</InputLabel>
-        <Select labelId={name} value={value} onChange={handleChange}>
-          {values.map((value) => (
-            <MenuItem key={value} value={value}>
-              {value}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </Grid>
-  );
-};
-
-export default CustomSelector;
diff --git a/src/components/other/DeckDisplay.js b/src/components/other/DeckDisplay.js
deleted file mode 100644
index 4309e4e..0000000
--- a/src/components/other/DeckDisplay.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Paper, Button } from '@mui/material';
-import { DeckContext } from '../../context/DeckContext/DeckContext';
-import DeckButtonList from '../grids/deckBuilderGrids/DeckButtonList';
-import CardsGrid from '../grids/deckBuilderGrids/CardsGrid';
-import DeckEditPanel from './DeckEditPanel';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) => ({
-  root: { backgroundColor: '#f4f6f8' },
-  paper: {
-    padding: theme.spacing(3),
-    borderRadius: '10px',
-    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-  },
-  deckEditPanel: {
-    padding: theme.spacing(2),
-    backgroundColor: '#ffffff',
-    border: '1px solid #ddd',
-    borderRadius: theme.spacing(1),
-    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-    transition: 'opacity 0.5s ease-in-out',
-  },
-  noCardsText: {
-    color: '#666',
-    fontStyle: 'italic',
-  },
-}));
-
-const DeckDisplay = ({ userDecks = [] }) => {
-  const classes = useStyles();
-  const { setSelectedDeck, selectedDeck, updateAndSyncDeck } =
-    useContext(DeckContext);
-  const [selectedCards, setSelectedCards] = useState([]);
-  const [showAllDecks, setShowAllDecks] = useState(false);
-
-  useEffect(() => {
-    setSelectedCards(selectedDeck?.cards?.slice(0, 30) || []);
-  }, [selectedDeck]);
-
-  const handleSelectDeck = (deckId) => {
-    const foundDeck = userDecks.find((deck) => deck?._id === deckId);
-    if (foundDeck) {
-      setSelectedDeck(foundDeck);
-    }
-  };
-
-  return (
-    <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <Button onClick={() => setShowAllDecks(!showAllDecks)}>
-          {showAllDecks ? 'Hide Decks' : 'Show All Decks'}
-        </Button>
-        {showAllDecks && (
-          <DeckButtonList
-            userDecks={userDecks}
-            handleSelectDeck={handleSelectDeck}
-          />
-        )}
-        {selectedDeck && (
-          <DeckEditPanel
-            selectedDeck={selectedDeck}
-            onSave={updateAndSyncDeck}
-            className={classes.deckEditPanel}
-          />
-        )}
-        {selectedCards.length > 0 ? (
-          <CardsGrid selectedCards={selectedCards} />
-        ) : (
-          <div className={classes.noCardsText}>No cards to display</div>
-        )}
-      </Paper>
-    </div>
-  );
-};
-
-export default DeckDisplay;
diff --git a/src/components/other/DeckEditPanel.js b/src/components/other/DeckEditPanel.js
deleted file mode 100644
index c544dc0..0000000
--- a/src/components/other/DeckEditPanel.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@mui/styles';
-import { Button, TextField, Paper } from '@mui/material';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(3),
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3],
-  },
-  textField: {
-    marginBottom: theme.spacing(2),
-    '& .MuiOutlinedInput-root': {
-      '&:hover fieldset': {
-        borderColor: theme.palette.primary.main,
-      },
-      '&.Mui-focused fieldset': {
-        borderColor: theme.palette.primary.dark,
-      },
-    },
-  },
-  saveButton: {
-    boxShadow: 'none',
-    textTransform: 'none',
-    fontSize: 16,
-    padding: theme.spacing(1, 2),
-    border: `1px solid ${theme.palette.primary.main}`,
-    lineHeight: 1.5,
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
-      borderColor: theme.palette.primary.dark,
-      boxShadow: 'none',
-    },
-  },
-}));
-
-const DeckEditPanel = ({ selectedDeck, onSave }) => {
-  const classes = useStyles();
-  const [name, setName] = useState(selectedDeck?.name || '');
-  const [description, setDescription] = useState(
-    selectedDeck?.description || ''
-  );
-
-  const handleSave = () => {
-    // Log the new deck name and description before saving
-    console.log('New Deck Name:', name);
-    console.log('New Deck Description:', description);
-
-    onSave({
-      ...selectedDeck,
-      name,
-      description,
-    });
-  };
-
-  return (
-    <Paper elevation={3} className={classes.root}>
-      <TextField
-        className={classes.textField}
-        label="Deck Name"
-        value={name}
-        variant="outlined"
-        fullWidth
-        onChange={(e) => setName(e.target.value)}
-      />
-      <TextField
-        className={classes.textField}
-        label="Deck Description"
-        value={description}
-        variant="outlined"
-        fullWidth
-        multiline
-        rows={4}
-        onChange={(e) => setDescription(e.target.value)}
-      />
-      <Button
-        variant="contained"
-        color="primary"
-        className={classes.saveButton}
-        onClick={handleSave}
-      >
-        Save Changes
-      </Button>
-    </Paper>
-  );
-};
-
-export default DeckEditPanel;
diff --git a/src/components/other/InputComponents/CardNameInput.js b/src/components/other/InputComponents/CardNameInput.js
new file mode 100644
index 0000000..d8b8365
--- /dev/null
+++ b/src/components/other/InputComponents/CardNameInput.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Input } from '@mui/material';
+import { useCardStore } from '../../../context/CardContext/CardStore';
+
+const CardNameInput = ({ value, setValue, handleChange }) => {
+  const { handleRequest } = useCardStore();
+
+  // const handleChange = (event) => {
+  //   setValue(event.target.value);
+  // };
+  return (
+    <Input
+      fullWidth
+      placeholder="Type card name"
+      onChange={handleChange}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          handleRequest(value);
+        }
+      }}
+      value={value}
+    />
+  );
+};
+
+export default CardNameInput;
diff --git a/src/components/other/InputComponents/CollectionStatisticsSelector.jsx b/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
new file mode 100644
index 0000000..c55a545
--- /dev/null
+++ b/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
@@ -0,0 +1,169 @@
+import React, { useState, useMemo } from 'react';
+import {
+  MenuItem,
+  Select,
+  Typography,
+  Box,
+  Grid,
+  CardContent,
+  Card,
+} from '@mui/material';
+import { getFilteredData2 } from '../../reusable/chartUtils';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+
+function calculatePriceChanges(data) {
+  const sortedData = data.sort((a, b) => new Date(a.x) - new Date(b.x));
+  const latestDataPoint = sortedData[sortedData.length - 1];
+  const latestTime = new Date(latestDataPoint.x).getTime();
+  const twentyFourHoursAgo = latestTime - 24 * 60 * 60 * 1000;
+
+  // Find the data point closest to 24 hours before the latest data point
+  let closestIndex = -1;
+  let closestTimeDifference = Number.MAX_SAFE_INTEGER;
+
+  for (let i = 0; i < sortedData.length - 1; i++) {
+    const time = new Date(sortedData[i].x).getTime();
+    const timeDifference = Math.abs(time - twentyFourHoursAgo);
+
+    if (timeDifference < closestTimeDifference) {
+      closestTimeDifference = timeDifference;
+      closestIndex = i;
+    }
+  }
+
+  if (closestIndex !== -1) {
+    const pastPrice = sortedData[closestIndex].y;
+    // console.log('pastPrice', pastPrice);
+    const priceChange = latestDataPoint.y - pastPrice;
+    console.log('priceChange', priceChange);
+    const percentageChange = ((priceChange / pastPrice) * 100).toFixed(2);
+    // console.log('percentageChange', percentageChange);
+
+    return [
+      {
+        startDate: sortedData[closestIndex].x,
+        lowPoint: pastPrice.toFixed(2),
+        highPoint: latestDataPoint?.y?.toFixed(2),
+        endDate: latestDataPoint?.x,
+        priceChange: priceChange.toFixed(2),
+        percentageChange: `${percentageChange}%`,
+        priceIncreased: priceChange > 0,
+      },
+    ];
+  }
+
+  return [];
+}
+
+export const calculateStatistics = (data, timeRange) => {
+  if (!data || data.length === 0) return {};
+  const filteredData = data?.data?.filter(
+    (item) => new Date(item?.x).getTime() >= Date.now() - timeRange
+  );
+  if (filteredData.length === 0) return {};
+  let highPoint = 0;
+  let lowPoint = 0;
+  let sum = 0;
+  let averageData = 0;
+  let average = 0;
+  let volume = 0;
+  let mean = 0;
+  let squaredDiffs = 0;
+  let volatility = 0;
+  // const filteredData2 = getFilteredData2(data, timeRange);
+  // console.log('filteredData2', filteredData2);
+  // console.log('filteredData', filteredData);
+  for (const data of filteredData) {
+    highPoint = Math.max(...filteredData.map((item) => item.y));
+    lowPoint = Math.min(...filteredData.map((item) => item.y));
+    sum = filteredData.reduce((acc, curr) => acc + curr.y, 0);
+    averageData = calculatePriceChanges(filteredData);
+    average = sum / filteredData.length || 0;
+    volume = filteredData.length;
+    mean = sum / volume;
+    squaredDiffs = filteredData.map((item) => {
+      const diff = item.y - mean;
+      return diff * diff;
+    });
+    volatility = Math.sqrt(squaredDiffs.reduce((a, b) => a + b, 0) / volume);
+  }
+
+  return {
+    highPoint: highPoint.toFixed(2),
+    lowPoint: lowPoint.toFixed(2),
+    twentyFourHourAverage: {
+      startDate: averageData[0]?.startDate,
+      endDate: averageData[0]?.endDate,
+      lowPoint: averageData[0]?.lowPoint,
+      highPoint: averageData[0]?.highPoint,
+      priceChange: averageData[0]?.priceChange,
+      percentageChange: averageData[0]?.percentageChange,
+      priceIncreased: averageData[0]?.priceIncreased,
+    },
+    average: average?.toFixed(2),
+    volume,
+    volatility: volatility?.toFixed(2),
+  };
+};
+
+const CollectionStatisticsSelector = ({ data, timeRange, stats }) => {
+  const [selectedStat, setSelectedStat] = useState('');
+
+  const handleChange = (event) => setSelectedStat(event.target.value);
+
+  const StatCard = ({ title, value }) => (
+    <Card sx={{ minWidth: 275, marginBottom: 2 }}>
+      <CardContent>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+          {title}
+        </Typography>
+        <Typography variant="h5" component="div">
+          {value}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 2,
+        width: '100%',
+        // padding: 2,
+      }}
+    >
+      <Select
+        value={selectedStat}
+        onChange={handleChange}
+        displayEmpty
+        sx={{ width: '100%', marginBottom: 2 }}
+      >
+        <MenuItem value="" disabled>
+          Select Statistic
+        </MenuItem>
+        <MenuItem value="highPoint">High Point</MenuItem>
+        <MenuItem value="lowPoint">Low Point</MenuItem>
+        <MenuItem value="twentyFourHourAverage">24 Hour Average</MenuItem>
+        <MenuItem value="average">Average</MenuItem>
+        <MenuItem value="volume">Volume</MenuItem>
+        <MenuItem value="volatility">Volatility</MenuItem>
+      </Select>
+
+      <Grid container spacing={2} alignItems="center" justifyContent="center">
+        {selectedStat && (
+          <Grid item xs={12} md={6} lg={4}>
+            <StatCard
+              title={`${selectedStat.replace(/([A-Z])/g, ' $1').trim()}`}
+              value={`${stats[selectedStat]}`}
+            />
+          </Grid>
+        )}
+      </Grid>
+    </Box>
+  );
+};
+
+export default CollectionStatisticsSelector;
diff --git a/src/components/other/InputComponents/CustomSelector.js b/src/components/other/InputComponents/CustomSelector.js
new file mode 100644
index 0000000..2724fa2
--- /dev/null
+++ b/src/components/other/InputComponents/CustomSelector.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Grid, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { useMode } from '../../../context/hooks/colormode';
+
+const CustomSelector = ({ label, name, value, handleChange, values }) => {
+  // const handleChange = (event) => {
+  //   setValue(
+  //     event.target.value.toLowerCase() === 'unset' ? '' : event.target.value
+  //   );
+  // };
+  const defaultValue = value || 'Unset';
+
+  if (!values) {
+    return <div>Values not provided</div>;
+  }
+
+  if (!handleChange) {
+    return <div>handleChange not provided</div>;
+  }
+
+  if (!defaultValue) {
+    return <div>Value not provided</div>;
+  }
+  const { theme } = useMode();
+
+  return (
+    <FormControl fullWidth variant="filled" sx={{ mt: 1, mb: 1 }}>
+      <InputLabel id={name}>{label}</InputLabel>
+      <Select labelId={name} value={defaultValue} onChange={handleChange}>
+        {values.map((val) => (
+          <MenuItem key={val} value={val}>
+            {val}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default CustomSelector;
diff --git a/src/components/other/InputComponents/DeckEditPanel.js b/src/components/other/InputComponents/DeckEditPanel.js
new file mode 100644
index 0000000..cf5f991
--- /dev/null
+++ b/src/components/other/InputComponents/DeckEditPanel.js
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Button, TextField, Paper, Typography } from '@mui/material';
+import { useMode } from '../../../context/hooks/colormode';
+
+const DeckEditPanel = ({ selectedDeck, onSave }) => {
+  const { theme } = useMode();
+  const [name, setName] = useState(selectedDeck?.name || '');
+  const [description, setDescription] = useState(
+    selectedDeck?.description || ''
+  );
+
+  const handleSave = () => {
+    onSave({
+      ...selectedDeck,
+      name,
+      description,
+    });
+  };
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        padding: theme.spacing(4),
+        margin: theme.spacing(2),
+        borderRadius: theme.shape.borderRadius,
+        boxShadow: theme.shadows[3],
+        backgroundColor: theme.palette.primary.light,
+      }}
+    >
+      <Typography
+        variant="h6"
+        sx={{
+          marginBottom: theme.spacing(3),
+          fontWeight: theme.typography.fontWeightBold,
+          fontSize: theme.typography.h6.fontSize,
+          color: theme.palette.text.primary,
+        }}
+      >
+        Edit Deck
+      </Typography>
+      <TextField
+        sx={{
+          marginBottom: theme.spacing(3),
+          '& .MuiOutlinedInput-root': {
+            '&:hover fieldset': {
+              borderColor: theme.palette.secondary.light,
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: theme.palette.secondary.main,
+            },
+          },
+          '& .MuiInputBase-input': {
+            fontSize: theme.typography.subtitle1.fontSize,
+          },
+        }}
+        label="Deck Name"
+        value={name}
+        variant="outlined"
+        fullWidth
+        onChange={(e) => setName(e.target.value)}
+      />
+      <TextField
+        sx={{
+          marginBottom: theme.spacing(3),
+          '& .MuiOutlinedInput-root': {
+            '&:hover fieldset': {
+              borderColor: theme.palette.secondary.light,
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: theme.palette.secondary.main,
+            },
+          },
+          '& .MuiInputBase-input': {
+            fontSize: theme.typography.subtitle1.fontSize,
+          },
+        }}
+        label="Deck Description"
+        value={description}
+        variant="outlined"
+        fullWidth
+        multiline
+        rows={4}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+      <Button
+        variant="contained"
+        sx={{
+          boxShadow: theme.shadows[1],
+          textTransform: 'none',
+          fontSize: theme.typography.button.fontSize,
+          padding: theme.spacing(1, 4),
+          lineHeight: theme.typography.button.lineHeight,
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText,
+          '&:hover': {
+            backgroundColor: theme.palette.secondary.dark,
+            boxShadow: theme.shadows[2],
+          },
+        }}
+        onClick={handleSave}
+      >
+        Save Changes
+      </Button>
+    </Paper>
+  );
+};
+
+export default DeckEditPanel;
diff --git a/src/components/other/InputComponents/TimeRangeSelector.jsx b/src/components/other/InputComponents/TimeRangeSelector.jsx
new file mode 100644
index 0000000..dedff6c
--- /dev/null
+++ b/src/components/other/InputComponents/TimeRangeSelector.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { MenuItem, Select } from '@mui/material';
+import { useChartContext } from '../../../context/ChartContext/ChartContext';
+
+const TimeRangeSelector = () => {
+  const { timeRange, timeRanges, handleChange } = useChartContext();
+
+  return (
+    <Select
+      value={timeRange}
+      onChange={handleChange}
+      displayEmpty
+      variant="outlined"
+      sx={{ minWidth: 120, width: '100%' }}
+    >
+      {timeRanges.map((range) => (
+        <MenuItem key={range.label} value={range.value}>
+          {range.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+export default TimeRangeSelector;
diff --git a/src/components/other/InputComponents/UpdateStatusBox.jsx b/src/components/other/InputComponents/UpdateStatusBox.jsx
new file mode 100644
index 0000000..bfbfff1
--- /dev/null
+++ b/src/components/other/InputComponents/UpdateStatusBox.jsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { Typography } from '@mui/material';
+import { useCombinedContext } from '../../../context/CombinedProvider';
+import { useCookies } from 'react-cookie';
+
+const UpdateStatusBox = ({ socket }) => {
+  const { allCollectionData, listOfMonitoredCards, listOfSimulatedCards } =
+    useCombinedContext();
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [updateStatus, setUpdateStatus] = useState('Waiting for updates...');
+  const [cookies] = useCookies(['user']);
+
+  useEffect(() => {
+    const timeInterval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    const handleStatusUpdate = (statusUpdate) => {
+      setUpdateStatus(statusUpdate.message || 'Waiting for updates...');
+    };
+
+    if (socket) {
+      socket.on('STATUS_UPDATE', handleStatusUpdate);
+    }
+
+    // Cleanup function
+    return () => {
+      clearInterval(timeInterval);
+      if (socket) {
+        socket.off('STATUS_UPDATE', handleStatusUpdate);
+      }
+    };
+  }, [socket]);
+
+  const sendUpdateRequest = () => {
+    if (socket) {
+      socket.emit('STATUS_UPDATE_REQUEST', {
+        message: 'Requesting status update...',
+        data: listOfMonitoredCards,
+      });
+    }
+  };
+
+  // Styling for dark theme
+  const styles = {
+    container: {
+      padding: '15px',
+      border: '2px solid #444',
+      borderRadius: '8px',
+      backgroundColor: '#222',
+      color: '#fff',
+      // margin: '20px auto',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+      fontFamily: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      maxWidth: '400px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      height: '100%', // Adjust height here
+      width: '100%', // Adjust width here
+    },
+    statusBox: {
+      marginTop: '15px',
+      padding: '10px',
+      background: '#333',
+      borderRadius: '6px',
+      border: '1px solid #555',
+    },
+    button: {
+      padding: '10px 20px',
+      marginTop: '10px',
+      border: 'none',
+      borderRadius: '5px',
+      cursor: 'pointer',
+      backgroundColor: '#5CDB95',
+      color: 'white',
+      fontWeight: 'bold',
+      fontSize: '14px',
+      letterSpacing: '1px',
+      outline: 'none',
+    },
+  };
+
+  return (
+    <div style={styles.container}>
+      <Typography variant="subtitle1">
+        Current Time: {currentTime.toLocaleTimeString()}
+      </Typography>
+      <div style={styles.statusBox}>
+        <Typography variant="body1">Update Status: {updateStatus}</Typography>
+      </div>
+      <button style={styles.button} onClick={sendUpdateRequest}>
+        Request Update
+      </button>
+    </div>
+  );
+};
+
+export default UpdateStatusBox;
diff --git a/src/components/other/InputComponents/UpdateStatusBox2.jsx b/src/components/other/InputComponents/UpdateStatusBox2.jsx
new file mode 100644
index 0000000..53d7a35
--- /dev/null
+++ b/src/components/other/InputComponents/UpdateStatusBox2.jsx
@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { Snackbar, Typography } from '@mui/material';
+import { useCombinedContext } from '../../../context/CombinedProvider';
+import { useCookies } from 'react-cookie';
+
+const styles = {
+  container: {
+    padding: '15px',
+    border: '2px solid #444',
+    borderRadius: '8px',
+    backgroundColor: '#222',
+    color: '#fff',
+    // margin: '20px auto',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+    fontFamily: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    maxWidth: '400px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%', // Adjust height here
+    width: '100%', // Adjust width here
+  },
+  statusBox: {
+    marginTop: '15px',
+    padding: '10px',
+    background: '#333',
+    borderRadius: '6px',
+    border: '1px solid #555',
+  },
+  button: {
+    padding: '10px 20px',
+    marginTop: '10px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    backgroundColor: '#5CDB95',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: '14px',
+    letterSpacing: '1px',
+    outline: 'none',
+  },
+};
+
+const UpdateStatusBox2 = ({ socket }) => {
+  const {
+    allCollectionData,
+    listOfMonitoredCards,
+    handleSendAllCardsInCollections,
+  } = useCombinedContext();
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [updateStatus, setUpdateStatus] = useState('Waiting for cron...');
+  // const [openSnackbar, setOpenSnackbar] = useState(false);
+  const [cookies] = useCookies(['user']);
+  const [snackbarData, setSnackbarData] = useState({
+    open: false,
+    message: '',
+  });
+  const userId = cookies.user?.id;
+  const openSnackbar = (message) => {
+    setSnackbarData({ open: true, message });
+  };
+  useEffect(() => {
+    const timeInterval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    const handleStatusUpdate = (statusUpdate) => {
+      setUpdateStatus(statusUpdate.message || 'Waiting for updates...');
+    };
+
+    if (socket) {
+      socket.on('INITIAL_RESPONSE', handleStatusUpdate);
+    }
+
+    // Cleanup function
+    return () => {
+      clearInterval(timeInterval);
+      if (socket) {
+        socket.off('INITIAL_RESPONSE', handleStatusUpdate);
+      }
+    };
+  }, [socket]);
+  const handleTriggerCronJob = () => {
+    console.log('TRIGGERING CRON JOB');
+    console.log('USER ID:', userId);
+    console.log('LIST OF MONITORED CARDS:', listOfMonitoredCards);
+    if (userId && listOfMonitoredCards) {
+      handleSendAllCardsInCollections(userId, listOfMonitoredCards);
+      console.log('SENDING ALL CARDS IN COLLECTIONS');
+      openSnackbar('Triggered the cron job.');
+    }
+  };
+
+  // const sendUpdateRequest = () => {
+  //   if (socket) {
+  //     socket.emit('STATUS_UPDATE_REQUEST', {
+  //       message: 'Requesting status update...',
+  //       data: listOfMonitoredCards,
+  //     });
+  //   }
+  // };
+
+  // Styling for dark theme
+
+  return (
+    <div style={styles.container}>
+      <Typography variant="subtitle1">
+        Current Time: {currentTime.toLocaleTimeString()}
+      </Typography>
+      <div style={styles.statusBox}>
+        <Typography variant="body1">Update Status: {updateStatus}</Typography>
+      </div>
+      <button style={styles.button} onClick={() => handleTriggerCronJob()}>
+        Request CRON
+      </button>
+      <Snackbar
+        open={snackbarData.open}
+        autoHideDuration={6000}
+        onClose={() => setSnackbarData({ ...snackbarData, open: false })}
+        message={snackbarData.message}
+      />
+    </div>
+  );
+};
+
+export default UpdateStatusBox2;
diff --git a/src/components/other/LinearChart.js b/src/components/other/LinearChart.js
deleted file mode 100644
index 35cb65b..0000000
--- a/src/components/other/LinearChart.js
+++ /dev/null
@@ -1,319 +0,0 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { ResponsiveLine } from '@nivo/line';
-import { makeStyles, useTheme } from '@mui/styles';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
-
-const useStyles = makeStyles((theme) => ({
-  chartContainer: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-  },
-  loadingContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-  },
-  xAxisLabel: {
-    position: 'absolute',
-    bottom: 0,
-    left: '50%',
-    transform: 'translateX(-50%)',
-    textAlign: 'center',
-    marginTop: theme.spacing(2),
-    fontSize: '1rem',
-    color: theme.palette.text.primary,
-  },
-  yAxisLabel: {
-    position: 'absolute',
-    top: '50%',
-    left: 0,
-    transform: 'translateY(-50%) rotate(-90deg)',
-    textAlign: 'center',
-    marginTop: theme.spacing(2),
-    fontSize: '1rem',
-    color: theme.palette.text.primary,
-  },
-  customTooltip: {
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[3],
-  },
-}));
-
-const CustomTooltip = ({ point }) => {
-  const theme = useTheme();
-  const { serieId, data } = point;
-  const { label, xFormatted, yFormatted } = data || {};
-  const series = {
-    type: {
-      Collection: 'Collection',
-      Card: 'Card',
-      Deck: 'Deck',
-    },
-  };
-  return (
-    <Box
-      p={2}
-      boxShadow={3}
-      bgcolor={theme.palette.background.paper}
-      borderRadius={2}
-      borderColor={theme.palette.divider}
-      border={1}
-    >
-      <Typography variant="subtitle1" color="textPrimary">
-        {`Series: ${serieId}`}
-      </Typography>
-      {series.type[label] === 'Card' && (
-        <Typography variant="body1" color="textPrimary">
-          {`Card: ${label}`}
-        </Typography>
-      )}
-      <Typography variant="body2">
-        {`Time: ${new Date(xFormatted).toLocaleString()}`}
-      </Typography>
-      <Typography variant="h6" color="textSecondary">
-        {`Value: $${parseFloat(yFormatted).toFixed(2)}`}
-      </Typography>
-    </Box>
-  );
-};
-
-const roundToNearestTenth = (value) => {
-  return Math.round(value * 10) / 10;
-};
-
-const getFilteredData = (data, timeRange) => {
-  const cutOffTime = new Date().getTime() - timeRange;
-  return data
-    .filter((d) => new Date(d.x).getTime() >= cutOffTime)
-    .map((d) => ({ ...d, y: roundToNearestTenth(d.y) }));
-};
-
-const useMovingAverage = (data, numberOfPricePoints) => {
-  return useMemo(() => {
-    if (!Array.isArray(data)) {
-      return [];
-    }
-
-    return data.map((row, index, total) => {
-      const start = Math.max(0, index - numberOfPricePoints);
-      const end = index;
-      const subset = total.slice(start, end + 1);
-      const sum = subset.reduce((a, b) => a + b.y, 0);
-      return {
-        x: row.x,
-        y: sum / subset.length || 0,
-      };
-    });
-  }, [data, numberOfPricePoints]);
-};
-
-const getAveragedData = (filteredData) => {
-  const averaged = useMovingAverage(filteredData, 6);
-  return useMemo(() => {
-    return averaged;
-  }, [averaged]);
-};
-
-const useEventHandlers = () => {
-  const [hoveredData, setHoveredData] = useState(null);
-
-  const handleMouseMove = useCallback((point) => {
-    if (point) {
-      setHoveredData({
-        x: point.data.x,
-        y: point.data.y,
-      });
-    }
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setHoveredData(null);
-  }, []);
-
-  return { hoveredData, handleMouseMove, handleMouseLeave };
-};
-
-const getTickValues = (timeRange, timeRanges) => {
-  switch (timeRange) {
-    case timeRanges[0].value:
-      return 'every 15 minutes';
-    case timeRanges[1].value:
-      return 'every 2 hours';
-    case timeRanges[2].value:
-      return 'every day';
-    default:
-      return 'every week';
-  }
-};
-
-const LinearChart = ({
-  data,
-  latestData,
-  dimensions,
-  timeRanges,
-  timeRange,
-}) => {
-  const classes = useStyles();
-  const theme = useTheme();
-  const [isZoomed, setIsZoomed] = useState(false);
-  const { hoveredData, handleMouseMove, handleMouseLeave } = useEventHandlers();
-
-  const isValidDataPoint = (d) => d && 'x' in d && 'y' in d;
-  if (!Array.isArray(data) || !data.every(isValidDataPoint)) {
-    return <Typography variant="body1">No valid data available</Typography>;
-  }
-
-  const filteredData = useMemo(
-    () => getFilteredData(data, timeRange),
-    [data, timeRange]
-  );
-  const averagedData = getAveragedData(filteredData);
-  // console.log('averagedData', averagedData);
-  const tickValues = useMemo(
-    () => getTickValues(timeRange, timeRanges),
-    [timeRange]
-  );
-
-  const lastData = useMemo(() => {
-    if (data && data.length) {
-      return {
-        x: data[data.length - 1].x,
-        y: data[data.length - 1].y,
-      };
-    }
-    return {};
-  }, [data]);
-
-  return (
-    <div
-      className={classes.chartContainer}
-      style={{
-        width: '100%',
-        height: dimensions?.height ?? '100%',
-      }}
-    >
-      <ResponsiveLine
-        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-        xScale={{
-          type: 'time',
-          format: '%Y-%m-%d %H:%M',
-          useUTC: false,
-          precision: 'minute',
-        }}
-        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}
-        axisBottom={{
-          tickValues: tickValues,
-
-          tickSize: 5,
-          tickPadding: 5,
-          tickRotation: 0,
-          legendOffset: -12,
-          legend: 'Time',
-          format: '%H:%M',
-        }}
-        axisLeft={{
-          orient: 'left',
-          legend: 'Value ($)',
-          legendOffset: 12,
-          legendPosition: 'middle',
-          legendTextColor: theme.palette.text.primary,
-          legendTextSize: 14,
-          format: (value) => `$${value}`,
-        }}
-        enablePointLabel
-        pointLabel="y"
-        pointLabelYOffset={-12}
-        pointSize={6}
-        pointBorderWidth={1}
-        // pointBorderColor={{ from: 'color', modifiers: [['darker', 0.7]] }}
-        pointColor={theme.palette.primary.main}
-        // pointBorderColor={theme.palette.secondary.main}
-        colors={[theme.palette.primary.light]}
-        theme={{
-          points: {
-            dot: {
-              ...classes.customPoint, // Added for improved style
-              border: '1px solid ' + theme.palette.secondary.main,
-            },
-            tooltip: {
-              container: {
-                borderRadius: theme.shape.borderRadius,
-              },
-            },
-          },
-          grid: {
-            line: {
-              stroke: theme.palette.divider,
-              strokeWidth: 1,
-              strokeDasharray: '4 4',
-            },
-          },
-        }}
-        lineWidth={3}
-        curve="monotoneX"
-        useMesh={true}
-        data={[
-          {
-            id: 'Dataset',
-            data: averagedData?.map((d) => ({
-              x: new Date(d.x),
-              y: parseFloat(d.y),
-            })),
-          },
-        ]}
-        // data={[
-        //   {
-        //     id: 'Dataset',
-        //     data: averagedData.map((d) => ({
-        //       x: new Date(d.x).getTime(),
-        //       y: parseFloat(d.y),
-        //     })),
-        //   },
-        // ]}
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-        onClick={() => setIsZoomed(!isZoomed)}
-        tooltip={({ point }) => <CustomTooltip point={point} />}
-        sliceTooltip={({ slice }) => {
-          const point = slice.points.find(
-            (p) => p.id === 'Dataset' && p.data.x === lastData.x
-          );
-          if (point) {
-            return <CustomTooltip point={point} />;
-          }
-          return null;
-        }}
-      />
-      <Tooltip
-        title={`Time: ${
-          hoveredData
-            ? new Date(hoveredData.x).toLocaleString()
-            : new Date(lastData.x).toLocaleString()
-        }`}
-        arrow
-      >
-        <Typography className={classes.xAxisLabel}>
-          {hoveredData
-            ? new Date(hoveredData.x).toLocaleString()
-            : latestData?.x}
-        </Typography>
-      </Tooltip>
-      <Tooltip
-        title={`Value: $${hoveredData ? hoveredData.y : latestData?.y}`}
-        arrow
-      >
-        <Typography className={classes.yAxisLabel}>
-          {`$${hoveredData ? hoveredData.y : latestData?.y}`}
-        </Typography>
-      </Tooltip>
-    </div>
-  );
-};
-
-export default LinearChart;
diff --git a/src/components/other/PortfolioChart.jsx b/src/components/other/PortfolioChart.jsx
deleted file mode 100644
index a116633..0000000
--- a/src/components/other/PortfolioChart.jsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Container,
-  Grid,
-  MenuItem,
-  Paper,
-  Select,
-  debounce,
-} from '@mui/material';
-import { styled } from '@mui/system';
-import LinearChart from './LinearChart';
-import { useCollectionStore } from '../../context/hooks/collection';
-import TimeRangeSelector, { timeRanges } from './TimeRangeSelector';
-import { useChartContext } from '../../context/ChartContext/ChartContext';
-import ErrorBoundary from '../../context/ErrorBoundary';
-
-const ChartPaper = styled('div')(({ theme }) => ({
-  borderRadius: '12px',
-  // width: '100%',
-  height: '100%',
-  minWidth: '500px',
-  maxWidth: '800px',
-  boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .3)',
-  backgroundColor: '#ffffff',
-  color: '#333',
-  position: 'relative',
-  [theme.breakpoints.down('sm')]: {
-    minWidth: '300px',
-  },
-  [theme.breakpoints.up('md')]: {
-    minWidth: '500px',
-  },
-  [theme.breakpoints.up('lg')]: {
-    minWidth: '700px',
-  },
-}));
-
-const groupAndAverageData = (data, threshold = 1) => {
-  if (!data || data.length === 0) return [];
-
-  // 1. Create the clusters
-  const clusters = [];
-  let currentCluster = [data[0]];
-
-  for (let i = 1; i < data.length; i++) {
-    if (data[i].x - data[i - 1].x <= threshold) {
-      currentCluster.push(data[i]);
-    } else {
-      clusters.push(currentCluster);
-      currentCluster = [data[i]];
-    }
-  }
-  clusters.push(currentCluster); // Push the last cluster
-
-  // 2. For each cluster, find the middlemost x-value and average y-values
-  const averagedData = clusters.map((cluster) => {
-    const middleIndex = Math.floor(cluster.length / 2);
-    const avgY =
-      cluster.reduce((sum, point) => sum + point.y, 0) / cluster.length;
-
-    return {
-      x: cluster[middleIndex].x,
-      y: avgY,
-    };
-  });
-
-  return averagedData;
-};
-
-const PortfolioChart = () => {
-  const { latestData, setLatestData, timeRange, setTimeRange } =
-    useChartContext();
-  const [lastUpdateTime, setLastUpdateTime] = useState(null);
-  const chartContainerRef = useRef(null);
-  const { selectedCollection } = useCollectionStore();
-  const datasets = selectedCollection?.chartData?.allXYValues || [];
-  const datasets2 = useMemo(() => groupAndAverageData(datasets), [datasets]);
-
-  // Debounced function for setting the last update time
-  const debouncedSetLastUpdateTime = useMemo(
-    () =>
-      debounce(() => {
-        const currentTime = new Date().getTime();
-
-        if (!lastUpdateTime || currentTime - lastUpdateTime >= 600000) {
-          setLastUpdateTime(currentTime);
-
-          const lastDatasetIndex = datasets.length - 1;
-          const lastDataset = datasets[lastDatasetIndex];
-          lastDataset && setLatestData(lastDataset);
-        }
-      }, 100),
-    [datasets, lastUpdateTime]
-  );
-
-  useEffect(() => {
-    if (!datasets) return;
-    debouncedSetLastUpdateTime();
-  }, [datasets, debouncedSetLastUpdateTime]);
-
-  const chartDimensions = useMemo(
-    () =>
-      chartContainerRef.current?.getBoundingClientRect() || {
-        width: 400,
-        height: 600,
-      },
-    [chartContainerRef.current]
-  );
-
-  return (
-    <Container
-      maxWidth="lg"
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        // width: '100%',
-        // height: '100%',
-      }}
-    >
-      <ErrorBoundary>
-        {/* <Paper
-        elevation={8}
-        sx={{ padding: 2, borderRadius: 2, width: '100%', height: '100%' }}
-      > */}
-        <TimeRangeSelector
-          value={timeRange}
-          onChange={(e) => setTimeRange(e.target.value)}
-        />
-        <Grid
-          item
-          xs={12}
-          sx={{
-            height: '100%',
-            m: '10px',
-            padding: 2,
-            borderRadius: 2,
-            width: '100%',
-          }}
-        >
-          <ChartPaper elevation={3} ref={chartContainerRef}>
-            {datasets2.length > 0 ? (
-              <LinearChart
-                data={datasets2}
-                latestData={latestData}
-                dimensions={chartDimensions}
-                timeRanges={timeRanges}
-                timeRange={timeRange}
-              />
-            ) : (
-              <div>No data available</div>
-            )}
-          </ChartPaper>
-        </Grid>
-        {/* </Paper> */}
-      </ErrorBoundary>
-    </Container>
-  );
-};
-
-export default PortfolioChart;
diff --git a/src/components/other/TimeRangeSelector.jsx b/src/components/other/TimeRangeSelector.jsx
deleted file mode 100644
index 330f24a..0000000
--- a/src/components/other/TimeRangeSelector.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { MenuItem, Select } from '@mui/material';
-
-export const timeRanges = [
-  { label: '2 hours', value: 2 * 60 * 60 * 1000 },
-  { label: '24 hours', value: 24 * 60 * 60 * 1000 },
-  { label: '7 days', value: 7 * 24 * 60 * 60 * 1000 },
-  { label: '1 month', value: 30 * 24 * 60 * 60 * 1000 },
-];
-
-const TimeRangeSelector = ({ value, onChange }) => (
-  <Select value={value} onChange={(e) => onChange(Number(e.target.value))}>
-    {timeRanges.map((option) => (
-      <MenuItem key={option.label} value={option.value}>
-        {option.label}
-      </MenuItem>
-    ))}
-  </Select>
-);
-
-export default TimeRangeSelector;
diff --git a/src/components/other/dataDisplay/CardCountDisplay.jsx b/src/components/other/dataDisplay/CardCountDisplay.jsx
new file mode 100644
index 0000000..ecf90b4
--- /dev/null
+++ b/src/components/other/dataDisplay/CardCountDisplay.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Grid, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+
+// Styled components
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  padding: theme.spacing(1),
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[2],
+  textAlign: 'center',
+}));
+
+const CardCountDisplay = ({ quantity, label, className }) => {
+  const totalItems = quantity && quantity.totalItems ? quantity.totalItems : 0;
+
+  return (
+    <StyledGrid
+      container
+      className={className}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <StyledGrid item xs={12}>
+        <Typography variant="subtitle1">
+          {label}: {totalItems}
+        </Typography>
+      </StyledGrid>
+    </StyledGrid>
+  );
+};
+
+CardCountDisplay.propTypes = {
+  quantity: PropTypes.shape({
+    totalItems: PropTypes.number,
+  }),
+  label: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default CardCountDisplay;
diff --git a/src/components/other/CartSummary.js b/src/components/other/dataDisplay/CartSummary.js
similarity index 100%
rename from src/components/other/CartSummary.js
rename to src/components/other/dataDisplay/CartSummary.js
diff --git a/src/components/other/CartTotal.jsx b/src/components/other/dataDisplay/CartTotal.jsx
similarity index 100%
rename from src/components/other/CartTotal.jsx
rename to src/components/other/dataDisplay/CartTotal.jsx
diff --git a/src/components/other/dataDisplay/CollectionValueTracker.jsx b/src/components/other/dataDisplay/CollectionValueTracker.jsx
new file mode 100644
index 0000000..54a534f
--- /dev/null
+++ b/src/components/other/dataDisplay/CollectionValueTracker.jsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import {
+  Typography,
+  Box,
+  useTheme,
+  Grid,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Container,
+} from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+import { styled } from '@mui/styles';
+import { GridExpandMoreIcon } from '@mui/x-data-grid';
+import ChangeHistoryIcon from '@mui/icons-material/ChangeHistory';
+const StatBox = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  borderRadius: theme.shape.borderRadius,
+  padding: theme.spacing(2),
+  boxShadow: theme.shadows[3],
+  color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'space-around',
+  gap: theme.spacing(1), // Adds spacing between items
+}));
+
+const StatItem = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  marginBottom: theme.spacing(1),
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover, // Hover effect
+  },
+}));
+const styles = {
+  container: {
+    // padding: '15px',
+    border: '2px solid #444',
+    borderRadius: '8px',
+    backgroundColor: '#222',
+    color: '#fff',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+    fontFamily: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    maxWidth: '100%', // Adjusted for full width
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%',
+  },
+  statusBox: {
+    width: '100%', // Set to full width
+    // marginTop: '15px',
+    padding: '3px',
+    margin: '2px',
+    // padding: '10px',
+    background: '#333',
+    borderRadius: '6px',
+    border: '1px solid #555',
+  },
+};
+const CollectionValueTracker = ({ stats }) => {
+  const theme = useTheme();
+  const { getTotalPrice, selectedCollection } = useCollectionStore();
+  const twentyFourHourChange = stats.twentyFourHourAverage;
+  const newTotal = getTotalPrice();
+
+  console.log('newTotal:', newTotal);
+
+  const statsArray = [
+    {
+      label: 'Total Collection Value',
+      value: `$${newTotal}`,
+    },
+    {
+      label: '24 Hour Change (%)',
+      value: `${twentyFourHourChange?.percentageChange}`,
+      isIncrease: twentyFourHourChange?.priceIncreased,
+    },
+    {
+      label: '24 Hour Change ($)',
+      value: `$${twentyFourHourChange?.priceChange}`,
+      isIncrease: twentyFourHourChange?.priceIncreased,
+    },
+    // Additional stats
+    {
+      label: 'Last Price',
+      value: `${selectedCollection?.lastSavedPrice?.num}`,
+    },
+    { label: 'Average Price', value: `${stats?.average}` },
+    { label: 'Volume', value: `${stats?.volume}` },
+    { label: 'Volatility', value: `${stats?.volatility}` },
+    { label: 'High Point', value: `${twentyFourHourChange?.highPoint}` },
+    { label: 'Low Point', value: `${twentyFourHourChange?.lowPoint}` },
+    // TODO: add stats for top performing cards in certain sets
+  ];
+
+  return (
+    <div style={styles.container}>
+      <Container sx={{ w: 'maxContent', padding: 1, margin: 0 }}>
+        <Box sx={{ width: '100%' }}>
+          <div style={styles.statusBox}>
+            <Typography variant="subtitle1">
+              Performance:{' '}
+              {twentyFourHourChange?.percentageChange > 0
+                ? 'Positive'
+                : 'Negative'}
+            </Typography>
+            {/* </div> */}
+            {/* <div style={styles.statusBox}> */}
+            <Typography variant="body1">
+              <ChangeHistoryIcon
+                sx={{ background: theme.palette.success.main }}
+              />{' '}
+              {twentyFourHourChange?.percentageChange}%
+            </Typography>
+            <Accordion sx={{ w: '100%', overflow: 'visible' }}>
+              <AccordionSummary
+                expandIcon={<GridExpandMoreIcon />}
+                aria-controls="collection-stats-content"
+                id="collection-stats-header"
+              >
+                <Typography variant="h6">Collection Statistics</Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <StatBox>
+                  {statsArray.map((stat, index) => {
+                    const IconComponent =
+                      stat?.isIncrease !== undefined
+                        ? stat?.isIncrease
+                          ? ArrowUpwardIcon
+                          : ArrowDownwardIcon
+                        : null;
+                    const iconColor = stat?.isIncrease
+                      ? theme.palette.success.main
+                      : theme.palette.error.main;
+
+                    return (
+                      <StatItem key={index}>
+                        {IconComponent && (
+                          <IconComponent
+                            sx={{
+                              color: iconColor,
+                              marginRight: 2,
+                              fontSize: '1.5rem',
+                            }}
+                          />
+                        )}
+                        <Typography
+                          variant="subtitle1"
+                          sx={{
+                            flexGrow: 1,
+                            fontWeight: 'medium',
+                            color: 'white',
+                          }}
+                        >
+                          {stat?.label}:
+                        </Typography>
+                        <Typography
+                          variant="subtitle1"
+                          sx={{ fontWeight: 'bold', color: 'white' }}
+                        >
+                          {stat?.value}
+                        </Typography>
+                      </StatItem>
+                    );
+                  })}
+                </StatBox>
+              </AccordionDetails>
+            </Accordion>
+          </div>
+        </Box>
+      </Container>
+    </div>
+  );
+};
+
+export default CollectionValueTracker;
diff --git a/src/components/other/dataDisplay/ProgressCircle.jsx b/src/components/other/dataDisplay/ProgressCircle.jsx
new file mode 100644
index 0000000..50638ed
--- /dev/null
+++ b/src/components/other/dataDisplay/ProgressCircle.jsx
@@ -0,0 +1,23 @@
+import { Box, useTheme } from '@mui/material';
+import { tokens } from '../styles/theme';
+
+const ProgressCircle = ({ progress = '0.75', size = '40' }) => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+  const angle = progress * 360;
+
+  return (
+    <Box
+      sx={{
+        background: `radial-gradient(${colors.primary[400]} 55%, transparent 56%),
+            conic-gradient(transparent 0deg ${angle}deg, ${colors.blueAccent[500]} ${angle}deg 360deg),
+            ${colors.greenAccent[500]}`,
+        borderRadius: '50%',
+        width: `${size}px`,
+        height: `${size}px`,
+      }}
+    />
+  );
+};
+
+export default ProgressCircle;
diff --git a/src/components/other/dataDisplay/StatBox.jsx b/src/components/other/dataDisplay/StatBox.jsx
new file mode 100644
index 0000000..2aa5798
--- /dev/null
+++ b/src/components/other/dataDisplay/StatBox.jsx
@@ -0,0 +1,43 @@
+import { Box, Typography, useTheme } from '@mui/material';
+import { tokens } from '../styles/theme';
+import ProgressCircle from './ProgressCircle';
+
+const StatBox = ({ title, subtitle, icon, progress, increase }) => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+
+  return (
+    <Box width="100%" m="0 30px">
+      <Box display="flex" justifyContent="space-between">
+        <Box>
+          {icon}
+          <Typography
+            variant="h4"
+            fontWeight="bold"
+            sx={{ color: colors.grey[100] }}
+          >
+            {title}
+          </Typography>
+        </Box>
+        <Box>
+          <ProgressCircle progress={progress} />
+        </Box>
+      </Box>
+
+      <Box display="flex" justifyContent="space-between" mt="2px">
+        <Typography variant="h5" sx={{ color: colors.greenAccent[500] }}>
+          {subtitle}
+        </Typography>
+        <Typography
+          variant="h5"
+          fontStyle="italic"
+          sx={{ color: colors.greenAccent[600] }}
+        >
+          {increase}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default StatBox;
diff --git a/src/components/other/dataDisplay/StatisticsArea.jsx b/src/components/other/dataDisplay/StatisticsArea.jsx
new file mode 100644
index 0000000..c55f24b
--- /dev/null
+++ b/src/components/other/dataDisplay/StatisticsArea.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from '@mui/material';
+
+import withTheme from '@mui/styles/withTheme';
+
+function StatisticsArea(props) {
+  const { theme, CardChart, data } = props;
+  return (
+    CardChart &&
+    data.profit.length >= 2 &&
+    data.views.length >= 2 && (
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <CardChart
+            data={data.profit}
+            color={theme.palette.secondary.light}
+            height="70px"
+            title="Profit"
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <CardChart
+            data={data.views}
+            color={theme.palette.primary.light}
+            height="70px"
+            title="Views"
+          />
+        </Grid>
+      </Grid>
+    )
+  );
+}
+
+StatisticsArea.propTypes = {
+  theme: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  CardChart: PropTypes.elementType,
+};
+
+export default withTheme(StatisticsArea);
diff --git a/src/components/other/dataDisplay/TopCardsDisplay.jsx b/src/components/other/dataDisplay/TopCardsDisplay.jsx
new file mode 100644
index 0000000..be8a8da
--- /dev/null
+++ b/src/components/other/dataDisplay/TopCardsDisplay.jsx
@@ -0,0 +1,167 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import SwipeableViews from 'react-swipeable-views';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardMedia,
+  Grid,
+  MobileStepper,
+  Paper,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+import { useMode } from '../../../context/hooks/colormode';
+import { makeStyles } from '@mui/styles';
+import { ModalContext } from '../../../context/ModalContext/ModalContext';
+import GenericCard from '../../cards/GenericCard';
+import {
+  MainContainer2,
+  MainContainer,
+} from '../../../pages/pageStyles/StyledComponents';
+const useStyles = makeStyles((theme) => ({
+  stepper: {
+    // backgroundColor: theme.palette.success.main,
+    background: theme.palette.primary.light,
+    color: 'white',
+    marginTop: 'auto',
+  },
+}));
+
+const CarouselCard = ({ card }) => {
+  const { theme } = useMode();
+  const classes = useStyles();
+  const placeholderImage = '../../assets/images/placeholder.jpeg';
+  const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
+  const { openModalWithCard, closeModal, isModalOpen, modalContent } =
+    useContext(ModalContext);
+  const cardRef = useRef(null);
+
+  const handleClick = () => {
+    openModalWithCard(card);
+  };
+  return (
+    <MainContainer2>
+      <Grid container>
+        <Grid item xs={4} md={4}>
+          <GenericCard
+            card={card}
+            onClick={handleClick}
+            context={'Collection'}
+            ref={cardRef}
+          />
+        </Grid>
+        <Grid item xs={8} md={8} sx={{ padding: theme.spacing(2) }}>
+          <Typography variant="h6" color={theme.palette.success.main}>
+            {card.name}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {card.description}
+          </Typography>
+          <Typography variant="subtitle2" color={'white'}>
+            Price: ${card?.latestPrice?.num ?? 'N/A'}
+          </Typography>
+          {/* Additional statistics */}
+        </Grid>
+      </Grid>
+    </MainContainer2>
+  );
+};
+
+const TopCardsDisplay = () => {
+  const { theme } = useMode();
+  const { selectedCollection } = useCollectionStore();
+  const [top5Cards, setTop5Cards] = useState([]);
+  const [activeStep, setActiveStep] = useState(0);
+  const classes = useStyles();
+
+  useEffect(() => {
+    const sortedCards = selectedCollection?.cards
+      ?.map((card) => {
+        const latestPrice = card.latestPrice?.num ?? 0;
+        const lastSavedPrice = card.lastSavedPrice?.num ?? 0;
+
+        if (
+          latestPrice === 0 ||
+          latestPrice === undefined ||
+          lastSavedPrice === 0 ||
+          lastSavedPrice === undefined
+        ) {
+          console.warn(`Price missing for card: ${card.name}`);
+          return { ...card, diff: 0 };
+        }
+
+        console.log('latestPrice', latestPrice);
+        console.log('lastSavedPrice', lastSavedPrice);
+        return { ...card, diff: Math.abs(latestPrice - lastSavedPrice) };
+      })
+      .sort((a, b) => b.diff - a.diff || b.price - a.price)
+      .slice(0, 5);
+
+    console.log('sortedCards', sortedCards);
+    setTop5Cards(sortedCards);
+  }, [selectedCollection]);
+
+  const maxSteps = top5Cards.length;
+
+  const handleNext = () =>
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  const handleBack = () =>
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+
+  return (
+    <Box sx={{ margin: '20px' }}>
+      <SwipeableViews
+        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
+        index={activeStep}
+        onChangeIndex={setActiveStep}
+        enableMouseEvents
+        style={{
+          flexGrow: 1,
+          width: '100%', // Use full width of the container
+        }}
+      >
+        {top5Cards.map((card, index) => (
+          <MainContainer key={index}>
+            <CarouselCard card={card} />
+          </MainContainer>
+        ))}
+      </SwipeableViews>
+      <MobileStepper
+        steps={maxSteps}
+        position="static"
+        activeStep={activeStep}
+        className={classes.stepper}
+        nextButton={
+          <Button
+            size="small"
+            onClick={handleNext}
+            disabled={activeStep === maxSteps - 1}
+          >
+            {theme.direction === 'rtl' ? (
+              <KeyboardArrowLeft />
+            ) : (
+              <KeyboardArrowRight />
+            )}{' '}
+            Next
+          </Button>
+        }
+        backButton={
+          <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
+            {theme.direction === 'rtl' ? (
+              <KeyboardArrowRight />
+            ) : (
+              <KeyboardArrowLeft />
+            )}{' '}
+            Back
+          </Button>
+        }
+      />
+    </Box>
+  );
+};
+
+export default TopCardsDisplay;
diff --git a/src/components/other/UserStats.jsx b/src/components/other/dataDisplay/UserStats.jsx
similarity index 76%
rename from src/components/other/UserStats.jsx
rename to src/components/other/dataDisplay/UserStats.jsx
index 466e111..0cb073a 100644
--- a/src/components/other/UserStats.jsx
+++ b/src/components/other/dataDisplay/UserStats.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
-import { useDeckStore } from '../../context/DeckContext/DeckContext';
-import { useCollectionStore } from '../../context/hooks/collection';
-import { useCartStore } from '../../context/CartContext/CartContext';
+import { useDeckStore } from '../../../context/DeckContext/DeckContext';
+import { useCartStore } from '../../../context/CartContext/CartContext';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
 
 const UserStats = () => {
   const { allDecks } = useDeckStore();
diff --git a/src/components/reusable/ChartErrorBoundary.jsx b/src/components/reusable/ChartErrorBoundary.jsx
new file mode 100644
index 0000000..7ec649a
--- /dev/null
+++ b/src/components/reusable/ChartErrorBoundary.jsx
@@ -0,0 +1,30 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+
+class ChartErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can log the error to an error reporting service
+    console.error('Error in chart component:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <Typography variant="body1">Unable to display chart</Typography>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ChartErrorBoundary;
diff --git a/src/components/other/CustomPagination.jsx b/src/components/reusable/CustomPagination.jsx
similarity index 100%
rename from src/components/other/CustomPagination.jsx
rename to src/components/reusable/CustomPagination.jsx
diff --git a/src/components/reusable/HeaderTitle.jsx b/src/components/reusable/HeaderTitle.jsx
index 9d0559a..b70c0da 100644
--- a/src/components/reusable/HeaderTitle.jsx
+++ b/src/components/reusable/HeaderTitle.jsx
@@ -4,12 +4,12 @@ import React from 'react';
 
 const HeaderTitle = ({ title, size = 'extraSmall', location = 'left' }) => {
   const sizes = {
-    huge: '2.5rem',
-    large: '1.75rem',
-    medium: '1.5rem',
-    small: '1.25rem',
-    tiny: '1rem',
-    extraSmall: '0.75rem',
+    huge: { fontSize: '2.5rem', lineHeight: '3rem' },
+    large: { fontSize: '1.75rem', lineHeight: '2.25rem' },
+    medium: { fontSize: '1.5rem', lineHeight: '2rem' },
+    small: { fontSize: '1.25rem', lineHeight: '1.75rem' },
+    tiny: { fontSize: '1rem', lineHeight: '1.5rem' },
+    extraSmall: { fontSize: '0.75rem', lineHeight: '1.25rem' },
   };
 
   const textAlign = {
@@ -18,24 +18,33 @@ const HeaderTitle = ({ title, size = 'extraSmall', location = 'left' }) => {
     right: 'right',
   };
 
+  const containerStyles = {
+    backgroundColor: (theme) => theme.palette.background.default,
+    padding: 2,
+    transition: 'background-color 0.3s ease',
+    '&:hover': {
+      backgroundColor: (theme) => theme.palette.background.paper,
+    },
+  };
+
+  const typographyStyles = {
+    fontSize: sizes[size].fontSize,
+    lineHeight: sizes[size].lineHeight,
+    textAlign: textAlign[location],
+    fontWeight: 700,
+    letterSpacing: '0.05em',
+    margin: '0 auto',
+    color: (theme) => theme.palette.text.primary,
+    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',
+    transition: 'color 0.3s ease',
+    '&:hover': {
+      color: (theme) => theme.palette.secondary.main,
+    },
+  };
+
   return (
-    <Container
-      sx={{
-        backgroundColor: (theme) => theme.palette.background.default,
-        padding: 2,
-      }}
-    >
-      <Typography
-        variant="h4"
-        sx={{
-          fontSize: sizes[size],
-          textAlign: textAlign[location],
-          fontWeight: 700,
-          letterSpacing: '0.05em',
-          margin: '0 auto',
-          color: (theme) => theme.palette.text.primary,
-        }}
-      >
+    <Container sx={containerStyles}>
+      <Typography variant="h4" sx={typographyStyles}>
         {title}
       </Typography>
     </Container>
diff --git a/src/components/reusable/PrivateRoute.jsx b/src/components/reusable/PrivateRoute.jsx
new file mode 100644
index 0000000..20cebd4
--- /dev/null
+++ b/src/components/reusable/PrivateRoute.jsx
@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { Navigate } from 'react-router-dom';
+import { useCookies } from 'react-cookie';
+import { useAuthContext } from '../../context/hooks/auth';
+
+const PrivateRoute = ({ children }) => {
+  const authContext = useAuthContext();
+
+  // Use react-cookie's useCookies hook to read the 'isLoggedIn' cookie
+  const [cookies] = useCookies(['isLoggedIn']);
+
+  const isLoggedIn = authContext.isLoggedIn || cookies.isLoggedIn;
+
+  // If isLoggedIn from either cookie or context is true, proceed to the route
+  return isLoggedIn ? children : <Navigate to="/login" />;
+};
+
+export default PrivateRoute;
diff --git a/src/components/reusable/chartUtils.jsx b/src/components/reusable/chartUtils.jsx
new file mode 100644
index 0000000..474420f
--- /dev/null
+++ b/src/components/reusable/chartUtils.jsx
@@ -0,0 +1,173 @@
+export const getUniqueValidData = (currentChartData) => {
+  if (!Array.isArray(currentChartData)) {
+    console.error('Invalid input: currentChartData should be an array');
+    return [];
+  }
+
+  const uniqueLabels = new Set();
+  const uniqueXValues = new Set();
+
+  return currentChartData
+    .filter((entry) => {
+      // Check if entry is valid, y is a number and not zero, and label is unique
+      return (
+        entry &&
+        typeof entry === 'object' &&
+        typeof entry.y === 'number' &&
+        entry.y !== 0 &&
+        entry.y !== null &&
+        entry.y !== undefined &&
+        entry.label &&
+        !uniqueLabels.has(entry.label)
+      );
+    })
+    .filter((entry) => {
+      // Check if x is present, not null, not undefined, and unique
+      const hasValidX =
+        entry && 'x' in entry && entry.x !== null && entry.x !== undefined;
+      if (hasValidX && !uniqueXValues.has(entry.x)) {
+        uniqueXValues.add(entry.x);
+        uniqueLabels.add(entry.label);
+        return true;
+      }
+      return false;
+    })
+    .map((entry) => ({
+      label: entry.label,
+      x: entry.x,
+      y: entry.y,
+    }));
+};
+
+export const groupAndAverageData = (data, threshold = 600000) => {
+  if (!data || data.length === 0) return [];
+
+  const clusters = [];
+  let currentCluster = [data[0]];
+
+  // console.log('Initial cluster with first data point: ', currentCluster);
+
+  for (let i = 1; i < data.length; i++) {
+    const prevTime = new Date(data[i - 1].x).getTime();
+    const currentTime = new Date(data[i].x).getTime();
+    const timeDiff = currentTime - prevTime;
+
+    // console.log(
+    //   `Time difference between points ${i - 1} and ${i}: ${timeDiff}ms`
+    // );
+
+    if (timeDiff <= threshold) {
+      currentCluster.push(data[i]);
+    } else {
+      clusters.push(currentCluster);
+      currentCluster = [data[i]];
+    }
+  }
+  clusters.push(currentCluster); // Push the last cluster
+  // console.log('Final cluster: ', currentCluster);
+
+  // Process each cluster to create the desired output format
+  clusters.map((cluster) => {
+    const middleIndex = Math.floor(cluster.length / 2);
+    const middleDatum = cluster[middleIndex];
+    const avgY =
+      cluster.reduce((sum, point) => sum + point.y, 0) / cluster.length;
+
+    const date = new Date(middleDatum.x);
+    const formattedDate = date.toISOString();
+
+    return {
+      label: `Price at ${formattedDate}`,
+      x: formattedDate,
+      y: avgY,
+    };
+  });
+
+  return clusters;
+};
+
+export const getAveragedData = (data) => {
+  // Use a regular function instead of a hook
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  return data.map((row, index, total) => {
+    const start = Math.max(0, index - 6);
+    const end = index;
+    const subset = total.slice(start, end + 1);
+    const sum = subset.reduce((a, b) => a + b.y, 0);
+    return {
+      x: row.x,
+      y: sum / subset.length || 0,
+    };
+  });
+};
+
+export const getTickValues = (timeRange) => {
+  console.log('timeRange: ', timeRange);
+  const mapping = {
+    600000: 'every 10 minutes',
+    900000: 'every 15 minutes',
+    3600000: 'every hour',
+    7200000: 'every 2 hours',
+    86400000: 'every day',
+    604800000: 'every week',
+    2592000000: 'every month',
+  };
+  return mapping[timeRange] || 'every day'; // Default to 'every week' if no match
+};
+
+export const convertDataForNivo2 = (rawData2) => {
+  if (!Array.isArray(rawData2) || rawData2?.length === 0) {
+    console.error('Invalid or empty rawData provided', rawData2);
+    return [];
+  }
+
+  // console.log('rawData2: ', rawData2);
+  // console.log('rawData2.data: ', rawData2[0]);
+  // rawData is assumed to be an array of objects with 'label', 'x', and 'y' properties
+  const nivoData = rawData2[0].map((dataPoint) => ({
+    x: dataPoint.x, // x value is already an ISO date string
+    y: dataPoint.y, // y value
+  }));
+
+  // Wrapping the data for a single series. You can add more series similarly
+  return [
+    {
+      id: 'Averaged Data',
+      color: '#4cceac',
+      data: nivoData,
+    },
+  ];
+};
+
+const roundToNearestTenth = (value) => {
+  return Math.round(value * 10) / 10;
+};
+
+export const getFilteredData = (data, timeRange) => {
+  const cutOffTime = new Date().getTime() - timeRange;
+  return data
+    .filter((d) => {
+      const date = new Date(d.x);
+      if (isNaN(date.getTime())) {
+        console.error('Invalid date:', d.x);
+        return false;
+      }
+      return date.getTime() >= cutOffTime;
+    })
+    .map((d) => ({ ...d, y: roundToNearestTenth(d.y) }));
+};
+
+export const formatDateToString = (date) => {
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    console.error('Invalid date:', date);
+    return '';
+  }
+  return `${date.getFullYear()}-${(date.getMonth() + 1)
+    .toString()
+    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date
+    .getHours()
+    .toString()
+    .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+};
diff --git a/src/components/icons/CartIcon.jsx b/src/components/reusable/icons/CartIcon.jsx
similarity index 100%
rename from src/components/icons/CartIcon.jsx
rename to src/components/reusable/icons/CartIcon.jsx
diff --git a/src/components/icons/CollectionIcon.jsx b/src/components/reusable/icons/CollectionIcon.jsx
similarity index 100%
rename from src/components/icons/CollectionIcon.jsx
rename to src/components/reusable/icons/CollectionIcon.jsx
diff --git a/src/components/reusable/icons/DeckOfCardsIcon.jsx b/src/components/reusable/icons/DeckOfCardsIcon.jsx
new file mode 100644
index 0000000..32afe04
--- /dev/null
+++ b/src/components/reusable/icons/DeckOfCardsIcon.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconButton } from '@mui/material';
+import deckIcon1 from '../../../assets/deckIcon2.png';
+
+const DeckOfCardsIcon = () => {
+  return (
+    <IconButton
+      aria-label="deck"
+      sx={{
+        width: 48, // Standard navbar icon size, adjust as needed
+        height: 48, // Standard navbar icon size, adjust as needed
+        padding: '8px', // Padding to provide some space around the icon
+        margin: '0', // Adjust margin as needed based on navbar layout
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.04)', // Slight effect on hover
+        },
+        // Ensure the img tag inside the button fits well
+        '& img': {
+          maxWidth: '100%',
+          maxHeight: '100%',
+        },
+      }}
+    >
+      <img src={deckIcon1} alt="deck icon" />
+    </IconButton>
+  );
+};
+
+export default DeckOfCardsIcon;
diff --git a/src/components/icons/TestingIcon.jsx b/src/components/reusable/icons/TestingIcon.jsx
similarity index 100%
rename from src/components/icons/TestingIcon.jsx
rename to src/components/reusable/icons/TestingIcon.jsx
diff --git a/src/components/indicators/ErrorIndicator.js b/src/components/reusable/indicators/ErrorIndicator.js
similarity index 68%
rename from src/components/indicators/ErrorIndicator.js
rename to src/components/reusable/indicators/ErrorIndicator.js
index f19f6e1..f3c5fa2 100644
--- a/src/components/indicators/ErrorIndicator.js
+++ b/src/components/reusable/indicators/ErrorIndicator.js
@@ -5,26 +5,7 @@ import { makeStyles } from '@mui/styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Container from '@mui/material/Container';
 import { Alert, AlertTitle } from '@mui/material';
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    padding: theme.spacing(2),
-    margin: theme.spacing(2),
-    backgroundColor: theme.palette.error.light,
-  },
-  typography: {
-    color: theme.palette.error.dark,
-  },
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-  },
-  icon: {
-    marginRight: theme.spacing(1),
-    color: theme.palette.error.main,
-  },
-}));
+import { useStyles } from './styles';
 
 const ErrorIndicator = ({ error }) => {
   const classes = useStyles();
diff --git a/src/components/indicators/LoadingIndicator.js b/src/components/reusable/indicators/LoadingIndicator.js
similarity index 100%
rename from src/components/indicators/LoadingIndicator.js
rename to src/components/reusable/indicators/LoadingIndicator.js
diff --git a/src/components/reusable/indicators/LoadingIndicator2.js b/src/components/reusable/indicators/LoadingIndicator2.js
new file mode 100644
index 0000000..150584d
--- /dev/null
+++ b/src/components/reusable/indicators/LoadingIndicator2.js
@@ -0,0 +1,13 @@
+// import * as React from 'react';
+// import Box from '@mui/material/Box';
+// import LoadingCardAnimation from '../../../assets/animations/LoadingCardAnimation';
+
+// const LoadingIndicator2 = () => {
+//   return (
+//     <Box sx={{ display: 'flex' }}>
+//       <LoadingCardAnimation />
+//     </Box>
+//   );
+// };
+
+// export default LoadingIndicator2;
diff --git a/src/components/reusable/indicators/styles.js b/src/components/reusable/indicators/styles.js
new file mode 100644
index 0000000..c5f9378
--- /dev/null
+++ b/src/components/reusable/indicators/styles.js
@@ -0,0 +1,21 @@
+import { makeStyles } from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  paper: {
+    padding: theme.spacing(2),
+    margin: theme.spacing(2),
+    backgroundColor: theme.palette.error.light,
+  },
+  typography: {
+    color: theme.palette.error.dark,
+  },
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  icon: {
+    marginRight: theme.spacing(1),
+    color: theme.palette.error.main,
+  },
+}));
diff --git a/src/components/search/DeckSearch.js b/src/components/search/DeckSearch.js
index aee988a..b024742 100644
--- a/src/components/search/DeckSearch.js
+++ b/src/components/search/DeckSearch.js
@@ -9,10 +9,9 @@ import {
   Pagination,
 } from '@mui/material';
 import { useCardStore } from '../../context/CardContext/CardStore';
-import { useTheme } from '@emotion/react';
-import SearchForm from './SearchForm';
+import SearchForm from '../forms/SearchForm';
 import DeckSearchCardGrid from '../grids/searchResultGrids/DeckSearchCardGrid';
-import CustomPagination from '../other/CustomPagination';
+import CustomPagination from '../reusable/CustomPagination';
 
 const DeckSearch = ({ userDecks }) => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -29,11 +28,21 @@ const DeckSearch = ({ userDecks }) => {
   const itemsPerPage = 36;
   const start = (page - 1) * itemsPerPage;
   const end = start + itemsPerPage;
-  const currentDeckSearchData = deckSearchData.slice(start, end);
+  const currentDeckSearchData = deckSearchData?.slice(start, end);
 
   return (
     <Fade in={true} timeout={500}>
-      <Box p={1}>
+      <Box
+        p={1}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
         <SearchForm
           searchTerm={searchTerm}
           handleChange={handleChange}
diff --git a/src/components/search/PortfolioCardSearch.jsx b/src/components/search/PortfolioCardSearch.jsx
deleted file mode 100644
index c674d04..0000000
--- a/src/components/search/PortfolioCardSearch.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Importações
-import React from 'react';
-import { Grid } from '@mui/material';
-import SearchButton from '../buttons/other/SearchButton';
-import CardNameInput from '../other/CardNameInput';
-
-const PortfolioCardSearch = ({
-  searchParams,
-  setSearchParams,
-  handleRequest,
-}) => (
-  <Grid item xs={12}>
-    <CardNameInput
-      value={searchParams}
-      setValue={(newValue) =>
-        setSearchParams((prevState) => ({
-          ...prevState,
-          name: newValue,
-        }))
-      }
-      handleRequest={() => handleRequest(searchParams)}
-    />
-    <SearchButton searchParams={searchParams || []} />
-  </Grid>
-);
-
-export default PortfolioCardSearch;
diff --git a/src/components/search/SearchBar.js b/src/components/search/SearchBar.js
index d8d8338..072669a 100644
--- a/src/components/search/SearchBar.js
+++ b/src/components/search/SearchBar.js
@@ -1,103 +1,113 @@
-import React from 'react';
-import { Grid, Box, Typography, Container } from '@mui/material';
+import React, { useState } from 'react';
+import { Grid, Box, Typography, Container, Paper } from '@mui/material';
 import { useCardStore } from '../../context/CardContext/CardStore';
 import SearchButton from '../buttons/other/SearchButton';
-import CardNameInput from '../other/CardNameInput';
-import CustomSelector from '../other/CustomSelector';
-import { useCombinedContext } from '../../context/CombinedProvider';
-
-const initialState = {
-  name: '',
-  race: '',
-  type: '',
-  attribute: '',
-  level: '',
-};
+import CardNameInput from '../other/InputComponents/CardNameInput';
+import CustomSelector from '../other/InputComponents/CustomSelector';
+import search from './search.json';
+import { useMode } from '../../context/hooks/colormode';
 
 const SearchBar = () => {
-  const { searchParams, setSearchParams } = useCombinedContext(initialState);
-  const { handleRequest } = useCardStore();
-
-  const filters = [
-    {
-      label: 'Level',
-      name: 'level',
-      values: [
-        'Unset',
-        '1',
-        '2',
-        '3',
-        '4',
-        '5',
-        '6',
-        '7',
-        '8',
-        '9',
-        '10',
-        '11',
-        '12',
-      ],
-    },
-    { label: 'Race', name: 'race', values: ['Unset', 'Aqua', 'Beast'] },
-    {
-      label: 'Type',
-      name: 'type',
-      values: ['Unset', 'Effect Monster', 'Flip Effect Monster'],
-    },
-    {
-      label: 'Attribute',
-      name: 'attribute',
-      values: [
-        'Unset',
-        'Dark',
-        'Divine',
-        'Earth',
-        'Fire',
-        'Light',
-        'Water',
-        'Wind',
-      ],
-    },
-  ];
+  const { theme } = useMode();
+  const { initialState, filters } = search;
 
+  const [searchParams, setSearchParams] = useState({
+    name: '',
+    type: '',
+    attribute: '',
+    race: '',
+  });
+  const { handleRequest } = useCardStore();
+  // const handleChange = (name, newValue) => {
+  //   setSearchParams((prev) => ({ ...prev, [name]: newValue }));
+  // };
+  const handleChange = (name, newValue) => {
+    setSearchParams((prev) => ({ ...prev, [name]: newValue }));
+  };
+  // Correct handleSubmit to use handleRequest with searchParams
+  // const handleSubmit = (event) => {
+  //   event.preventDefault();
+  //   handleRequest(searchParams);
+  // };
+  const handleSubmit = () => {
+    handleRequest(searchParams);
+  };
   return (
-    <Box sx={{ padding: 2, borderRadius: 2 }}>
-      <Container maxWidth="md">
-        <Typography variant="h4" align="center" gutterBottom>
+    <Paper
+      sx={{
+        padding: 3,
+        borderRadius: 2,
+        backgroundColor: 'background.paper',
+        boxShadow: 3,
+        margin: 'auto',
+        width: '100%',
+        maxWidth: 'md',
+        '&:hover': {
+          boxShadow: 6,
+        },
+      }}
+    >
+      <Container>
+        <Typography
+          variant="h4"
+          align="center"
+          sx={{
+            mb: 3,
+            fontWeight: 'bold',
+            color: theme.palette.primary.main,
+            textTransform: 'uppercase',
+          }}
+        >
           Search Cards
         </Typography>
         <Grid container spacing={2}>
           <Grid item xs={12}>
             <CardNameInput
-              value={searchParams?.name}
-              setValue={(newValue) =>
-                setSearchParams((prevState) => ({
-                  ...prevState,
-                  name: newValue,
-                }))
-              }
-              handleRequest={() => handleRequest(searchParams)}
+              value={searchParams.name}
+              handleChange={(event) => handleChange('name', event.target.value)}
             />
           </Grid>
           {filters?.map((filter) => (
-            <CustomSelector
-              key={filter?.name}
-              label={filter?.label}
-              name={filter?.name}
-              value={searchParams?.[filter?.name]}
-              setValue={(newValue) =>
-                setSearchParams((prevState) => ({
-                  ...prevState,
-                  [filter?.name]: newValue,
-                }))
-              }
-              values={filter?.values}
-            />
+            <Grid item xs={12} sm={6} md={3} key={filter?.label}>
+              <CustomSelector
+                label={filter?.label}
+                name={filter?.name}
+                value={searchParams?.[filter?.label]}
+                handleChange={(event) =>
+                  handleChange(filter.label, event.target.value)
+                }
+                // handleChange={(event) =>
+                //   handleChange(filter.name, event.target.value)
+                // }
+                // setValue={(newValue) =>
+                //   handleChange({ target: { value: newValue } })
+                // }
+                // handleChange={handleChange}
+                // setValue={(newValue) =>
+                //   setSearchParams((prevState) => ({
+                //     ...prevState,
+                //     [filter?.name]: newValue,
+                //   }))
+                // }
+                setSearchParams={setSearchParams}
+                values={filter?.values}
+              />
+            </Grid>
           ))}
-          <SearchButton searchParams={searchParams} />
+          <Grid
+            item
+            xs={12}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              mt: 2,
+            }}
+          >
+            <SearchButton handleSubmit={handleSubmit} />
+          </Grid>
         </Grid>
       </Container>
-    </Box>
+    </Paper>
   );
 };
 
diff --git a/src/components/search/SearchForm.jsx b/src/components/search/SearchForm.jsx
deleted file mode 100644
index 923b629..0000000
--- a/src/components/search/SearchForm.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { TextField, Button } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-const useStyles = makeStyles((theme) => ({
-  form: {
-    // minWidth: '90%', // Set the min-width
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2), // You can control the gap between the TextField and Button
-  },
-}));
-
-const SearchForm = ({ searchTerm, handleChange, handleSubmit }) => {
-  const classes = useStyles();
-
-  return (
-    <form onSubmit={handleSubmit} className={classes.form}>
-      <TextField
-        value={searchTerm}
-        onChange={handleChange}
-        label="Search for cards"
-        variant="outlined"
-        fullWidth
-      />
-      <Button type="submit" variant="contained" color="primary" fullWidth>
-        Search
-      </Button>
-    </form>
-  );
-};
-
-export default SearchForm;
diff --git a/src/components/search/SearchResultsDisplay.jsx b/src/components/search/SearchResultsDisplay.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/search/search.json b/src/components/search/search.json
new file mode 100644
index 0000000..d5b07c4
--- /dev/null
+++ b/src/components/search/search.json
@@ -0,0 +1,54 @@
+{
+  "initialState": {
+    "name": "",
+    "race": "",
+    "type": "",
+    "attribute": "",
+    "level": ""
+  },
+  "filters": [
+    {
+      "label": "Level",
+      "name": "level",
+      "values": [
+        "Unset",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12"
+      ]
+    },
+    {
+      "label": "Race",
+      "name": "race",
+      "values": ["Unset", "Aqua", "Beast"]
+    },
+    {
+      "label": "Type",
+      "name": "type",
+      "values": ["Unset", "Effect Monster", "Flip Effect Monster"]
+    },
+    {
+      "label": "Attribute",
+      "name": "attribute",
+      "values": [
+        "Unset",
+        "Dark",
+        "Divine",
+        "Earth",
+        "Fire",
+        "Light",
+        "Water",
+        "Wind"
+      ]
+    }
+  ]
+}
diff --git a/src/containers/CardDetailsContainer.jsx b/src/containers/CardDetailsContainer.jsx
new file mode 100644
index 0000000..266ae68
--- /dev/null
+++ b/src/containers/CardDetailsContainer.jsx
@@ -0,0 +1,26 @@
+// Import necessary modules from MUI or other libraries
+import React from 'react';
+import { Typography, Grid } from '@mui/material';
+import { useStyles } from '../components/cards/cardStyles';
+
+const CardDetailsContainer = ({ card }) => {
+  const classes = useStyles();
+
+  // Here you can add more details about the card using the 'card' object
+  // For now, just displaying the card name and description if available
+  return (
+    <Grid container spacing={2} className={classes.detailsContainer}>
+      <Grid item xs={12}>
+        <Typography variant="h5" gutterBottom>
+          {card?.name}
+        </Typography>
+        <Typography variant="body1">
+          {card?.desc || 'No description available.'}
+        </Typography>
+        {/* You can continue adding more details here */}
+      </Grid>
+    </Grid>
+  );
+};
+
+export default CardDetailsContainer;
diff --git a/src/containers/PortfolioChartContainer.jsx b/src/containers/PortfolioChartContainer.jsx
deleted file mode 100644
index 93332ac..0000000
--- a/src/containers/PortfolioChartContainer.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Grid, Paper } from '@mui/material';
-import PortfolioChart from '../components/other/PortfolioChart'; // Assuming the import path based on your previous code
-
-const PortfolioChartContainer = ({ selectedCards, removeCard }) => {
-  return (
-    <Grid item xs={12} sx={{ height: '100%', width: '100%' }}>
-      <Paper
-        elevation={3}
-        sx={{
-          background:
-            'linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(204,204,204,1) 100%)',
-          borderRadius: '12px',
-          p: 2,
-          height: '100%',
-          width: '100%',
-          boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .3)',
-        }}
-      >
-        <PortfolioChart selectedCards={selectedCards} removeCard={removeCard} />
-      </Paper>
-    </Grid>
-  );
-};
-
-export default PortfolioChartContainer;
diff --git a/src/containers/PortfolioListContainer.jsx b/src/containers/PortfolioListContainer.jsx
deleted file mode 100644
index 4865b33..0000000
--- a/src/containers/PortfolioListContainer.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Grid, Paper } from '@mui/material';
-import CardList from '../components/grids/collectionGrids/CardList';
-
-const PortfolioListContainer = ({ selectedCards, removeCard }) => {
-  return (
-    <Grid item xs={12} sx={{ height: '100%', width: '100%' }}>
-      <Paper
-        elevation={3}
-        sx={{
-          background:
-            'linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(204,204,204,1) 100%)',
-          borderRadius: '12px',
-          p: 2,
-          height: '100%',
-          width: '100%',
-          boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .3)',
-        }}
-      >
-        <CardList selectedCards={selectedCards} removeCard={removeCard} />
-      </Paper>
-    </Grid>
-  );
-};
-
-export default PortfolioListContainer;
diff --git a/src/containers/cartPageContainers/AddressForm.jsx b/src/containers/cartPageContainers/AddressForm.jsx
new file mode 100644
index 0000000..7ef5ff6
--- /dev/null
+++ b/src/containers/cartPageContainers/AddressForm.jsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+export default function AddressForm() {
+  return (
+    <React.Fragment>
+      <Typography variant="h6" gutterBottom>
+        Shipping address
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            required
+            id="firstName"
+            name="firstName"
+            label="First name"
+            fullWidth
+            autoComplete="given-name"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            required
+            id="lastName"
+            name="lastName"
+            label="Last name"
+            fullWidth
+            autoComplete="family-name"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            required
+            id="address1"
+            name="address1"
+            label="Address line 1"
+            fullWidth
+            autoComplete="shipping address-line1"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            id="address2"
+            name="address2"
+            label="Address line 2"
+            fullWidth
+            autoComplete="shipping address-line2"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            required
+            id="city"
+            name="city"
+            label="City"
+            fullWidth
+            autoComplete="shipping address-level2"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            id="state"
+            name="state"
+            label="State/Province/Region"
+            fullWidth
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            required
+            id="zip"
+            name="zip"
+            label="Zip / Postal code"
+            fullWidth
+            autoComplete="shipping postal-code"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            required
+            id="country"
+            name="country"
+            label="Country"
+            fullWidth
+            autoComplete="shipping country"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <FormControlLabel
+            control={
+              <Checkbox color="secondary" name="saveAddress" value="yes" />
+            }
+            label="Use this address for payment details"
+          />
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/CartContainer.jsx b/src/containers/cartPageContainers/CartContainer.jsx
similarity index 100%
rename from src/containers/CartContainer.jsx
rename to src/containers/cartPageContainers/CartContainer.jsx
diff --git a/src/components/content/CartContent.js b/src/containers/cartPageContainers/CartContent.js
similarity index 84%
rename from src/components/content/CartContent.js
rename to src/containers/cartPageContainers/CartContent.js
index a3d926f..c95db93 100644
--- a/src/components/content/CartContent.js
+++ b/src/containers/cartPageContainers/CartContent.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Typography } from '@mui/material';
 import { useCartStore } from '../../context/CartContext/CartContext';
-import CartContainer from '../../containers/CartContainer';
-import CartItem from '../grids/CartItem';
-import CartTotal from '../other/CartTotal';
+import CartContainer from './CartContainer';
+import CartItem from '../../components/grids/CartItem';
+import CartTotal from '../../components/other/dataDisplay/CartTotal';
 
 const CartContent = () => {
   const { cartData, getTotalCost } = useCartStore();
diff --git a/src/containers/CartContentContainer.js b/src/containers/cartPageContainers/CartContentContainer.js
similarity index 79%
rename from src/containers/CartContentContainer.js
rename to src/containers/cartPageContainers/CartContentContainer.js
index 89161b4..5dd3823 100644
--- a/src/containers/CartContentContainer.js
+++ b/src/containers/cartPageContainers/CartContentContainer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/system';
-import LoadingIndicator from '../components/indicators/LoadingIndicator';
-import CartContent from '../components/content/CartContent';
+import LoadingIndicator from '../../components/reusable/indicators/LoadingIndicator';
+import CartContent from './CartContent';
 
 const CartContentContainer = ({
   cartData,
diff --git a/src/containers/cartPageContainers/Checkout.jsx b/src/containers/cartPageContainers/Checkout.jsx
new file mode 100644
index 0000000..e4d1065
--- /dev/null
+++ b/src/containers/cartPageContainers/Checkout.jsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Toolbar from '@mui/material/Toolbar';
+import Paper from '@mui/material/Paper';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import AddressForm from './AddressForm';
+import PaymentForm from './PaymentForm';
+import Review from './Review';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const steps = ['Shipping address', 'Payment details', 'Review your order'];
+
+function getStepContent(step) {
+  switch (step) {
+    case 0:
+      return <AddressForm />;
+    case 1:
+      return <PaymentForm />;
+    case 2:
+      return <Review />;
+    default:
+      throw new Error('Unknown step');
+  }
+}
+
+export default function Checkout() {
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  const handleNext = () => {
+    setActiveStep(activeStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep(activeStep - 1);
+  };
+
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <AppBar
+        position="absolute"
+        color="default"
+        elevation={0}
+        sx={{
+          position: 'relative',
+          borderBottom: (t) => `1px solid ${t.palette.divider}`,
+        }}
+      >
+        <Toolbar>
+          <Typography variant="h6" color="inherit" noWrap>
+            Company name
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Container component="main" maxWidth="sm" sx={{ mb: 4 }}>
+        <Paper
+          variant="outlined"
+          sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}
+        >
+          <Typography component="h1" variant="h4" align="center">
+            Checkout
+          </Typography>
+          <Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
+            {steps.map((label) => (
+              <Step key={label}>
+                <StepLabel>{label}</StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <React.Fragment>
+              <Typography variant="h5" gutterBottom>
+                Thank you for your order.
+              </Typography>
+              <Typography variant="subtitle1">
+                Your order number is #2001539. We have emailed your order
+                confirmation, and will send you an update when your order has
+                shipped.
+              </Typography>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              {getStepContent(activeStep)}
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                {activeStep !== 0 && (
+                  <Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
+                    Back
+                  </Button>
+                )}
+
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 3, ml: 1 }}
+                >
+                  {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                </Button>
+              </Box>
+            </React.Fragment>
+          )}
+        </Paper>
+        <Copyright />
+      </Container>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/CustomerFormContainer.js b/src/containers/cartPageContainers/CustomerFormContainer.js
similarity index 72%
rename from src/containers/CustomerFormContainer.js
rename to src/containers/cartPageContainers/CustomerFormContainer.js
index d55887a..46d79bb 100644
--- a/src/containers/CustomerFormContainer.js
+++ b/src/containers/cartPageContainers/CustomerFormContainer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/system';
-import CustomerForm from '../components/forms/customerCheckoutForm/CustomerForm';
+import CustomerForm from '../../components/forms/customerCheckoutForm/CustomerForm';
 
 const CustomerFormContainer = () => {
   return (
diff --git a/src/containers/cartPageContainers/PaymentForm.jsx b/src/containers/cartPageContainers/PaymentForm.jsx
new file mode 100644
index 0000000..9116fd0
--- /dev/null
+++ b/src/containers/cartPageContainers/PaymentForm.jsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+export default function PaymentForm() {
+  return (
+    <React.Fragment>
+      <Typography variant="h6" gutterBottom>
+        Payment method
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <TextField
+            required
+            id="cardName"
+            label="Name on card"
+            fullWidth
+            autoComplete="cc-name"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <TextField
+            required
+            id="cardNumber"
+            label="Card number"
+            fullWidth
+            autoComplete="cc-number"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <TextField
+            required
+            id="expDate"
+            label="Expiry date"
+            fullWidth
+            autoComplete="cc-exp"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <TextField
+            required
+            id="cvv"
+            label="CVV"
+            helperText="Last three digits on signature strip"
+            fullWidth
+            autoComplete="cc-csc"
+            variant="standard"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <FormControlLabel
+            control={<Checkbox color="secondary" name="saveCard" value="yes" />}
+            label="Remember credit card details for next time"
+          />
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/cartPageContainers/Review.jsx b/src/containers/cartPageContainers/Review.jsx
new file mode 100644
index 0000000..ad827af
--- /dev/null
+++ b/src/containers/cartPageContainers/Review.jsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Grid from '@mui/material/Grid';
+
+const products = [
+  {
+    name: 'Product 1',
+    desc: 'A nice thing',
+    price: '$9.99',
+  },
+  {
+    name: 'Product 2',
+    desc: 'Another thing',
+    price: '$3.45',
+  },
+  {
+    name: 'Product 3',
+    desc: 'Something else',
+    price: '$6.51',
+  },
+  {
+    name: 'Product 4',
+    desc: 'Best thing of all',
+    price: '$14.11',
+  },
+  { name: 'Shipping', desc: '', price: 'Free' },
+];
+
+const addresses = ['1 MUI Drive', 'Reactville', 'Anytown', '99999', 'USA'];
+const payments = [
+  { name: 'Card type', detail: 'Visa' },
+  { name: 'Card holder', detail: 'Mr John Smith' },
+  { name: 'Card number', detail: 'xxxx-xxxx-xxxx-1234' },
+  { name: 'Expiry date', detail: '04/2024' },
+];
+
+export default function Review() {
+  return (
+    <React.Fragment>
+      <Typography variant="h6" gutterBottom>
+        Order summary
+      </Typography>
+      <List disablePadding>
+        {products.map((product) => (
+          <ListItem key={product.name} sx={{ py: 1, px: 0 }}>
+            <ListItemText primary={product.name} secondary={product.desc} />
+            <Typography variant="body2">{product.price}</Typography>
+          </ListItem>
+        ))}
+        <ListItem sx={{ py: 1, px: 0 }}>
+          <ListItemText primary="Total" />
+          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+            $34.06
+          </Typography>
+        </ListItem>
+      </List>
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={6}>
+          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
+            Shipping
+          </Typography>
+          <Typography gutterBottom>John Smith</Typography>
+          <Typography gutterBottom>{addresses.join(', ')}</Typography>
+        </Grid>
+        <Grid item container direction="column" xs={12} sm={6}>
+          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
+            Payment details
+          </Typography>
+          <Grid container>
+            {payments.map((payment) => (
+              <React.Fragment key={payment.name}>
+                <Grid item xs={6}>
+                  <Typography gutterBottom>{payment.name}</Typography>
+                </Grid>
+                <Grid item xs={6}>
+                  <Typography gutterBottom>{payment.detail}</Typography>
+                </Grid>
+              </React.Fragment>
+            ))}
+          </Grid>
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+}
diff --git a/src/containers/collectionPageContainers/PortfolioChartContainer.jsx b/src/containers/collectionPageContainers/PortfolioChartContainer.jsx
new file mode 100644
index 0000000..f3cf490
--- /dev/null
+++ b/src/containers/collectionPageContainers/PortfolioChartContainer.jsx
@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { Box, Grid, Paper, Container, useTheme } from '@mui/material';
+import PortfolioChart from '../../components/chart/PortfolioChart';
+import TimeRangeSelector from '../../components/other/InputComponents/TimeRangeSelector';
+import CollectionStatisticsSelector, {
+  calculateStatistics,
+} from '../../components/other/InputComponents/CollectionStatisticsSelector';
+import UpdateStatusBox2 from '../../components/other/InputComponents/UpdateStatusBox2';
+import TopCardsDisplay from '../../components/other/dataDisplay/TopCardsDisplay';
+import { useChartContext } from '../../context/ChartContext/ChartContext';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import { useCombinedContext } from '../../context/CombinedProvider';
+
+const PortfolioChartContainer = ({ selectedCards, removeCard }) => {
+  const theme = useTheme();
+  const { timeRange } = useChartContext();
+  const { allCollections } = useCollectionStore();
+  const { socket } = useCombinedContext();
+
+  const data = allCollections.map((collection) => ({
+    data: collection?.currentChartDataSets2,
+  }));
+  const dataForStats = data[0];
+  const stats = useMemo(
+    () => calculateStatistics(dataForStats, timeRange),
+    [dataForStats, timeRange]
+  );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: '100%',
+        width: '100%',
+        margin: 'auto',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: theme.spacing(3),
+      }}
+    >
+      {/* Updaters Row */}
+      <Grid container spacing={2} marginBottom={2}>
+        <Grid item xs={4} md={4}>
+          <UpdateStatusBox2 socket={socket} />
+        </Grid>
+        <Grid item xs={4} md={4}>
+          <TimeRangeSelector data={data} />
+          <CollectionStatisticsSelector
+            timeRange={timeRange}
+            data={data}
+            stats={stats}
+          />
+        </Grid>
+        <Grid item xs={4} md={4}>
+          {/* Additional Components */}
+        </Grid>
+      </Grid>
+
+      {/* Main Grid Container */}
+      <Grid container spacing={2}>
+        {/* Portfolio Chart Row */}
+        <Grid item xs={12}>
+          <PortfolioChart
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
+        </Grid>
+
+        {/* Additional Rows */}
+        <Grid item xs={12}>
+          <TopCardsDisplay />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default PortfolioChartContainer;
diff --git a/src/containers/collectionPageContainers/PortfolioContent.jsx b/src/containers/collectionPageContainers/PortfolioContent.jsx
new file mode 100644
index 0000000..2a7d5d2
--- /dev/null
+++ b/src/containers/collectionPageContainers/PortfolioContent.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Box, Container, Grid, Paper, useTheme } from '@mui/material';
+import PortfolioListContainer from './PortfolioListContainer';
+import PortfolioChartContainer from './PortfolioChartContainer';
+import HeaderTitle from '../../components/reusable/HeaderTitle';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import { useMode } from '../../context/hooks/colormode';
+
+const PortfolioContent = ({ error, selectedCards, removeCard }) => {
+  const { theme } = useMode();
+  const { selectedCollection } = useCollectionStore();
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        maxWidth: '100vw',
+        width: '100%',
+        margin: 'auto',
+        padding: theme.spacing(3),
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
+      }}
+    >
+      <Paper
+        elevation={4}
+        sx={{
+          background: theme.palette.background.main,
+          color: theme.palette.text.primary,
+          display: 'flex',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          margin: 'auto',
+          width: '100%',
+          borderRadius: theme.shape.borderRadius,
+        }}
+      >
+        <HeaderTitle
+          title={selectedCollection?.name}
+          size="large"
+          location="center"
+        />
+      </Paper>
+      <Grid
+        container
+        spacing={3}
+        sx={{
+          width: '100%',
+          maxWidth: '100vw',
+          justifyContent: 'center',
+          margin: 'auto',
+        }}
+      >
+        <Grid
+          item
+          xs={12}
+          md={6}
+          sx={{ justifyContent: 'center', margin: 'auto' }}
+        >
+          <PortfolioChartContainer
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <PortfolioListContainer
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default PortfolioContent;
diff --git a/src/containers/collectionPageContainers/PortfolioListContainer.jsx b/src/containers/collectionPageContainers/PortfolioListContainer.jsx
new file mode 100644
index 0000000..579f87b
--- /dev/null
+++ b/src/containers/collectionPageContainers/PortfolioListContainer.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, Grid, Paper } from '@mui/material';
+import CardList from '../../components/grids/collectionGrids/CardList';
+import { useTheme } from '@mui/material/styles';
+import { useMode } from '../../context/hooks/colormode';
+
+const PortfolioListContainer = ({ selectedCards, removeCard }) => {
+  const { theme } = useMode();
+
+  return (
+    <Box sx={{ maxWidth: '100%', width: '100%', padding: theme.spacing(3) }}>
+      <Grid item xs={12} sx={{ maxHeight: '100vh', width: '100%' }}>
+        <Paper
+          elevation={3}
+          sx={{
+            background:
+              'linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(204,204,204,1) 100%)',
+            borderRadius: theme.shape.borderRadius,
+            p: theme.spacing(2),
+            maxHeight: '100%',
+            height: 'auto',
+            width: '100%',
+            boxShadow: theme.shadows[3],
+          }}
+        >
+          <CardList selectedCards={selectedCards} removeCard={removeCard} />
+        </Paper>
+      </Grid>
+    </Box>
+  );
+};
+
+export default PortfolioListContainer;
diff --git a/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js b/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js
index 7efbedd..2f1a775 100644
--- a/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js
+++ b/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js
@@ -1,126 +1,45 @@
-// import React from 'react';
-// import { Grid, useMediaQuery } from '@mui/material';
-// import { useTheme } from '@emotion/react';
-// import DeckDisplay from '../../components/other/DeckDisplay';
-// import DeckSearch from '../../components/search/DeckSearch';
-// import { makeStyles } from '@mui/styles';
-
-// const useStyles = makeStyles((theme) => ({
-//   root: {
-//     overflow: 'auto',
-//     backgroundColor: '#f4f6f8',
-//     padding: theme.spacing(3),
-//     borderRadius: '10px',
-//     boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-//     width: '100%', // Add this to make sure the container takes full width
-//   },
-//   searchGrid: {
-//     [theme.breakpoints.up('lg')]: { flexBasis: '35%' }, // Increased from 30%
-//     [theme.breakpoints.between('md', 'lg')]: { flexBasis: '50%' }, // Increased from 45%
-//     [theme.breakpoints.down('sm')]: { flexBasis: '50%' }, // Increased from 40%
-//   },
-//   displayGrid: {
-//     flex: 1,
-//     padding: theme.spacing(1),
-//   },
-// }));
-
-// const DeckBuilderContainer = ({ userDecks }) => {
-//   const classes = useStyles();
-//   const theme = useTheme();
-//   const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
-//   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-
-//   const getXsValue = () => {
-//     if (isSmallScreen || isMediumScreen) return 5; // Increased from 4
-//     return 3;
-//   };
-
-//   const getDisplayXsValue = () => {
-//     if (isSmallScreen || isMediumScreen) return 7; // Decreased from 8
-//     return 9;
-//   };
-
-//   return (
-//     <Grid container spacing={3} className={classes.root}>
-//       <Grid item className={classes.searchGrid} xs={getXsValue()}>
-//         <DeckSearch userDecks={userDecks} />
-//       </Grid>
-//       <Grid item className={classes.displayGrid} xs={getDisplayXsValue()}>
-//         <DeckDisplay userDecks={userDecks} />
-//       </Grid>
-//     </Grid>
-//   );
-// };
-
-// export default DeckBuilderContainer;
 import React from 'react';
-import { Grid, useMediaQuery, useTheme } from '@mui/material';
-// Removed import { useTheme } from '@emotion/react';
-
-import DeckDisplay from '../../components/other/DeckDisplay';
+import { Grid } from '@mui/material';
+import DeckDisplay from '../../components/grids/DeckDisplay';
 import DeckSearch from '../../components/search/DeckSearch';
-import { styled } from '@mui/system'; // Use @mui/system for Emotion styling
+import { styled } from '@mui/styles';
+import { useMode } from '../../context/hooks/colormode';
 
-// Define your components using the styled function from @mui/system
 const SearchGrid = styled(Grid)(({ theme }) => ({
-  [theme.breakpoints.up('xl')]: { flexBasis: '60%' },
-  [theme.breakpoints.up('lg')]: { flexBasis: '50%' },
-  [theme.breakpoints.between('md', 'lg')]: { flexBasis: '50%' },
-  [theme.breakpoints.down('sm')]: { flexBasis: '50%' },
+  padding: theme.spacing(2),
+  [theme.breakpoints.down('md')]: {
+    width: '50%', // Half width on small and medium screens
+  },
 }));
 
 const DisplayGrid = styled(Grid)(({ theme }) => ({
-  flex: 1,
-  padding: theme.spacing(1),
+  padding: theme.spacing(2),
+  [theme.breakpoints.down('md')]: {
+    width: '50%', // Half width on small and medium screens
+  },
 }));
 
 const RootGrid = styled(Grid)(({ theme }) => ({
   overflow: 'auto',
-  backgroundColor: '#f4f6f8',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap', // Ensure wrapping on smaller screens
+  backgroundColor: theme.palette.background.secondary,
   padding: theme.spacing(3),
-  borderRadius: '10px',
-  boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[5],
   width: '100%',
 }));
 
 const DeckBuilderContainer = ({ userDecks }) => {
-  const theme = useTheme(); // Use the theme from Emotion
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
-  const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const getXsValue = () => {
-    // if (isSmallScreen || isMediumScreen) return 5;
-    // return 3;
-    if (isLargeScreen) return 3;
-    if (isMediumScreen) return 4;
-    return 5;
-  };
-  //   case 'xs':
-  //     return 5;
-  //   case 'sm':
-  //     return 5;
-  //   case 'md':
-  //     return 5;
-  //   case 'lg':
-  //     return 7;
-  // };
-
-  const getDisplayXsValue = () => {
-    // if (isSmallScreen || isMediumScreen) return 7;
-    // return 9;
-    if (isLargeScreen) return 9;
-    if (isMediumScreen) return 8;
-    return 7;
-  };
+  const { theme } = useMode();
 
   return (
-    <RootGrid container spacing={3}>
-      <SearchGrid item xs={getXsValue()}>
+    <RootGrid container>
+      <SearchGrid item xs={12} md={6} lg={4}>
         <DeckSearch userDecks={userDecks} />
       </SearchGrid>
-      <DisplayGrid item xs={getDisplayXsValue()}>
+      <DisplayGrid item xs={12} md={6} lg={8}>
         <DeckDisplay userDecks={userDecks} />
       </DisplayGrid>
     </RootGrid>
diff --git a/src/context/AppContext/AppContextProvider.jsx b/src/context/AppContext/AppContextProvider.jsx
new file mode 100644
index 0000000..295d4ff
--- /dev/null
+++ b/src/context/AppContext/AppContextProvider.jsx
@@ -0,0 +1,54 @@
+// CombinedContext.js
+import React, { createContext, useContext, useState } from 'react';
+import { DeckContext } from '../DeckContext/DeckContext';
+import { CartContext } from '../CartContext/CartContext';
+import { CollectionContext } from '../CollectionContext/CollectionContext';
+
+// Create the combined context
+export const AppContext = createContext({});
+
+// Create a provider component that combines the contexts
+export const AppContextProvider = ({ children }) => {
+  const [context, setContext] = useState({});
+  const Deck = useContext(DeckContext);
+  const Cart = useContext(CartContext);
+  const Collection = useContext(CollectionContext);
+
+  // Combine the context values into one object
+  const appContextValues = { Deck, Cart, Collection };
+
+  return (
+    <AppContext.Provider value={appContextValues}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+// import React, { createContext, useContext, useState } from 'react';
+// import { DeckContext } from '../DeckContext/DeckContext';
+// import { CartContext } from '../CartContext/CartContext';
+// import { CollectionContext } from '../CollectionContext/CollectionContext';
+
+// export const AppContext = createContext({
+//   Deck: {},
+//   Cart: {},
+//   Collection: {},
+//   context: '',
+//   // eslint-disable-next-line @typescript-eslint/no-empty-function
+//   setContext: () => {},
+// });
+
+// export const AppContextProvider = ({ children }) => {
+//   const [context, setContext] = useState('Collection'); // Default context
+//   const Deck = useContext(DeckContext);
+//   const Cart = useContext(CartContext);
+//   const Collection = useContext(CollectionContext);
+
+//   const appContextValues = { Deck, Cart, Collection, context, setContext };
+
+//   return (
+//     <AppContext.Provider value={appContextValues}>
+//       {children}
+//     </AppContext.Provider>
+//   );
+// };
diff --git a/src/context/Auth/authContext.js b/src/context/Auth/authContext.js
index 8a6b524..f130a86 100644
--- a/src/context/Auth/authContext.js
+++ b/src/context/Auth/authContext.js
@@ -1,162 +1,735 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import jwt_decode from 'jwt-decode';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import axios from 'axios';
+import jwt_decode from 'jwt-decode';
 import { useCookies } from 'react-cookie';
-import { useUtilityContext } from '../UtilityContext/UtilityContext';
 
+const LOGGED_IN_COOKIE = 'loggedIn';
+const AUTH_COOKIE = 'authToken';
+const USER_COOKIE = 'user';
+
+// Validator function
+const validateData = (data, eventName, functionName) => {
+  if (!data || Object.keys(data).length === 0) {
+    console.warn(`Invalid data in ${functionName} for ${eventName}`);
+    return false;
+  }
+  return true;
+};
+
+// Process the server response based on the action type (Login/Signup)
+const processResponseData = (data, type) => {
+  if (!validateData(data, `${type} Response`, `process${type}Data`))
+    return null;
+
+  if (type === 'Login') {
+    const token = data?.data?.token;
+    if (!token) return null;
+    const user = jwt_decode(token);
+    return { token, user };
+  }
+
+  if (type === 'Signup') {
+    const { success, newUser } = data;
+    if (success && newUser) return { success, newUser };
+  }
+
+  return null;
+};
+
+// Main AuthContext Provider
 export const AuthContext = React.createContext();
 
-export default function AuthProvider({ children }) {
-  const [cookies, setCookie, removeCookie] = useCookies(['auth', 'userCookie']);
+export default function AuthProvider({ children, serverUrl }) {
+  const [cookies, setCookie, removeCookie] = useCookies([
+    LOGGED_IN_COOKIE,
+    AUTH_COOKIE,
+    USER_COOKIE,
+  ]);
   const [isLoading, setIsLoading] = useState(false);
-  const [isloggedin, setIsloggedin] = useState(false);
+  const [isLoggedIn, setisLoggedIn] = useState(false);
   const [user, setUser] = useState({});
-  const [users, setUsers] = useState([]);
   const [error, setError] = useState(null);
-  const [token, setToken] = useState(undefined);
-  const { directedResponses, fetchDirectedResponses } = useUtilityContext();
-
-  const REACT_APP_SERVER = process.env.REACT_APP_SERVER;
-
-  // const updateUser = useCallback((newUser) => {
-  //   setUsers((prevUsers) =>
-  //     prevUsers.map((u) => (u.id === newUser.id ? newUser : u))
-  //   );
-  // }, []);
-
-  const setLoginState = useCallback(
-    (loggedIn, token, user, error = null) => {
-      setCookie('auth', token, { secure: true, sameSite: 'strict' });
-      if (user) {
-        setCookie('userCookie', JSON.stringify(user), {
-          secure: true,
-          sameSite: 'strict',
-        });
-      }
-      setIsloggedin(loggedIn);
-      setToken(token);
-      setUser(user);
-      setError(error);
-    },
-    [setCookie]
-  );
+  const [token, setToken] = useState(null);
+  // const isMounted = useRef(true);
 
-  const validateToken = useCallback(async () => {
+  const REACT_APP_SERVER = serverUrl || process.env.REACT_APP_SERVER;
+
+  // Execute authentication actions like login, signup
+  const executeAuthAction = async (actionType, url, requestData) => {
     setIsLoading(true);
     try {
-      const latestSignInResponse = directedResponses.find(
-        (res) => res.eventType === 'SIGNIN'
+      const response = await axios.post(
+        `${REACT_APP_SERVER}/api/users/${url}`,
+        requestData
       );
-
-      if (latestSignInResponse) {
-        const decodedUser = jwt_decode(
-          latestSignInResponse.response.data.token
-        );
-        setLoginState(
-          true,
-          latestSignInResponse.response.data.token,
-          decodedUser
-        );
-      } else {
-        throw new Error('Token validation failed');
+      const processedData = processResponseData(response.data, actionType);
+      if (processedData) {
+        const { token, user, newUser } = processedData;
+        setCookie(AUTH_COOKIE, token, { path: '/' });
+        setCookie(USER_COOKIE, user || newUser, { path: '/' });
+        setCookie(LOGGED_IN_COOKIE, true, { path: '/' });
+        setisLoggedIn(true);
+        setToken(token);
+        setUser(user || newUser);
       }
-    } catch (error) {
-      setError('Token validation failed');
-      setLoginState(false, null, {}, 'Token validation failed');
+    } catch (err) {
+      setError(err.message);
     } finally {
       setIsLoading(false);
     }
-  }, [directedResponses, setLoginState]);
-
-  const login = async (username, password) => {
-    setIsLoading(true);
-    try {
-      await axios.post(
-        `${REACT_APP_SERVER}/api/users/signin`,
-        { username, password },
-        {
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
+  };
 
-      await fetchDirectedResponses(); // Update directedResponses in utilityContext
+  // In App.js or inside AuthProvider component
+  axios.interceptors.request.use(
+    (config) => {
+      const token = cookies[AUTH_COOKIE];
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
 
-      validateToken();
-      return {
-        loggedIn: true,
-        token,
-      };
-    } catch (error) {
-      setError('Login failed');
-      setLoginState(false, null, {}, 'Login failed');
-    } finally {
-      setIsLoading(false);
-    }
+  // Login function
+  const login = async (username, password) => {
+    await executeAuthAction('Login', 'signin', { username, password });
   };
 
-  const signup = async (username, password, email, basic_info, role_data) => {
-    setIsLoading(true);
-    try {
-      const response = await axios.post(
-        `${REACT_APP_SERVER}/api/users/signup`,
-        {
-          login_data: { username, password, email, role_data },
-          basic_info,
-        }
-      );
-      await validateToken(response.data.token);
-      return response.data.token;
-    } catch (err) {
-      setError('Signup failed');
-      setLoginState(false, null, {}, 'Signup failed');
-    } finally {
-      setIsLoading(false);
-    }
+  // Signup function
+  const signup = async (loginData, basicInfo, otherInfo) => {
+    await executeAuthAction('Signup', 'signup', {
+      login_data: loginData,
+      basic_info: basicInfo,
+      ...otherInfo,
+    });
   };
 
+  // Logout function
   const logout = () => {
-    removeCookie('auth');
-    setLoginState(false, null, {});
+    removeCookie(AUTH_COOKIE);
+    setisLoggedIn(false);
+    setToken(null);
+    setUser({});
   };
 
+  // Validate token
+  const validateToken = useCallback(async () => {
+    // Validation logic here
+  }, []);
+
+  // Initialization logic to set user and token from cookies
   useEffect(() => {
-    const token =
-      new URLSearchParams(window.location.search).get('token') || cookies.auth;
-    if (token) validateToken(token);
-  }, [validateToken, cookies.auth]);
-
-  const contextValue = {
-    isLoading,
-    isloggedin,
-    user: users.find((u) => u.id === user.id) || user,
-    users,
-    error,
-    login,
-    logout,
-    signup,
-    setUser,
-    setLoginState,
-    validateToken,
-    // updateUser,
-  };
-  useEffect(() => {
-    console.log('AUTH CONTEXT VALUE:', contextValue);
-  }, [
-    // isLoading,
-    // isloggedin,
-    // user,
-    // users,
-    // error,
-    login,
-    logout,
-    signup,
-    setUser,
-  ]);
+    // if (!isMounted.current) return;
+
+    const storedToken = cookies[AUTH_COOKIE];
+    const storedUser = cookies[USER_COOKIE];
+
+    if (storedToken && storedUser) {
+      setToken(storedToken);
+      setUser(storedUser);
+      setisLoggedIn(true);
+    }
+
+    // isMounted.current = false;
+  }, [cookies]);
 
   return (
-    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+    <AuthContext.Provider
+      value={{
+        isLoading,
+        isLoggedIn,
+        user,
+        error,
+        login,
+        signup,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
   );
 }
+
+// import React, { useState, useEffect, useCallback, useRef } from 'react';
+// import jwt_decode from 'jwt-decode';
+// import axios from 'axios';
+// import { useCookies } from 'react-cookie';
+// import { useUtilityContext } from '../UtilityContext/UtilityContext';
+// // Initialize constants
+// const ONE_MINUTE = 60000;
+// const AUTH_COOKIE = 'auth';
+// const USER_COOKIE = 'userCookie';
+
+// export const AuthContext = React.createContext();
+
+// export default function AuthProvider({ children, serverUrl }) {
+//   // State and Context Setup
+//   const { directedResponses, fetchDirectedResponses } = useUtilityContext();
+//   const [cookies, setCookie, removeCookie] = useCookies(['auth', 'userCookie']);
+//   const [isLoading, setIsLoading] = useState(false);
+//   const [isLoggedIn, setisLoggedIn] = useState(false);
+//   const [user, setUser] = useState({});
+//   const [users, setUsers] = useState([]);
+//   const [error, setError] = useState(null);
+//   const [token, setToken] = useState(undefined);
+//   const [loginAttempts, setLoginAttempts] = useState(0);
+//   const [lastAttemptTime, setLastAttemptTime] = useState(null);
+
+//   const REACT_APP_SERVER = serverUrl || process.env.REACT_APP_SERVER;
+//   const isMounted = useRef(true);
+
+//   // Cleanup
+//   useEffect(() => {
+//     return () => {
+//       isMounted.current = false;
+//     };
+//   }, []);
+//   // Handle Login Attempts
+//   useEffect(() => {
+//     if (loginAttempts >= 2) {
+//       const timerId = setTimeout(() => {
+//         setLoginAttempts(0);
+//       }, 60000); // Reset after 1 minute
+//       return () => clearTimeout(timerId);
+//     }
+//   }, [loginAttempts]);
+//   // Initialize and Validate Token
+//   useEffect(() => {
+//     if (isMounted.current) {
+//       const queryToken = new URLSearchParams(window.location.search).get(
+//         'token'
+//       );
+//       const cookieToken = cookies.auth;
+//       const activeToken = queryToken || cookieToken;
+//       if (activeToken && activeToken !== token) {
+//         validateToken(activeToken);
+//       }
+//     }
+//   }, [validateToken, cookies.auth]);
+//   // Utility Function to Set Login State
+//   const setLoginState = useCallback(
+//     (loggedIn, token, user, error = null) => {
+//       setCookie('auth', token, { secure: true, sameSite: 'strict' });
+//       setCookie('isLoggedIn', String(loggedIn), {
+//         secure: true,
+//         sameSite: 'strict',
+//       });
+//       setCookie(AUTH_COOKIE, token, { secure: true, sameSite: 'strict' });
+
+//       if (user) {
+//         setCookie('userCookie', JSON.stringify(user), {
+//           secure: true,
+//           sameSite: 'strict',
+//         });
+//       }
+//       setisLoggedIn(loggedIn);
+//       setToken(token);
+//       setUser(user);
+//       setError(error);
+//     },
+//     [setCookie]
+//   );
+
+//   const onLogin = async (username, password) => {
+//     const currentTime = new Date().getTime();
+//     const oneMinute = 60000; // 60 seconds * 1000 milliseconds
+
+//     if (
+//       loginAttempts < 2 ||
+//       (lastAttemptTime && currentTime - lastAttemptTime > oneMinute)
+//     ) {
+//       // If under limit or last attempt was more than a minute ago, proceed
+//       setLoginAttempts(loginAttempts + 1);
+//       setLastAttemptTime(currentTime);
+
+//       try {
+//         const loginResult = await login(username, password);
+//         if (loginResult?.loggedIn) {
+//           if (onLogin) {
+//             onLogin(); // Call the passed down function when login is successful
+//           }
+//         }
+//         setisLoggedIn(loginResult?.loggedIn);
+//         return loginResult;
+//       } catch (error) {
+//         console.error('Login failed:', error);
+//       }
+//     } else {
+//       // If over the limit
+//       setError('Too many login attempts. Please wait for 1 minute.');
+//     }
+//   };
+
+//   // Reset the login attempts and time after a minute
+//   useEffect(() => {
+//     if (loginAttempts >= 2) {
+//       const timerId = setTimeout(() => {
+//         setLoginAttempts(0);
+//       }, 60000); // 1 minute = 60000 milliseconds
+
+//       return () => clearTimeout(timerId);
+//     }
+//   }, [loginAttempts]);
+
+//   // In AuthProvider
+//   const login = async (username, password) => {
+//     console.log('Login method invoked');
+//     setIsLoading(true);
+
+//     try {
+//       const signInResponse = await axios.post(
+//         `${REACT_APP_SERVER}/api/users/signin`,
+//         { username, password },
+//         {
+//           headers: {
+//             'Content-Type': 'application/json',
+//             Authorization: `Bearer ${token}`,
+//           },
+//         }
+//       );
+
+//       console.log('Fetching directed responses...');
+//       await fetchDirectedResponses();
+
+//       // Do not call validateToken here.
+//       return { loggedIn: isLoggedIn, token };
+//     } catch (error) {
+//       console.error(`Error during login: ${error}`);
+//       setError('Login failed');
+//       setLoginState(false, null, {}, 'Login failed');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+
+//   const validateToken = useCallback(async () => {
+//     if (!isMounted.current) return;
+
+//     setIsLoading(true);
+//     try {
+//       const latestSignInResponse = directedResponses.find(
+//         (res) => res.eventType === 'SIGNIN'
+//       );
+
+//       if (
+//         latestSignInResponse &&
+//         latestSignInResponse.response.data.token !== token
+//       ) {
+//         const newToken = latestSignInResponse.response.data.token;
+//         const decodedUser = jwt_decode(newToken);
+//         setLoginState(true, newToken, decodedUser);
+//       } else {
+//         throw new Error('Token validation failed');
+//       }
+//     } catch (error) {
+//       console.error(`Error during validateToken: ${error}`);
+
+//       setError('Token validation failed');
+//       setLoginState(false, null, {}, 'Token validation failed');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   }, [directedResponses, setLoginState, token]);
+
+//   const signup = async (username, password, email, basic_info, role_data) => {
+//     setIsLoading(true);
+//     try {
+//       const response = await axios.post(
+//         `${REACT_APP_SERVER}/api/users/signup`,
+//         {
+//           login_data: { username, password, email, role_data },
+//           basic_info,
+//         }
+//       );
+//       await validateToken(response.data.token);
+//       return response.data.token;
+//     } catch (err) {
+//       setError('Signup failed');
+//       setLoginState(false, null, {}, 'Signup failed');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+
+//   const logout = () => {
+//     removeCookie('auth');
+//     removeCookie(AUTH_COOKIE);
+//     setLoginState(false, null, {});
+//     console.log('Logout method invoked');
+//   };
+
+//   // In AuthProvider
+//   useEffect(() => {
+//     if (isMounted.current) {
+//       const queryToken = new URLSearchParams(window.location.search).get(
+//         'token'
+//       );
+//       const cookieToken = cookies[AUTH_COOKIE];
+//       const activeToken = queryToken || cookieToken;
+
+//       if (activeToken && activeToken !== token) {
+//         validateToken(activeToken);
+//       }
+//     }
+//   }, [validateToken, cookies[AUTH_COOKIE]]);
+
+//   const contextValue = {
+//     isLoading: isLoading,
+//     isLoggedIn: isLoggedIn,
+//     user: users.find((u) => u.id === user.id) || user,
+//     users,
+//     error,
+//     login,
+//     onLogin, // Add this line to pass it down
+//     logout,
+//     signup,
+//     setUser,
+//     setLoginState,
+//     validateToken,
+//     // updateUser,
+//   };
+
+//   return (
+//     <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+//   );
+// }
+
+// /**
+//  * Handler function for processing login data.
+//  *
+//  * @param {Object} data - The data received from login API.
+//  */
+// function processLoginData(data) {
+//   // Validate the data before processing
+//   if (!validateData(data, 'Login Response', 'processLoginData')) {
+//     console.warn('Invalid login data. Aborting processLoginData.');
+//     return;
+//   }
+
+//   // Extract relevant fields from the received data
+//   const { token, user } = data;
+
+//   if (token && user) {
+//     // Save token and user information to state or local storage
+//     localStorage.setItem('authToken', token);
+//     // Perform other login success logic here
+//   } else {
+//     console.error('Missing essential fields in login data.');
+//   }
+// }
+
+// /**
+//  * Handler function for processing signup data.
+//  *
+//  * @param {Object} data - The data received from signup API.
+//  */
+// function processSignupData(data) {
+//   // Validate the data before processing
+//   if (!validateData(data, 'Signup Response', 'processSignupData')) {
+//     console.warn('Invalid signup data. Aborting processSignupData.');
+//     return;
+//   }
+
+//   // Extract relevant fields from the received data
+//   const { success, newUser } = data;
+
+//   if (success && newUser) {
+//     // Assume `newUser` contains essential user info
+//     const { id, username } = newUser;
+
+//     // Save the new user ID or perform other signup success logic here
+//     // For example, redirect to login or a welcome page
+//   } else {
+//     console.error('Missing essential fields in signup data.');
+//   }
+// }
+
+// import React, { useState, useEffect, useCallback, useRef } from 'react';
+// import jwt_decode from 'jwt-decode';
+// import axios from 'axios';
+// import { useCookies } from 'react-cookie';
+// import { useUtilityContext } from '../UtilityContext/UtilityContext';
+
+// const LOGGED_IN_COOKIE = 'loggedIn';
+// const AUTH_COOKIE = 'authToken';
+// const USER_COOKIE = 'user';
+
+// const processResponseData = (data, type) => {
+//   if (!validateData(data, `${type} Response`, `process${type}Data`)) {
+//     console.warn(
+//       `Invalid ${type.toLowerCase()} data. Aborting process${type}Data.`
+//     );
+//     return;
+//   }
+
+//   if (type === 'Login') {
+//     const token = data?.data?.token;
+//     if (token) {
+//       localStorage.setItem('authToken', token);
+//       const decodedUser = jwt_decode(token);
+//       return { token, user: decodedUser };
+//     }
+//   } else if (type === 'Signup') {
+//     const { success, newUser } = data;
+//     if (success && newUser) {
+//       return { success, newUser };
+//     }
+//   }
+
+//   console.error(`Missing essential fields in ${type.toLowerCase()} data.`);
+//   return null;
+// };
+// const isEmpty = (obj) => {
+//   return (
+//     [Object, Array].includes((obj || {}).constructor) &&
+//     !Object.entries(obj || {}).length
+//   );
+// };
+// // Validator function
+// const validateData = (data, eventName, functionName) => {
+//   const dataType = typeof data;
+//   console.log(
+//     `[Info] Received data of type: ${dataType} in ${functionName} triggered by event: ${eventName}`
+//   );
+
+//   if (data === null || data === undefined) {
+//     console.warn(
+//       `[Warning] Received null or undefined data in ${functionName} triggered by event: ${eventName}`
+//     );
+//     return false;
+//   }
+
+//   if (isEmpty(data)) {
+//     console.error(
+//       `[Error] Received empty data object or array in ${functionName} triggered by event: ${eventName}`
+//     );
+//     return false;
+//   }
+
+//   return true;
+// };
+
+// export const AuthContext = React.createContext();
+
+// const setCookies = (
+//   setCookieFunc,
+//   authCookie,
+//   userCookie,
+//   loggedInCookie,
+//   loggedIn,
+//   token,
+//   user
+// ) => {
+//   setCookieFunc(authCookie, token);
+//   setCookieFunc(userCookie, JSON.stringify(user));
+//   setCookieFunc(loggedInCookie, String(loggedIn));
+// };
+// export default function AuthProvider({ children, serverUrl }) {
+//   const { directedResponses, fetchDirectedResponses } = useUtilityContext();
+//   const [cookies, setCookie, removeCookie] = useCookies([
+//     LOGGED_IN_COOKIE,
+//     AUTH_COOKIE,
+//     USER_COOKIE,
+//   ]);
+//   const [isLoading, setIsLoading] = useState(false);
+//   const [isLoggedIn, setisLoggedIn] = useState(false);
+//   const [user, setUser] = useState({});
+//   const [error, setError] = useState(null);
+//   const [token, setToken] = useState(undefined);
+//   const isMounted = useRef(true);
+//   const [loginAttempts, setLoginAttempts] = useState(0);
+
+//   const REACT_APP_SERVER = serverUrl || process.env.REACT_APP_SERVER;
+
+//   useEffect(
+//     () => () => {
+//       isMounted.current = false;
+//     },
+//     []
+//   );
+
+//   const setLoginState = useCallback(
+//     (loggedIn, token, user, error = null) => {
+//       setCookie(AUTH_COOKIE, token);
+//       setCookie(USER_COOKIE, JSON.stringify(user));
+//       setCookie(LOGGED_IN_COOKIE, String(loggedIn));
+//       setisLoggedIn(loggedIn);
+//       setToken(token);
+//       setUser(user);
+//       setError(error);
+//     },
+//     [setCookie]
+//   );
+
+//   const resetLoginAttempts = () =>
+//     loginAttempts >= 2 && setTimeout(() => setLoginAttempts(0), 60000);
+//   useEffect(resetLoginAttempts, [loginAttempts]);
+
+//   const updateLoginState = useCallback(
+//     (loggedIn, token, user, error = null) => {
+//       setCookies(
+//         setCookie,
+//         AUTH_COOKIE,
+//         USER_COOKIE,
+//         LOGGED_IN_COOKIE,
+//         loggedIn,
+//         token,
+//         user
+//       );
+//       setisLoggedIn(loggedIn);
+//       setToken(token);
+//       setUser(user);
+//       setError(error);
+//     },
+//     [setCookie]
+//   );
+
+//   const validateToken = useCallback(async () => {
+//     if (!isMounted.current) return;
+
+//     setIsLoading(true);
+//     try {
+//       const latestSignInResponse = directedResponses.find(
+//         (res) => res.eventType === 'SIGNIN'
+//       );
+
+//       if (
+//         latestSignInResponse &&
+//         latestSignInResponse.response.data.token !== token
+//       ) {
+//         const newToken = latestSignInResponse.response.data.token;
+//         const decodedUser = jwt_decode(newToken);
+//         setLoginState(true, newToken, decodedUser);
+//       } else {
+//         throw new Error('Token validation failed');
+//       }
+//     } catch (error) {
+//       setError('Token validation failed');
+//       setLoginState(false, null, {}, 'Token validation failed');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   }, [directedResponses, setLoginState, token]);
+//   useEffect(() => {
+//     const queryToken = new URLSearchParams(window.location.search).get('token');
+//     const cookieToken = cookies[AUTH_COOKIE];
+//     const activeToken = queryToken || cookieToken;
+//     if (activeToken && activeToken !== token) {
+//       validateToken(activeToken);
+//     }
+//   }, [validateToken, cookies[AUTH_COOKIE]]);
+
+//   const safeRequest = useCallback(async (apiEndpoint, data, methodName) => {
+//     try {
+//       if (!validateData(data, apiEndpoint, methodName)) {
+//         throw new Error(`Invalid data sent to API endpoint: ${apiEndpoint}`);
+//       }
+//       const response = await axios.post(apiEndpoint, data);
+//       if (!validateData(response, apiEndpoint, methodName)) {
+//         throw new Error(
+//           `Invalid data received from API endpoint: ${apiEndpoint}`
+//         );
+//       }
+//       return response.data;
+//     } catch (error) {
+//       console.error(`[Error] Failed to send request to: ${apiEndpoint}`, error);
+//       setError({ message: error.message, source: methodName });
+//       return null;
+//     }
+//   }, []);
+
+//   const safeResponse = useCallback((data, eventName, handler) => {
+//     try {
+//       if (!validateData(data, eventName, handler.name)) {
+//         throw new Error(`Invalid data received for event: ${eventName}`);
+//       }
+//       return handler(data);
+//     } catch (error) {
+//       console.error(`[Error] Failed to handle event: ${eventName}`, error);
+//       setError({ message: error.message, source: eventName });
+//       return null;
+//     }
+//   }, []);
+
+//   const executeAuthAction = async (actionType, url, requestData) => {
+//     const response = await safeRequest(
+//       `${REACT_APP_SERVER}/api/users/${url}`,
+//       requestData,
+//       actionType.toLowerCase()
+//     );
+
+//     if (response) {
+//       const processedData = safeResponse(
+//         response,
+//         actionType.toLowerCase(),
+//         (data) => processResponseData(data, actionType)
+//       );
+//       if (processedData) {
+//         setLoginState(
+//           true,
+//           processedData.token || null,
+//           processedData.user || processedData.newUser || {}
+//         );
+//       }
+//     }
+//   };
+
+//   const login = async (username, password) => {
+//     const requestData = { username, password };
+//     await executeAuthAction('Login', 'signin', requestData);
+//   };
+
+//   const signup = async (loginData, basicInfo, otherInfo) => {
+//     const requestData = {
+//       login_data: loginData,
+//       basic_info: basicInfo,
+//       ...otherInfo,
+//     };
+//     await executeAuthAction('Signup', 'signup', requestData);
+//   };
+
+//   const logout = () => {
+//     removeCookie('auth');
+//     removeCookie(AUTH_COOKIE);
+//     setLoginState(false, null, {});
+//     console.log('Logout method invoked');
+//   };
+//   // Add this in your Header component
+//   useEffect(() => {
+//     console.log('Value of isLoggedIn from context: ', isLoggedIn);
+//   }, [isLoggedIn]);
+
+//   useEffect(() => {
+//     if (isMounted.current) {
+//       const queryToken = new URLSearchParams(window.location.search).get(
+//         'token'
+//       );
+//       const cookieToken = cookies[AUTH_COOKIE];
+//       const activeToken = queryToken || cookieToken;
+
+//       if (activeToken && activeToken !== token) {
+//         validateToken(activeToken);
+//       }
+//     }
+//   }, [validateToken, cookies[AUTH_COOKIE]]);
+
+//   const contextValue = {
+//     isLoading,
+//     isLoggedIn,
+//     user,
+//     // users,
+//     error,
+//     login,
+//     // onLogin,
+//     logout,
+//     signup,
+//     setUser,
+//     setLoginState,
+//     validateToken,
+//   };
+
+//   return (
+//     <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
+//   );
+// }
diff --git a/src/context/CardContext/CardStore.js b/src/context/CardContext/CardStore.js
index f6566c0..491c2fb 100644
--- a/src/context/CardContext/CardStore.js
+++ b/src/context/CardContext/CardStore.js
@@ -8,10 +8,7 @@ const CardContext = createContext();
 export const CardProvider = ({ children }) => {
   const [cookies, setCookie] = useCookies(['cart'], ['deckData']);
   const initialStore = cookies.store || [];
-  // const initialCart = cookies.cart || [];
-  // console.log('Initial cart:', initialCart);
   const [cardsArray, setCardsArray] = useState(initialStore);
-  // console.log('Initial store:', initialStore);
   const currentCart = cookies.cart || [];
   const [currenCartArray, setCurrentCartArray] = useState(currentCart);
   const [searchData, setSearchData] = useState([]);
@@ -19,7 +16,6 @@ export const CardProvider = ({ children }) => {
   const [savedDeckData, setSavedDeckData] = useState(currentDeckData);
   const [deckSearchData, setDeckSearchData] = useState([]);
 
-  // console.log('Current cart:', currentCart);
   if (!currenCartArray || !savedDeckData) {
     return <div>Loading...</div>;
   }
@@ -82,7 +78,6 @@ export const CardProvider = ({ children }) => {
       searchData,
       deckSearchData,
       savedDeckData,
-
       setSearchData,
       setDeckSearchData,
       setSavedDeckData,
@@ -104,6 +99,11 @@ export const CardProvider = ({ children }) => {
         initialStore,
         cookies,
         currentCart,
+        // getCardQuantity: (cardId) => {
+        //   if
+        //   const card = cartData?.cart?.find((c) => c?.id === cardId);
+        //   return card?.quantity || 0;
+        // },
         setSearchData,
         setDeckSearchData,
         setSavedDeckData,
diff --git a/src/context/CardImagesContext/CardImagesContext.jsx b/src/context/CardImagesContext/CardImagesContext.jsx
new file mode 100644
index 0000000..2f67d6f
--- /dev/null
+++ b/src/context/CardImagesContext/CardImagesContext.jsx
@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+const CardImagesContext = createContext();
+
+export const useCardImages = () => useContext(CardImagesContext);
+
+const fetchWrapper = async (url, method, body = null) => {
+  const options = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      // 'Access-Control-Allow-Origin': '*',
+      // crossOrigin: 'anonymous',
+    },
+    ...(body && { body: JSON.stringify(body) }),
+  };
+
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      // We handle non-ok responses immediately
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+    // updateLastRequestTime(method); // Assumed to be a function that updates some kind of state
+    return await response.json(); // Directly returning the JSON response
+  } catch (error) {
+    console.error(`Fetch failed: ${error}`);
+    console.trace();
+    throw error; // Re-throwing the error for upstream catch blocks to handle
+  }
+};
+
+export const CardImagesProvider = ({ children }) => {
+  const [cards, setCards] = useState([]);
+  const [images, setImages] = useState([]); // [
+  const [randomCardImage, setRandomCardImage] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  // const BASE_API_URL = 'http://localhost:3001/api/card-image';
+  const BASE_API_URL = `${process.env.REACT_APP_SERVER}/api/card-image`;
+
+  const downloadCardImages = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetchWrapper(BASE_API_URL + '/download', 'GET');
+      console.log('Response from fetchWrapper:', response);
+
+      // If response is already JSON
+      setCards(response.data); // Directly setting the response if it's already in the desired format
+
+      cards.forEach((card) => {
+        if (card.card_images && card.card_images.length > 0) {
+          // Adding a dummy GET parameter to bypass caching
+          const imageUrl =
+            card.card_images[0].image_url + '?dummy=' + Date.now();
+          setImages(imageUrl);
+        }
+      });
+
+      // If response needs to be parsed as JSON
+      // const jsonResponse = await response.json(); // Uncomment if response is in JSON format
+      // setCards(jsonResponse); // Assuming jsonResponse is an array of cards
+    } catch (error) {
+      console.error('Error in downloadCardImages:', error);
+      setError(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    downloadCardImages();
+  }, []);
+
+  useEffect(() => {
+    if (cards && cards.length > 0) {
+      const randomCard = cards[Math.floor(Math.random() * cards.length)];
+      if (randomCard.card_images && randomCard.card_images.length > 0) {
+        // Adding a dummy GET parameter to bypass caching
+        const imageUrl =
+          randomCard.card_images[0].image_url + '?dummy=' + Date.now();
+        setRandomCardImage(imageUrl);
+      }
+    }
+  }, [cards]);
+
+  useEffect(() => {
+    if (images && images.length > 0) {
+      const randomCard = images[Math.floor(Math.random() * images.length)];
+      if (randomCard.card_images && randomCard.card_images.length > 0) {
+        setRandomCardImage(randomCard.card_images[0].image_url);
+      }
+    }
+  }, [images]);
+
+  return (
+    <CardImagesContext.Provider
+      value={{
+        cards,
+        images,
+        randomCardImage,
+        isLoading,
+        error,
+        downloadCardImages,
+        setImages,
+      }}
+    >
+      {children}
+    </CardImagesContext.Provider>
+  );
+};
+
+export default CardImagesProvider;
diff --git a/src/context/CartContext/CartContext.js b/src/context/CartContext/CartContext.js
index a96e45e..23b3748 100644
--- a/src/context/CartContext/CartContext.js
+++ b/src/context/CartContext/CartContext.js
@@ -34,8 +34,8 @@ export const CartProvider = ({ children }) => {
     quantity: 0, // Total quantity of items
     totalPrice: 0, // Total price of items
   });
-  const [cookies, setCookie] = useCookies(['userCookie', 'cart']);
-  const userId = cookies.userCookie?.id;
+  const [cookies, setCookie] = useCookies(['user', 'cart']);
+  const userId = cookies?.user?.id;
   const { getCardData } = useCardStore();
   const isMounted = useRef(true);
 
@@ -45,7 +45,6 @@ export const CartProvider = ({ children }) => {
     };
   }, []);
 
-  //Utility functions
   const fetchFromServer = async (url, options = {}) => {
     const response = await fetch(
       `${process.env.REACT_APP_SERVER}${url}`,
@@ -56,36 +55,49 @@ export const CartProvider = ({ children }) => {
     }
     return await response.json();
   };
-
   const updateCart = async (cartId, updatedCart) => {
-    const formattedCartData = updatedCart.map((item) => ({
-      ...item,
-      quantity: item.quantity,
-    }));
+    if (!cartId) return;
+    const formattedCartData = {
+      cartItems: updatedCart.map((item) => ({
+        ...item,
+        id: item.id, // Make sure 'id' is a number
+        quantity: item.quantity,
+      })),
+      userId: userId,
+    };
     const data = await fetchFromServer(`/api/carts/${cartId}/update`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(formattedCartData),
     });
+    // if (data && data.cart) {
+    //   setCartDataAndCookie(data.cart);
+    // }
     setCartDataAndCookie(data);
+    return data;
   };
-
   const createUserCart = useCallback(
     async (userId) => {
-      const newCartData = await fetchFromServer(
-        `/api/carts/${userId}/newCart`,
-        { method: 'POST' }
-      );
-      const newCartItems = Array.isArray(newCartData.cart)
-        ? newCartData.cart
-        : [];
-      setCookie('cart', newCartItems, {
-        // Changed this line
-        path: '/',
-        secure: true,
-        sameSite: 'none',
-      });
-      return newCartItems;
+      try {
+        const newCartData = await fetchFromServer(
+          '/api/carts/createEmptyCart',
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ userId }),
+          }
+        );
+        // setCookie('cart', newCartData, {
+        //   // Changed this line
+        //   path: '/',
+        //   secure: true,
+        //   sameSite: 'none',
+        // });
+        setCartDataAndCookie(newCartData);
+        return newCartData;
+      } catch (error) {
+        console.error('Error creating cart:', error);
+      }
     },
     [setCookie]
   );
@@ -94,46 +106,24 @@ export const CartProvider = ({ children }) => {
     async (userId) => {
       try {
         const data = await fetchFromServer(`/api/carts/userCart/${userId}`);
-        setCookie('cart', data.cart || [], {
-          path: '/',
-          secure: true,
-          sameSite: 'none',
-        });
+        // setCookie('cart', data.cart || [], {
+        //   path: '/',
+        //   secure: true,
+        //   sameSite: 'none',
+        // });
+        setCartDataAndCookie(data);
         return data;
       } catch (error) {
         if (error.message === 'HTTP error! status: 404') {
-          return createUserCart(userId);
+          await createUserCart(userId);
         } else {
-          console.error(error.message);
+          console.error('Error fetching user cart:', error);
         }
       }
     },
-    [createUserCart, setCookie]
+    [createUserCart]
   );
 
-  useEffect(() => {
-    if (userId && typeof userId === 'string') {
-      // console.log('Fetching user cart');
-      fetchUserCart(userId)
-        .then((data) => {
-          if (data && data.cart) {
-            setCartDataAndCookie(data);
-          }
-        })
-        .catch((error) => console.log('Error fetching user cart:', error));
-    }
-  }, [userId, fetchUserCart]);
-
-  const setCartDataAndCookie = (newCartData) => {
-    setCartData(newCartData);
-    setCookie('cart', newCartData.cart, {
-      // Changed this line
-      path: '/',
-      secure: true,
-      sameSite: 'none',
-    });
-  };
-
   const getCardQuantity = (cardId) => {
     let totalItems = 0;
     let quantityOfSameId = 0;
@@ -148,7 +138,8 @@ export const CartProvider = ({ children }) => {
 
   const addOneToCart = async (cardInfo) => {
     if (!cartData._id) return;
-    const { quantityOfSameId } = getCardQuantity(cardInfo.id);
+    console.log('Adding one to cart', cardInfo);
+    const { quantityOfSameId, totalItems } = getCardQuantity(cardInfo.id);
     if (quantityOfSameId >= 3) return;
     let updatedCart = cartData.cart.map((item) =>
       item.id === cardInfo.id ? { ...item, quantity: item.quantity + 1 } : item
@@ -157,6 +148,7 @@ export const CartProvider = ({ children }) => {
       updatedCart = [...updatedCart, { ...cardInfo, quantity: 1 }];
     }
     const updatedCartData = await updateCart(cartData._id, updatedCart);
+    console.log('UPDATED CART DATA:', updatedCartData);
     if (updatedCartData) setCartData(updatedCartData);
   };
 
@@ -180,6 +172,17 @@ export const CartProvider = ({ children }) => {
     if (updatedCartData) setCartData(updatedCartData);
   };
 
+  const setCartDataAndCookie = (newCartData) => {
+    if (newCartData && Array.isArray(newCartData.cart)) {
+      setCartData(newCartData);
+      setCookie('cart', newCartData.cart, {
+        path: '/',
+        secure: true,
+        sameSite: 'none',
+      });
+    }
+  };
+
   useEffect(() => {
     if (userId && typeof userId === 'string' && isMounted.current) {
       fetchUserCart(userId)
@@ -190,7 +193,22 @@ export const CartProvider = ({ children }) => {
         })
         .catch((error) => console.log('Error fetching user cart:', error));
     }
+    return () => {
+      isMounted.current = false;
+    };
   }, [userId, fetchUserCart]);
+  // useEffect(() => {
+  //   if (userId && typeof userId === 'string') {
+  //     // console.log('Fetching user cart');
+  //     fetchUserCart(userId)
+  //       .then((data) => {
+  //         if (data && data.cart) {
+  //           setCartDataAndCookie(data);
+  //         }
+  //       })
+  //       .catch((error) => console.log('Error fetching user cart:', error));
+  //   }
+  // }, [userId, fetchUserCart]);
 
   const getTotalCost = useMemo(
     () =>
@@ -210,6 +228,7 @@ export const CartProvider = ({ children }) => {
       0
     );
 
+    console.log('TOTAL QUANTITY:', totalQuantity);
     if (
       cartData.quantity !== totalQuantity ||
       cartData.totalPrice !== getTotalCost
@@ -229,6 +248,10 @@ export const CartProvider = ({ children }) => {
   const value = {
     cartData,
     getCardQuantity,
+    // getCardQuantity: (cardId) => {
+    //   const card = cartData?.cart?.find((c) => c?.id === cardId);
+    //   return card?.quantity || 0;
+    // },
     cartCardQuantity: cartData.cart?.reduce(
       (acc, card) => acc + card.quantity,
       0
@@ -238,8 +261,8 @@ export const CartProvider = ({ children }) => {
       (acc, card) => acc + card.card_prices[0].tcgplayer_price * card.quantity,
       0
     ),
-    addOneToCart,
-    removeOneFromCart,
+    addOneToCart: addOneToCart,
+    removeOneFromCart: removeOneFromCart,
     deleteFromCart,
     getTotalCost,
     fetchUserCart,
@@ -250,7 +273,7 @@ export const CartProvider = ({ children }) => {
     console.log('CART CONTEXT: ', {
       cartData,
       // getTotalCost,
-      // // getCardQuantity,
+      // getCardQuantity,
       // fetchUserCart,
       // addOneToCart,
       // removeOneFromCart,
diff --git a/src/context/CartContext/keepsaved.js b/src/context/CartContext/keepsaved.js
deleted file mode 100644
index 98c7d5d..0000000
--- a/src/context/CartContext/keepsaved.js
+++ /dev/null
@@ -1,240 +0,0 @@
-// /* eslint-disable @typescript-eslint/no-empty-function */
-// import React, { createContext, useState, useEffect, useCallback } from 'react';
-// import { useCookies } from 'react-cookie';
-// import { useCardStore } from './CardStore';
-
-// export const CartContext = createContext({
-//   cart: [],
-//   getCardQuantity: () => {},
-//   addOneToCart: () => {},
-//   removeOneFromCart: () => {},
-//   deleteFromCart: () => {},
-//   getTotalCost: () => {},
-//   setCart: () => {},
-//   fetchUserCart: () => {},
-// });
-
-// export const CartProvider = ({ children }) => {
-//   const [cartData, setCartData] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-//   const { getCardData } = useCardStore();
-//   const [cookies, setCookie] = useCookies(['userCookie', 'cart']);
-
-//   const userId = cookies.userCookie?.id; // Update the way to get the userId
-//   console.log('cartData', cartData);
-
-//   useEffect(() => {
-//     let isMounted = true;
-
-//     const fetchAndSetUserCart = async (userId) => {
-//       try {
-//         setLoading(true);
-//         const cartData = await fetchUserCart(userId);
-//         console.log('Fetched cartData:', cartData);
-
-//         if (isMounted) {
-//           setCartData(cartData);
-//           setLoading(false);
-//         }
-//       } catch (error) {
-//         if (isMounted) {
-//           setError(`Failed to fetch user cart data: ${error.message}`);
-//           setLoading(false);
-//         }
-//       }
-//     };
-
-//     if (userId && typeof userId === 'string') {
-//       fetchAndSetUserCart(userId);
-//     }
-
-//     return () => {
-//       isMounted = false;
-//     };
-//   }, [userId]);
-
-//   // Add new function here
-//   const createUserCart = async (userId) => {
-//     const newCartResponse = await fetch(
-//       `${process.env.REACT_APP_SERVER}/api/carts/newCart/${userId}`,
-//       {
-//         method: 'POST',
-//       }
-//     );
-
-//     if (!newCartResponse.ok) {
-//       throw new Error(`HTTP error! status: ${newCartResponse.status}`);
-//     }
-
-//     const newCartData = await newCartResponse.json();
-//     console.log('CART CREATED:', newCartData);
-//     const newCartItems = Array.isArray(newCartData.cart)
-//       ? newCartData.cart
-//       : [];
-//     setCookie('activeCartCardsArray', newCartItems, { path: '/' });
-//     setCookie('allCarts', newCartItems, { path: '/' });
-//     return newCartItems;
-//   };
-
-//   const fetchUserCart = useCallback(
-//     async (userId) => {
-//       const response = await fetch(
-//         `${process.env.REACT_APP_SERVER}/api/carts/userCart/${userId}`
-//       );
-
-//       if (!response.ok) {
-//         if (response.status === 404) {
-//           // Call the new function here
-//           return createUserCart(userId);
-//         } else {
-//           throw new Error(`HTTP error! status: ${response.status}`);
-//         }
-//       } else {
-//         const data = await response.json();
-//         console.log('CART EXISTS:', data);
-//         setCookie(
-//           'activeCartCardsArray',
-//           Array.isArray(data.cart) ? data.cart : [],
-//           {
-//             path: '/',
-//           }
-//         );
-//         setCookie('allCarts', Array.isArray(data) ? data : {}, {
-//           path: '/',
-//         });
-//         return data;
-//       }
-//     },
-//     [setCookie, createUserCart] // Added createUserCart to the dependencies array
-//   );
-
-//   const updateCartInBackend = async (cartId, cartData) => {
-//     console.log('received values:', 'cartId', cartId, 'cartData', cartData);
-
-//     // Ensure cartData is in the correct format
-//     const formattedCartData = cartData.map((item) => ({
-//       cardId: item.id,
-//       quantity: item.quantity,
-//     }));
-
-//     try {
-//       const response = await fetch(
-//         `${process.env.REACT_APP_SERVER}/api/carts/${cartId}`,
-//         {
-//           method: 'PUT',
-//           headers: {
-//             'Content-Type': 'application/json',
-//           },
-//           body: JSON.stringify(formattedCartData),
-//         }
-//       );
-
-//       if (!response.ok) {
-//         throw new Error(`HTTP error! status: ${response.status}`);
-//       }
-
-//       const data = await response.json();
-//       return data;
-//     } catch (error) {
-//       console.error(`Failed to update cart in backend: ${error.message}`);
-//     }
-//   };
-
-//   const getCardQuantity = (cardInfo) => {
-//     const cartItem = cartData?.cart?.find((item) => item.id === cardInfo.id);
-//     return cartItem ? cartItem.quantity : 0;
-//   };
-
-//   const addOneToCart = async (cardInfo) => {
-//     const itemExistsInCart = cartData?.cart?.some(
-//       (item) => item.id === cardInfo.id
-//     );
-
-//     let updatedCart;
-//     if (itemExistsInCart) {
-//       updatedCart =
-//         cartData?.cart?.map((item) => {
-//           if (item.id === cardInfo.id) {
-//             return {
-//               ...item,
-//               quantity: item.quantity + 1,
-//             };
-//           }
-//           return item;
-//         }) ?? [];
-//     } else {
-//       updatedCart = [...(cartData?.cart || []), { ...cardInfo, quantity: 1 }];
-//     }
-
-//     const newCartData = await updateCartInBackend(cartData?._id, updatedCart);
-//     setCartData(newCartData || []);
-//   };
-
-//   const removeOneFromCart = async (cardInfo) => {
-//     const quantity = getCardQuantity(cardInfo.id);
-//     const updatedCart =
-//       quantity === 1
-//         ? cartData?.cart?.filter(
-//             (currentCard) => currentCard.id !== cardInfo.id
-//           ) ?? []
-//         : cartData?.cart?.map((card) =>
-//             card.id === cardInfo.id
-//               ? { ...card, quantity: card.quantity - 1 }
-//               : card
-//           ) ?? [];
-
-//     const newCartData = await updateCartInBackend(cartData?._id, updatedCart);
-//     setCartData(newCartData || []);
-//   };
-
-//   const deleteFromCart = async (cardInfo) => {
-//     const updatedCart =
-//       cartData?.cart?.filter(
-//         (currentCard) => currentCard.cardId !== cardInfo.id
-//       ) ?? [];
-
-//     const newCartData = await updateCartInBackend(cartData?._id, updatedCart);
-//     setCartData(newCartData || []);
-//   };
-
-//   const getTotalCost = () => {
-//     if (!cartData?.cart || cartData.cart.length === 0) {
-//       return 0;
-//     }
-
-//     console.log('cartData:', cartData);
-//     return cartData.cart.reduce((totalCost, cartItem) => {
-//       const cardData = getCardData(cartItem.id);
-//       return totalCost + cardData.price * cartItem.quantity;
-//     }, 0);
-//   };
-
-//   const setCart = async (cart) => {
-//     const updatedCart = Array.isArray(cart) ? cart : [];
-//     setCartData(updatedCart);
-//     // update in backend
-//     const newCartData = await updateCartInBackend(cartData?._id, updatedCart);
-//     setCartData(newCartData || []);
-//   };
-
-//   const contextValue = {
-//     cart: cartData.cart,
-//     getCardQuantity,
-//     addOneToCart,
-//     createUserCart,
-//     removeOneFromCart,
-//     fetchUserCart,
-//     deleteFromCart,
-//     getTotalCost,
-//     setCart,
-//     loading,
-//     error,
-//   };
-
-//   return (
-//     <CartContext.Provider value={contextValue}>{children}</CartContext.Provider>
-//   );
-// };
-
-// export default CartProvider;
diff --git a/src/context/ChartContext/ChartContext.jsx b/src/context/ChartContext/ChartContext.jsx
index fb978e0..eefb826 100644
--- a/src/context/ChartContext/ChartContext.jsx
+++ b/src/context/ChartContext/ChartContext.jsx
@@ -12,11 +12,34 @@ export const useChartContext = () => {
 
 export const ChartProvider = ({ children }) => {
   const [latestData, setLatestData] = useState(null);
-  const [timeRange, setTimeRange] = useState(24 * 60 * 60 * 1000); // Default to 24 hours
+  const [timeRange, setTimeRange] = useState(86400000 || 24 * 60 * 60 * 1000); // Default to 24 hours
+
+  // Correctly initialize timeRanges with the useState hook
+  const [timeRanges] = useState([
+    { label: '2 hours', value: 720000 || 2 * 60 * 60 * 1000 },
+    { label: '24 hours', value: 86400000 || 24 * 60 * 60 * 1000 },
+    { label: '7 days', value: 604800000 || 7 * 24 * 60 * 60 * 1000 },
+    { label: '1 month', value: 2592000000 || 30 * 24 * 60 * 60 * 1000 },
+  ]);
+
+  const currentValue = timeRanges.find((option) => option.value === timeRange);
+
+  // console.log('currentValue: ', currentValue);
+  const handleChange = (e) => {
+    setTimeRange(e.target.value);
+  };
 
   return (
     <ChartContext.Provider
-      value={{ latestData, setLatestData, timeRange, setTimeRange }}
+      value={{
+        currentValue,
+        latestData,
+        setLatestData,
+        timeRange,
+        setTimeRange,
+        timeRanges,
+        handleChange,
+      }}
     >
       {children}
     </ChartContext.Provider>
diff --git a/src/context/CollectionContext/CollectionContext.jsx b/src/context/CollectionContext/CollectionContext.jsx
index 07a3560..d4bf44b 100644
--- a/src/context/CollectionContext/CollectionContext.jsx
+++ b/src/context/CollectionContext/CollectionContext.jsx
@@ -7,379 +7,180 @@ import React, {
   useCallback,
   useMemo,
   useContext,
+  useRef,
 } from 'react';
 import { useCookies } from 'react-cookie';
 import {
-  initialCollectionState,
+  handleCardAddition,
+  handleCardRemoval,
+  createApiUrl,
   fetchWrapper,
-  removeDuplicateCollections,
-  calculateAndUpdateTotalPrice,
-  calculateTotalPrice,
   getTotalCost,
+  initialCollectionState,
   getCardPrice,
-} from './exampleImport.js';
-import { useCombinedContext } from '../CombinedProvider.jsx';
-import { useUserContext } from '../UserContext/UserContext.js';
+  defaultContextValue,
+  validateUserIdAndData,
+  getUpdatedChartData,
+  getPriceChange,
+  constructPayloadWithDifferences,
+  getCurrentChartDataSets,
+  calculateCollectionValue,
+} from './collectionUtility.jsx';
 import moment from 'moment';
-// import { useUserContext } from '../UserContext/UserContext.js';
-// 1. Define a default context value
-const defaultContextValue = {
-  allCollections: [],
-  allCardPrices: [],
-  xy: [],
-  selectedCollection: {},
-  collectionData: initialCollectionState,
-  totalCost: 0,
-  openChooseCollectionDialog: false,
-  updatedPricesFromCombinedContext: {},
-  setUpdatedPricesFromCombinedContext: () => {},
-  setOpenChooseCollectionDialog: () => {},
-  calculateTotalPrice: () => {},
-  getTotalCost: () => {},
-  createUserCollection: () => {},
-  removeCollection: () => {},
-  fetchAllCollectionsForUser: () => {},
-  setSelectedCollection: () => {},
-  setAllCollections: () => {},
-  addOneToCollection: () => {},
-  removeOneFromCollection: () => {},
-};
 
-// 2. Replace null with the default value when creating the context
 export const CollectionContext = createContext(defaultContextValue);
 
-const filterOutDuplicateYValues = (datasets) => {
-  // console.log('DATASETS:', datasets);
-  const seenYValues = new Set();
-  return datasets?.filter((data) => {
-    const yValue = data?.y;
-    if (seenYValues.has(yValue)) {
-      return false;
-    }
-    seenYValues.add(yValue);
-    return true;
-  });
-};
-
-const transformChartData = (chartData) => {
-  let pointsArray = [];
-
-  if (Array.isArray(chartData?.datasets)) {
-    chartData?.datasets?.forEach((dataset) => {
-      dataset.data?.forEach((dataEntry) => {
-        dataEntry.xys?.forEach((xyEntry) => {
-          const { x, y } = xyEntry.data;
-          if (x && y !== undefined) {
-            pointsArray.push({ x, y });
-          }
-        });
-      });
-    });
-  } else {
-    console.error(
-      'Expected chartData.datasets to be an array, but got:',
-      chartData
-    );
-  }
-
-  return pointsArray;
-};
-
-function convertData(originalData) {
-  let finalDataForChart = [];
+function transformPriceHistoryToXY(collectionPriceHistory) {
+  return collectionPriceHistory?.map((entry) => ({
+    x: entry?.timestamp, // x represents the timestamp
+    y: entry?.num, // y represents the numerical value
+    label: `Price at ${entry?.timestamp}`, // label can be customized as needed
+  }));
+}
 
-  const { datasets } = originalData;
+const getAllCardPrices = (cards) =>
+  cards.flatMap((card) => Array(card.quantity).fill(card.price));
 
-  if (Array.isArray(datasets) && datasets.length > 0) {
-    const lastDataset = datasets[datasets.length - 1];
+function filterUniqueDataPoints(dataArray) {
+  const uniqueRecords = new Map();
 
-    if (Array.isArray(lastDataset.data) && lastDataset.data.length > 0) {
-      lastDataset.data.forEach((dataEntry) => {
-        dataEntry.xys?.forEach((xyEntry) => {
-          const { x, y } = xyEntry.data;
-          if (x && y !== undefined) {
-            finalDataForChart.push({ x, y });
-          }
-        });
-      });
+  dataArray?.forEach((item) => {
+    const key = `${item?.label}-${item?.x}-${item?.y}`;
+    if (!uniqueRecords.has(key)) {
+      uniqueRecords.set(key, item);
     }
-  }
+  });
 
-  return {
-    ...originalData,
-    finalDataForChart,
-  };
+  return Array.from(uniqueRecords.values());
 }
-const isEmpty = (obj) => {
-  return (
-    [Object, Array].includes((obj || {}).constructor) &&
-    !Object.entries(obj || {}).length
-  );
-};
-const validateData = (data, eventName, functionName) => {
-  const dataType = typeof data;
-  console.log(
-    `[Info] Received data of type: ${dataType} in ${functionName} triggered by event: ${eventName}`
-  );
-  if (data === null || data === undefined) {
-    console.warn(
-      `[Warning] Received null or undefined data in ${functionName} triggered by event: ${eventName}`
-    );
-    return false;
-  }
-  if (isEmpty(data)) {
-    console.error(
-      `[Error] Received empty data object or array in ${functionName} triggered by event: ${eventName}`
-    );
-    return false;
-  }
-  return true;
-};
-
-const handleCardAddition = (currentCards, cardToAdd) => {
-  // Check if the card already exists in the currentCards array
-  const cardToAddId =
-    typeof cardToAdd.id === 'number' ? String(cardToAdd.id) : cardToAdd.id;
-
-  const matchingCard = currentCards.find((c) => c.id === cardToAddId);
-
-  if (matchingCard) {
-    matchingCard.quantity++;
-    return [...currentCards];
-  } else {
-    return [...currentCards, { ...cardToAdd, id: cardToAddId, quantity: 1 }];
-  }
-};
-
-const handleCardRemoval = (currentCards, cardToRemove) => {
-  // Convert the cardToRemove's id to a string if it's a number
-  const cardToRemoveId =
-    typeof cardToRemove.id === 'number'
-      ? String(cardToRemove.id)
-      : cardToRemove.id;
-
-  const matchingCard = currentCards.find((c) => c.id === cardToRemoveId);
-
-  if (!matchingCard) {
-    console.error('Card not found in the collection.');
-    return [...currentCards];
-  }
-
-  if (matchingCard.quantity > 1) {
-    matchingCard.quantity--;
-    return [...currentCards];
-  } else {
-    return currentCards.filter((card) => card.id !== cardToRemoveId);
-  }
-};
 
 export const CollectionProvider = ({ children }) => {
-  // const { cardPrices } = useCombinedContext();
-  const BASE_API_URL = `${process.env.REACT_APP_SERVER}/api/users`;
-  const [cookies] = useCookies(['userCookie']);
-  const { triggerCronJob } = useUserContext();
+  const [cookies] = useCookies(['user']);
+  const [selectedCollection, setSelectedCollection] = useState(
+    initialCollectionState
+  );
   const [collectionData, setCollectionData] = useState(initialCollectionState);
   const [allCollections, setAllCollections] = useState([]);
-  const [allCardPrices, setAllCardPrices] = useState([]);
-  const [xyData, setXyData] = useState([
-    // {
-    //   label: '',
-    //   data: [],
-    // },
-  ]); // New state to hold xy data
-  // const [updatedPrices, setUpdatedPrices] = useState([]);
+  const [totalPrice, setTotalPrice] = useState(0);
+  const [totalCost, setTotalCost] = useState('');
   const [
     updatedPricesFromCombinedContext,
     setUpdatedPricesFromCombinedContext,
-  ] = useState({});
-  const [selectedCollection, setSelectedCollection] = useState({});
+  ] = useState([]);
+  const [xyData, setXyData] = useState([]);
+  const [currentChartDataSets2, setCurrentChartDataSets2] = useState([]);
   const [openChooseCollectionDialog, setOpenChooseCollectionDialog] =
     useState(false);
-  const chartData = selectedCollection?.chartData || {};
-  // const datasets = chartData?.datasets || [];
-  const userId = cookies.userCookie?.id;
-  const totalCost = useMemo(
-    () => getTotalCost(selectedCollection),
-    [selectedCollection]
-  );
-
-  const calculateTotalFromAllCardPrices = (allCardPrices) => {
-    if (!Array.isArray(allCardPrices)) return 0;
-    return allCardPrices.reduce(
-      (total, price) => total + ensureNumber(price, 0),
-      0
-    );
-  };
-
-  const ensureNumber = (value, defaultValue = 0) => {
-    let num = parseFloat(value);
-    return isNaN(num) ? defaultValue : num;
-  };
+  const userId = cookies?.user?.id;
+  const lastFetchedTime = useRef(null);
 
   const fetchAndSetCollections = useCallback(async () => {
-    if (!userId) {
-      console.warn('userId is not set, aborting fetchAndSetCollections.');
-      return;
-    }
+    const shouldFetch = () => {
+      const fetchDelay = 60000; // 1 minute
+      const currentTime = Date.now();
+      return (
+        !lastFetchedTime.current ||
+        currentTime - lastFetchedTime.current >= fetchDelay
+      );
+    };
+
+    if (!shouldFetch()) return;
 
     try {
-      console.log('Fetching collections...');
-      const collections = await fetchWrapper(
-        `${BASE_API_URL}/${userId}/collections`,
+      lastFetchedTime.current = Date.now();
+      const response = await fetchWrapper(
+        createApiUrl(`${userId}/collections`),
         'GET'
       );
+      const collections = response.data || [];
 
-      console.log('Fetched collections:', collections);
-
-      if (!collections) {
-        console.warn('No collections returned from the server.');
-        // Consider setting an empty or error state here
-        return;
-      }
-
-      const uniqueCollections = removeDuplicateCollections(collections);
-      console.log('Unique collections:', uniqueCollections);
+      console.log('FETCHED COLLECTIONS:', collections);
 
-      // Filter out invalid collections
-      const validCollections = uniqueCollections.filter(Boolean);
-
-      if (Array.isArray(validCollections)) {
-        console.log('Valid collections:', validCollections);
-        validCollections.forEach((collection) => {
-          if (collection && collection.allCardPrices) {
-            collection.totalPrice = calculateTotalFromAllCardPrices(
-              collection.allCardPrices
-            );
-          } else {
-            console.warn(
-              'Invalid collection or missing allCardPrices:',
-              collection
-            );
-          }
-        });
+      if (collections.length > 0) {
+        setAllCollections(collections);
+        setCollectionData(collections[0]);
+        setSelectedCollection(collections[0]);
       } else {
-        console.error('Valid collections is not an array', collections);
+        console.warn('No collections found.');
+        // Optionally, set a default or empty state if no collections are found
       }
-
-      setAllCollections(validCollections);
-      setCollectionData(
-        validCollections.length === 0
-          ? initialCollectionState
-          : validCollections[0]
-      );
-      setSelectedCollection(
-        validCollections.length === 0
-          ? initialCollectionState
-          : validCollections[0]
-      );
     } catch (error) {
-      if (error && error.message) {
-        console.error(`Failed to fetch collections: ${error.message}`);
-        // Consider setting an error state here, for example:
-        // setErrorState(error.message);
-      } else {
-        console.error('An unexpected error occurred.');
-        // Consider setting a generic error state here, for example:
-        // setErrorState('An unexpected error occurred.');
-      }
+      console.error(`Failed to fetch collections: ${error}`);
     }
-  }, [userId]);
+  }, [userId, setAllCollections, setCollectionData, setSelectedCollection]);
 
-  const findCollectionIndex = useCallback(
-    (collections, id) =>
-      collections?.findIndex((collection) => collection?._id === id) ?? -1,
-    []
-  );
+  const updateCollectionArray = (collections, newData) => {
+    const index = collections.findIndex((c) => c._id === newData?._id);
+    return index === -1
+      ? [...collections, newData]
+      : collections.map((c) => (c._id === newData?._id ? newData : c));
+  };
 
   const updateCollectionData = useCallback(
     (newData, collectionType) => {
-      if (collectionType === 'allCollections') {
-        setAllCollections((prevCollections = []) => {
-          const existingIndex = findCollectionIndex(
-            prevCollections,
-            newData?._id
-          );
-          if (existingIndex === -1) return [...prevCollections, newData];
-          const updatedCollections = [...prevCollections];
-          updatedCollections[existingIndex] = newData;
-          return updatedCollections;
-        });
-      } else if (collectionType === 'selectedCollection') {
-        setSelectedCollection(newData);
-
-        // updateActiveCollection(newData);
-      } else if (collectionType === 'collectionData') {
-        setCollectionData(newData);
+      try {
+        switch (collectionType) {
+          case 'allCollections':
+            setAllCollections((prev) => updateCollectionArray(prev, newData));
+            break;
+          case 'selectedCollection':
+            setSelectedCollection(newData);
+            break;
+          case 'collectionData':
+            setCollectionData(newData);
+            break;
+          default:
+            console.warn('Unknown collection type for update:', collectionType);
+        }
+      } catch (error) {
+        console.error('Error updating collection data:', error);
       }
     },
-    [findCollectionIndex]
+    [setAllCollections, setSelectedCollection, setCollectionData]
   );
 
-  const createApiUrl = (path) => `${BASE_API_URL}/${path}`;
-
-  const handleApiResponse = (response, method) => {
-    if (method === 'POST' && response.data?.newCollection) {
-      return response.data.newCollection;
-    }
-    if (method === 'PUT' && response.data?.updatedCollection) {
-      return response.data.updatedCollection;
-    }
-    throw new Error('Unexpected response format');
-  };
-
-  const createUserCollection = async (userId, collection) => {
+  const createUserCollection = async (
+    userId,
+    newCollectionInfo,
+    name,
+    description
+  ) => {
     if (
-      !validateData(
-        collection,
-        'Create User Collection',
-        'createUserCollection'
+      !userId ||
+      !name ||
+      !validateUserIdAndData(
+        userId,
+        newCollectionInfo,
+        'create a new collection'
       )
     ) {
-      console.error('Validation failed for collection data.');
-      return;
-    }
-
-    if (!userId) {
-      console.error('User ID is undefined.');
+      console.warn('Invalid inputs for creating user collection.');
       return;
     }
 
+    // const payload = createPayload(newCollectionInfo, name, description, userId);
     const payload = {
-      name: collection.name,
-      description: collection.description,
-      userId: collection.userId || userId,
-      totalCost: 0,
-      totalPrice: 0,
-      quantity: 0,
-      totalQuantity: 0,
-      xys: xyData || [],
-      allCardPrices: [],
-      cards: [],
-      chartData: {},
+      ...newCollectionInfo,
+      name,
+      description,
+      userId,
     };
-
-    try {
-      const url = createApiUrl(`${userId}/collections/newCollection/${userId}`);
-      const response = await fetchWrapper(url, 'POST', payload);
-
-      if (!response) {
-        console.error('Failed to connect to the server.');
-        return;
-      }
-
-      if (response.error) {
-        console.error(
-          `Failed to create a new collection: ${response.error.message}`
-        );
-        return;
-      }
-
-      const savedCollection = handleApiResponse(response, 'POST');
-      updateCollectionData(savedCollection, 'allCollections');
-      updateCollectionData(savedCollection, 'collectionData');
-    } catch (error) {
-      console.error(`Failed to create a new collection: ${error.message}`);
-    }
+    const url = createApiUrl(`${userId}/collections`);
+    console.log('Creating user collection with data:', {
+      userId,
+      newCollectionInfo,
+      name,
+      description,
+    });
+    console.log('Payload for user collection:', payload);
+
+    const response = await fetchWrapper(url, 'POST', payload);
+    console.log('6. Saved collection:', response);
+    console.log('6. Saved collection:', response.data);
+    console.log('6. Saved collection:', response.message);
+    updateCollectionData(response.data, 'allCollections');
+    updateCollectionData(response.data, 'collectionData');
+    updateCollectionData(response.data, 'selectedCollection');
   };
 
   const removeCollection = async (collection) => {
@@ -388,370 +189,567 @@ export const CollectionProvider = ({ children }) => {
       return;
     }
 
-    try {
-      const url = createApiUrl(`${userId}/collections/${collection._id}`);
-      const response = await fetchWrapper(url, 'DELETE');
-
-      if (response.error) {
-        console.error('Failed to delete the collection:', response.error);
-        return;
-      }
-
-      setAllCollections((prev) =>
-        prev.filter((item) => item._id !== collection._id)
-      );
+    const url = createApiUrl(`${userId}/collections/${collection._id}`);
+    await fetchWrapper(url, 'DELETE');
+    setAllCollections((prev) =>
+      prev.filter((item) => item._id !== collection._id)
+    );
 
-      if (selectedCollection._id === collection._id) {
-        setSelectedCollection(initialCollectionState);
-        setCollectionData(initialCollectionState);
-      }
-    } catch (error) {
-      console.error(`Failed to delete the collection: ${error.message}`);
+    if (selectedCollection._id === collection._id) {
+      setSelectedCollection(initialCollectionState);
+      setCollectionData(initialCollectionState);
     }
   };
 
-  const getUpdatedCards = (activeCollection, card, operation) => {
-    const cardsToUpdate =
-      operation === 'add'
-        ? handleCardAddition(activeCollection?.cards, card)
-        : handleCardRemoval(activeCollection?.cards, card);
-
-    return cardsToUpdate.map((card) => {
-      const cardPrice = card.card_prices?.[0]?.tcgplayer_price;
-      const computedPrice = cardPrice * card.quantity;
-      console.log('COMPUTED PRICE:', computedPrice);
-      const allDatasets = [
-        ...(card?.chart_datasets || []),
-        { x: moment().format('YYYY-MM-DD HH:mm'), y: computedPrice },
-      ];
-      card.chart_datasets = filterOutDuplicateYValues(allDatasets);
-      card.price = cardPrice;
-      card.totalPrice = computedPrice;
-      return card;
-    });
-  };
+  const getUpdatedCards = (collection, cardUpdate, operation) => {
+    let cardsToUpdate;
+
+    switch (operation) {
+      case 'add':
+        cardsToUpdate = handleCardAddition(collection?.cards, cardUpdate);
+        break;
+      case 'remove':
+        cardsToUpdate = handleCardRemoval(collection?.cards, cardUpdate);
+        console.log('CARD REMOVAL:', cardUpdate);
+        console.log('CARD REMOVAL:', cardsToUpdate);
+        break;
+      case 'update':
+        if (!collection?.cards) {
+          console.error('No cards found in the collection.');
+          return collection?.cards;
+        }
+        if (!cardUpdate?.id) {
+          console.warn('Card ID is missing.', cardUpdate);
+          // return collection?.cards;
+        }
+        // eslint-disable-next-line no-case-declarations
+        const cards = collection?.cards;
+
+        for (let i = 0; i < cards?.length; i++) {
+          // eslint-disable-next-line no-case-declarations
+          // const cardIndex = selectedCollection?.cards?.findIndex(
+          //   (c) => c?.id === cardUpdate?.id
+          // );
+          if (!cards[i]?.id) {
+            console.warn('Card ID is missing.', cards[i]);
+            continue;
+          }
+          cardUpdate = cards[i];
+          const cardIndex = selectedCollection?.cards?.findIndex(
+            (c) => c?.id === cardUpdate?.id
+          );
 
-  const getUniqueFilteredXYValues = (allXYValues) => {
-    const uniqueXValues = new Set();
+          if (cardIndex === -1) {
+            console.error(
+              'Card not found in the collection.',
+              collection?.cards[cardIndex]
+            );
+            return collection?.cards;
+          }
 
-    return allXYValues
-      .filter((entry) => entry.y !== 0)
-      .filter((entry) => {
-        if (!uniqueXValues.has(entry.x)) {
-          uniqueXValues.add(entry.x);
-          return true;
+          // eslint-disable-next-line no-case-declarations
+          const existingCard = collection?.cards[cardIndex];
+          // eslint-disable-next-line no-case-declarations
+          const updatedPriceHistory = updatePriceHistory(
+            existingCard,
+            cardUpdate
+          );
+          // eslint-disable-next-line no-case-declarations
+          const updatedCard = getUpdatedCard(
+            existingCard,
+            cardUpdate,
+            updatedPriceHistory,
+            collection?._id
+          );
+          cardsToUpdate = replaceCardInArray(
+            collection?.cards,
+            updatedCard,
+            cardIndex
+          );
         }
-        return false;
-      });
+        break;
+      default:
+        console.error('Unsupported operation:', operation);
+        return collection?.cards;
+    }
+
+    return cardsToUpdate;
   };
 
-  const getNewChartData = (activeCollection, updatedPrice, newDataSet) => {
-    const combinedXYValues = [
-      ...(selectedCollection?.chartData?.datasets?.flatMap(
-        (dataset) => dataset.data
-      ) || []),
-      newDataSet.data[0].xy,
+  function replaceCardInArray(cardsArray, newCard, index) {
+    return [
+      ...cardsArray.slice(0, index),
+      newCard,
+      ...cardsArray.slice(index + 1),
     ];
+  }
 
-    const filteredXYValues = getUniqueFilteredXYValues(combinedXYValues);
+  function getUpdatedCard(card, update, priceHistory, collectionId) {
+    const cardPrice = determineCardPrice(card, update);
+    const newChartDataEntry = createChartDataEntry(totalPrice);
 
     return {
-      name: `Chart for Collection: ${activeCollection?.name}`,
-      userId: userId,
-      updatedPrice: updatedPrice,
-      xys: xyData || [],
-      datasets: [
-        ...(selectedCollection?.chartData?.datasets || []),
-        newDataSet,
+      ...card,
+      price: cardPrice,
+      quantity: update.quantity || card.quantity,
+      collectionId: collectionId,
+      totalPrice: cardPrice * (update.quantity || card.quantity),
+      // lastSavedPrice: update.lastSavedPrice,
+      lastSavedPrice: {
+        num: card.price || card.card_prices[0].tcgplayer_price,
+        timestamp: new Date(),
+      },
+      latestPrice: update.latestPrice,
+      tag: 'monitored',
+      chart_datasets: [...(card.chart_datasets || []), newChartDataEntry],
+      priceHistory: priceHistory,
+    };
+  }
+
+  function determineCardPrice(card, update) {
+    if (update?.latestPrice?.num) return update.latestPrice.num;
+    if (card.price) return card.price;
+    return card.card_prices[0].tcgplayer_price;
+  }
+
+  function updatePriceHistory(card, update) {
+    const newPriceHistoryEntry = createPriceHistoryObject(
+      update?.latestPrice?.num
+    );
+    const lastPriceHistoryEntry =
+      card?.priceHistory[card?.priceHistory?.length - 1];
+
+    if (
+      !lastPriceHistoryEntry ||
+      lastPriceHistoryEntry?.num !== newPriceHistoryEntry?.num
+    ) {
+      return [...card.priceHistory, newPriceHistoryEntry];
+    }
+    return card?.priceHistory;
+  }
+
+  function createChartDataEntry(price) {
+    return {
+      x: moment().format('YYYY-MM-DD HH:mm'),
+      y: price,
+    };
+  }
+
+  function createPriceHistoryObject(price) {
+    return {
+      num: price,
+      timestamp: new Date(),
+    };
+  }
+
+  // Helper function to get updated collection data
+  const getUpdatedCollectionData = (
+    collectionWithCards,
+    updatedTotalPrice,
+    newCollectionPriceHistoryObject,
+    updatedChartData,
+    updatedTotalQuantity,
+    updatedCards
+  ) => {
+    // Check for null or undefined collectionWithCards
+    if (!collectionWithCards) {
+      console.error('No collection data provided');
+      return null; // or an appropriate default object
+    }
+
+    const {
+      allCardPrices = [],
+      description = '',
+      name = '',
+      // _id = '',
+      collectionPriceHistory = [],
+      cards = [],
+    } = collectionWithCards;
+
+    return {
+      allCardPrices,
+      description,
+      name,
+      userId: userId, // Make sure 'userId' is defined in the scope
+      totalPrice: updatedTotalPrice || 0,
+      totalCost: updatedTotalPrice ? updatedTotalPrice.toString() : '0',
+      totalQuantity: cards.reduce((acc, card) => acc + (card.quantity || 0), 0),
+      quantity: cards.length,
+      lastSavedPrice: {
+        num: collectionWithCards?.totalPrice || 0,
+        timestamp: collectionWithCards?.lastSavedPrice?.timeStamp || new Date(),
+      },
+      latestPrice: {
+        num: updatedTotalPrice || 0,
+        timestamp: new Date(),
+      },
+      dailyPriceChange:
+        getPriceChange(currentChartDataSets2)[0]?.priceChange || '',
+      currentChartDataSets2: filterUniqueDataPoints(
+        transformPriceHistoryToXY(collectionPriceHistory)
+      ),
+      collectionPriceHistory: [
+        ...collectionPriceHistory,
+        newCollectionPriceHistoryObject,
       ],
-      allXYValues: filteredXYValues,
     };
   };
 
-  const addOrRemoveCard = useCallback(
-    async (card, cardInfo, operation) => {
-      const collectionId = selectedCollection?._id || allCollections[0]?._id;
-      if (!collectionId) {
-        console.error('No valid collection selected.');
-        setOpenChooseCollectionDialog(true);
-        return;
-      }
+  const getFilteredChartData = (chartData, updatedTotalPrice) => {
+    const filteredChartData = {
+      ...chartData,
+      allXYValues: filterUniqueDataPoints(chartData?.allXYValues),
+      datasets: chartData?.datasets.map((dataset) => ({
+        ...dataset,
+        data: dataset?.data.map((dataEntry) => ({
+          ...dataEntry,
+          xys: filterUniqueDataPoints(dataEntry?.xys),
+        })),
+      })),
+    };
+    return {
+      ...filteredChartData,
+      allXYValues: [
+        ...filteredChartData.allXYValues,
+        {
+          label: `Update - ${new Date().toISOString()}`,
+          x: new Date().toISOString(),
+          y: updatedTotalPrice,
+        },
+      ],
+    };
+  };
 
-      // const updatedCards = getUpdatedCards(selectedCollection, card, operation);
-      let updatedCards;
-      if (operation === 'update') {
-        updatedCards = [...selectedCollection.cards];
-        const cardIndex = updatedCards.findIndex((c) => c.id === card.id);
-        if (cardIndex !== -1) {
-          updatedCards[cardIndex] = {
-            ...updatedCards[cardIndex],
-            ...card, // update card's details from the given card.
-            quantity: updatedCards[cardIndex].quantity, // ensure quantity doesn't change.
-          };
-        }
-      } else {
-        updatedCards = getUpdatedCards(selectedCollection, card, operation);
-      }
-      const allCardPrices = updatedCards.flatMap((card) =>
-        Array(card.quantity).fill(card.card_prices?.[0]?.tcgplayer_price)
-      );
-      const initialPrice = selectedCollection?.totalPrice;
-      const updatedPrice = calculateTotalFromAllCardPrices(allCardPrices);
-      const priceDifference =
-        updatedPrice - (selectedCollection.chartData?.updatedPrice || 0);
-      const newDataSet = {
-        data: [
-          {
-            xy: [
-              {
-                label: `Update Number ${
-                  selectedCollection?.chartData?.datasets?.length + 1 || 1
-                }`,
-                x: moment().format('YYYY-MM-DD HH:mm'),
-                y: updatedPrice,
-              },
-            ],
-            additionalPriceData: {
-              priceChanged: priceDifference !== 0,
-              initialPrice: initialPrice,
-              updatedPrice: updatedPrice,
-              priceDifference: priceDifference,
-              priceChange:
-                Math.round((priceDifference / (initialPrice || 1)) * 100) / 100,
-            },
-          },
-        ],
-      };
-      console.log('XYDATASET-----1:', xyData);
-      const updateInfo = {
-        ...cardInfo,
-        name: selectedCollection?.name,
-        description: selectedCollection?.description,
-        cards: updatedCards,
-        userId: userId,
-        totalCost: updatedPrice,
-        totalPrice: updatedPrice,
-        xys: xyData,
-        quantity: updatedCards.length,
-        totalQuantity: updatedCards.reduce(
-          (acc, card) => acc + card.quantity,
-          0
-        ),
-        chartData: getNewChartData(
-          selectedCollection,
-          updatedPrice,
-          newDataSet
-        ),
-        allCardPrices: allCardPrices,
-        _id: collectionId,
-      };
+  const getUpdatedCollection = async (
+    collectionWithCards, // updated cards
+    cardUpdate, // updated card
+    operation,
+    userId
+  ) => {
+    const collectionId = collectionWithCards?._id || collectionData?._id;
+    if (!collectionId) {
+      console.error('Collection ID is missing.', collectionId);
+      return;
+    }
+
+    if (!userId) {
+      console.error('User ID is missing.', userId);
+      return;
+    }
+    const cardExists = collectionWithCards?.cards?.some(
+      (card) => card?.id === cardUpdate?.id
+    );
 
-      const updatedCollection = { ...selectedCollection, ...updateInfo };
-      console.log(
-        'UPDATED COLLECTION DATA PRIOR TO SERVER UPDATE:',
-        updatedCollection
+    let multipleOfSameCard = [];
+    let cardQuantity = 0;
+    if (cardExists) {
+      multipleOfSameCard = collectionWithCards?.cards?.filter(
+        (card) => card?.id === cardUpdate?.id
       );
-      await updateActiveCollection(updatedCollection);
-      updateCollectionData(updatedCollection, 'selectedCollection');
-      updateCollectionData(updatedCollection, 'allCollections');
-    },
-    [
-      selectedCollection,
-      allCollections,
-      userId,
-      openChooseCollectionDialog,
-      handleCardAddition,
-      handleCardRemoval,
-      updateCollectionData,
-      setOpenChooseCollectionDialog,
-    ]
-  );
+      cardQuantity = multipleOfSameCard[0]?.quantity;
+    }
+    console.log('MULTIPLE OF SAME CARD:', multipleOfSameCard);
+    console.log('CARD QUANTITY:', cardQuantity);
+    console.log('CARD EXISTS:', cardExists);
+
+    let method;
+    if (operation === 'remove' && cardQuantity === 1) {
+      method = 'DELETE';
+    } else if (cardExists) {
+      method = 'PUT';
+    } else {
+      method = 'POST';
+    }
 
-  const updateActiveCollection = useCallback(
-    async (collectionData) => {
-      const isCreatingNew = !collectionData?._id;
-      const endpoint = isCreatingNew
-        ? createApiUrl(`${userId}/collections`)
-        : createApiUrl(`${userId}/collections/${collectionData._id}`);
-      const method = isCreatingNew ? 'POST' : 'PUT';
+    let endpointSuffix;
+    if (operation === 'remove' && cardQuantity === 1) {
+      endpointSuffix = 'removeCards';
+    } else {
+      endpointSuffix = 'updateCards';
+    }
 
-      try {
-        const response = await fetchWrapper(endpoint, method, collectionData);
-        const updatedCollection = handleApiResponse(response, method);
+    const endpoint = createApiUrl(
+      `${userId}/collections/${collectionId}/${endpointSuffix}`
+    );
+    console.log('CARDS BEFORE: ', collectionWithCards);
+    const updatedCards = getUpdatedCards(
+      collectionWithCards,
+      cardUpdate,
+      operation
+      // collectionId
+    );
+    console.log('CARDS AFTER: ', updatedCards);
 
-        if (!isCreatingNew && !updatedCollection) {
-          throw new Error('Failed to update the existing collection');
-        }
-        const newChartData = {
-          ...updatedCollection.chartData,
-          xys: [
-            {
-              label: `Update Number ${
-                updatedCollection?.chartData?.datasets?.length + 1 || 1
-              }`,
-              data: [
-                {
-                  x: moment().format('YYYY-MM-DD HH:mm'),
-                  y: updatedCollection.totalPrice,
-                },
-              ],
-            },
-          ],
-          datasets: [
-            ...(updatedCollection.chartData?.datasets || []),
-            {
-              data: [
-                {
-                  xys: [
-                    {
-                      label: `Update Number ${
-                        updatedCollection?.chartData?.datasets?.length + 1 || 1
-                      }`,
-                      data: [
-                        {
-                          x: moment().format('YYYY-MM-DD HH:mm'),
-                          y: updatedCollection.totalPrice,
-                        },
-                      ],
-                    },
-                  ],
-                  additionalPriceData: {
-                    priceChanged: false,
-                    initialPrice:
-                      updatedCollection.chartData?.updatedPrice || 0,
-                    updatedPrice: updatedCollection.totalPrice,
-                    priceDifference: 0,
-                    priceChange: 0,
-                  },
-                },
-              ],
-            },
-          ],
+    const updatedTotalPrice = calculateCollectionValue(updatedCards);
+    setTotalPrice(updatedTotalPrice);
+
+    // const updatedTotalPrice = updatedCards.reduce(
+    //   (total, card) => total + card.price * card.quantity,
+    //   0
+    // );
+    const updatedTotalQuantity = updatedCards?.reduce(
+      (total, card) => total + card?.quantity,
+      0
+    );
+    const newCollectionPriceHistoryObject =
+      createPriceHistoryObject(updatedTotalPrice);
+
+    let cardsResponse;
+    let cardsPayload;
+    if (operation === 'remove') {
+      const allCardsWithIds = [];
+      for (const card of updatedCards) {
+        // const cardIds = updatedCards.map((card) => card.id);
+        // const cardObjIds = updatedCards.map((card) => card._id);
+        const cardIds = {
+          id: card?.id,
+          _id: card?._id,
         };
-        updatedCollection.chartData = newChartData;
-
-        const convertedData = convertData(newChartData);
-        updatedCollection.xys = convertedData;
-        // setXyData(convertedData.finalDataForChart);
-        xyData.push(convertedData.finalDataForChart);
-        updateCollectionData(updatedCollection, 'selectedCollection');
-        updateCollectionData(updatedCollection, 'allCollections');
-      } catch (error) {
-        console.error(`Failed to update the collection: ${error.message}`);
+
+        allCardsWithIds?.push(cardIds);
       }
-    },
-    [userId, updateCollectionData]
-  );
-  // console.log(
-  //   '<----------$$$$$$$$$CONVERTED DATA FOR CHART$$$$$$$$$---------->',
-  //   xyData
-  // );
-  // useEffect(() => {
-  //   // Check if the prices are updated or new cards are added
-  //   const updatedPricesArray =
-  //     updatedPricesFromCombinedContext?.updatedPrices || [];
-
-  //   if (!Array.isArray(updatedPricesArray)) {
-  //     return; // Exit the useEffect early if not an array
-  //   }
+      const removeCard = allCardsWithIds?.find(
+        (idPair) => idPair?.id === cardUpdate?.id
+      );
+      cardsPayload = { cardIds: removeCard };
+    } else {
+      const allCardsWithIds = [];
+      for (const card of updatedCards) {
+        // const cardIds = updatedCards.map((card) => card.id);
+        // const cardObjIds = updatedCards.map((card) => card._id);
+        const cardIds = {
+          id: card.id,
+          _id: card._id,
+        };
 
-  useEffect(() => {
-    const updatedPricesArray = Object.keys(
-      updatedPricesFromCombinedContext || {}
-    ).map((cardId) => updatedPricesFromCombinedContext[cardId]);
+        allCardsWithIds?.push(cardIds);
+      }
+      const removeCard = allCardsWithIds?.find(
+        (idPair) => idPair?.id === cardUpdate?.id
+      );
+      cardsPayload = { cards: updatedCards, cardIds: removeCard };
+    }
+    console.log('CARDS PAYLOAD:', cardsPayload);
 
-    console.log(
-      '[1][PRICE UPDATE: COMBINED CONTEXT IN COLLECTION][UPDATED PRICES]==========>',
-      updatedPricesArray
+    cardsResponse = await fetchWrapper(endpoint, method, cardsPayload);
+    const { cardMessage } = cardsResponse;
+
+    const updatedChartData = getFilteredChartData(
+      collectionWithCards.chartData,
+      updatedTotalPrice
+    );
+    const chartDataPayload = { chartData: updatedChartData };
+    const chartDataEndpoint = createApiUrl(
+      `${userId}/collections/${collectionId}/updateChartData`
+    );
+    const chartDataResponse = await fetchWrapper(
+      chartDataEndpoint,
+      'PUT',
+      chartDataPayload
     );
 
-    const updatedCardPrices = [];
+    const { chartMessage } = chartDataResponse;
 
-    updatedPricesArray.forEach((card) => {
-      const currentCardPrice = selectedCollection?.cards[card?.id]?.price;
+    const updatedCollection = getUpdatedCollectionData(
+      selectedCollection,
+      updatedTotalPrice,
+      newCollectionPriceHistoryObject,
+      // updatedChartData,
+      updatedTotalQuantity
+      // updatedCards
+    );
 
-      // Check if this is the special tagged card
-      if (card._tag === 'updated') {
-        console.log('Found the special card:', card);
-      }
+    const collectionEndpoint = createApiUrl(
+      `${userId}/collections/${collectionId}`
+    );
+    const collectionResponse = await fetchWrapper(collectionEndpoint, 'PUT', {
+      updatedCollection,
+    });
+
+    const { collectionMessage } = collectionResponse;
+
+    setTotalPrice(calculateCollectionValue(updatedCards));
+    const restructuredCollection = {
+      ...collectionResponse.collectionData,
+      cards: cardsResponse.cards,
+      chartData: chartDataResponse.chartData,
+    };
+
+    console.log('RESTRUCTURED COLLECTION:', restructuredCollection);
+    return {
+      restructuredCollection,
+    };
+  };
+
+  const updateCollectionDetails = async (updatedInfo, userId, collectionId) => {
+    const { name, description } = updatedInfo;
+    if (selectedCollection && collectionId) {
+      const updatedCollection = {
+        ...selectedCollection,
+        name,
+        description,
+      };
+
+      setSelectedCollection(updatedCollection);
+      setAllCollections((prevCollections) =>
+        prevCollections.map((collection) =>
+          collection._id === collectionId ? updatedCollection : collection
+        )
+      );
 
-      if (card?.updatedPrice !== currentCardPrice) {
-        updatedCardPrices.push(card);
-        console.log(
-          '[2][PRICE UPDATE: COMBINED CONTEXT IN COLLECTION][CARD]==========>',
-          card
+      try {
+        // Update the collection in the backend
+        const collectionEndpoint = createApiUrl(
+          `${userId}/collections/${collectionId}`
         );
-        console.log(
-          'CARD FROM SELECTED COLLECTIONS:',
-          selectedCollection.cards[card.id]
+        const collectionResponse = await fetchWrapper(
+          collectionEndpoint,
+          'PUT',
+          {
+            updatedCollection,
+          }
         );
-      } else {
-        console.log('Price has not been updated for card with ID:', card.id);
+
+        const { collectionMessage } = collectionResponse;
+        console.log(collectionMessage);
+
+        // Optionally handle the response here, e.g., update the state with the response data if necessary
+      } catch (error) {
+        console.error('Error updating collection details:', error);
       }
-    });
+    } else {
+      console.error('Selected collection or collection ID is missing.');
+    }
+  };
 
-    if (updatedCardPrices.length > 0) {
-      updatedCardPrices.forEach((card) => {
-        addOrRemoveCard(card, { updated: true }, 'update');
-      });
+  const handleCardOperation = async (
+    card,
+    operation,
+    collection,
+    userId,
+    allCollections
+  ) => {
+    if (!card) {
+      console.error('Card is undefined.', card);
+      return;
     }
-  }, [updatedPricesFromCombinedContext]);
+
+    if (!collection) {
+      console.error(
+        `Collection with ID ${collection._id} not found in allCollections.`
+      );
+      return;
+    }
+
+    const updatedCollection = await getUpdatedCollection(
+      collection,
+      card,
+      operation,
+      userId
+    );
+
+    if (updatedCollection) {
+      console.log('UPDATED COLLECTION:', updatedCollection);
+      // Update the relevant collections in the state/context
+      updateCollectionData(
+        updatedCollection?.restructuredCollection,
+        'allCollections'
+      );
+      if (collection._id === selectedCollection?._id) {
+        updateCollectionData(
+          updatedCollection?.restructuredCollection,
+          'selectedCollection'
+        );
+      }
+      updateCollectionData(
+        updatedCollection?.restructuredCollection,
+        'collectionData'
+      );
+    } else {
+      console.error('Failed to update collection.');
+    }
+
+    return updatedCollection;
+  };
 
   const contextValue = useMemo(
     () => ({
-      // DATA
       allCollections,
       selectedCollection,
       collectionData,
       totalCost,
-
+      totalPrice,
+      totalQuantity: selectedCollection?.totalQuantity || 0,
       allCardPrices: selectedCollection?.allCardPrices || [],
       xys: xyData || [],
       openChooseCollectionDialog,
-      updatedPricesFromCombinedContext,
-      setUpdatedPricesFromCombinedContext: (updatedPrices) => {
-        // This is the function that will be passed to the combined context to update the prices
-        setUpdatedPricesFromCombinedContext(updatedPrices);
-      },
+      calculateCollectionValue,
+      setTotalPrice,
+      setXyData,
+      setUpdatedPricesFromCombinedContext,
       setOpenChooseCollectionDialog,
-      // FUNCTIONS
-      calculateTotalPrice: () => getCardPrice(selectedCollection),
+      getTotalPrice2: () => getCardPrice(selectedCollection),
+      getTotalPrice: () => calculateCollectionValue(selectedCollection),
+      getNewTotalPrice: (values) => calculateCollectionValue(values),
       getTotalCost: () => getTotalCost(selectedCollection),
-      // FUNCTIONS
-      createUserCollection: (collection, name, description) =>
-        createUserCollection(userId, collection, name, description),
-      removeCollection: (collection) => removeCollection(collection),
+      getCardQuantity: (cardId) =>
+        selectedCollection?.cards?.find((c) => c?.id === cardId)?.quantity || 0,
+      createUserCollection,
+      removeCollection,
+      addOneToCollection: (card) =>
+        handleCardOperation(card, 'add', selectedCollection, userId),
+      removeOneFromCollection: (card) =>
+        handleCardOperation(card, 'remove', selectedCollection, userId),
+      updateOneFromCollection: (card) =>
+        handleCardOperation(card, 'update', selectedCollection, userId),
+      updateCollection: (card, operation, collection) =>
+        handleCardOperation(card, operation, collection, userId),
+      getUpdatedCollection,
+      updateCollectionState: updateCollectionData,
+      updateCollectionDetails,
       fetchAllCollectionsForUser: fetchAndSetCollections,
-      setSelectedCollection: updateActiveCollection,
-      setAllCollections: (collections) => setAllCollections(collections),
-      addOneToCollection: (card, cardInfo) =>
-        addOrRemoveCard(card, cardInfo, 'add'),
-      removeOneFromCollection: (card) => addOrRemoveCard(card, null, 'remove'),
+      fetchAllCollections: fetchAndSetCollections,
+      setSelectedCollection,
+      setAllCollections,
     }),
-    [allCollections, selectedCollection, totalCost]
+    [allCollections, selectedCollection, totalCost, totalPrice, xyData]
   );
 
   useEffect(() => {
-    console.log('COLLECTION CONTEXT: ', {
-      contextValue,
+    console.log('CONTEXT STATE:', {
+      totalCost,
+      totalPrice,
+      totalQuantity: selectedCollection?.totalQuantity || 0,
+      selectedCollection,
+      allCollections,
+      collectionData,
+      updatedPricesFromCombinedContext,
+      xyData,
     });
-  }, [contextValue, updatedPricesFromCombinedContext]);
-  // Assuming updatedPrices is passed as a prop or state
+  }, [allCollections, selectedCollection, totalCost, totalPrice, xyData]);
 
   useEffect(() => {
-    if (selectedCollection && totalCost) {
-      // Trigger the cron job whenever the selectedCollection changes
-      triggerCronJob();
+    if (userId) fetchAndSetCollections();
+  }, [userId]);
+
+  useEffect(() => {
+    if (selectedCollection?.cards) {
+      setTotalPrice(calculateCollectionValue(selectedCollection));
+      setTotalCost(getTotalCost(selectedCollection));
     }
-  }, [selectedCollection, triggerCronJob, totalCost]);
+  }, [selectedCollection, setTotalPrice]);
 
   useEffect(() => {
-    console.log('Total Cost has been updated:', totalCost);
-  }, [totalCost]);
+    if (allCollections?.length === 0 || allCollections === undefined) {
+      fetchAndSetCollections();
+    }
+  }, [allCollections, fetchAndSetCollections]);
 
   useEffect(() => {
-    if (userId) fetchAndSetCollections();
-  }, [fetchAndSetCollections, userId]);
+    if (selectedCollection === null || selectedCollection === undefined) {
+      setSelectedCollection(allCollections?.[0]);
+    }
+  }, [userId]);
 
   return (
     <CollectionContext.Provider value={contextValue}>
@@ -760,10 +758,6 @@ export const CollectionProvider = ({ children }) => {
   );
 };
 
-// useCollectionStore.js
-// import { useContext } from 'react';
-// import { CollectionContext } from '../CollectionContext/CollectionContext';
-
 export const useCollectionStore = () => {
   const context = useContext(CollectionContext);
   if (!context) {
diff --git a/src/context/CollectionContext/cardHelpers.jsx b/src/context/CollectionContext/cardHelpers.jsx
new file mode 100644
index 0000000..c1ba28b
--- /dev/null
+++ b/src/context/CollectionContext/cardHelpers.jsx
@@ -0,0 +1,80 @@
+import moment from 'moment';
+import { useCollectionStore } from './CollectionContext';
+
+export const getCollectionId = (selectedCollection, allCollections) => {
+  return selectedCollection?._id || allCollections[0]?._id;
+};
+
+export const calculatePriceDifference = (updatedPrice, selectedCollection) => {
+  return updatedPrice - (selectedCollection.chartData?.updatedPrice || 0);
+};
+
+export const createNewDataSet = (updatedPrice, selectedCollection) => {
+  return {
+    data: [
+      {
+        xys: [
+          {
+            label: `Update Number ${
+              selectedCollection?.chartData?.datasets?.length + 1 || 1
+            }`,
+            data: {
+              x: moment().format('YYYY-MM-DD HH:mm'),
+              y: updatedPrice,
+            },
+          },
+        ],
+        additionalPriceData: {
+          priceChanged:
+            calculatePriceDifference(updatedPrice, selectedCollection) !== 0,
+          initialPrice: selectedCollection?.totalPrice,
+          updatedPrice: updatedPrice,
+          priceDifference: calculatePriceDifference(
+            updatedPrice,
+            selectedCollection
+          ),
+          priceChange:
+            Math.round(
+              (calculatePriceDifference(updatedPrice, selectedCollection) /
+                (selectedCollection?.totalPrice || 1)) *
+                100
+            ) / 100,
+        },
+      },
+    ],
+  };
+};
+
+// export const createUpdateInfo = (
+//   updatedCards,
+//   updatedPrice,
+//   cardInfo,
+//   userId,
+//   selectedCollection,
+//   collectionId,
+//   newDataSet,
+//   xyData
+// ) => {
+//   // const { updateCollectionChartData } = useCollectionStore();
+//   return {
+//     ...cardInfo,
+//     name: selectedCollection?.name,
+//     description: selectedCollection?.description,
+//     cards: updatedCards,
+//     userId: userId,
+//     totalCost: updatedPrice,
+//     totalPrice: updatedPrice,
+//     xys: xyData,
+//     quantity: updatedCards.length,
+//     totalQuantity: updatedCards.reduce((acc, card) => acc + card.quantity, 0),
+//     chartData: updateCollectionChartData(
+//       updatedPrice,
+//       selectedCollection,
+//       newDataSet
+//     ),
+//     allCardPrices: updatedCards.flatMap((card) =>
+//       Array(card.quantity).fill(card.card_prices?.[0]?.tcgplayer_price)
+//     ),
+//     _id: collectionId,
+//   };
+// };
diff --git a/src/context/CollectionContext/collectionUtility.jsx b/src/context/CollectionContext/collectionUtility.jsx
new file mode 100644
index 0000000..75ff649
--- /dev/null
+++ b/src/context/CollectionContext/collectionUtility.jsx
@@ -0,0 +1,937 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+const BASE_API_URL = `${process.env.REACT_APP_SERVER}/api/users`;
+const initialCollectionState = {
+  userId: '', // Assuming this is an ObjectId string
+  name: '', // Initialize as empty string if not provided
+  description: '', // Initialize as empty string if not provided
+  totalCost: '', // Initialize as empty string if not provided
+  totalPrice: 0, // Initialize as 0 if not provided
+  quantity: 0, // Initialize as 0 if not provided
+  totalQuantity: 0, // Initialize as 0 if not provided
+  previousDayTotalPrice: 0, // Initialize as 0 if not provided
+  lastSavedPrice: {
+    num: 0,
+    timestamp: '',
+  }, // Initialize as 0 if not provided
+  latestPrice: {
+    num: 0,
+    timestamp: '',
+  }, // Initialize as 0 if not provided
+  dailyPriceChange: 0, // Initialize as 0 if not provided
+  priceDifference: 0, // Initialize as 0 if not provided
+  priceChange: 0, // Initialize as 0 if not provided
+  allCardPrices: [], // Initialize as empty array if not provided
+  cards: [], // Initialize as empty array if not provided
+  currentChartDataSets2: [], // Initialize as empty array if not provided
+  xys: [], // Use defaultXyData or initialize as empty if not provided
+  chartData: {
+    name: '', // Initialize as empty string if not provided
+    userId: '', // Assuming this is an ObjectId string
+    datasets: [], // Initialize as empty array if not provided
+    xys: [], // Initialize as empty array if not provided
+    allXYValues: [], // Initialize as empty array if not provided
+  },
+};
+/**
+ * Filters out duplicate Y values from an array of datasets.
+ * @param {Array} datasets - An array of dataset objects.
+ * @returns {Array} Filtered datasets.
+ */
+const filterOutDuplicateYValues = (datasets) => {
+  const seenYValues = new Set();
+  return datasets?.filter((data) => {
+    const yValue = data?.y;
+    if (seenYValues.has(yValue)) {
+      return false;
+    }
+    seenYValues.add(yValue);
+    return true;
+  });
+};
+
+/**
+ * Transforms the given chartData into an array of x-y points.
+ * @param {Object} chartData - Chart data object.
+ * @returns {Array} Transformed data.
+ */
+const transformChartData = (chartData) => {
+  const pointsArray = [];
+
+  if (Array.isArray(chartData?.datasets)) {
+    chartData?.datasets?.forEach((dataset) => {
+      dataset.data?.forEach((dataEntry) => {
+        dataEntry.xys?.forEach((xyEntry) => {
+          const { x, y } = xyEntry.data;
+          if (x && y !== undefined) {
+            pointsArray.push({ x, y });
+          }
+        });
+      });
+    });
+  }
+
+  return pointsArray;
+};
+
+/**
+ * Converts the given original data into a Nivo-compatible format.
+ * @param {Object} originalData - Original data object.
+ * @returns {Object} Converted data.
+ */
+const convertData = (originalData) => {
+  const finalDataForChart = [];
+  const { datasets } = originalData;
+
+  if (Array.isArray(datasets) && datasets.length > 0) {
+    datasets.forEach((dataset, index) => {
+      if (Array.isArray(dataset.data) && dataset.data.length > 0) {
+        dataset.data.forEach((dataEntry) => {
+          dataEntry.xys?.forEach((xyEntry) => {
+            const { label, data } = xyEntry;
+            finalDataForChart[label] = finalDataForChart[label] || [];
+
+            data.forEach(({ x, y }) => {
+              if (x && y !== undefined) {
+                finalDataForChart[label].push({ x, y });
+              }
+            });
+          });
+        });
+      }
+    });
+  }
+
+  const nivoData = Object.keys(finalDataForChart).map((label) => ({
+    id: label,
+    data: finalDataForChart[label],
+  }));
+
+  return {
+    ...originalData,
+    finalDataForChart: nivoData,
+  };
+};
+
+/**
+ * Checks if the given object is empty.
+ * @param {Object} obj - Object to check.
+ * @returns {Boolean} True if the object is empty, false otherwise.
+ */
+const isEmpty = (obj) => {
+  return (
+    [Object, Array].includes((obj || {}).constructor) &&
+    !Object.entries(obj || {}).length
+  );
+};
+
+/**
+ * Validates the given data based on its type and emptiness.
+ * @param {any} data - Data to validate.
+ * @param {String} eventName - Event that triggered the function.
+ * @param {String} functionName - Name of the function.
+ * @returns {Boolean} True if the data is valid, false otherwise.
+ */
+const validateData = (data, eventName, functionName) => {
+  if (typeof data === 'object') {
+    if (isEmpty(data)) {
+      console.error(
+        `The data passed to ${functionName} from ${eventName} is empty.`
+      );
+      return false;
+    }
+    return true;
+  }
+  console.error(
+    `The data passed to ${functionName} from ${eventName} is not an object.`
+  );
+  return false;
+};
+
+/**
+ * Handles the addition of a new card to the collection.
+ * @param {Array} currentCards - Current array of cards.
+ * @param {Object} cardToAdd - Card object to add.
+ * @returns {Array} Updated array of cards.
+ */
+const handleCardAddition = (currentCards, cardToAdd) => {
+  // Initialize currentCards to an empty array if it's not defined
+  currentCards = currentCards || [];
+
+  console.log('CURRENT CARDS:', currentCards);
+  console.log('CARD TO ADD:', cardToAdd);
+  const cardToAddId =
+    typeof cardToAdd.id === 'number' ? String(cardToAdd.id) : cardToAdd.id;
+  const matchingCard = currentCards.find((c) => c.id === cardToAddId);
+
+  if (matchingCard) {
+    matchingCard.quantity++;
+    return [...currentCards];
+  }
+
+  return [...currentCards, { ...cardToAdd, id: cardToAddId, quantity: 1 }];
+};
+
+/**
+ * Handles the removal of a card from the collection.
+ * @param {Array} currentCards - Current array of cards.
+ * @param {Object} cardToRemove - Card object to remove.
+ * @returns {Array} Updated array of cards.
+ */
+const handleCardRemoval = (currentCards, cardToRemove) => {
+  // Initialize currentCards to an empty array if it's not defined
+  currentCards = currentCards || [];
+
+  console.log('CURRENT CARDS:', currentCards);
+  console.log('CARD TO REMOVE:', cardToRemove);
+
+  const cardToRemoveId =
+    typeof cardToRemove.id === 'number'
+      ? String(cardToRemove.id)
+      : cardToRemove.id;
+
+  // Find the card to remove in the current cards array
+  const cardIndex = currentCards.findIndex((c) => c.id === cardToRemoveId);
+
+  if (cardIndex === -1) {
+    console.error('Card not found in the collection.');
+    return [...currentCards];
+  }
+
+  const matchingCard = currentCards[cardIndex];
+
+  // If the card has a quantity greater than 1, decrement it
+  if (matchingCard.quantity > 1) {
+    matchingCard.quantity--;
+    return [...currentCards];
+  } else {
+    // Remove the card from the collection if quantity is 1 or less
+    return currentCards.filter((card) => card.id !== cardToRemoveId);
+  }
+};
+
+/**
+ * Filters unique XY values with Y not equal to 0.
+ * @param {Array} allXYValues - Array of XY value objects.
+ * @returns {Array} Filtered array of XY value objects.
+ */
+const getUniqueFilteredXYValues = (allXYValues) => {
+  // Check if the input is an array and is not null/undefined
+  if (!Array.isArray(allXYValues)) {
+    // You can throw an error, return an empty array, or handle it as needed
+    console.error('Invalid input: allXYValues should be an array');
+    return [];
+  }
+
+  const uniqueXValues = new Set();
+  return allXYValues
+    .filter((entry) => {
+      // Check if entry is an object and has property y with a number value
+      return (
+        entry &&
+        typeof entry === 'object' &&
+        typeof entry.y === 'number' &&
+        entry.y !== 0
+      );
+    })
+    .filter((entry) => {
+      // Check if entry has property x with a valid value (not null/undefined)
+      const hasValidX =
+        entry && 'x' in entry && entry.x !== null && entry.x !== undefined;
+      if (hasValidX && !uniqueXValues.has(entry.x)) {
+        uniqueXValues.add(entry.x);
+        return true;
+      }
+      return false;
+    });
+};
+
+// Example usage:
+// console.log(getUniqueFilteredXYValues(null)); // Should return []
+// console.log(getUniqueFilteredXYValues(undefined)); // Should return []
+// console.log(getUniqueFilteredXYValues([{ x: 1, y: 0 }, { x: 2, y: 3 }])); // Should return [{ x: 2, y: 3 }]
+
+/**
+ * Calculates the total price from an array of card prices.
+ * @param {Array} allCardPrices - Array of card prices.
+ * @returns {Number} Total price.
+ */
+const calculateTotalFromAllCardPrices = (allCardPrices) => {
+  if (!Array.isArray(allCardPrices)) return 0;
+  return allCardPrices.reduce(
+    (total, price) => total + ensureNumber(price, 0),
+    0
+  );
+};
+
+/**
+ * Ensures a value is a number, providing a default if not.
+ * @param {any} value - Value to check.
+ * @param {Number} defaultValue - Default value if check fails.
+ * @returns {Number} Ensured number.
+ */
+const ensureNumber = (value, defaultValue = 0) => {
+  const num = parseFloat(value);
+  return isNaN(num) ? defaultValue : num;
+};
+
+/**
+ * Finds the index of a collection by its ID.
+ * @param {Array} collections - Array of collections.
+ * @param {String} id - ID of the collection to find.
+ * @returns {Number} Index of the collection, or -1 if not found.
+ */
+const findCollectionIndex = (collections, id) =>
+  collections?.findIndex((collection) => collection?._id === id) ?? -1;
+
+/**
+ * Creates a full API URL from a given path.
+ * @param {String} path - API path.
+ * @returns {String} Full API URL.
+ */
+const createApiUrl = (path) => `${BASE_API_URL}/${path}`;
+
+// To prevent making the same type of request within 10 seconds
+const lastRequestTime = {
+  POST: 0,
+  PUT: 0,
+  DELETE: 0,
+  GET: 0,
+  // Add other methods if needed
+};
+
+/**
+ * Checks whether a new request can be made based on the last request's timestamp.
+ * @param {String} method - The HTTP method for the request.
+ */
+const canMakeRequest = (method) => {
+  const currentTime = Date.now();
+  // The comment mentioned 10 seconds, but the code was checking for 5 seconds. Adjust as necessary.
+  return currentTime - lastRequestTime[method] > 1000; // Now it's 10 seconds
+};
+
+/**
+ * Updates the last request timestamp for a given method.
+ * @param {String} method - The HTTP method for the request.
+ */
+const updateLastRequestTime = (method) => {
+  lastRequestTime[method] = Date.now();
+};
+/**
+ * Wraps fetch API calls and implements a rate limit for each HTTP method type.
+ * @param {String} url - The API URL to make the request to.
+ * @param {String} method - The HTTP method for the request.
+ * @param {Object} [body=null] - The request payload if needed.
+ * @returns {Promise<Object>} - The response from the API call.
+ */
+const fetchWrapper = async (url, method, body = null) => {
+  const options = {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    ...(body && { body: JSON.stringify(body) }),
+  };
+
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      // We handle non-ok responses immediately
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+    updateLastRequestTime(method); // Assumed to be a function that updates some kind of state
+    return await response.json(); // Directly returning the JSON response
+  } catch (error) {
+    console.error(`Fetch failed: ${error}`);
+    console.trace();
+    throw error; // Re-throwing the error for upstream catch blocks to handle
+  }
+};
+
+const handleApiResponse = async (response) => {
+  if (!(response instanceof Response)) {
+    const error = new Error(
+      "The response object is not an instance of the Fetch API's Response class."
+    );
+    console.error(error.message, response);
+    throw error;
+  }
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  try {
+    const jsonResponse = await response.json();
+    return jsonResponse;
+  } catch (e) {
+    const error = new Error(`Failed to parse JSON from the response: ${e}`);
+    console.error(error.message);
+    throw error;
+  }
+};
+
+const getTotalCost = (selectedCollection) => {
+  if (!selectedCollection || !Array.isArray(selectedCollection.cards)) return 0;
+
+  return selectedCollection.cards.reduce((total, card) => {
+    const cardPrice =
+      (card.card_prices && card.card_prices[0]?.tcgplayer_price) || 0;
+    return total + cardPrice * card.quantity;
+  }, 0);
+};
+// const getCardQuantity = (cardId) => {
+//   const card = selectedCollection?.cards?.find((c) => c.id === cardId);
+//   return card?.quantity || 0;
+// }
+
+const defaultContextValue = {
+  allCollections: [],
+  allCardPrices: [],
+  xy: [],
+  selectedCollection: {},
+  collectionData: initialCollectionState,
+  officialCollectionDatasets: [],
+  totalCost: 0,
+  openChooseCollectionDialog: false,
+  updatedPricesFromCombinedContext: {},
+  setUpdatedPricesFromCombinedContext: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setOpenChooseCollectionDialog: () => {},
+  updateCollection: () => {},
+  calculateTotalPrice: () => {},
+  getTotalCost: () => {},
+  getNewTotalPrice: () => {},
+  getTotalPrice: () => {},
+  createUserCollection: () => {},
+  removeCollection: () => {},
+  fetchAllCollectionsForUser: () => {},
+  setSelectedCollection: () => {},
+  setAllCollections: () => {},
+  addOneToCollection: () => {},
+  removeOneFromCollection: () => {},
+};
+
+const logError = (source, action, error) => {
+  console.error(
+    `[${source.toUpperCase()}] Failed to ${action}: ${error.message}`
+  );
+};
+
+// Reusable validation and error logging
+const validateUserIdAndData = (userId, data, actionDescription) => {
+  if (!userId) {
+    logError(
+      'validateUserIdAndData',
+      actionDescription,
+      new Error('User ID is undefined.')
+    );
+    return false;
+  }
+  if (!validateData(data, actionDescription, actionDescription)) {
+    logError(
+      'validateUserIdAndData',
+      actionDescription,
+      new Error('Validation failed for collection data.')
+    );
+    return false;
+  }
+  return true;
+};
+
+const determineHttpMethod = (isCreatingNew, endpoint) => {
+  return isCreatingNew ? 'POST' : 'PUT';
+};
+
+// Abstracted payload creation to reduce repetition
+// const createPayload = (info, data, defaultXyData) => ({
+//   userId: info.userId || data.userId, // Assuming this is an ObjectId string
+//   name: info.name || data.name || '',
+//   description: info.description || data.description || '',
+//   totalCost: info.totalCost || data.totalCost || '',
+//   totalPrice: info.totalPrice || data.totalPrice || 0,
+//   quantity: info.quantity || data.quantity || 0,
+//   totalQuantity: info.totalQuantity || data.totalQuantity || 0,
+//   previousDayTotalPrice:
+//     info.previousDayTotalPrice || data.previousDayTotalPrice || 0,
+//   dailyPriceChange: info.dailyPriceChange || data.dailyPriceChange || '',
+//   priceDifference: info.priceDifference || data.priceDifference || 0,
+//   priceChange: info.priceChange || data.priceChange || 0,
+//   collectionPriceHistory: Array.isArray(info.collectionPriceHistory)
+//     ? info.collectionPriceHistory
+//     : Array.isArray(data.collectionPriceHistory)
+//     ? data.collectionPriceHistory
+//     : [],
+//   allCardPrices: Array.isArray(info.allCardPrices)
+//     ? info.allCardPrices
+//     : Array.isArray(data.allCardPrices)
+//     ? data.allCardPrices
+//     : [],
+//   cards: Array.isArray(info.cards)
+//     ? info.cards
+//     : Array.isArray(data.cards)
+//     ? data.cards
+//     : [],
+//   currentChartDatasets: Array.isArray(info.currentChartDatasets)
+//     ? info.currentChartDatasets
+//     : Array.isArray(data.currentChartDatasets)
+//     ? data.currentChartDatasets
+//     : [],
+//   xys:
+//     defaultXyData ||
+//     (Array.isArray(info.xys)
+//       ? info.xys
+//       : Array.isArray(data.xys)
+//       ? data.xys
+//       : []),
+//   chartData: {
+//     name:
+//       info.chartData?.name ||
+//       data.chartData?.name ||
+//       `Chart for ${info.name || data.name || 'Collection'}`,
+//     userId:
+//       info.chartData?.userId ||
+//       data.chartData?.userId ||
+//       info.userId ||
+//       data.userId,
+//     datasets: Array.isArray(info.chartData?.datasets)
+//       ? info.chartData.datasets
+//       : Array.isArray(data.chartData?.datasets)
+//       ? data.chartData.datasets
+//       : [],
+//     allXYValues: Array.isArray(info.chartData?.allXYValues)
+//       ? info.chartData.allXYValues
+//       : Array.isArray(data.chartData?.allXYValues)
+//       ? data.chartData.allXYValues
+//       : [],
+//     xys: Array.isArray(info.chartData?.xys)
+//       ? info.chartData.xys
+//       : Array.isArray(data.chartData?.xys)
+//       ? data.chartData.xys
+//       : [],
+//   },
+// });
+
+const createPayload = (info) => {
+  // Merge the 'info' and 'data' objects
+  // const mergedData = { ...data, ...info };
+
+  // console.log('MERGED DATA:', mergedData);
+  console.log('INFO:', info);
+  // console.log('DATA:', data);
+  return {
+    ...info,
+    userId: info.userId,
+    name: info.name,
+    description: info.description,
+    totalCost: info.totalCost || '',
+    totalPrice: info.totalPrice || 0,
+    quantity: info.quantity || 0,
+    totalQuantity: info.totalQuantity || 0,
+    previousDayTotalPrice: info.previousDayTotalPrice || 0,
+    dailyPriceChange: info.dailyPriceChange || 0,
+    priceDifference: info.priceDifference || 0,
+    priceChange: info.priceChange || 0,
+    collectionPriceHistory: info.collectionPriceHistory || [],
+    allCardPrices: info.allCardPrices || [],
+    cards: info.cards || [],
+    currentChartDataSets: info.currentChartDataSets || [],
+    xys: info.xys || [],
+    chartData: {
+      name: info.chartData?.name || `Chart for ${info.name || 'Collection'}`,
+      userId: info.chartData?.userId || info.userId,
+      datasets: info.chartData?.datasets || [],
+      allXYValues: info.chartData?.allXYValues || [],
+      xys: info.chartData?.xys || [],
+    },
+  };
+};
+
+const removeDuplicateCollections = (collections) => {
+  const uniqueCollections = {};
+  collections?.forEach((collection) => {
+    uniqueCollections[collection._id] = collection;
+  });
+  return Object.values(uniqueCollections);
+};
+
+const constructPayloadWithDifferences = (
+  existingData,
+  newData,
+  debug = false
+) => {
+  const payload = {};
+  let logContent = '[constructPayloadWithDifferences] Differences in data:\n';
+  let typeMismatchContent = ''; // String to store type mismatch messages
+  let nonMatchingKeys = []; // List to store non-matching keys
+
+  Object.keys(newData).forEach((key) => {
+    const isTypeDifferent = typeof newData[key] !== typeof existingData[key];
+    const isValueDifferent = newData[key] !== existingData[key];
+
+    if (isValueDifferent || isTypeDifferent) {
+      payload[key] = newData[key];
+      nonMatchingKeys.push(key); // Add the non-matching key to the list
+
+      if (debug) {
+        if (isTypeDifferent) {
+          typeMismatchContent += `  - Field "${key}": Expected Type: ${typeof existingData[
+            key
+          ]}, Received Type: ${typeof newData[key]}\n`;
+        }
+        if (isValueDifferent) {
+          logContent += `  - Field "${key}": Old Value: ${JSON.stringify(
+            existingData[key]
+          )}, New Value: ${JSON.stringify(newData[key])}\n`;
+        }
+      }
+    }
+  });
+
+  if (debug) {
+    console.log('1. Constructing payload with differences:', logContent);
+    if (typeMismatchContent) {
+      console.log('2. Type mismatches found:', typeMismatchContent);
+    }
+  }
+  return { payload, nonMatchingKeys, typeMismatchContent }; // Return both the payload, the list of non-matching keys, and type mismatch messages
+};
+
+// function getCurrentChartDataSets(chartData) {
+//   if (!chartData || !chartData?.allXYValues) {
+//     console.error('Invalid or missing chart data');
+//     return [];
+//   }
+
+//   const currentChartDataSets = [];
+
+//   // Iterate over each dataset
+//   chartData.allXYValues.forEach((val) => {
+//     // Check if dataset has 'data' array
+//     if (dataset.data && dataset.data.length > 0) {
+//       dataset.data.forEach((dataEntry) => {
+//         // Check if dataEntry has 'xys' array
+//         if (dataEntry.xys && dataEntry.xys.length > 0) {
+//           // Add both 'data' and 'label' from each 'xys' entry
+//           currentChartDataSets.push(
+//             ...dataEntry.xys.map((xy) => ({
+//               ...xy.data, // Spread the 'data' object
+//               label: xy.label, // Include the 'label'
+//             }))
+//           );
+//         }
+//       });
+//     }
+//   });
+
+//   return currentChartDataSets;
+// }
+
+// function getCurrentChartDataSets(chartData) {
+//   if (!chartData || !chartData.datasets) {
+//     console.error('Invalid or missing chart data');
+//     return [];
+//   }
+
+//   const currentChartDataSets = [];
+
+//   // Iterate over each dataset
+//   chartData.datasets.forEach((dataset) => {
+//     // Check if dataset has 'data' array
+//     if (dataset.data && dataset.data.length > 0) {
+//       dataset.data.forEach((dataEntry) => {
+//         // Check if dataEntry has 'xys' array
+//         if (dataEntry.xys && dataEntry.xys.length > 0) {
+//           // Add both 'data' and 'label' from each 'xys' entry
+//           currentChartDataSets.push(
+//             ...dataEntry.xys.map((xy) => ({
+//               ...xy.data, // Spread the 'data' object
+//               label: xy.label, // Include the 'label'
+//             }))
+//           );
+//         }
+//       });
+//     }
+//   });
+
+//   return currentChartDataSets;
+// }
+
+const getAllCardPrices = (cards) =>
+  cards.flatMap((card) => Array(card.quantity).fill(card.price));
+
+function filterUniqueDataPoints(dataArray) {
+  const uniqueRecords = new Map();
+
+  dataArray?.forEach((item) => {
+    const key = `${item?.label}-${item?.x}-${item?.y}`;
+    if (!uniqueRecords.has(key)) {
+      uniqueRecords.set(key, item);
+    }
+  });
+
+  return Array.from(uniqueRecords.values());
+}
+
+function filterCollectionData(collection) {
+  if (!collection) return null;
+
+  if (!collection?.chartData) {
+    console.warn('Collection data is missing chart data.');
+    return collection;
+  }
+  collection.chartData.allXYValues = filterUniqueDataPoints(
+    collection?.chartData?.allXYValues
+  );
+  collection.currentChartDataSets = filterUniqueDataPoints(
+    collection?.currentChartDataSets
+  );
+  collection.currentChartDataSets2 = filterUniqueDataPoints(
+    collection?.currentChartDataSets2
+  );
+
+  collection?.chartData?.datasets.forEach((dataset) => {
+    dataset?.data?.forEach((dataEntry) => {
+      dataEntry.xys = filterUniqueDataPoints(dataEntry?.xys);
+    });
+  });
+
+  // Apply the filter function to 'xys' in 'chartData'
+  collection.chartData.xys = filterUniqueDataPoints(collection.chartData.xys);
+
+  // If the 'cards' array contains structures with 'label', 'x', and 'y' properties
+  collection.cards.forEach((card) => {
+    if (card.chart_datasets) {
+      card.chart_datasets = filterUniqueDataPoints(card.chart_datasets);
+    }
+  });
+
+  return collection;
+}
+
+const calculateCollectionValue = (cards) => {
+  if (
+    !cards?.cards &&
+    !Array.isArray(cards) &&
+    !cards?.name &&
+    !cards?.restructuredCollection
+  ) {
+    console.warn('Invalid or missing collection', cards);
+    return 0;
+  }
+
+  if (cards?.tag === 'new') {
+    return 0;
+  }
+  if (cards?.restructuredCollection) {
+    return cards?.restructuredCollection?.cards.reduce((totalValue, card) => {
+      const cardPrice = card?.price || 0;
+      const cardQuantity = card?.quantity || 0;
+      return totalValue + cardPrice * cardQuantity;
+    }, 0);
+  }
+  if (cards?.cards && Array.isArray(cards?.cards)) {
+    return cards?.cards.reduce((totalValue, card) => {
+      const cardPrice = card?.price || 0;
+      const cardQuantity = card?.quantity || 0;
+      return totalValue + cardPrice * cardQuantity;
+    }, 0);
+  }
+
+  return cards.reduce((totalValue, card) => {
+    const cardPrice = card.price || 0;
+    const cardQuantity = card.quantity || 0;
+    return totalValue + cardPrice * cardQuantity;
+  }, 0);
+};
+
+// const getPriceChange = (collectionPriceHistory) => {
+//   if (
+//     !Array.isArray(collectionPriceHistory) ||
+//     collectionPriceHistory.length === 0
+//   ) {
+//     console.warn('Invalid or empty price history', collectionPriceHistory);
+//     return 'n/a';
+//   }
+
+//   const mostRecentPrice =
+//     collectionPriceHistory[collectionPriceHistory.length - 1]?.num;
+//   const currentDate = new Date();
+
+//   // Get the first price from the last 24 hours
+//   const firstPriceFromLastDay = collectionPriceHistory
+//     .slice()
+//     .reverse()
+//     .find((priceHistory) => {
+//       const historyDate = new Date(priceHistory.timestamp);
+//       return currentDate - historyDate <= 24 * 60 * 60 * 1000; // less than 24 hours
+//     })?.num;
+
+//   if (mostRecentPrice && firstPriceFromLastDay) {
+//     const priceChange =
+//       ((mostRecentPrice - firstPriceFromLastDay) / firstPriceFromLastDay) * 100;
+//     console.log(
+//       `Price change over the last 24 hours is: ${priceChange.toFixed(2)}%`
+//     );
+//     return priceChange.toFixed(2);
+//   } else {
+//     console.error('Could not calculate price change due to missing data');
+//     return null;
+//   }
+// };
+
+function getPriceChange(currentChartDataSets2) {
+  if (
+    !Array.isArray(currentChartDataSets2) ||
+    currentChartDataSets2.length === 0
+  ) {
+    console.warn('Invalid or empty chart data sets provided');
+    return [];
+  }
+
+  const sortedData = currentChartDataSets2
+    .filter((dataPoint) => dataPoint && dataPoint.x && dataPoint.y != null) // Filter out invalid data points
+    .sort((a, b) => new Date(a.x) - new Date(b.x));
+
+  if (sortedData.length === 0) {
+    console.error('No valid chart data points after filtering');
+    return [];
+  }
+
+  const latestDataPoint = sortedData[sortedData.length - 1];
+  const latestTime = new Date(latestDataPoint.x).getTime();
+  const twentyFourHoursAgo = latestTime - 24 * 60 * 60 * 1000;
+
+  let closestIndex = -1;
+  let closestTimeDifference = Number.MAX_SAFE_INTEGER;
+
+  for (let i = 0; i < sortedData.length - 1; i++) {
+    const time = new Date(sortedData[i].x).getTime();
+    const timeDifference = Math.abs(time - twentyFourHoursAgo);
+
+    if (timeDifference < closestTimeDifference) {
+      closestTimeDifference = timeDifference;
+      closestIndex = i;
+    }
+  }
+
+  if (closestIndex !== -1) {
+    const pastPrice = sortedData[closestIndex].y;
+    const priceChange = latestDataPoint.y - pastPrice;
+    const percentageChange = ((priceChange / pastPrice) * 100).toFixed(2);
+
+    return [
+      {
+        startDate: sortedData[closestIndex].x,
+        lowPoint: pastPrice.toFixed(2),
+        highPoint: latestDataPoint?.y?.toFixed(2),
+        endDate: latestDataPoint?.x,
+        priceChange: priceChange.toFixed(2),
+        percentageChange: `${percentageChange}%`,
+        priceIncreased: priceChange > 0,
+      },
+    ];
+  }
+
+  return [];
+}
+
+const getUpdatedChartData = (collection, newPrice) => {
+  const newXYValue = {
+    label: `Update - ${new Date().toISOString()}`,
+    x: new Date().toISOString(),
+    y: newPrice,
+  };
+  console.log('Updating chart data with:', collection?.chartData?.allXYValues);
+  const allXYValues = collection?.chartData?.allXYValues || [];
+  console.log('ALL XY VALUES:', allXYValues);
+  return {
+    ...collection,
+    chartData: {
+      ...collection?.chartData,
+      allXYValues: [...(collection?.chartData?.allXYValues ?? []), newXYValue],
+    },
+    totalPrice: newPrice,
+  };
+};
+
+const mergeCards = (existingCards, updatedCards) => {
+  const updatedCardMap = new Map(updatedCards.map((card) => [card.id, card]));
+  return existingCards.map((card) => {
+    if (updatedCardMap.has(card.id)) {
+      return {
+        ...card,
+        ...updatedCardMap.get(card.id),
+        price: updatedCardMap.get(card.id).price || card.price,
+        quantity: updatedCardMap.get(card.id).quantity || card.quantity,
+      };
+    }
+    return card;
+  });
+};
+
+const updateCardInCollection = (cards, cardToUpdate) => {
+  // Validate that cards is an array
+  if (!Array.isArray(cards)) {
+    throw new TypeError('The first argument must be an array of cards.');
+  }
+
+  // Validate that cardToUpdate is an object
+  if (typeof cardToUpdate !== 'object' || cardToUpdate === null) {
+    throw new TypeError('The card to update must be an object.');
+  }
+
+  // Validate that cardToUpdate has an id property
+  if (!('id' in cardToUpdate)) {
+    throw new Error('The card to update must have an "id" property.');
+  }
+
+  try {
+    // Attempt to update the card within the collection
+    const updatedCards = cards.map(
+      (card) =>
+        card.id === cardToUpdate.id ? { ...card, ...cardToUpdate } : card // Update the card if the id matches
+    );
+    console.log('3. Updated cards in collection:', updatedCards);
+    return updatedCards;
+  } catch (error) {
+    console.error('3. Failed to update card in collection:', error);
+    throw error;
+  }
+};
+
+const getCardPrice = (collection) =>
+  parseFloat(collection?.cards?.card_prices?.[0]?.tcgplayer_price || 0);
+
+module.exports = {
+  filterOutDuplicateYValues,
+  transformChartData,
+  convertData,
+  isEmpty,
+  validateData,
+  handleCardAddition,
+  handleCardRemoval,
+  getUniqueFilteredXYValues,
+  calculateTotalFromAllCardPrices,
+  ensureNumber,
+  findCollectionIndex,
+  createApiUrl,
+  BASE_API_URL,
+  handleApiResponse,
+  fetchWrapper,
+  getTotalCost,
+  getCardPrice,
+  removeDuplicateCollections,
+  initialCollectionState,
+  defaultContextValue,
+  validateUserIdAndData,
+  determineHttpMethod,
+  createPayload,
+  logError,
+  constructPayloadWithDifferences,
+  // getCurrentChartDataSets,
+  getPriceChange,
+  getUpdatedChartData,
+  mergeCards,
+  updateCardInCollection,
+  canMakeRequest,
+  updateLastRequestTime,
+  calculateCollectionValue,
+};
diff --git a/src/context/CollectionContext/exampleImport.js b/src/context/CollectionContext/exampleImport.js
deleted file mode 100644
index 7029c64..0000000
--- a/src/context/CollectionContext/exampleImport.js
+++ /dev/null
@@ -1,112 +0,0 @@
-// Initial collection state
-export const initialCollectionState = {
-  _id: '',
-  cards: [],
-  quantity: 0,
-  totalPrice: 0,
-};
-
-// Fetch wrapper function
-export const fetchWrapper = async (url, method, body = null) => {
-  const options = {
-    method,
-    headers: { 'Content-Type': 'application/json' },
-    ...(body && { body: JSON.stringify(body) }),
-  };
-  const response = await fetch(url, options);
-  // console.log('RESPONSE:', response);
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.json();
-};
-
-// Remove duplicate collections
-export const removeDuplicateCollections = (collections) => {
-  const uniqueCollections = {};
-  collections?.forEach((collection) => {
-    uniqueCollections[collection._id] = collection;
-  });
-  return Object.values(uniqueCollections);
-};
-
-// Calculate and update total price
-export const calculateAndUpdateTotalPrice = (collection) => {
-  if (!collection || !collection.cards) return 0;
-  return collection.cards.reduce(
-    (total, card) => total + card.price * card.quantity,
-    0
-  );
-};
-
-// Format card data
-export const formatCardData = (card) => ({
-  id: card.id,
-  ...Object.fromEntries(
-    [
-      'name',
-      'type',
-      'frameType',
-      'description',
-      'card_images',
-      'archetype',
-      'atk',
-      'def',
-      'level',
-      'race',
-      'attribute',
-      'quantity',
-    ].map((key) => [key, card[key] || null])
-  ),
-});
-
-// Get card quantity from a collection
-export const getCardQuantity = (collectionId, allCollections) => {
-  const collection = allCollections?.find((item) => item._id === collectionId);
-  if (!collection) return 0;
-  return collection.cards.reduce((acc, card) => acc + card.quantity, 0);
-};
-
-// Calculate total cost of the selected collection
-// export const getTotalCost = (selectedCollection) => {
-//   if (!selectedCollection?.cards) return 0;
-//   return selectedCollection.cards.reduce((total, card) => {
-//     const price = card.card_prices?.[0]?.tcgplayer_price;
-//     return price ? total + parseFloat(price) : total;
-//   }, 0);
-// };
-export const getTotalCost = (selectedCollection) => {
-  if (!selectedCollection || !Array.isArray(selectedCollection.cards)) return 0;
-
-  return selectedCollection.cards.reduce((total, card) => {
-    const cardPrice =
-      (card.card_prices && card.card_prices[0]?.tcgplayer_price) || 0;
-    return total + cardPrice * card.quantity;
-  }, 0);
-};
-
-export const getCardPrice = (collection) =>
-  console.log('CARD:', collection) ||
-  parseFloat(collection?.cards?.card_prices?.[0]?.tcgplayer_price || 0);
-
-// Function to calculate total price of a collection
-export const calculateTotalPrice = (collection) => {
-  // Assuming collection is an object where each key-value pair is cardId-price
-  return Object.allCardPrices(collection).reduce;
-};
-// const getCollectionQuantity = useCallback(() => {
-//   return (
-//     selectedCollection?.cards?.reduce(
-//       (acc, card) => acc + card.quantity,
-//       0
-//     ) || 0
-//   );
-// }, [selectedCollection]);
-
-// getCardPrice(selectedCollection);
-// console.log(
-//   'SELECTED COLLECTION CARD PRICE:',
-//   getCardPrice(
-//     selectedCollection?.cards?.find((card) => card.id === collectionData.id)
-//   )
-// );
diff --git a/src/context/CollectionContext/index.js b/src/context/CollectionContext/index.js
deleted file mode 100644
index b622760..0000000
--- a/src/context/CollectionContext/index.js
+++ /dev/null
@@ -1,453 +0,0 @@
-// import React, {
-//   createContext,
-//   useState,
-//   useEffect,
-//   useCallback,
-//   useContext,
-//   useMemo,
-// } from 'react';
-// import { useCookies } from 'react-cookie';
-// import { fetchWrapper, removeDuplicateCollections } from '../Helpers';
-// import {
-//   initialCollectionState,
-//   useUserId,
-//   useFetchAndSetCollections,
-//   useAddOrRemoveCard,
-//   useMakeContextValue,
-//   calculateAndUpdateTotalPrice,
-// } from './SomeHelper';
-
-// export const CollectionContext = createContext(undefined);
-
-// // Custom Hook to manage a collection
-// const useCollection = (initialCollection = {}) => {
-//   const [collection, setCollection] = useState(initialCollection);
-//   const updateCollection = useCallback(
-//     (newData) => setCollection((prev) => ({ ...prev, ...newData })),
-//     []
-//   );
-//   const totalPrice = useMemo(
-//     () => calculateAndUpdateTotalPrice(collection),
-//     [collection]
-//   );
-
-//   return { collection, updateCollection, totalPrice };
-// };
-
-// export const CollectionProvider = ({ children }) => {
-//   // const [cookies] = useCookies(['userCookie']);
-//   // const [collectionData, setCollectionData] = useState(initCollectionState());
-//   // const [allCollections, setAllCollections] = useState([]);
-//   // const [allCardPrices, setAllCardPrices] = useState([]);
-//   // const [prevTotalQuantity, setPrevTotalQuantity] = useState(0);
-//   // const [selectedCollection, setSelectedCollection] = useState(
-//   //   initCollectionState()
-//   // );
-//   // const userId = cookies.userCookie?.id;
-//   const [collectionData, setCollectionData] = useState(initialCollectionState);
-//   const { collection, updateCollection } = useCollection(
-//     initialCollectionState
-//   );
-//   const [allCollections, setAllCollections] = useState([]);
-//   const [allCardPrices, setAllCardPrices] = useState([]);
-//   const [prevTotalQuantity, setPrevTotalQuantity] = useState(0);
-//   const [selectedCollection, setSelectedCollection] = useState(
-//     initialCollectionState
-//   );
-
-//   const userId = useUserId();
-
-//   const fetchAndSetCollections = useFetchAndSetCollections(
-//     userId,
-//     setAllCollections,
-//     setSelectedCollection,
-//     setCollectionData
-//   );
-
-//   const addOrRemoveCard = useAddOrRemoveCard(
-//     userId,
-//     setSelectedCollection,
-//     setAllCollections,
-//     setAllCardPrices,
-//     allCollections,
-//     allCardPrices
-//   );
-
-//   const totalCost = useMemo(
-//     () => calculateTotalPrice(selectedCollection?.cards),
-//     [selectedCollection]
-//   );
-
-//   const contextValue = useMakeContextValue(
-//     collectionData,
-//     allCollections,
-//     allCardPrices,
-//     selectedCollection,
-//     totalCost,
-//     setSelectedCollection,
-//     fetchAndSetCollections,
-//     addOrRemoveCard,
-//     userId
-//   );
-
-//   const { collection: collectionData, updateCollection: updateCollectionData } =
-//     useCollection(initialCollectionData);
-//   const {
-//     collection: selectedCollection,
-//     updateCollection: updateSelectedCollection,
-//   } = useCollection(initialSelectedCollection);
-
-//   const fetchCollectionsForUser = useCallback(async () => {
-//     try {
-//       const url = `${process.env.REACT_APP_SERVER}/api/users/${userId}/collections`;
-//       return await fetchWrapper(url, 'GET');
-//     } catch (error) {
-//       console.error(`Failed to fetch collections for user: ${error.message}`);
-//       return null;
-//     }
-//   }, [userId]);
-
-//   const updateCollectionData = useCallback((newData, updaterFn) => {
-//     updaterFn((prevCollections) => {
-//       const existingIndex = prevCollections
-//         ? prevCollections.findIndex(
-//             (collection) => collection._id === newData._id
-//           )
-//         : -1;
-
-//       // Ensure that prevCollections is an array or initialize it as an empty array
-//       if (!Array.isArray(prevCollections)) {
-//         prevCollections = [];
-//       }
-
-//       console.log('existingIndex:', existingIndex);
-//       console.log('prevCollections:', prevCollections);
-
-//       if (existingIndex === -1) return [...prevCollections, newData];
-//       const updatedCollections = [...prevCollections];
-//       updatedCollections[existingIndex] = newData;
-//       return updatedCollections;
-//     });
-//   }, []);
-
-//   const fetchAndSetCollections = useCallback(async () => {
-//     try {
-//       const userCollections = await fetchCollectionsForUser();
-//       if (userCollections && userCollections.length > 0) {
-//         const uniqueCollections = removeDuplicateCollections(userCollections);
-
-//         // Initialize totalPrice for each collection based on its cards
-//         uniqueCollections.forEach((collection) => {
-//           collection.totalPrice = calculateAndUpdateTotalPrice(collection);
-//         });
-
-//         setAllCollections(uniqueCollections);
-//         setCollectionData(uniqueCollections[0]);
-//         setSelectedCollection(uniqueCollections[0]);
-//       }
-//     } catch (error) {
-//       console.error(`Failed to fetch collections: ${error.message}`);
-//     }
-//   }, [fetchCollectionsForUser]);
-
-//   const formatCardData = (card) => ({
-//     id: card.id,
-//     ...Object.fromEntries(
-//       [
-//         'name',
-//         'type',
-//         'frameType',
-//         'description',
-//         'card_images',
-//         'archetype',
-//         'atk',
-//         'def',
-//         'level',
-//         'race',
-//         'attribute',
-//         'quantity',
-//       ].map((key) => [key, card[key] || null])
-//     ),
-//   });
-
-//   const createUserCollection = async (
-//     userId,
-//     name,
-//     description,
-//     newCollectionInfo
-//   ) => {
-//     try {
-//       const url = `${process.env.REACT_APP_SERVER}/api/users/${userId}/collections/newCollection/${userId}`;
-
-//       const data = await fetchWrapper(url, 'POST', {
-//         name,
-//         description,
-//         userId,
-//         totalPrice: 0,
-//         allCardPrices: [],
-//         cards: [], // Initialize with an empty array of cards
-//       });
-
-//       console.log('NEW COLLECTION DATA:', data.savedCollection);
-//       // Add the new collection to allCollections
-//       setAllCollections((prevCollections) => [...prevCollections, data]);
-
-//       setCollectionData(data);
-//       setSelectedCollection(data);
-//     } catch (error) {
-//       console.error(`Failed to create a new collection: ${error.message}`);
-//     }
-//   };
-
-//   const getCardQuantity = (collectionId) => {
-//     const collection = allCollections?.find(
-//       (item) => item._id === collectionId
-//     );
-//     if (!collection) return 0;
-//     return collection.cards.reduce((acc, card) => acc + card.quantity, 0);
-//   };
-
-//   const addOrRemoveCard = useCallback(
-//     async (card, cardInfo, isAdding) => {
-//       if (
-//         !selectedCollection._id &&
-//         (!allCollections[0] || !allCollections[0]._id)
-//       ) {
-//         console.error('No valid collection to add or remove a card.');
-//         return;
-//       }
-//       const activeCollection = selectedCollection._id
-//         ? selectedCollection
-//         : allCollections[0];
-
-//       // GETS THE PRICE OF THE CARD
-//       let cardPrice = 0;
-
-//       if (
-//         card.card_prices &&
-//         card.card_prices.length > 0 &&
-//         card.card_prices[0].tcgplayer_price
-//       ) {
-//         cardPrice = parseFloat(card.card_prices[0].tcgplayer_price);
-//       }
-
-//       // Create a copy of the current state
-//       const currentCards = [...(activeCollection?.cards || [])];
-//       let currentTotalPrice = activeCollection.totalPrice || 0;
-//       // Find the card index in the current state
-//       const cardIndex = currentCards.findIndex((item) => item.id === card.id);
-//       if (isAdding) {
-//         setAllCardPrices([...allCardPrices, { cardId: card.id, cardPrice }]);
-//         if (cardIndex !== -1) {
-//           currentCards[cardIndex].quantity += 1;
-//           currentCards[cardIndex].price += cardPrice; // Add card price
-//         } else {
-//           currentCards.push({ ...card, quantity: 1, price: cardPrice });
-//         }
-//         currentTotalPrice += cardPrice;
-//       } else {
-//         setAllCardPrices((prevCardValues) =>
-//           prevCardValues.filter((val) => val !== cardPrice)
-//         );
-
-//         if (cardIndex !== -1) {
-//           currentCards[cardIndex].quantity -= 1;
-//           currentCards[cardIndex].price -= cardPrice; // Subtract card price
-//           if (currentCards[cardIndex].quantity <= 0) {
-//             currentCards.splice(cardIndex, 1);
-//           }
-//           currentTotalPrice -= cardPrice;
-//         }
-//       }
-//       currentTotalPrice = calculateAndUpdateTotalPrice({
-//         ...activeCollection,
-//         cards: currentCards,
-//       });
-
-//       if (cardInfo) {
-//         console.log('COLLECTION NAME CHANGE:', cardInfo.name);
-//         console.log('COLLECTION DESC CHANGE:', cardInfo.description);
-
-//         activeCollection.name = cardInfo.name;
-//         activeCollection.description = cardInfo.description;
-//       }
-
-//       // Update the collection's totalPrice
-//       activeCollection.totalPrice = currentTotalPrice;
-
-//       console.log('activeCollection:', activeCollection);
-//       console.log('currentTotalPrice:', currentTotalPrice);
-//       const collectionId = activeCollection._id;
-//       console.log('currentCards:', currentCards);
-//       console.log('collectionId:', collectionId);
-//       try {
-//         // Replace this URL with your server's URL and route for updating the collection
-//         const url = `${process.env.REACT_APP_SERVER}/api/users/${userId}/collections/${collectionId}`;
-
-//         // Send a PUT request to the server to update the collection
-//         const updatedCollection = await fetchWrapper(url, 'PUT', {
-//           cards: currentCards,
-//           name: cardInfo.name,
-//           description: cardInfo.description,
-//           quantity: getCardQuantity(collectionId),
-//           userId: userId,
-//           totalPrice: currentTotalPrice,
-//         });
-
-//         // Update the state based on the server's response
-//         setSelectedCollection({
-//           ...updatedCollection,
-//           totalPrice: currentTotalPrice,
-//           name: cardInfo.name,
-//           description: cardInfo.description,
-//         });
-//         updateCollectionData(
-//           {
-//             ...updatedCollection,
-//             totalPrice: currentTotalPrice,
-//             name: cardInfo.name,
-//             description: cardInfo.description,
-//           },
-//           setAllCollections
-//         );
-//       } catch (error) {
-//         // If the PUT request fails, log the error and revert to the previous state
-//         console.error(`Failed to update the collection: ${error.message}`);
-//       }
-//     },
-//     [
-//       selectedCollection,
-//       allCollections,
-//       userId,
-//       updateCollectionData,
-//       allCardPrices,
-//     ]
-//   );
-
-//   const totalCost = selectedCollection?.cards
-//     ? selectedCollection.cards.reduce((total, card) => {
-//         if (
-//           card.card_prices &&
-//           card.card_prices[0] &&
-//           card.card_prices[0].tcgplayer_price
-//         ) {
-//           return total + parseFloat(card.card_prices[0].tcgplayer_price);
-//         }
-//         return total;
-//       }, 0)
-//     : 0;
-
-//   // const getCardQuantity: (collectionId) => {
-
-//   //   const collection = allCollections?.find(
-//   //     (item) => item._id === collectionId
-//   //   );
-//   //   if (!collection) return 0;
-//   //   return collection.cards.reduce((acc, card) => acc + card.quantity, 0);
-//   // },
-
-//   const contextValue = useMemo(
-//     () => ({
-//       collectionData,
-//       allCollections,
-//       allCardPrices,
-//       selectedCollection,
-//       totalPrice: calculateAndUpdateTotalPrice(selectedCollection),
-//       setSelectedCollection,
-//       fetchAllCollectionsForUser: fetchAndSetCollections, // fetchAndSetCollections should be defined
-//       addOneToCollection: (card, cardInfo) =>
-//         addOrRemoveCard(card, cardInfo, true), // addOrRemoveCard should be defined
-//       removeOneFromCollection: (card) => addOrRemoveCard(card, null, false),
-//       createUserCollection: (name, description, newCollectionInfo) =>
-//         createUserCollection(userId, name, description, newCollectionInfo), // createUserCollection should be defined
-//       getCardQuantity,
-//       getTotalCost: (collectionId) => {
-//         const collection = allCollections?.find(
-//           (item) => item._id === collectionId
-//         );
-//         if (!collection) return 0;
-//         return collection.cards.reduce(
-//           (acc, card) => acc + card.price * card.quantity,
-//           0
-//         );
-//       },
-//       getCollectionCardDetails: (collectionId) => {
-//         const collection = allCollections?.find(
-//           (item) => item._id === collectionId
-//         );
-//         if (!collection || !collection.cards) return [0, []];
-
-//         const totalQuantity = collection.cards.reduce(
-//           (acc, card) => acc + card.quantity,
-//           0
-//         );
-//         const cardDetails = collection.cards.map((card) => ({
-//           name: card.name,
-//           quantity: card.quantity,
-//         }));
-
-//         return [totalQuantity, cardDetails];
-//       },
-//     }),
-//     [collectionData, allCollections, selectedCollection, allCardPrices]
-//   );
-
-//   useEffect(() => {
-//     console.log('collectionData has been updated:', collectionData);
-//   }, [collectionData]);
-
-//   useEffect(() => {
-//     if (allCollections.length > 0) {
-//       const firstCollection = allCollections[0];
-//       const totalQuantity = firstCollection.cards.reduce(
-//         (acc, card) => acc + card.quantity,
-//         0
-//       );
-
-//       // Only log when a new card has been added
-//       if (totalQuantity > prevTotalQuantity) {
-//         const cardDetails = firstCollection.cards.map((card) => ({
-//           name: card.name,
-//           quantity: card.quantity,
-//         }));
-//         console.log(
-//           'A new card has been added. Updated totals:',
-//           totalQuantity,
-//           cardDetails
-//         );
-//       }
-
-//       // Update the previous total quantity
-//       setPrevTotalQuantity(totalQuantity);
-//     }
-//   }, [allCollections]);
-
-//   useEffect(() => {
-//     console.log('COLLECTIONCONTEXT:', contextValue);
-//     if (userId) fetchAndSetCollections();
-//   }, [fetchAndSetCollections, userId]);
-
-//   return (
-//     <CollectionContext.Provider value={contextValue}>
-//       {children}
-//     </CollectionContext.Provider>
-//   );
-// };
-
-// export const useCollectionStore = () => {
-//   const context = useContext(CollectionContext);
-//   if (!context) {
-//     throw new Error(
-//       'useCollectionStore must be used within a CollectionProvider'
-//     );
-//   }
-//   return context;
-// };
-
-// // Initial states
-// const initialCollectionState = {
-//   _id: '',
-//   cards: [],
-//   quantity: 0,
-//   totalPrice: 0,
-// };
diff --git a/src/context/ColorModeProvider.jsx b/src/context/ColorModeProvider.jsx
index d5b1a19..9084db9 100644
--- a/src/context/ColorModeProvider.jsx
+++ b/src/context/ColorModeProvider.jsx
@@ -1,12 +1,12 @@
 import { useState, useMemo, createContext, useEffect } from 'react';
 import { createTheme } from '@mui/material/styles';
 import { useCookies } from 'react-cookie';
-import { themeSettings } from '../themeSettings';
+import { themeSettings } from '../assets/themeSettings';
 
 export const ColorModeContext = createContext({
   mode: 'dark',
   colorMode: {},
-  theme: themeSettings('dark'), // default theme is light mode theme
+  theme: createTheme(themeSettings('dark')), // Default theme is dark mode
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   toggleColorMode: () => {},
@@ -21,18 +21,17 @@ export const ColorModeProvider = ({ children }) => {
   useEffect(() => {
     // Set the cookie whenever the mode changes
     setCookie('colorMode', mode, { path: '/' });
-  }, [mode]);
+  }, [mode, setCookie]);
 
   const colorMode = useMemo(
     () => ({
       toggleColorMode: () => {
-        const newMode = mode === 'light' ? 'dark' : 'light';
+        const newMode = mode === 'dark' ? 'dark' : 'light';
         setMode(newMode);
         setCookie('colorMode', newMode); // also set the cookie here for immediate effect
-        // Cookies.set('colorMode', newMode, { expires: 365 }); // also set the cookie here for immediate effect
       },
     }),
-    [mode]
+    [mode, setCookie]
   );
 
   const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
diff --git a/src/context/CombinedProvider.jsx b/src/context/CombinedProvider.jsx
index fd74f69..56fea34 100644
--- a/src/context/CombinedProvider.jsx
+++ b/src/context/CombinedProvider.jsx
@@ -7,131 +7,86 @@ import React, {
   useState,
 } from 'react';
 import { useCookies } from 'react-cookie';
-import { useSocket } from './SocketProvider';
 import { CollectionContext } from './CollectionContext/CollectionContext';
-
+import { useSocketContext } from './SocketProvider';
+import { validateData } from './Helpers';
 export const CombinedContext = createContext();
 
 const initialState = {
   allData: {},
   data: {},
   messageTest: {},
-  chartData: {},
+  userData: {},
   existingChartData: {},
   collectionData: {},
-  currentChartData: {},
   allCollectionsUpdated: {},
+  simData: {},
   allCollectionData: {},
   cronData: {},
   finalUpdateData: {},
   cardPrices: {},
+  eventsTriggered: null,
+  cardsWithChangedPrice: {},
   previousDayTotalPrice: 0,
   dailyPriceChange: 0,
   priceDifference: 0,
+  allCardPrices: {},
   retrievedListOfMonitoredCards: {},
+  listOfMonitoredCards: {},
+  listOfSimulatedCards: {},
   isLoading: false,
   cronTriggerTimestamps: [],
   emittedResponses: [],
   error: null,
   isDelaying: false, // Added isDelaying to initialState as it is referred in your code
   isCronJobTriggered: false, // Added isCronJobTriggered to initialState as it is referred in your code
-  // allCollectionsUpdated: {},
-  // cardStats: {},
-  // deckData: {},
-  // updatedChartData: {},
-  // allUpdatedPrices: {},
-  // allItemTypeData: {},
-  // allItemData: {},
-  // allItemData2: {},
-  // cardStatsArray: {},
-};
-const filterDuplicatePrices = (data) => {
-  const seen = {};
-
-  return data?.runs?.filter((run) => {
-    if (
-      !run?.valuesUpdated ||
-      !run?.valuesUpdated?.updatedPrices ||
-      Object.keys(run?.valuesUpdated?.updatedPrices)?.length === 0
-    ) {
-      // Remove the item if there's no updatedPrices or it's empty
-      return false;
-    }
-
-    let isDuplicate = false;
-    for (const id in run?.valuesUpdated?.updatedPrices) {
-      const item = run?.valuesUpdated?.updatedPrices[id];
-      const key = `${id}-${item?.previousPrice}-${item?.updatedPrice}`;
-
-      if (seen[key]) {
-        isDuplicate = true;
-        break;
-      }
-      seen[key] = true;
-    }
-
-    return !isDuplicate;
-  });
-};
-
-const isEmpty = (obj) => {
-  return (
-    [Object, Array].includes((obj || {}).constructor) &&
-    !Object.entries(obj || {}).length
-  );
 };
 
-const validateData = (data, eventName, functionName) => {
-  const dataType = typeof data;
-  console.log(
-    `[Info] Received data of type: ${dataType} in ${functionName} triggered by event: ${eventName}`
-  );
-  if (data === null || data === undefined) {
-    console.warn(
-      `[Warning] Received null or undefined data in ${functionName} triggered by event: ${eventName}`
-    );
-    return false;
-  }
-  if (isEmpty(data)) {
-    console.error(
-      `[Error] Received empty data object or array in ${functionName} triggered by event: ${eventName}`
-    );
-    return false;
-  }
-  return true;
-};
 export const CombinedProvider = ({ children }) => {
-  const { userCookie } = useCookies(['userCookie']);
+  const [cookies] = useCookies(['user']);
+  // const { user } = useCookies(['user']);
   const [state, setState] = useState(initialState);
-  const userId = userCookie?.userID;
+  const user = cookies.user;
+  // console.log('USER ID:', user.id);
   const {
     selectedCollection,
     allCollections,
-    setAllCollections,
-    updatedPricesFromCombinedContext,
-    setUpdatedPricesFromCombinedContext,
+    getNewTotalPrice,
+    getUpdatedCollection,
   } = useContext(CollectionContext);
-  const socket = useSocket();
-  // const createStateUpdaterFunction = (key) =>
-  //   useCallback(
-  //     (data) =>
-  //       setState((prev) => ({ ...prev, [key]: { ...prev[key], ...data } })),
-  //     []
-  //   );
-  const createStateUpdaterFunction = (key) =>
-    useCallback((data) => setState((prev) => ({ ...prev, [key]: data })), []);
+  const socket = useSocketContext();
 
-  // ----------- STATE UPDATER FUNCTIONS -----------
+  const createStateUpdaterFunction = (key) =>
+    useCallback(
+      (data) => {
+        setState((prev) => {
+          let newData;
+
+          // validateData(data, key, 'createStateUpdaterFunction');
+          if (Array.isArray(data)) {
+            newData = [...data];
+          } else if (typeof data === 'object' && data !== null) {
+            newData = { ...data };
+          } else {
+            newData = data;
+          }
+          return { ...prev, [key]: newData };
+        });
+      },
+      [setState]
+    );
 
-  // State updater functions generated using the higher-order function
   const setDataFunctions = {
     data: createStateUpdaterFunction('chartData'),
+    userData: createStateUpdaterFunction('userData'),
     messageTest: createStateUpdaterFunction('messageTest'),
     finalUpdateData: createStateUpdaterFunction('finalUpdateData'),
     chartData: createStateUpdaterFunction('chartData'),
     existingChartData: createStateUpdaterFunction('existingChartData'),
+    listOfSimulatedCards: createStateUpdaterFunction('listOfSimulatedCards'),
     // cardStats: createStateUpdaterFunction('cardStats'),
     cardPrices: createStateUpdaterFunction('cardPrices'),
+    allCardPrices: createStateUpdaterFunction('allCardPrices'),
     retrievedListOfMonitoredCards: createStateUpdaterFunction(
       'retrievedListOfMonitoredCards'
     ),
@@ -140,25 +95,18 @@ export const CombinedProvider = ({ children }) => {
     error: createStateUpdaterFunction('error'),
     // updatedChartData: createStateUpdaterFunction('updatedChartData'),
     currentChartData: createStateUpdaterFunction('currentChartData'),
+    simData: createStateUpdaterFunction('simData'),
     checkAndUpdateCardPrice: createStateUpdaterFunction(
       'checkAndUpdateCardPrice'
     ),
     collectionData: createStateUpdaterFunction('collectionData'),
     allCollectionData: createStateUpdaterFunction('allCollectionData'),
     emittedResponses: createStateUpdaterFunction('emittedResponses'),
-    // allCollectionsUpdated: createStateUpdaterFunction('allCollectionsUpdated'),
-    // updatedCollectionData: createStateUpdaterFunction('updatedCollectionData'),
-    // allCollectionsUpdated: createStateUpdaterFunction('allCollectionsUpdated'),
-    // allUpdatedPrices: createStateUpdaterFunction('allUpdatedPrices'),
-    // allItemTypeData: createStateUpdaterFunction('allItemTypeData'),
-    // allItemData: createStateUpdaterFunction('allItemData'),
-    // allItemData2: createStateUpdaterFunction('allItemData2'),
-    // cardStatsArray: createStateUpdaterFunction('cardStatsArray'),
+    eventsTriggered: createStateUpdaterFunction('eventsTriggered'),
     isDelaying: createStateUpdaterFunction('isDelaying'),
     isCronJobTriggered: createStateUpdaterFunction('isCronJobTriggered'),
   };
 
-  // setLoader with added error handling and documentation
   const setLoader = (isLoading) => {
     if (typeof isLoading !== 'boolean') {
       console.error('Invalid argument type for setLoader: Expected boolean');
@@ -166,7 +114,7 @@ export const CombinedProvider = ({ children }) => {
     }
     setState((prev) => ({ ...prev, isLoading }));
   };
-  // setCronStatus with added error handling and documentation
+
   const setCronStatus = (cronActive) => {
     if (typeof cronActive !== 'boolean') {
       console.error(
@@ -176,342 +124,290 @@ export const CombinedProvider = ({ children }) => {
     }
     setState((prev) => ({ ...prev, cronActive }));
   };
-  // ----------- XXX -----------
-
-  const listOfMonitoredCards = useMemo(() => {
-    const cards = allCollections?.flatMap((collection) => collection?.cards);
-    // console.log('cards', cards);
-    if (!cards) return [];
-    const uniqueCards = Array.from(new Set(cards.map((card) => card?.id))).map(
-      (id) => cards?.find((card) => card?.id === id)
-    );
-    let updatedPrices = null;
-    if (state.cardPrices?.updatedPrices) {
-      updatedPrices = state.cardPrices?.updatedPrices;
-    }
 
-    if (uniqueCards && uniqueCards.length) {
-      return uniqueCards?.map((card) => ({
-        name: card?.name,
-        id: card?.id,
-        previousPrice: card?.price,
-        updatedPrice: updatedPrices?.[card?.id] || card?.price,
-      }));
+  useEffect(() => {
+    if (state.eventsTriggered) {
+      console.log(`Handling event: ${state.eventsTriggered.eventName}`);
     }
-  }, [allCollections]);
-
-  const retrieveListOfMonitoredCards = useCallback(() => {
-    const cards = allCollections?.flatMap((collection) => collection?.cards);
-    // console.log('cards', cards);
-    const uniqueCards = Array.from(new Set(cards.map((card) => card?.id))).map(
-      (id) => cards.find((card) => card?.id === id)
+  }, [state.eventsTriggered]);
+  // ----------- XXX -----------
+  const generateListOfMonitoredCards = (allCollections) => {
+    if (!allCollections) return [];
+
+    const cardsWithCollectionId = allCollections.flatMap((collection) =>
+      collection?.cards?.map((card) => ({
+        ...card,
+        collectionId: collection._id,
+      }))
     );
-    let updatedPrices = null;
-    if (state.cardPrices?.updatedPrices) {
-      updatedPrices = state.cardPrices?.updatedPrices;
-    }
 
-    if (uniqueCards && uniqueCards.length) {
-      return uniqueCards?.map((card) => ({
-        name: card?.name,
-        id: card?.id,
-        previousPrice: card?.price,
-        updatedPrice: updatedPrices?.[card?.id] || card?.price,
-      }));
-    }
-  }, [allCollections]);
+    const uniqueCardIds = new Set(
+      cardsWithCollectionId.map((card) => card?.id)
+    );
 
-  // ----------- SOCKET EVENT HANDLERS -----------
-  const safeEmit = useCallback(
-    (event, data) => {
-      try {
-        if (!validateData(data, event, 'safeEmit')) {
-          throw new Error(`Invalid data emitted for event: ${event}`);
-        }
-        if (socket) {
-          socket.emit(event, data);
-        } else {
-          console.warn('Socket is not connected. Cannot emit event:', event);
-        }
-      } catch (error) {
-        console.error(`[Error] Failed to emit event: ${event}`, error);
-        setDataFunctions.error({ message: error.message, source: 'safeEmit' });
-      }
-    },
-    [socket]
-  );
+    return Array.from(uniqueCardIds).map((id) => {
+      const originalCard = cardsWithCollectionId.find(
+        (card) => card?.id === id
+      );
 
-  const safeOn = useCallback(
-    (event, handler) => {
-      const wrapper = (data) => {
-        try {
-          if (!validateData(data, event, handler.name)) {
-            throw new Error(`Invalid data received for event: ${event}`);
-          }
-          handler(data);
-        } catch (error) {
-          console.error(`[Error] Failed to handle event: ${event}`, error);
-          setDataFunctions.error({ message: error.message, source: event });
-        }
+      return {
+        ...originalCard,
+        priceHistory: originalCard?.priceHistory || [],
       };
-      if (socket) {
-        socket.on(event, wrapper);
-      } else {
-        console.warn(
-          'Socket is not connected. Cannot subscribe to event:',
-          event
-        );
+    });
+  };
+  const updateCardPricesInList = (listOfMonitoredCards, cardPrices) => {
+    // if (!data || !Array.isArray(data)) {
+    //   console.error('Data is undefined or not an array');
+    //   return; // or handle the error appropriately
+    // }
+    return listOfMonitoredCards.map((originalCard) => {
+      const updatedCardInfo =
+        cardPrices.find((price) => price.id === originalCard.id) || {};
+
+      // If latestPrice is different, update lastSavedPrice and priceHistory
+      if (updatedCardInfo.latestPrice?.num !== originalCard.latestPrice?.num) {
+        return {
+          ...originalCard,
+          ...updatedCardInfo,
+          quantity: originalCard?.quantity,
+          price: updatedCardInfo?.latestPrice?.num || originalCard?.price,
+          lastSavedPrice: {
+            num: updatedCardInfo?.lastSavedPrice?.num || originalCard?.price,
+            timestamp:
+              updatedCardInfo?.latestPrice?.timestamp ||
+              new Date().toISOString(),
+          },
+          priceHistory: [
+            ...originalCard.priceHistory,
+            updatedCardInfo?.latestPrice,
+          ],
+        };
       }
-      return () => {
-        if (socket) {
-          socket.off(event, wrapper);
-        }
-      };
-    },
-    [socket]
+
+      return originalCard;
+    });
+  };
+  const listOfMonitoredCards = useMemo(
+    () => generateListOfMonitoredCards(allCollections),
+    [allCollections]
   );
-  useEffect(() => {
-    if (!socket) return;
 
-    const handleReceive = (message) => {
-      console.log('Received message:', message);
-      setDataFunctions.messageTest(message);
-    };
+  const emitUpdatedCards = (socket, updatedCards) => {
+    socket.emit('UPDATED_MONITORED_CARDS', updatedCards);
+  };
 
-    const handleCronJobResponse = (message, collections) => {
-      console.log('MESSAGE: CRON JOB COMPLETE ==========]>:', message);
-      console.log('COLLECTIONS: CRON JOB COMPLETE ==========]>:', collections);
-      setDataFunctions.checkAndUpdateCardPrice({ collections });
-    };
+  const handleStatusUpdateCharts = async (newData) => {
+    console.log('[STATUS_UPDATE_CHARTS] Data:', newData);
+    let updatedCollection = { ...selectedCollection };
 
-    const handleError = (errorData) => {
-      console.error('Server Error:', errorData.message);
-      console.error('Error Source:', errorData.source);
-      if (errorData.detail) {
-        console.error('Error Detail:', errorData.detail);
-      }
-      setDataFunctions.error(errorData);
-    };
+    console.log('Updated collection in combined:', updatedCollection);
+    return updatedCollection;
+  };
+  const handleReceive = (message) => {
+    console.log('Received message:', message);
+    setDataFunctions.messageTest(message);
+  };
 
-    const handleEmittedResponses = (emittedResponses) => {
-      setDataFunctions.emittedResponses([
-        ...state.emittedResponses,
-        emittedResponses,
-      ]);
-    };
+  const handleSimulationPriceResponse = (updates) => {
+    console.log('Received scheduled price update:', updates);
+    setDataFunctions.simData(updates); // Update with new data
+  };
 
-    const handleCronJobTracker = (message, existingCronData) => {
-      console.log('[AUTOMATED MESSAGE FROM SERVER]', message);
-      const data = existingCronData;
-      const filteredRuns = filterDuplicatePrices(data);
-      const runs = filteredRuns;
-      setDataFunctions.cronData({ runs });
-    };
+  const handleEventResponse = (newData) => {
+    const { message, data } = newData;
+    console.log('EVENT_RESPONSE:', message, data);
+    setDataFunctions.eventsTriggered(data);
+  };
 
-    const handleExistingCollectionData = (userId, selectedCollection) => {
-      console.log('Received existing collection data:', selectedCollection);
-      setDataFunctions.collectionData({ selectedCollection });
-    };
+  const handleStatusUpdatePrice = (data) => {
+    console.log('STATUS_UPDATE_PRICE:', data);
+    setDataFunctions.priceDifference(data);
+  };
 
-    const handleExistingChartData = (data) => {
-      if (!data || Array.isArray(data?.existingChartData)) {
-        console.error(
-          'Unexpected data structure received for chart data update:',
-          data
-        );
-        return;
-      }
-      const { existingChartData } = data;
-      setDataFunctions.existingChartData({
-        existingChartData: existingChartData,
-      });
-    };
+  const handleStatusUpdateCron = (newData) => {
+    const { message, data } = newData;
+    // console.log('[STATUS_UPDATE_CRON]', message, data);
+    if (!Array.isArray(data) || !data.data || data.data.length === 0) {
+      return null;
+    }
+    setDataFunctions.data(data);
+  };
 
-    const handleChartDatasetsUpdated = ({
-      message,
-      collectionId,
-      currentChartDatasets,
-    }) => {
-      if (message) {
-        console.log('MESSAGE: HANDLING CHART DATA UPDATED ==========]>:', {
-          message,
-        });
-      }
-      const currentChartData = {
-        [collectionId]: currentChartDatasets,
-      };
-      setDataFunctions.currentChartData(currentChartData);
-    };
+  const handleChartCronResponse = (newData) => {
+    const message = newData?.message;
+    const data = newData?.data;
+    console.log('[handleChartCronResponse]', message, data);
+    setDataFunctions.retrievedListOfMonitoredCards(data);
+  };
 
-    const handleCardPricesUpdated = ({ message, data }) => {
-      if (message) {
-        console.log('MESSAGE: HANDLING CARD PRICES UPDATED ==========]>:', {
-          message,
-        });
-      }
+  const handleCronJobResponse = (data) => {
+    console.log('Cron job response received:', data);
+    // Update state or perform other actions based on the cron job response
+  };
 
-      const { pricingData } = data;
+  const handleError = (errorData) => {
+    console.error('Error received:', errorData);
+    setDataFunctions.error(errorData);
+  };
 
-      if (
-        !validateData(
-          pricingData,
-          'SEND_PRICING_DATA_TO_CLIENT',
-          'handleCardPricesUpdated'
-        )
-      )
-        return;
+  const handleEmittedResponses = (emittedData) => {
+    console.log('Emitted responses:', emittedData);
+    setDataFunctions.emittedResponses(emittedData);
+  };
 
-      if (
-        !pricingData ||
-        !pricingData.updatedPrices ||
-        !pricingData.previousPrices ||
-        !pricingData.priceDifferences
-      ) {
-        console.error(
-          'Unexpected data structure received for card prices update:',
-          pricingData
+  const handleCronJobTracker = (cronData) => {
+    console.log('Cron job data:', cronData);
+    setDataFunctions.cronData(cronData);
+  };
+
+  const handleExistingCollectionData = (collectionData) => {
+    console.log('Existing collection data:', collectionData);
+    setDataFunctions.collectionData(collectionData);
+  };
+
+  const handleCardPricesUpdated = async (priceData) => {
+    console.log('Card prices retrieved:', priceData);
+    const updatedCardPrices = priceData.data.data;
+    const userId = user?.id;
+    const currentListOfMonitoredCards =
+      generateListOfMonitoredCards(allCollections);
+    console.log(
+      `[currentListOfMonitoredCards: $${getNewTotalPrice(
+        currentListOfMonitoredCards
+      )}] | `,
+      currentListOfMonitoredCards
+    );
+    const updatedListOfMonitoredCards = updateCardPricesInList(
+      currentListOfMonitoredCards,
+      updatedCardPrices
+    );
+    console.log(
+      `[updatedListOfMonitoredCards: $${getNewTotalPrice(
+        updatedListOfMonitoredCards
+      )}] | `,
+      updatedListOfMonitoredCards
+    );
+
+    // Update the selectedCollection with new card prices
+    const updatedSelectedCollectionCards = selectedCollection.cards.map(
+      (card) => {
+        const updatedCardPrice = updatedListOfMonitoredCards.find(
+          (updatedCard) => updatedCard.id === card.id
         );
-        return;
+        return updatedCardPrice ? { ...card, ...updatedCardPrice } : card;
       }
+    );
 
-      const { updatedPrices, previousPrices, priceDifferences } = pricingData;
+    const updatedCollection = {
+      ...selectedCollection,
+      cards: updatedSelectedCollectionCards,
+    };
 
-      const allPrices = {
-        ...updatedPrices,
-        ...previousPrices,
-        updatedPrices,
-        previousPrices,
-        priceDifferences,
-      };
+    try {
+      const updatedCollectionResult = await getUpdatedCollection(
+        updatedCollection,
+        null, // No specific card to update
+        'update', // Operation type
+        userId
+      );
 
-      setUpdatedPricesFromCombinedContext(allPrices);
-      setDataFunctions.cardPrices({ allPrices }); // Here you are passing an object with 'allPrices' property
-    };
+      if (updatedCollectionResult) {
+        console.log('Updated Collection:', updatedCollectionResult);
+        // setDataFunctions.collectionData(updatedCollectionResult);
+        setDataFunctions.listOfSimulatedCards(updatedCollectionResult);
+      }
+    } catch (error) {
+      console.error('Failed to update collection:', error);
+    }
 
-    const handleNoPricesChanged = ({ message }) => {
-      console.log('MESSAGE: NO PRICES CHANGED ==========]>:', {
-        message,
-      });
-      // setUpdatedPricesFromCombinedContext(updatedData);
-    };
+    setDataFunctions.allCardPrices(updatedListOfMonitoredCards);
+  };
 
-    const handleNewCardDataObject = ({ message, updatedData }) => {
-      // setUpdatedPricesFromCombinedContext(updatedData);
-      console.log('MESSAGE: NEW CARD DATA OBJECT ==========]>:', {
-        message,
-      });
-      setDataFunctions.data(updatedData);
-    };
+  const handleNoPricesChanged = () => {
+    console.log('No prices changed');
+    // Perform any necessary actions when no prices have changed
+  };
 
-    const handleFinalUpdateToClient = ({ userId, message, updatedData }) => {
-      console.log('MESSAGE: FINAL UPDATE TO CLIENT ==========]>:', {
-        message,
-      });
-      console.log('UPDATED DATA: FINAL UPDATE TO CLIENT ==========]>:', {
-        updatedData,
-      });
-      // setUpdatedPricesFromCombinedContext(updatedData);
-      setDataFunctions.finalUpdateData(updatedData);
-    };
-    const handleInitiateScheduleCheckCardPrices = ({ data }) => {
-      safeEmit('INITIATE_CHECK_CARD_PRICES', {
-        userId: data.userId,
-        selectedList: data.selectedList,
-      });
-    };
+  const handleNewCardDataObject = (cardData) => {
+    console.log('New card data received:', cardData);
+    setDataFunctions.data(cardData);
+  };
 
-    const handleInitiateCheckCardPrices = ({ data }) => {
-      safeEmit('HANDLE_CHECK_CARD_PRICES', {
-        userId: data.userId,
-        selectedList: data.selectedList,
-      });
-    };
+  const handleFinalUpdateToClient = (finalUpdate) => {
+    console.log('Final update to client:', finalUpdate);
+    setDataFunctions.finalUpdateData(finalUpdate);
+  };
 
-    const handleUpdateUserData = ({ message, data }) => {
-      console.log('MESSAGE: INITIATING UPDATE OF USER DATA ==========]>:', {
-        message,
-      });
-      safeEmit('HANDLE_UPDATE_USER_DATA', {
-        userId: data.userId,
-        pricingData: data.pricingData,
-      });
-    };
-    const handleUpdateUserCollection = ({ data }) => {
-      safeEmit('HANDLE_UPDATE_USER_COLLECTION', {
-        userId: data.userId,
-        updatedData: data.updatedUserData,
-      });
-    };
+  const handleInitiateScheduleCheckCardPrices = (scheduleData) => {
+    console.log('Initiating scheduled check of card prices:', scheduleData);
+    // Emit event to server or perform other actions
+  };
 
-    const handleUpdateAndSyncUserCollection = ({ data }) => {
-      safeEmit('HANDLE_UPDATE_AND_SYNC_COLLECTION', {
-        userId: data.userId,
-        collectionId: data.collectionId,
-        body: data.body,
-      });
-    };
-    // const handleUpdateUserCollection = ({ userId, updatedData }) => {
-    //   safeEmit('HANDLE_UPDATE_USER_COLLECTION', { userId, updatedData });
-    // };
-    // const handleUpdateAndSyncUserCollection = ({
-    //   userId,
-    //   collectionId,
-    //   body,
-    // }) => {
-    //   safeEmit('HANDLE_UPDATE_AND_SYNC_COLLECTION', {
-    //     userId,
-    //     collectionId,
-    //     body,
-    //   });
-    // };
-
-    // handleCheckCardPrices(userId, selectedList) {
-    //   socket.emit('HANDLE_CHECK_CARD_PRICES', { userId, selectedList });
-    // },
-    // handleUpdateUserData(userId, pricingData) {
-    //   socket.emit('HANDLE_UPDATE_USER_DATA', { userId, pricingData });
-    // },
-    // handleUpdateUserCollection(userId, updatedData) {
-    //   socket.emit('HANDLE_UPDATE_USER_COLLECTION', { userId, updatedData });
-    // },
-    // handleUpdateAndSyncCollection(userId, collectionId, body) {
-    //   socket.emit('HANDLE_UPDATE_AND_SYNC_COLLECTION', { userId, collectionId, body });
-    // },
-    const unsubscribeFunctions = [
+  const handleInitiateCheckCardPrices = (checkPriceData) => {
+    console.log('Initiating check of card prices:', checkPriceData);
+    // Emit event to server or perform other actions
+  };
+
+  const handleUpdateUserData = (userData) => {
+    console.log('Updating user data:', userData);
+    // Emit event to server or perform other actions
+  };
+
+  const handleUpdateUserCollection = (collectionUpdate) => {
+    console.log('Updating user collection:', collectionUpdate);
+    // Emit event to server or perform other actions
+  };
+
+  const handleUpdateAndSyncUserCollection = (syncData) => {
+    console.log('Updating and syncing user collection:', syncData);
+    // Emit event to server or perform other actions
+  };
+  useEffect(() => {
+    if (!socket) return;
+
+    const eventHandlers = new Map([
+      ['STATUS_UPDATE_CHARTS', handleStatusUpdateCharts],
       ['MESSAGE_TO_CLIENT', handleReceive],
-      ['RESPONSE_CRON_UPDATED_ALLCOLLECTIONS', handleCronJobResponse],
+      ['SIMULATION_CRON_PRICE_RESPONSE', handleSimulationPriceResponse],
+      ['EVENT_RESPONSE', handleEventResponse],
+      ['STATUS_UPDATE_PRICE', handleStatusUpdatePrice],
+      ['STATUS_UPDATE_CRON', handleStatusUpdateCron],
+      ['CHART_CRON_RESPONSE', handleChartCronResponse],
+      ['HANDLE_CRON_JOB_RESPONSE', handleCronJobResponse],
       ['ERROR', handleError],
       ['EMITTED_RESPONSES', handleEmittedResponses],
       ['RESPONSE_CRON_DATA', handleCronJobTracker],
       ['RESPONSE_EXISTING_COLLECTION_DATA', handleExistingCollectionData],
-      ['RESPONSE_EXISTING_CHART_DATA', handleExistingChartData],
+      // ['RESPONSE_EXISTING_CHART_DATA', handleExistingChartData],
+      // ['CHART_DATASETS_UPDATED', handleChartDatasetsUpdated],
       ['SEND_PRICING_DATA_TO_CLIENT', handleCardPricesUpdated],
+      ['NO_PRICE_CHANGES', handleNoPricesChanged],
       ['SEND_UPDATED_DATA_TO_CLIENT', handleNewCardDataObject],
       ['SEND_FINAL_UPDATE_TO_CLIENT', handleFinalUpdateToClient],
-      ['CHART_DATASETS_UPDATED', handleChartDatasetsUpdated],
       [
         'INITIATE_SCHEDULE_CHECK_CARD_PRICES',
         handleInitiateScheduleCheckCardPrices,
       ],
       ['INITIATE_HANDLE_CHECK_CARD_PRICES', handleInitiateCheckCardPrices],
       ['INITIATE_UPDATE_USER_DATA', handleUpdateUserData],
-      // ['INITIATE_UPDATE_USER_COLLECTION', handleUpdateUserCollection],
       ['INITIATE_UPDATE_USER_COLLECTIONS_SOCKET', handleUpdateUserCollection],
-      ['NO_PRICE_CHANGES', handleNoPricesChanged],
       ['COLLECTION_SYNCED', handleUpdateAndSyncUserCollection],
-      ['CRON_JOB_TRIGGERED', () => setDataFunctions.isCronJobTriggered(true)],
-      ['CRON_JOB_COMPLETED', () => setDataFunctions.isCronJobTriggered(false)],
-
-      // ... (other event subscriptions)
-    ].map(([event, handler]) => safeOn(event, handler));
-    return () => unsubscribeFunctions.forEach((unsubscribe) => unsubscribe());
-  }, [
-    socket,
-    safeEmit,
-    safeOn,
-    setDataFunctions.isCronJobTriggered,
-    setUpdatedPricesFromCombinedContext,
-  ]);
+      // ... any other event handlers
+    ]);
+
+    eventHandlers.forEach((handler, event) => {
+      // validateData(event, 'event', 'useEffect');
+      socket.on(event, handler);
+    });
+
+    // validateData(eventHandlers, 'eventHandlers', 'useEffect');
+    return () => {
+      eventHandlers.forEach((_, event) => {
+        socket.off(event);
+      });
+    };
+  }, [socket, state, setDataFunctions]);
 
   // ----------- DATA PROCESSING & HANDLERS -----------
 
@@ -524,65 +420,63 @@ export const CombinedProvider = ({ children }) => {
           );
           return;
         }
-        socket.emit('REQUEST_EXISTING_COLLECTION_DATA', {
+        socket?.emit('REQUEST_EXISTING_COLLECTION_DATA', {
           userId,
-          selectedCollection: selectedCollection,
-        });
-      },
-      chart: (userId, selectedCollection) => {
-        if (!userId)
-          return console.error('Missing userId for chart data request.');
-        if (!selectedCollection)
-          return console.error(
-            'Missing selectedCollection for chart data request.'
-          );
-        if (selectedCollection.chartData === undefined || null) {
-          if (selectedCollection.chartData === undefined)
-            console.log('chartData is undefined');
-          if (selectedCollection.chartData === null)
-            console.log('chartData is null');
-          return console.error(
-            'The selected collections chart data is missing, null or undefined.'
-          );
-        }
-
-        console.log(
-          'Attempting to retrieve chart data',
-          selectedCollection?.chartData
-        );
-        const chartData = selectedCollection?.chartData || {};
-        socket.emit('REQUEST_EXISTING_CHART_DATA', {
-          data: {
-            userId,
-            chartData: chartData,
-          },
+          data: selectedCollection,
         });
       },
     },
     sendAction: {
       message: (message) => {
         if (!message) return console.error('Message content is missing.');
-        socket.emit('MESSAGE_FROM_CLIENT', { message });
+        socket?.emit('MESSAGE_FROM_CLIENT', { message, data: message });
       },
       stopCronJob: (userId) => {
         if (!userId) return console.error('Missing userId for cron job stop.');
-        socket.emit('REQUEST_CRON_STOP', { userId });
+        socket?.emit('REQUEST_CRON_STOP', { userId });
       },
       checkAndUpdateCardPrices: (
         userId,
-        listOfMonitoredCards,
-        retrievedListOfMonitoredCards
+        listOfMonitoredCards
+        // retrievedListOfMonitoredCards
       ) => {
         if (!userId)
           return console.error('Missing userId or listOfMonitoredCards.');
-        if (!retrievedListOfMonitoredCards || !listOfMonitoredCards)
+        if (!listOfMonitoredCards)
           return console.error('Missing retrievedListOfMonitoredCards.');
 
-        const selectedList = listOfMonitoredCards
-          ? listOfMonitoredCards
-          : retrievedListOfMonitoredCards;
-        socket.emit('REQUEST_CRON_UPDATED_CARDS_IN_COLLECTION', {
-          data: { userId, selectedList },
+        console.log(
+          'SENDING CHECK AND UPDATE CARD PRICES',
+          listOfMonitoredCards
+        );
+        const selectedList = listOfMonitoredCards;
+        socket?.emit('REQUEST_CRON_UPDATED_CARDS_IN_COLLECTION', {
+          userId,
+          data: {
+            selectedList,
+          },
+        });
+      },
+      checkPriceUpdates: (
+        userId,
+        listOfMonitoredCards,
+        allCollections,
+        cardsWithChangedPrice
+      ) => {
+        if (!userId)
+          return console.log('Missing userId or listOfMonitoredCards.');
+        if (!listOfMonitoredCards)
+          return console.log('Missing retrievedListOfMonitoredCards.');
+        if (!allCollections) return console.log('Missing allCollections.');
+        const selectedList = listOfMonitoredCards;
+        socket.emit('REQUEST_PRICES_ACTIVATE_CRON', {
+          userId,
+          data: {
+            userId,
+            selectedList,
+            allCollections,
+            cardsWithChangedPrice,
+          },
         });
       },
       triggerCronJob: (userId, listOfMonitoredCards) => {
@@ -601,23 +495,6 @@ export const CombinedProvider = ({ children }) => {
 
   const confirm = (message) => window.confirm(message);
 
-  useEffect(() => {
-    if (userId && selectedCollection) {
-      handleSocketInteraction.requestData.collection(
-        userId,
-        selectedCollection
-      );
-      handleSocketInteraction.requestData.chart(userId, selectedCollection);
-      handleSocketInteraction.sendAction.message('Hello from client!');
-      // handleSocketInteraction.sendAction.updateCollection();
-      // handleSocketInteraction.sendAction.updateChart();
-      handleSocketInteraction.sendAction.checkAndUpdateCardPrices(
-        userId,
-        listOfMonitoredCards,
-        retrieveListOfMonitoredCards()
-      );
-    }
-  }, [userId, selectedCollection, socket]);
   useEffect(() => {
     // Update the collectionData state when selectedCollection changes
     setDataFunctions.collectionData(selectedCollection);
@@ -625,92 +502,56 @@ export const CombinedProvider = ({ children }) => {
 
   useEffect(() => {
     if (allCollections) {
-      // console.log('allCollections', allCollections);
-      // console.log('listOfMonitoredCards', listOfMonitoredCards);
-
+      // console.log('ALLL', allCollections);
       if (
         JSON.stringify(allCollections) !==
         JSON.stringify(state.allCollectionData)
       ) {
         setDataFunctions.allCollectionData(allCollections);
       }
-
-      setDataFunctions.retrievedListOfMonitoredCards(
-        retrieveListOfMonitoredCards()
-      );
     }
   }, [allCollections]);
+  useEffect(() => {
+    if (user) {
+      // console.log('userId', user.userId);
+      setDataFunctions.userData(user);
+    }
+  }, [user]);
 
   const logError = (message) => console.error(message);
 
   // ----------- CONTEXT VALUE -----------
-  // useEffect(() => {
-  //   if (listOfMonitoredCards.length)
-  //     console.log('listOfMonitoredCards', listOfMonitoredCards);
-
-  //   handleSocketInteraction.sendAction.triggerCronJob(
-  //     userId,
-  //     listOfMonitoredCards
-  //   );
-  // }, [listOfMonitoredCards]);
 
   const value = useMemo(
     () => ({
       ...state,
+      ...setDataFunctions,
       listOfMonitoredCards,
-      // emittedResponses: state.emittedResponses,
-      // messageTest: state.messageTest,
-      toast,
       confirm,
       setLoader,
       setCronStatus,
-      handleCronRequest: handleSocketInteraction.sendAction.triggerCronJob, // Ensure it's provided here
+      handleCronRequest: handleSocketInteraction.sendAction.triggerCronJob,
       handleSend: handleSocketInteraction.sendAction.message,
       handleRequestCollectionData:
         handleSocketInteraction.requestData.collection,
-      handleRequestChartData: handleSocketInteraction.requestData.chart, // Assuming this is the correct mapping
+      // handleRequestChartData: handleSocketInteraction.requestData.chart,
       handleSendAllCardsInCollections:
-        handleSocketInteraction.sendAction.checkAndUpdateCardPrices, // Ensure it's provided here
-      handleRequestCronStop: handleSocketInteraction.sendAction.stopCronJob, // Ensure it's provided here
-      handleRetreiveListOfMonitoredCards: retrieveListOfMonitoredCards,
+        handleSocketInteraction.sendAction.checkAndUpdateCardPrices,
+      handleRequestCronStop: handleSocketInteraction.sendAction.stopCronJob,
+      handlePricesActivateCron:
+        handleSocketInteraction.sendAction.checkPriceUpdates,
       handleSocketInteraction,
-      setDataFunctions,
       socket,
       isDelaying: state.isDelaying,
       isCronJobTriggered: state.isCronJobTriggered,
-      // setDataFunctions,
     }),
     [state, socket]
   );
 
-  const dataValues = {
-    state: state,
-    allData: value.allData,
-    data: value.data,
-    messageTest: value.messageTest,
-    finalUpdateData: value.finalUpdateData,
-    chartData: value.chartData,
-    emittedResponses: value.emittedResponses,
-    currentChartData: value.currentChartData,
-    existingChartData: value.existingChartData,
-    collectionData: value.collectionData,
-    allCollectionData: value.allCollectionData,
-    allCollectionsUpdated: value.allCollectionsUpdated,
-    cronData: value.cronData,
-    cardPrices: value.cardPrices,
-    retrievedListOfMonitoredCards: value.retrievedListOfMonitoredCards,
-    listOfMonitoredCards: value.listOfMonitoredCards,
-    error: value.error,
-  };
-
+  // Log combined context value for debugging
   useEffect(() => {
-    console.log('COMBINED CONTEXT VALUE:', dataValues);
-  }, [
-    dataValues.cronData,
-    dataValues.chartData,
-    dataValues.collectionData,
-    dataValues.messageTest,
-  ]);
+    console.log('COMBINED CONTEXT VALUE:', state);
+  }, [state]);
 
   return (
     <CombinedContext.Provider value={value}>
diff --git a/src/context/CronJobContext/CronJobContext.jsx b/src/context/CronJobContext/CronJobContext.jsx
new file mode 100644
index 0000000..d28b60e
--- /dev/null
+++ b/src/context/CronJobContext/CronJobContext.jsx
@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { useUserContext } from '../UserContext/UserContext';
+import { useCollectionStore } from '../CollectionContext/CollectionContext';
+import { useCombinedContext } from '../CombinedProvider';
+
+const CronJobContext = createContext();
+
+export const useCronJobContext = () => useContext(CronJobContext);
+
+export const CronJobProvider = ({ children }) => {
+  const { user } = useUserContext();
+  const { allCollections } = useCollectionStore();
+  const { handleSendAllCardsInCollections } = useCombinedContext();
+  const [lastCronJobTriggerTime, setLastCronJobTriggerTime] = useState(
+    new Date().getTime()
+  );
+
+  useEffect(() => {
+    const handleTriggerCronJob = () => {
+      const currentTime = new Date().getTime();
+      const timeDifference = currentTime - lastCronJobTriggerTime;
+
+      // Define your cron job logic here
+      // Example: Trigger an action if a certain time has elapsed
+      if (timeDifference >= 60000) {
+        // 60 seconds
+        setLastCronJobTriggerTime(currentTime);
+        if (user && user.userID) {
+          console.log('Triggering cron job actions');
+          // Call your functions here
+          handleSendAllCardsInCollections(user.userID);
+        }
+      }
+    };
+
+    const interval = setInterval(handleTriggerCronJob, 1000); // Check every second
+    return () => clearInterval(interval);
+  }, [
+    lastCronJobTriggerTime,
+    user,
+    allCollections,
+    handleSendAllCardsInCollections,
+  ]);
+
+  return (
+    <CronJobContext.Provider
+      value={{ lastCronJobTriggerTime, setLastCronJobTriggerTime }}
+    >
+      {children}
+    </CronJobContext.Provider>
+  );
+};
diff --git a/src/context/DeckContext/DeckContext.js b/src/context/DeckContext/DeckContext.js
index 2409cb0..deac22f 100644
--- a/src/context/DeckContext/DeckContext.js
+++ b/src/context/DeckContext/DeckContext.js
@@ -21,7 +21,7 @@ export const DeckContext = createContext({
   updateAndSyncDeck: () => {},
   fetchAllDecksForUser: () => {},
 });
-const apiBase = `${process.env.REACT_APP_SERVER}/api`;
+const apiBase = `${process.env.REACT_APP_SERVER}/api/users`;
 
 const fetchWrapper = async (url, method, body = null) => {
   const options = {
@@ -41,11 +41,11 @@ const removeDuplicateDecks = (decks) => {
 };
 export const DeckProvider = ({ children }) => {
   const { getCardData } = useCardStore();
-  const [cookies, setCookie] = useCookies(['userCookie']);
+  const [cookies] = useCookies(['user']);
   const [deckData, setDeckData] = useState({});
   const [allDecks, setAllDecks] = useState([]);
   const [selectedDeck, setSelectedDeck] = useState({});
-  const userId = cookies.userCookie?.id;
+  const userId = cookies?.user?.id;
 
   const calculateAndUpdateTotalPrice = (deck) => {
     let totalPrice = 0;
@@ -58,8 +58,12 @@ export const DeckProvider = ({ children }) => {
   };
 
   const fetchDecksForUser = useCallback(async () => {
+    if (!userId) {
+      console.error('No user ID found.');
+      return null;
+    }
     try {
-      const url = `${apiBase}/users/${userId}/decks`;
+      const url = `${apiBase}/${userId}/decks`;
       return await fetchWrapper(url, 'GET');
     } catch (error) {
       console.error(`Failed to fetch decks for user: ${error.message}`);
@@ -71,8 +75,9 @@ export const DeckProvider = ({ children }) => {
     try {
       const userDecks = await fetchDecksForUser();
 
-      if (userDecks && userDecks.length > 0) {
-        const uniqueDecks = removeDuplicateDecks(userDecks);
+      if (userDecks.data && userDecks.data.length > 0) {
+        const uniqueDecks = removeDuplicateDecks(userDecks.data);
+        console.log('UNIQUE DECKS:', uniqueDecks);
         setAllDecks((prevDecks) =>
           removeDuplicateDecks([...prevDecks, ...uniqueDecks])
         );
@@ -132,8 +137,13 @@ export const DeckProvider = ({ children }) => {
         : [...newAllDecks, newDeckData];
     });
 
+    if (!userId) {
+      console.error('No user ID found.');
+      return;
+    }
+
     try {
-      const url = `${apiBase}/users/${userId}/decks/${selectedDeck._id}`; // Removed deckId from the URL
+      const url = `${apiBase}/${userId}/decks/${selectedDeck._id}`; // Removed deckId from the URL
       const bodyData = {
         ...newDeckData,
         deckId: newDeckData._id, // Included deckId in the body
@@ -146,19 +156,21 @@ export const DeckProvider = ({ children }) => {
 
   const createUserDeck = async (userId, newDeckInfo) => {
     try {
-      const url = `${apiBase}/newDeck/${userId}`;
-      const cards = newDeckInfo.cards
-        ? [formatCardData(newDeckInfo.cards)]
+      const url = `${apiBase}/${userId}/decks`;
+      const cards = Array.isArray(newDeckInfo.cards)
+        ? newDeckInfo.cards.map(formatCardData)
         : [];
       const data = await fetchWrapper(url, 'POST', {
-        // ...newDeckInfo,
-        cards: cards,
+        cards,
         userId,
         totalPrice: 0,
         description: newDeckInfo.description || '',
         name: newDeckInfo.name || '',
       });
-      setDeckData(data);
+      console.log('NEW DECK DATA:', data);
+      setDeckData(data.data);
+      setSelectedDeck(data.data);
+      setAllDecks((prevDecks) => [...prevDecks, data.data]);
     } catch (error) {
       console.error(`Failed to create a new deck: ${error.message}`);
     }
@@ -180,7 +192,9 @@ export const DeckProvider = ({ children }) => {
     }
 
     // Create a copy of the current state
-    const currentCards = [...(selectedDeck?.cards || [])];
+    const currentCards = Array.isArray(selectedDeck?.cards)
+      ? [...selectedDeck.cards]
+      : [];
     let currentTotalPrice = selectedDeck.totalPrice || 0;
 
     // Find the card index in the current state
@@ -212,17 +226,18 @@ export const DeckProvider = ({ children }) => {
     });
 
     try {
-      const url = `${apiBase}/users/${userId}/decks/${selectedDeck._id}`;
+      const url = `${apiBase}/${userId}/decks/${selectedDeck._id}`;
       const updatedDeck = await fetchWrapper(url, 'PUT', {
         cards: currentCards,
         totalPrice: currentTotalPrice,
       });
 
       setSelectedDeck({
-        ...updatedDeck,
+        ...updatedDeck.data,
+        cards: currentCards,
         totalPrice: currentTotalPrice,
       });
-      updateAndSyncDeck({ ...updatedDeck, totalPrice: currentTotalPrice });
+      updateAndSyncDeck({ ...updatedDeck.data, totalPrice: currentTotalPrice });
     } catch (error) {
       console.error(`Failed to update the deck: ${error.message}`);
     }
@@ -232,11 +247,16 @@ export const DeckProvider = ({ children }) => {
     const foundCard = selectedDeck?.cards?.find((item) => item.id === cardId);
     return foundCard?.quantity || 0;
   };
+  const getCardQuantity = (cardId) => {
+    const foundCard = selectedDeck?.cards?.find((item) => item.id === cardId);
+    return foundCard?.quantity || 0;
+  };
 
   const contextValue = {
     deckData,
     allDecks,
     selectedDeck,
+    userDecks: allDecks,
     totalQuantity: getQuantity,
     setSelectedDeck,
     addOneToDeck: (card) => addOrRemoveCard(card, true, false),
@@ -244,21 +264,18 @@ export const DeckProvider = ({ children }) => {
     getTotalCost: () =>
       selectedDeck?.cards?.reduce((acc, card) => acc + (card.cost || 0), 0) ||
       0,
-    getCardQuantity: (cardId) => {
-      const foundCard = selectedDeck?.cards?.find((item) => item.id === cardId);
-      return foundCard?.quantity || 0;
-    },
+    getCardQuantity: getCardQuantity,
     updateAndSyncDeck,
     fetchAllDecksForUser: fetchAndSetDecks,
   };
 
   useEffect(() => {
     console.log('DECKCONTEXT:', contextValue);
-    const userId = cookies.userCookie?.id;
+    const userId = cookies?.user?.id;
     if (userId) {
       fetchAndSetDecks();
     }
-  }, [cookies.userCookie?.id, fetchAndSetDecks]);
+  }, [cookies?.user?.id, fetchAndSetDecks]);
 
   return (
     <DeckContext.Provider value={contextValue}>{children}</DeckContext.Provider>
diff --git a/src/context/DeckContext/new.js b/src/context/DeckContext/new.js
deleted file mode 100644
index 59d5dfc..0000000
--- a/src/context/DeckContext/new.js
+++ /dev/null
@@ -1,645 +0,0 @@
-  // const FetchAllDeck = ({ setDeckData, deckData, setDeckOptions }) => {
-  //   useEffect(() => {
-
-  //   return null;
-  // };
-
-  // const fetchUserDeck = useCallback(
-  //   async (userId) => {
-  //     setLoading(true);
-  //     setError(null);
-  //     try {
-  //       const response = await fetch(
-  //         `${process.env.REACT_APP_SERVER}/api/decks/userDeck/${userId}`
-  //       );
-
-  //       if (!response.ok) {
-  //         if (response.status === 404) {
-  //           return createUserDeck(userId);
-  //         } else if (response.status === 500) {
-  //           setError('An unexpected error occurred. Please try again later.');
-  //         } else {
-  //           throw new Error(`HTTP error! status: ${response.status}`);
-  //         }
-  //       } else {
-  //         const data = await response.json();
-  //         console.log('DECKLIST EXISTS:', data);
-  //         setCookie('deck', Array.isArray(data.deck) ? data.deck : [], {
-  //           path: '/',
-  //         });
-  //         setDeckDataAndCookie(
-  //           'deck',
-  //           Array.isArray(data.deck) ? data.deck : [],
-  //           {
-  //             path: '/',
-  //           }
-  //         );
-  //         setLoading(false);
-  //         return data;
-  //       }
-
-  //       // if (data && data.deck) {
-  //       //   // ...existing code to update deckData
-  //       //   // New code to update allDecks
-  //       //   const updatedAllDecks = allDecks.map((deck) => {
-  //       //     if (deck.creatorId === userId) {
-  //       //       return { ...deck, decks: data };
-  //       //     }
-  //       //     return deck;
-  //       //   });
-  //       //   setAllDecks(updatedAllDecks);
-  //       // }
-  //     } catch (error) {
-  //       setError(error.message);
-  //       setLoading(false);
-  //     }
-  //   },
-  //   [setCookie]
-  // );
-
-  // useEffect(() => {
-  //   if (userId && typeof userId === 'string') {
-  //     fetchUserDeck(userId).then((data) => {
-  //       if (data && data.deck) {
-  //         setDeckDataAndCookie(data);
-  //       } else {
-  //         console.error('Deck data was not retrieved for user', userId);
-  //       }
-  //     });
-  //   }
-  // }, [userId, fetchUserDeck]);
-
-  import React, {
-    createContext,
-    useState,
-    useEffect,
-    useCallback,
-    useContext,
-  } from 'react';
-  import { useCookies } from 'react-cookie';
-  import { useCardStore } from '../CardContext/CardStore';
-  
-  export const DeckContext = createContext(null);
-  
-  const apiBase = `${process.env.REACT_APP_SERVER}/api/decks`;
-  
-  const fetchWrapper = async (url, method, body = null) => {
-    const options = {
-      method,
-      headers: { 'Content-Type': 'application/json' },
-      ...(body && { body: JSON.stringify(body) }),
-    };
-    const response = await fetch(url, options);
-    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-    return response.json();
-  };
-  
-  const removeDuplicateDecks = (decks) => {
-    const uniqueDecks = {};
-    decks.forEach((deck) => (uniqueDecks[deck._id] = deck));
-    return Object.values(uniqueDecks);
-  };
-  
-  export const DeckProvider = ({ children }) => {
-    const { getCardData } = useCardStore();
-    const [cookies, setCookie] = useCookies(['userCookie']);
-    const [deckData, setDeckData] = useState({});
-    const [allDecks, setAllDecks] = useState([]);
-    const [selectedDeck, setSelectedDeck] = useState({});
-    const userId = cookies.userCookie?.id;
-  
-    // Helper Functions
-    const setDeckDataAndCookie = useCallback(
-      (newDeckData) => {
-        setDeckData(newDeckData);
-        setCookie('deckData', newDeckData, { path: '/' });
-      },
-      [setCookie]
-    );
-  
-    const filterUserDecks = useCallback(
-      (decks) => decks.filter((deck) => deck.userId === userId),
-      [userId]
-    );
-  
-    const fetchAndSetDecks = useCallback(async () => {
-      const url = `${apiBase}/users/${userId}/decks`;
-      const fetchedDecks = await fetchWrapper(url, 'GET');
-      const userDecks = filterUserDecks(fetchedDecks);
-      const uniqueDecks = removeDuplicateDecks(userDecks);
-  
-      setAllDecks((prevDecks) =>
-        removeDuplicateDecks([...prevDecks, ...uniqueDecks])
-      );
-      setDeckDataAndCookie(uniqueDecks[0]);
-    }, [userId, setAllDecks, setDeckDataAndCookie, filterUserDecks]);
-  
-    useEffect(() => {
-      if (userId) fetchAndSetDecks();
-    }, [userId, fetchAndSetDecks]);
-  
-    const fetchAllDecksForUser = useCallback(
-      async (userId) => {
-        // Fetch the initial set of decks
-        const initialDecks = await fetchAndSetDecks(
-          apiBase2,
-          userId,
-          setAllDecks,
-          setDeckDataAndCookie
-        );
-        if (initialDecks === null) {
-          const shouldCreateDeck = window.confirm(
-            'No decks found. Would you like to create a new one?'
-          );
-          if (shouldCreateDeck) {
-            const deckName = prompt('Enter the deck name:');
-            const deckDescription = prompt('Enter the deck description:');
-            await createUserDeck(userId, {
-              name: deckName,
-              description: deckDescription,
-            });
-          }
-          return;
-        }
-  
-        const fetchCount = initialDecks?.length || 0;
-        for (let i = 0; i < fetchCount; i++) {
-          await new Promise((res) => setTimeout(res, 1000));
-          await fetchAndSetDecks(
-            apiBase1,
-            userId,
-            setAllDecks,
-            setDeckDataAndCookie
-          );
-        }
-      },
-      [setAllDecks, setDeckDataAndCookie]
-    );
-  
-    const updateDeck = (newDeckData) => {
-      setDeckDataAndCookie(newDeckData);
-      setDeckData(newDeckData);
-    };
-  
-    const updateAndSyncDeck = async (newDeckData) => {
-      updateDeck(newDeckData);
-  
-      setAllDecks((prevDecks) => {
-        const newAllDecks = prevDecks.map((deck) =>
-          deck._id === newDeckData._id ? newDeckData : deck
-        );
-        return prevDecks.some((deck) => deck._id === newDeckData._id)
-          ? newAllDecks
-          : [...newAllDecks, newDeckData];
-      });
-  
-      try {
-        const url = `${process.env.REACT_APP_SERVER}/api/users/${userId}/decks`;
-        await fetchWrapper(
-          url,
-          'PUT',
-          formatDeckData(newDeckData._id, newDeckData.cards)
-        );
-      } catch (error) {
-        console.error(`Failed to update deck in backend: ${error.message}`);
-      }
-    };
-  
-    const formatDeckData = (deckId, updatedDeck) => {
-      return {
-        _id: deckId, // Changed "deckId" to "_id" to match the structure
-        userId: userId,
-        name: deckData.name, // assuming you have the name in your state
-        description: deckData.description, // assuming you have the description in your state
-        cards: updatedDeck.map((card) => formatCardData(card)),
-      };
-    };
-  
-    const formatCardData = (card) => ({
-      id: card.id,
-      ...Object.fromEntries(
-        [
-          'name',
-          'type',
-          'frameType',
-          'description',
-          'card_images',
-          'archetype',
-          'atk',
-          'def',
-          'level',
-          'race',
-          'attribute',
-          'quantity',
-        ].map((key) => [key, card[key] || null])
-      ),
-    });
-  
-    const addOrRemoveCard = async (card, isAdding) => {
-      try {
-        setDeckData((prevState) => {
-          const cardIndex = prevState.cards.findIndex(
-            (item) => item.id === card.id
-          );
-          let newCards = [...prevState.cards];
-  
-          if (cardIndex !== -1) {
-            newCards[cardIndex].quantity += isAdding ? 1 : -1;
-            if (newCards[cardIndex].quantity <= 0) {
-              newCards.splice(cardIndex, 1);
-            }
-          } else if (isAdding) {
-            newCards.push({ ...formatCardData(card), quantity: 1 });
-          }
-  
-          const newDeckData = { ...prevState, cards: newCards };
-          updateAndSyncDeck(newDeckData);
-          return newDeckData;
-        });
-      } catch (error) {
-        console.error(`Failed to modify the deck: ${error.message}`);
-      }
-    };
-  
-    const addOneToDeck = (card) => addOrRemoveCard(card, true);
-    const removeOneFromDeck = (cardId) => addOrRemoveCard({ id: cardId }, false);
-  
-    const createUserDeck = async (userId, newDeckInfo) => {
-      try {
-        const url = `${apiBase1}/newDeck/${userId}`;
-        const initialDeck = newDeckInfo.initialCard
-          ? [formatCardData(newDeckInfo.initialCard)]
-          : [];
-        const data = await fetchWrapper(url, 'POST', {
-          ...newDeckInfo,
-          cards: initialDeck,
-          userId,
-        });
-        updateDeck(data);
-      } catch (error) {
-        console.error(`Failed to create a new deck: ${error.message}`);
-      }
-    };
-  
-    // To get the quantity of a specific card in the deck
-    const getCardQuantity = (cardId) => {
-      // if (Array.isArray(deckData)) {
-      const card = deckData.cards?.find((item) => item.id === cardId);
-      // }
-  
-      return card?.quantity || 0;
-    };
-  
-    const getTotalCost = () =>
-      deckData.cards.reduce((acc, card) => acc + (card.cost || 0), 0);
-  
-    const value = {
-      deckData,
-      allDecks,
-      getCardQuantity,
-      addOneToDeck,
-      removeOneFromDeck,
-      getTotalCost, // Added
-      deleteFromDeck,
-      updateAndSyncDeck, // Added
-      selectedDeck, // Added
-      setSelectedDeck, // Added
-      fetchAllDecksForUser,
-      createUserDeck,
-    };
-  
-    useEffect(() => {
-      console.log('DECKCONTEXT:', value);
-      const userId = cookies.userCookie?.id;
-      if (userId) {
-        fetchAllDecksForUser(userId);
-      }
-    }, [fetchAllDecksForUser, cookies.userCookie]);
-  
-    return <DeckContext.Provider value={value}>{children}</DeckContext.Provider>;
-  };
-  
-  export const useDeckStore = () => {
-    const context = useContext(DeckContext);
-    if (!context)
-      throw new Error('useDeckStore must be used within a DeckProvider');
-    return context;
-  };
-  
-  // import React, {
-  //   createContext,
-  //   useState,
-  //   useEffect,
-  //   useCallback,
-  //   useContext,
-  // } from 'react';
-  // import { useCookies } from 'react-cookie';
-  // import { useCardStore } from '../CardContext/CardStore';
-  
-  // export const DeckContext = createContext(null);
-  
-  // const apiBase = `${process.env.REACT_APP_SERVER}/api/decks`;
-  
-  // const fetchWrapper = async (url, method, body = null) => {
-  //   const options = {
-  //     method,
-  //     headers: { 'Content-Type': 'application/json' },
-  //     ...(body && { body: JSON.stringify(body) }),
-  //   };
-  //   const response = await fetch(url, options);
-  //   if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-  //   return response.json();
-  // };
-  
-  // const removeDuplicateDecks = (decks) => {
-  //   const uniqueDecks = {};
-  //   decks.forEach((deck) => (uniqueDecks[deck._id] = deck));
-  //   return Object.values(uniqueDecks);
-  // };
-  
-  // export const DeckProvider = ({ children }) => {
-  //   const { getCardData } = useCardStore();
-  //   const [cookies, setCookie] = useCookies(['userCookie']);
-  //   const [deckData, setDeckData] = useState({});
-  //   const [allDecks, setAllDecks] = useState([]);
-  //   const [selectedDeck, setSelectedDeck] = useState({});
-  //   const userId = cookies.userCookie?.id;
-  
-  //   // Helper Functions
-  //   const setDeckDataAndCookie = useCallback(
-  //     (newDeckData) => {
-  //       setDeckData(newDeckData);
-  //       setCookie('deckData', newDeckData, { path: '/' });
-  //     },
-  //     [setCookie]
-  //   );
-  
-  //   const filterUserDecks = useCallback(
-  //     (decks) => decks.filter((deck) => deck.userId === userId),
-  //     [userId]
-  //   );
-  
-  //   const fetchAndSetDecks = useCallback(async () => {
-  //     const url = `${apiBase}/users/${userId}/decks`;
-  //     const fetchedDecks = await fetchWrapper(url, 'GET');
-  //     const userDecks = filterUserDecks(fetchedDecks);
-  //     const uniqueDecks = removeDuplicateDecks(userDecks);
-  
-  //     setAllDecks((prevDecks) =>
-  //       removeDuplicateDecks([...prevDecks, ...uniqueDecks])
-  //     );
-  //     setDeckDataAndCookie(uniqueDecks[0]);
-  //   }, [userId, setAllDecks, setDeckDataAndCookie, filterUserDecks]);
-  
-  //   useEffect(() => {
-  //     if (userId) fetchAndSetDecks();
-  //   }, [userId, fetchAndSetDecks]);
-  
-  //   const fetchAllDecksForUser = useCallback(
-  //     async (userId) => {
-  //       // Fetch the initial set of decks
-  //       const initialDecks = await fetchAndSetDecks(
-  //         apiBase2,
-  //         userId,
-  //         setAllDecks,
-  //         setDeckDataAndCookie
-  //       );
-  //       if (initialDecks === null) {
-  //         const shouldCreateDeck = window.confirm(
-  //           'No decks found. Would you like to create a new one?'
-  //         );
-  //         if (shouldCreateDeck) {
-  //           const deckName = prompt('Enter the deck name:');
-  //           const deckDescription = prompt('Enter the deck description:');
-  //           await createUserDeck(userId, {
-  //             name: deckName,
-  //             description: deckDescription,
-  //           });
-  //         }
-  //         return;
-  //       }
-  
-  //       const fetchCount = initialDecks?.length || 0;
-  //       for (let i = 0; i < fetchCount; i++) {
-  //         await new Promise((res) => setTimeout(res, 1000));
-  //         await fetchAndSetDecks(
-  //           apiBase1,
-  //           userId,
-  //           setAllDecks,
-  //           setDeckDataAndCookie
-  //         );
-  //       }
-  //     },
-  //     [setAllDecks, setDeckDataAndCookie]
-  //   );
-  
-  //   const updateAndSyncDeck = async (newDeckData) => {
-  //     // Update the deck locally
-  //     setDeckDataAndCookie(newDeckData); // Using the function to also set the cookie
-  
-  //     // Update in the global allDecks state
-  //     const existingDeck = allDecks.find((deck) => deck._id === newDeckData._id);
-  //     if (existingDeck) {
-  //       const newAllDecks = allDecks.map((deck) =>
-  //         deck._id === newDeckData._id ? newDeckData : deck
-  //       );
-  //       setAllDecks(newAllDecks);
-  //     } else {
-  //       setAllDecks((prevDecks) => [...prevDecks, newDeckData]);
-  //     }
-  
-  //     // Sync with the backend
-  //     try {
-  //       // Corrected the way to include `deckId` in the URL
-  //       const url = `${process.env.REACT_APP_SERVER}/api/users/${userId}/decks`;
-  //       await fetchWrapper(
-  //         url,
-  //         'PUT',
-  //         formatDeckData(newDeckData._id, newDeckData.cards)
-  //       );
-  //     } catch (error) {
-  //       console.error(`Failed to update deck in backend: ${error.message}`);
-  //     }
-  //   };
-  
-  //   // To formatdeckId
-  //   const formatDeckData = (deckId, updatedDeck) => {
-  //     return {
-  //       _id: deckId, // Changed "deckId" to "_id" to match the structure
-  //       userId: userId,
-  //       name: deckData.name, // assuming you have the name in your state
-  //       description: deckData.description, // assuming you have the description in your state
-  //       cards: updatedDeck.map((card) => formatCardData(card)),
-  //     };
-  //   };
-  
-  //   // To format card data before sending to backend
-  //   const formatCardData = (card) => {
-  //     return {
-  //       id: card.id,
-  //       name: card.name || null,
-  //       type: card.type || null,
-  //       frameType: card.frameType || null,
-  //       description: card.description || null,
-  //       card_images: card.card_images || null,
-  //       archetype: card.archetype || null,
-  //       atk: card.atk || null,
-  //       def: card.def || null,
-  //       level: card.level || null,
-  //       race: card.race || null,
-  //       attribute: card.attribute || null,
-  //       quantity: card.quantity || null,
-  //     };
-  //   };
-  
-  //   // To get the quantity of a specific card in the deck
-  //   const getCardQuantity = (cardId) => {
-  //     // if (Array.isArray(deckData)) {
-  //     const card = deckData.cards?.find((item) => item.id === cardId);
-  //     // }
-  
-  //     return card?.quantity || 0;
-  //   };
-  
-  //   // To add one card to the deck
-  //   // To add one card to the deck
-  //   const addOneToDeck = async (card) => {
-  //     try {
-  //       setDeckData((prevState) => {
-  //         if (!Array.isArray(prevState.cards)) {
-  //           console.error('deckData.cards is not an array.');
-  //           return prevState;
-  //         }
-  
-  //         const existingCard = prevState.cards.find(
-  //           (item) => item.id === card.id
-  //         );
-  //         let newCards;
-  
-  //         if (existingCard) {
-  //           existingCard.quantity += 1;
-  //           newCards = [...prevState.cards];
-  //         } else {
-  //           newCards = [
-  //             ...prevState.cards,
-  //             {
-  //               ...formatCardData(card),
-  //               quantity: 1,
-  //             },
-  //           ];
-  //         }
-  
-  //         const newDeckData = { ...prevState, cards: newCards };
-  //         // const newDeckData = { ...deckData }; // Take a copy of existing deckData
-  //         updateAndSyncDeck(newDeckData);
-  
-  //         // Update the cookie
-  //         setCookie('deckData', newDeckData, { path: '/' });
-  
-  //         return newDeckData;
-  //       });
-  
-  //       setAllDecks((prevState) => {
-  //         const updatedAllDecks = prevState.map((deck) => {
-  //           if (deck._id === deckData._id) {
-  //             return { ...deck, cards: deckData.cards }; // Assuming deckData.cards is updated
-  //           }
-  //           return deck;
-  //         });
-  //         return updatedAllDecks;
-  //       });
-  //     } catch (error) {
-  //       console.error(`Failed to add a card to the deck: ${error.message}`);
-  //     }
-  //   };
-  
-  //   const createUserDeck = async (userId, newDeckInfo) => {
-  //     try {
-  //       const { initialCard, ...rest } = newDeckInfo;
-  //       const url = `${apiBase1}/newDeck/${userId}`; // Modified this line to use apiBase
-  
-  //       const initialDeck = initialCard ? [formatCardData(initialCard)] : [];
-  
-  //       const data = await fetchWrapper(url, 'POST', {
-  //         ...rest,
-  //         cards: initialDeck,
-  //         userId,
-  //       });
-  
-  //       setDeckData(data);
-  //       updateAndSyncDeck(data);
-  //     } catch (error) {
-  //       console.error(`Failed to create a new deck: ${error.message}`);
-  //     }
-  //   };
-  
-  //   const removeOneFromDeck = async (cardId) => {
-  //     try {
-  //       const newDeckData = { ...deckData }; // Take a copy of existing deckData
-  //       const cardToRemove = newDeckData.cards?.find(
-  //         (item) => item.id === cardId
-  //       );
-  //       if (!cardToRemove) return;
-  //       cardToRemove.quantity -= 1;
-  
-  //       if (cardToRemove.quantity === 0) {
-  //         newDeckData.cards = newDeckData.cards.filter(
-  //           (item) => item.id !== cardId
-  //         );
-  //       }
-  
-  //       // Update and sync the deck
-  //       await updateAndSyncDeck(newDeckData);
-  //     } catch (error) {
-  //       console.error(`Failed to remove a card from the deck: ${error.message}`);
-  //     }
-  //   };
-  
-  //   // To delete a card entirely from the deck
-  //   const deleteFromDeck = async (cardId) => {
-  //     try {
-  //       const newDeck = deckData.cards.filter((item) => item.id !== cardId);
-  //       const updatedDeckData = await updateAndSyncDeck(deckData._id, newDeck);
-  //       setDeckData(updatedDeckData);
-  //     } catch (error) {
-  //       console.error(`Failed to delete a card from the deck: ${error.message}`);
-  //     }
-  //   };
-  
-  //   const getTotalCost = () => {
-  //     return deckData.cards.reduce((acc, card) => acc + (card.cost || 0), 0);
-  //   };
-  
-  //   const value = {
-  //     deckData,
-  //     allDecks,
-  //     getCardQuantity,
-  //     addOneToDeck,
-  //     removeOneFromDeck,
-  //     getTotalCost, // Added
-  //     deleteFromDeck,
-  //     updateAndSyncDeck, // Added
-  //     selectedDeck, // Added
-  //     setSelectedDeck, // Added
-  //     fetchAllDecksForUser,
-  //     createUserDeck,
-  //   };
-  
-  //   useEffect(() => {
-  //     console.log('DECKCONTEXT:', value);
-  //     const userId = cookies.userCookie?.id;
-  //     if (userId) {
-  //       fetchAllDecksForUser(userId);
-  //     }
-  //   }, [fetchAllDecksForUser, cookies.userCookie]);
-  
-  //   return <DeckContext.Provider value={value}>{children}</DeckContext.Provider>;
-  // };
-  
-  // export const useDeckStore = () => {
-  //   const context = useContext(DeckContext);
-  //   if (!context)
-  //     throw new Error('useDeckStore must be used within a DeckProvider');
-  //   return context;
-  // };
-  
\ No newline at end of file
diff --git a/src/context/Helpers.jsx b/src/context/Helpers.jsx
index 35365bd..e71198e 100644
--- a/src/context/Helpers.jsx
+++ b/src/context/Helpers.jsx
@@ -5,7 +5,10 @@ import { useCookies } from 'react-cookie';
 export const fetchWrapper = async (url, method, body = null) => {
   const options = {
     method,
-    headers: { 'Content-Type': 'application/json' },
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    },
   };
 
   if (body) {
@@ -24,26 +27,6 @@ export const fetchWrapper = async (url, method, body = null) => {
   }
 };
 
-// const fetchWrapper = async (url, method, body = null) => {
-//   const options = {
-//     method,
-//     headers: { 'Content-Type': 'application/json' },
-//     ...(body && { body: JSON.stringify(body) }),
-//   };
-//   const response = await fetch(url, options);
-//   if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-//   return await response.json();
-// };
-
-// const removeDuplicateCollections = (collections) => {
-//   const uniqueCollections = {};
-//   collections.forEach((collection) => {
-//     uniqueCollections[collection._id] = collection;
-//   });
-//   return Object.values(uniqueCollections);
-// };
-
-// Function to remove duplicate collections
 export const removeDuplicateCollections = (collections) => {
   const seen = new Set();
   return collections.filter((collection) => {
@@ -87,3 +70,48 @@ export const useUserId = () => {
 
   return userId;
 };
+
+const isEmpty = (obj) => {
+  return (
+    [Object, Array].includes((obj || {}).constructor) &&
+    !Object.entries(obj || {}).length
+  );
+};
+
+export const validateData = (data, eventName, functionName) => {
+  const dataType = typeof data || data.data || data.data.data || data.message;
+  console.log(
+    '----------------------------------------------------------------------------------------------------'
+  );
+  console.log(
+    `| [SUCCESS] Received data of type: ${dataType} in ${functionName} triggered by event: ${eventName}] |`
+  );
+  console.log(
+    '----------------------------------------------------------------------------------------------------'
+  );
+  if (data === null || data === undefined) {
+    console.log(
+      '----------------------------------------------------------------------------------------------------'
+    );
+    console.warn(
+      `[Warning] Received null or undefined data in ${functionName} triggered by event: ${eventName}`
+    );
+    console.log(
+      '----------------------------------------------------------------------------------------------------'
+    );
+    return false;
+  }
+  if (isEmpty(data) && isEmpty(data?.data) && isEmpty(data?.data?.data)) {
+    console.log(
+      '----------------------------------------------------------------------------------------------------'
+    );
+    console.error(
+      `[Error] Received empty data object or array in ${functionName} triggered by event: ${eventName}`
+    );
+    console.log(
+      '----------------------------------------------------------------------------------------------------'
+    );
+    return false;
+  }
+  return true;
+};
diff --git a/src/context/ModalContext/ModalContext.jsx b/src/context/ModalContext/ModalContext.jsx
index 67debe6..1657960 100644
--- a/src/context/ModalContext/ModalContext.jsx
+++ b/src/context/ModalContext/ModalContext.jsx
@@ -4,21 +4,27 @@ export const ModalContext = createContext();
 
 export const ModalProvider = ({ children }) => {
   const [modalContent, setModalContent] = useState(null);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(false);
 
-  const showModal = (content) => {
-    setModalContent(content);
-    setIsOpen(true);
+  const openModalWithCard = (card) => {
+    setModalContent(card);
+    setModalOpen(true);
   };
 
-  const hideModal = () => {
+  const closeModal = () => {
     setModalContent(null);
-    setIsOpen(false);
+    setModalOpen(false);
   };
 
   return (
     <ModalContext.Provider
-      value={{ showModal, hideModal, modalContent, isOpen }}
+      value={{
+        openModalWithCard,
+        closeModal,
+        modalContent,
+        isModalOpen,
+        setModalOpen,
+      }}
     >
       {children}
     </ModalContext.Provider>
diff --git a/src/context/PopoverContext/PopoverContext.jsx b/src/context/PopoverContext/PopoverContext.jsx
new file mode 100644
index 0000000..0204cd9
--- /dev/null
+++ b/src/context/PopoverContext/PopoverContext.jsx
@@ -0,0 +1,26 @@
+import React, { createContext, useState } from 'react';
+
+export const PopoverContext = createContext({
+  hoveredCard: null,
+  isPopoverOpen: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setHoveredCard: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setIsPopoverOpen: () => {},
+});
+
+export const PopoverProvider = ({ children }) => {
+  const [hoveredCard, setHoveredCard] = useState(null);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const value = {
+    hoveredCard,
+    isPopoverOpen,
+    setHoveredCard,
+    setIsPopoverOpen,
+  };
+
+  return (
+    <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>
+  );
+};
diff --git a/src/context/SideBarProvider.jsx b/src/context/SideBarProvider.jsx
index 64ddff9..dc310d2 100644
--- a/src/context/SideBarProvider.jsx
+++ b/src/context/SideBarProvider.jsx
@@ -4,7 +4,7 @@ const SidebarContext = createContext();
 
 export const SidebarProvider = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoggedIn, setisLoggedIn] = useState(false);
   const [sidebarBackgroundColor, setSidebarBackgroundColor] =
     useState('#FFFFFF');
   const [sidebarImage, setSidebarImage] = useState(null);
@@ -14,11 +14,11 @@ export const SidebarProvider = ({ children }) => {
   };
 
   const login = () => {
-    setIsLoggedIn(true);
+    setisLoggedIn(true);
   };
 
   const logout = () => {
-    setIsLoggedIn(false);
+    setisLoggedIn(false);
   };
 
   return (
diff --git a/src/context/SocketManager.jsx b/src/context/SocketManager.jsx
deleted file mode 100644
index 625efc8..0000000
--- a/src/context/SocketManager.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useEffect } from 'react';
-
-export const useSocketManager = (socket, eventHandlers) => {
-  useEffect(() => {
-    eventHandlers.forEach(({ event, handler }) => {
-      socket.on(event, handler);
-    });
-
-    return () => {
-      eventHandlers.forEach(({ event, handler }) => {
-        socket.off(event, handler);
-      });
-      socket.disconnect();
-    };
-  }, [socket, eventHandlers]);
-};
diff --git a/src/context/SocketProvider.jsx b/src/context/SocketProvider.jsx
index 9f2c688..f3d0953 100644
--- a/src/context/SocketProvider.jsx
+++ b/src/context/SocketProvider.jsx
@@ -9,10 +9,6 @@ import io from 'socket.io-client';
 
 const SocketContext = createContext();
 
-export const useSocket = () => {
-  return useContext(SocketContext);
-};
-
 export const SocketProvider = ({ children }) => {
   const [socket, setSocket] = useState(null);
 
@@ -34,3 +30,11 @@ export const SocketProvider = ({ children }) => {
     <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
   );
 };
+
+export const useSocketContext = () => {
+  const context = useContext(SocketContext);
+  if (context === undefined) {
+    throw new Error('useSocketContext must be used within a SocketProvider');
+  }
+  return context;
+};
diff --git a/src/context/UserContext/UserContext.js b/src/context/UserContext/UserContext.js
index 9d93e8d..2b462c4 100644
--- a/src/context/UserContext/UserContext.js
+++ b/src/context/UserContext/UserContext.js
@@ -1,14 +1,20 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+} from 'react';
 import { useCookies } from 'react-cookie';
 import { useAuthContext } from '../hooks/auth';
+import { useCollectionStore } from '../CollectionContext/CollectionContext';
 
 const UserContext = createContext();
 
 export const UserProvider = ({ children }) => {
   const [cookies, setCookie] = useCookies(['userCookie']);
-  // const [user, setUser] = useState(null);
   const [isCronJobTriggered, setIsCronJobTriggered] = useState(false);
-
+  const [allCollections, setAllCollections] = useState([]);
   const { user, setUser } = useAuthContext(); // Use the useAuthContext hook
 
   const triggerCronJob = async () => {
@@ -21,13 +27,11 @@ export const UserProvider = ({ children }) => {
     if (userID) {
       const updatedUser = { userID, username };
       setUser(updatedUser);
-      // setAuthUser(updatedUser); // Update the user in AuthContext as well
     }
   }, [cookies]);
 
   const updateUser = (userData) => {
     setUser(userData);
-    // setAuthUser(userData); // Update the user in AuthContext
     setCookie('userCookie', userData, { path: '/' });
     console.log('User Data Sent to Server and Cookie Updated:', userData);
   };
@@ -37,6 +41,7 @@ export const UserProvider = ({ children }) => {
       value={{
         user,
         setUser,
+        allCollections,
         setCookie,
         updateUser,
         triggerCronJob,
diff --git a/src/context/UtilityContext/UtilityContext.jsx b/src/context/UtilityContext/UtilityContext.jsx
index cce54bc..228a36f 100644
--- a/src/context/UtilityContext/UtilityContext.jsx
+++ b/src/context/UtilityContext/UtilityContext.jsx
@@ -1,93 +1,22 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import axios from 'axios'; // Import Axios or your preferred HTTP library
-// import { fetchWrapper } from '../CollectionContext/exampleImport';
-
-const BASE_API_URL = `${process.env.REACT_APP_SERVER}/api`;
 
 const UtilityContext = createContext();
 
 const UtilityProvider = ({ children }) => {
-  const [isContextLoading, setIsContextLoading] = useState(true);
-  const [directedResponses, setDirectedResponses] = useState([]); // Initialize as an empty array
-  const fetchWrapper = async (url, method, body = null) => {
-    try {
-      const options = {
-        method,
-        headers: { 'Content-Type': 'application/json' },
-        ...(body && { body: JSON.stringify(body) }),
-      };
-      const response = await fetch(url, options);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      return await response.json();
-    } catch (error) {
-      if (error.message === 'Failed to fetch') {
-        console.error('Network error: ', error);
-        throw new Error(
-          'Network error. Please check your connection and try again.'
-        );
-      }
-      throw error;
-    }
-  };
-
-  const fetchDirectedResponses = async () => {
-    try {
-      setIsContextLoading(true);
-      const data = await fetchWrapper(
-        `${BASE_API_URL}/directedResponses`,
-        'GET'
-      );
-
-      if (Array.isArray(data)) {
-        setDirectedResponses(data);
-      } else {
-        console.error('Fetched data is not an array:', data);
-        setDirectedResponses([]);
-      }
-
-      console.log('Directed Responses:', data);
-    } catch (error) {
-      console.error('Error fetching directed responses:', error);
-      alert(`Failed to fetch directed responses. ${error.message}`);
-      setDirectedResponses([]);
-    } finally {
-      setIsContextLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // Fetch user data, validate token, etc.
-        // ...
-        // Once done, set loading to false
-        setIsContextLoading(false);
-      } catch (error) {
-        console.error('An error occurred:', error);
-      } finally {
-        setIsContextLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
+  const [isLoading, setIsLoading] = useState(true);
 
   const contextValue = {
-    isLoading: isContextLoading,
-    setIsContextLoading,
-    fetchDirectedResponses,
-    directedResponses: directedResponses,
+    isLoading,
+    setIsLoading,
   };
 
   useEffect(() => {
-    if (isContextLoading) {
+    if (isLoading) {
       console.log('Loading...');
     } else {
       console.log('Finished Loading', contextValue);
     }
-  }, [isContextLoading]);
+  }, [setIsLoading]);
 
   useEffect(() => {
     console.log('UTILITY CONTEXT VALUE:', contextValue);
diff --git a/src/context/cleanUp/ApiServiceProvider.jsx b/src/context/cleanUp/ApiServiceProvider.jsx
deleted file mode 100644
index 4105ddc..0000000
--- a/src/context/cleanUp/ApiServiceProvider.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-// // import { useCallback, useMemo } from 'react';
-// // import axios from 'axios';
-// // import { useCookies } from 'react-cookie';
-// // import { useCombinedContext } from './CombinedProvider';
-// // import useSocket from './SocketProvider';
-
-// // export const useApiServiceProvider = () => {
-// //   const BASE_API_URL_CHARTS = `${process.env.REACT_APP_SERVER}/other/chart-data`;
-// //   const { userCookie } = useCookies(['userCookie']);
-// //   const { userId } = userCookie || {};
-// //   const { setState, setChartData, setIsCronJobTriggered } =
-// //     useCombinedContext();
-// //   const socket = useSocket();
-
-// //   const fetchData = useCallback(async () => {
-// //     if (!userId) return;
-
-// //     setState((prevState) => ({ ...prevState, isLoading: true, error: null }));
-
-// //     try {
-// //       const response = await axios.get(
-// //         `${BASE_API_URL_CHARTS}/charts/${userId}`
-// //       );
-// //       setChartData(response?.data);
-// //     } catch (error) {
-// //       console.error('Error fetching updated data:', error);
-// //       setState((prevState) => ({ ...prevState, error: 'Error fetching data' }));
-// //     } finally {
-// //       setState((prevState) => ({ ...prevState, isLoading: false }));
-// //     }
-// //   }, [userId, setChartData, setState]); // Added `setState` to dependencies
-
-// //   const updateServerData = useCallback(
-// //     async (updatedData) => {
-// //       if (!userId) return;
-
-// //       const uniqueData = useMemo(
-// //         () =>
-// //           Array.from(
-// //             new Set(
-// //               (updatedData || [])
-// //                 .flatMap((obj) => obj.data || [])
-// //                 .map(JSON.stringify)
-// //             )
-// //           ).map(JSON.parse),
-// //         [updatedData]
-// //       );
-
-// //       try {
-// //         const chartId = updatedData?._id || 'all';
-// //         const name = updatedData?.name || 'all';
-
-// //         const response = await axios.post(
-// //           `${BASE_API_URL_CHARTS}/charts/${userId}/${chartId}/updateChart`,
-// //           { userId, chartId, name, datasets: uniqueData }
-// //         );
-
-// //         socket.emit('RECEIVE_C2S_CHART_UPDATE', {
-// //           userId,
-// //           chartId,
-// //           name,
-// //           datasets: uniqueData,
-// //         });
-
-// //         setState((prevState) => ({ ...prevState, chartData: uniqueData }));
-// //         setIsCronJobTriggered(true);
-// //       } catch (error) {
-// //         console.error('Error updating server data:', error);
-// //       }
-// //     },
-// //     [userId, setIsCronJobTriggered, setState, BASE_API_URL_CHARTS, socket]
-// //   );
-
-// //   return { fetchData, updateServerData };
-// // };
-// import React, { createContext, useContext, useCallback } from 'react';
-// import axios from 'axios';
-
-// export const ApiContext = createContext();
-
-// export const ApiServiceProvider = ({ children }) => {
-//   const BASE_API_URL = `${process.env.REACT_APP_SERVER}/other/cron`;
-
-//   const getRequest = useCallback(async (endpoint) => {
-//     try {
-//       const response = await axios.get(`${BASE_API_URL}/${endpoint}`);
-//       return response.data;
-//     } catch (error) {
-//       console.error(`GET Error: ${error}`);
-//       throw error;
-//     }
-//   }, []);
-
-//   const postRequest = useCallback(async (endpoint, data) => {
-//     try {
-//       const response = await axios.post(`${BASE_API_URL}/${endpoint}`, data);
-//       return response.data;
-//     } catch (error) {
-//       console.error(`POST Error: ${error}`);
-//       throw error;
-//     }
-//   }, []);
-
-//   const putRequest = useCallback(async (endpoint, data) => {
-//     try {
-//       const response = await axios.put(`${BASE_API_URL}/${endpoint}`, data);
-//       return response.data;
-//     } catch (error) {
-//       console.error(`PUT Error: ${error}`);
-//       throw error;
-//     }
-//   }, []);
-
-//   const deleteRequest = useCallback(async (endpoint) => {
-//     try {
-//       const response = await axios.delete(`${BASE_API_URL}/${endpoint}`);
-//       return response.data;
-//     } catch (error) {
-//       console.error(`DELETE Error: ${error}`);
-//       throw error;
-//     }
-//   }, []);
-
-//   return (
-//     <ApiContext.Provider
-//       value={{ getRequest, postRequest, putRequest, deleteRequest }}
-//     >
-//       {children}
-//     </ApiContext.Provider>
-//   );
-// };
-
-// export const useApiService = () => {
-//   const context = useContext(ApiContext);
-//   if (!context) {
-//     throw new Error('useApiService must be used within an ApiServiceProvider');
-//   }
-//   return context;
-// };
diff --git a/src/context/cleanUp/CombinedFetcher.jsx b/src/context/cleanUp/CombinedFetcher.jsx
deleted file mode 100644
index 0cc21ae..0000000
--- a/src/context/cleanUp/CombinedFetcher.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import axios from 'axios';
-const BASE_API_URL_CRON = `${process.env.REACT_APP_SERVER}/other/cron`;
-const BASE_API_URL_CHARTS = `${process.env.REACT_APP_SERVER}/other/chart-data`;
-
-export const fetchFromAPI = async (endpoint) => {
-  try {
-    return await axios.get(`${BASE_API_URL_CRON}/${endpoint}`);
-  } catch (error) {
-    console.error(`Error in request to ${endpoint}:`, error);
-    throw error;
-  }
-};
-
-export const fetchDataForUser = async (userId) => {
-  try {
-    const response = await axios.get(`${BASE_API_URL_CHARTS}/charts/${userId}`);
-    return response?.data;
-  } catch (error) {
-    console.error('Error fetching updated data:', error);
-    throw error;
-  }
-};
-
-export const updateServerDataForUser = async (userId, updatedData, io) => {
-  try {
-    const chartId = updatedData?._id || 'all';
-    const name = updatedData?.name || 'all';
-    const uniqueData = Array.from(
-      new Set(
-        (updatedData || []).flatMap((obj) => obj.data || []).map(JSON.stringify)
-      )
-    ).map(JSON.parse);
-
-    await axios.post(
-      `${BASE_API_URL_CHARTS}/charts/${userId}/${chartId}/updateChart`,
-      { userId, chartId, name, datasets: uniqueData }
-    );
-
-    io.emit('RECEIVE_C2S_CHART_UPDATE', {
-      userId,
-      chartId,
-      name,
-      datasets: uniqueData,
-    });
-    return uniqueData;
-  } catch (error) {
-    console.error('Error updating server data:', error);
-    throw error;
-  }
-};
diff --git a/src/context/cleanUp/SocketActions.jsx b/src/context/cleanUp/SocketActions.jsx
deleted file mode 100644
index 60d8a7f..0000000
--- a/src/context/cleanUp/SocketActions.jsx
+++ /dev/null
@@ -1,171 +0,0 @@
-// import React, {
-//   createContext,
-//   useContext,
-//   useCallback,
-//   useEffect,
-//   useMemo,
-//   useState,
-// } from 'react';
-// import { useSocket } from '../SocketProvider';
-
-// const SocketActionsContext = createContext();
-
-// export const useSocketActions = () => {
-//   return useContext(SocketActionsContext);
-// };
-// const initialState = {
-//   chartData: {},
-//   isLoading: false,
-//   data: {},
-//   cronTriggerTimestamps: [],
-//   collectionData: [],
-//   deckData: [],
-//   allData: [],
-//   allUpdatedPrices: [],
-//   allItemTypeData: {},
-//   error: null,
-//   prices: {
-//     totalCard: 0,
-//     updated: 0,
-//     allUpdated: [],
-//     totalDeck: 0,
-//     totalCollection: 0,
-//   },
-//   cronData: {}, // Added cronData to initialState as it is referred in your code
-//   isDelaying: false, // Added isDelaying to initialState as it is referred in your code
-//   isCronJobTriggered: false, // Added isCronJobTriggered to initialState as it is referred in your code
-// };
-
-// export const SocketActionsProvider = ({ children }) => {
-//   const socket = useSocket();
-//   const [receivedMessage, setReceivedMessage] = useState(null);
-//   // const [chartData, setChartData] = useState();
-//   const [collectionData, setCollectionData] = useState();
-
-//   const [state, setState] = useState(initialState);
-//   /**
-//    * Custom hook to manage socket events
-//   //  * @param {Socket} socket - the socket.io client socket
-//   //  * @param {Array} events - array of event objects containing `event` and `handler` properties
-//    */
-//   // const updateStateProperty = useCallback((property, value) => {
-//   //   setState((prevState) => ({ ...prevState, [property]: value }));
-//   // }, []);
-//   // const setChartData = useCallback((newChartData) => {
-//   //   setState((prevState) => ({ ...prevState, chartData: newChartData }));
-//   // }, []);
-//   // const setCollectionData = useCallback((newCollectionData) => {
-//   //   setState((prevState) => ({
-//   //     ...prevState,
-//   //     collectionData: newCollectionData,
-//   //   }));
-//   // }, []);
-//   const sendMessage = useCallback(
-//     (message) => {
-//       if (socket) {
-//         console.log('Sending message:', message);
-//         const data = message;
-//         // socket.emit('connection');
-//         socket.emit('MESSAGE_FROM_CLIENT', data);
-//       } else {
-//         console.error('Socket is not connected!');
-//       }
-//     },
-//     [socket]
-//   );
-
-//   const receiveMessage = useCallback((message) => {
-//     console.log('Received message:', message);
-//     setReceivedMessage(message);
-//     // handleHelloReply;
-//     // You might perform additional actions upon receiving a message here.
-//   }, []);
-
-//   // const handleRequestCollectionData = useCallback(() => {
-//   //   if (socket) socket.emit('EXISTING_COLLECTION_DATA', {});
-//   // }, [socket]);
-
-//   // const handleExistingCollectionData = (data) => {
-//   //   console.log('Received existing collection data:', data.data);
-//   //   setCollectionData(data.data);
-//   // };
-
-//   // Attach the event listener
-//   // socket.on('SEND_S2C_EXISTING_COLLECTION', handleExistingCollectionData);
-//   // const handleExistingChartData = useCallback(
-//   //   (existingChartData) => {
-//   //     setChartData(existingChartData);
-//   //   },
-//   //   [setChartData]
-//   // );
-
-//   // const handleUpdateChartData = useCallback((data) => {
-//   //   setState((prevState) => ({
-//   //     ...prevState,
-//   //     chartData: [...prevState.chartData, ...data],
-//   //   }));
-//   // }, []);
-
-//   const handleUpdateCollectionData = useCallback((updatedCollectionData) => {
-//     setState((prevState) => ({
-//       ...prevState,
-//       collectionData: updatedCollectionData,
-//     }));
-//   }, []);
-
-//   // const handleDataUpdate = useCallback((dataUpdate) => {
-//   //   console.log('HANDLING DATA UPDATE:', dataUpdate);
-//   //   const { userId, chartId, name, datasets } = dataUpdate;
-//   //   socket.emit('SEND_C2S_CHART_UPDATE', {
-//   //     data: { userId, chartId, name, datasets },
-//   //   });
-//   // }, []);
-
-//   // const handleS2CChartUpdate = useCallback((s2cUpdate) => {
-//   //   console.log('S2C UPDATE:', s2cUpdate);
-//   //   socket.emit('RECEIVE_C2C_CHART_UPDATE', s2cUpdate);
-//   // }, []);
-
-//   // const handleNewChartData = useCallback((newData) => {
-//   //   setState((prevState) => ({
-//   //     ...prevState,
-//   //     chartData: [...prevState.chartData, ...newData],
-//   //   }));
-//   // }, []);
-
-//   // useEffect(() => {
-//   //   if (!socket) return;
-
-//   //   const handleNewChartData = (newData) => {
-//   //     setState((prevState) => ({
-//   //       ...prevState,
-//   //       chartData: [...prevState.chartData, ...newData],
-//   //     }));
-//   //   };
-
-//   //   socket.on('NEW_CHART_DATA', handleNewChartData);
-
-//   //   return () => {
-//   //     socket.off('NEW_CHART_DATA', handleNewChartData);
-//   //   };
-//   // }, [socket]);
-
-//   return (
-//     <SocketActionsContext.Provider
-//       value={{
-//         sendMessage,
-//         // handleRequestCollectionData,
-//         receiveMessage,
-//         // handleExistingCollectionData,
-//         // handleExistingChartData,
-//         // handleExistingCollectionData,
-//         // handleUpdateChartData,
-//         // handleUpdateCollectionData,
-//         // handleDataUpdate,
-//         // handleS2CChartUpdate,
-//       }}
-//     >
-//       {children}
-//     </SocketActionsContext.Provider>
-//   );
-// };
diff --git a/src/context/cleanUp/SocketHandler.js b/src/context/cleanUp/SocketHandler.js
deleted file mode 100644
index 6f9431f..0000000
--- a/src/context/cleanUp/SocketHandler.js
+++ /dev/null
@@ -1,115 +0,0 @@
-// import React, { createContext, useCallback, useEffect, useState } from 'react';
-// import io from 'socket.io-client';
-
-// const SocketContext = createContext();
-
-// const SocketHandler = ({ children }) => {
-// 	const { userCookie } = useCookies(['userCookie']);
-//   const [state, setState] = useState(initialState);
-//   const userId = userCookie?.id;
-
-//   // const { fetchData, updateServerData } = useApiServiceProvider();
-//   const updateStateProperty = useCallback((property, value) => {
-//     setState((prevState) => ({ ...prevState, [property]: value }));
-//   }, []);
-//   const setChartData = useCallback((newChartData) => {
-//     setState((prevState) => ({ ...prevState, chartData: newChartData }));
-//   }, []);
-//   const setCollectionData = useCallback((newCollectionData) => {
-//     setState((prevState) => ({
-//       ...prevState,
-//       collectionData: newCollectionData,
-//     }));
-//   }, []);
-//   const handleExistingCollectionData = useCallback(
-//     (existingCollectionData) => {
-//       setCollectionData(existingCollectionData);
-//     },
-//     [setChartData]
-//   );
-
-//   const handleExistingChartData = useCallback(
-//     (existingChartData) => {
-//       setChartData(existingChartData);
-//     },
-//     io.emit('SEND_C2S_CHART_UPDATE', {
-//       data: { data: existingChartData },
-//     }),
-//     [setChartData]
-//   );
-
-//   const handleUpdateChartData = useCallback((data) => {
-//     setState((prevState) => ({
-//       ...prevState,
-//       chartData: [...prevState.chartData, ...data],
-//     }));
-//   }, []);
-
-//   const handleUpdateCollectionData = useCallback((updatedCollectionData) => {
-//     setState((prevState) => ({
-//       ...prevState,
-//       collectionData: updatedCollectionData,
-//     }));
-//   }, []);
-
-//   const handleDataUpdate = useCallback((dataUpdate) => {
-//     console.log('HANDLING DATA UPDATE:', dataUpdate);
-//     const { userId, chartId, name, datasets } = dataUpdate;
-
-//     io.emit('SEND_C2S_CHART_UPDATE', {
-//       data: { userId, chartId, name, datasets },
-//     });
-//   }, []);
-
-//   const handleReturnValue = useCallback((returnValue) => {
-//     // Logic to handle 'returnvalue' event
-//     // Example: Maybe update a state or log to console
-//   }, []);
-
-//   const handleAllItemsUpdated = useCallback((updatedItems) => {
-//     state.setAllItems(updatedItems);
-//     // Additional logic as needed
-//   }, []);
-
-//   const handleUpdateError = useCallback((errorInfo) => {
-//     // Logic to handle errors during the update
-//     // E.g., show a notification to the user
-//   }, []);
-
-//   const handleS2CChartUpdate = useCallback((s2cUpdate) => {
-//     console.log('S2C UPDATE:', s2cUpdate);
-//     io.emit('RECEIVE_C2C_CHART_UPDATE', (s2cUpdate) => {
-//       console.log('S2C UPDATE:', s2cUpdate);
-//     });
-//   }, []);
-// };
-
-// const value = {
-// 	handleExistingCollectionData,
-// 	handleExistingChartData,
-// 	handleUpdateChartData,
-// 	handleUpdateCollectionData,
-// 	handleDataUpdate,
-// 	handleReturnValue,
-// 	handleAllItemsUpdated,
-// 	handleUpdateError,
-// 	handleS2CChartUpdate
-// };
-
-// return (
-// 	<SocketContext.Provider value={value}>
-// 		{children}
-// 	</SocketContext.Provider>
-// );
-// };
-
-// // 3. Export the provider and a custom hook to access the context
-// export const useSocket = () => {
-//   const context = useContext(SocketContext);
-//   if (!context) {
-//     throw new Error("useSocket must be used within a SocketProvider");
-//   }
-//   return context;
-// };
-
-// export { SocketProvider };
diff --git a/src/context/cleanUp/useSocketEvent.js b/src/context/cleanUp/useSocketEvent.js
deleted file mode 100644
index 6bc4cb3..0000000
--- a/src/context/cleanUp/useSocketEvent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// useSocketEvent.js
-import { useEffect } from 'react';
-
-const useSocketEvent = (socket, event, handler) => {
-  useEffect(() => {
-    if (!socket) return;
-
-    socket.on(event, handler);
-
-    return () => {
-      socket.off(event, handler);
-    };
-  }, [socket, event, handler]);
-};
-
-export default useSocketEvent;
diff --git a/src/context/cleanUp/useUpdateChartData.jsx b/src/context/cleanUp/useUpdateChartData.jsx
deleted file mode 100644
index 9e1d67c..0000000
--- a/src/context/cleanUp/useUpdateChartData.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// import { useCallback, useEffect } from 'react';
-// import moment from 'moment';
-// import { useCollectionStore } from './hooks/collection';
-// import { useCombinedContext } from './CombinedProvider';
-
-// const transformChartData = (chartData) => {
-//   let pointsArray = [];
-
-//   if (Array.isArray(chartData?.datasets)) {
-//     chartData?.datasets.forEach((dataset) => {
-//       dataset.data?.forEach((dataEntry) => {
-//         const { x, y } = dataEntry.xy;
-//         if (x && y !== undefined) {
-//           pointsArray.push(dataEntry.xy);
-//         }
-//       });
-//     });
-//   } else {
-//     console.error(
-//       'Expected chartData.datasets to be an array, but got:',
-//       chartData
-//     );
-//   }
-
-//   return pointsArray;
-// };
-// const useUpdateChartData = () => {
-//   const { selectedCollection } = useCollectionStore() || {};
-//   const {
-//     updateServerData,
-//     isCronJobTriggered,
-//     setIsCronJobTriggered,
-//     chartData,
-//   } = useCombinedContext() || {};
-
-//   const transformedData = transformChartData(selectedCollection?.chartData);
-
-//   // const createDataset = (label, priceData) => ({
-//   //   name: label,
-//   //   color: 'blue',
-//   //   data: priceData?.map(({ x, y }) => ({ x, y })),
-//   // });
-
-//   // const newDataPoint = useCallback(() => {
-//   //   return {
-//   //     x: moment().format('YYYY-MM-DD HH:mm'),
-//   //     y: totalCost ? parseFloat(totalCost).toFixed(2) : null,
-//   //   };
-//   // }, [totalCost]);
-
-//   // const updateChart = useCallback(() => {
-//   //   // let updatedDatasets = [];
-//   //   const updatedDatasets = selectedCollection?.chartData?.datasets || [];
-//   //   if (updatedDatasets.length) {
-//   //     updateServerData(updatedDatasets);
-//   //   }
-//   //   // if (updatedDatasets.length) {
-//   //   //   updateServerData(updatedDatasets);
-//   //   // }
-//   // }, []);
-
-//   useEffect(() => {
-//     if (isCronJobTriggered) {
-//       // updateChart();
-//       setIsCronJobTriggered(false);
-//     }
-//   }, [isCronJobTriggered, setIsCronJobTriggered]);
-//   console.log('transformedData', transformedData);
-//   return { datasets: transformedData };
-// };
-
-// export default useUpdateChartData;
diff --git a/src/context/hooks/collection.jsx b/src/context/hooks/collection.jsx
deleted file mode 100644
index 4220c90..0000000
--- a/src/context/hooks/collection.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// useCollectionStore.js
-import { useContext } from 'react';
-import { CollectionContext } from '../CollectionContext/CollectionContext';
-
-export const useCollectionStore = () => {
-  const context = useContext(CollectionContext);
-  if (!context) {
-    throw new Error(
-      'useCollectionStore must be used within a CollectionProvider'
-    );
-  }
-  return context;
-};
diff --git a/src/context/hooks/useAppContext.jsx b/src/context/hooks/useAppContext.jsx
new file mode 100644
index 0000000..dde49a6
--- /dev/null
+++ b/src/context/hooks/useAppContext.jsx
@@ -0,0 +1,16 @@
+// customHooks/useAppContext.js
+import { useContext } from 'react';
+import { AppContext } from '../AppContext/AppContextProvider';
+
+const useAppContext = () => {
+  const context = useContext(AppContext);
+
+  if (!context) {
+    console.error("The component isn't wrapped with AppContextProvider");
+    return {}; // return an empty object
+  }
+
+  return context; // return context as an object
+};
+
+export default useAppContext;
diff --git a/src/context/hooks/useDialog.jsx b/src/context/hooks/useDialog.jsx
new file mode 100644
index 0000000..5208849
--- /dev/null
+++ b/src/context/hooks/useDialog.jsx
@@ -0,0 +1,32 @@
+// useDialog.js
+import { useState, useCallback } from 'react';
+
+const useDialog = (handleSnackbar, onClose) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDialog = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+
+  const handleCloseDialog = useCallback(
+    (event, reason) => {
+      if (
+        reason &&
+        (reason === 'backdropClick' || reason === 'escapeKeyDown')
+      ) {
+        handleSnackbar('Operation cancelled, no changes were made.');
+      }
+      closeDialog();
+    },
+    [closeDialog, handleSnackbar]
+  );
+
+  return { isOpen, openDialog, handleCloseDialog, closeDialog };
+};
+
+export default useDialog;
diff --git a/src/context/hooks/useSnackBar.jsx b/src/context/hooks/useSnackBar.jsx
new file mode 100644
index 0000000..6978e21
--- /dev/null
+++ b/src/context/hooks/useSnackBar.jsx
@@ -0,0 +1,28 @@
+// useSnackbar.js
+import { useState, useCallback } from 'react';
+
+const useSnackbar = () => {
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: '',
+    severity: 'info', // default severity
+  });
+
+  const handleSnackbar = useCallback((message, severity = 'info') => {
+    setSnackbar({ open: true, message, severity });
+  }, []);
+
+  const handleCloseSnackbar = useCallback(
+    (event, reason) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+      setSnackbar({ ...snackbar, open: false });
+    },
+    [snackbar]
+  );
+
+  return [snackbar, handleSnackbar, handleCloseSnackbar];
+};
+
+export default useSnackbar;
diff --git a/src/context/hooks/useUpdateContext.jsx b/src/context/hooks/useUpdateContext.jsx
new file mode 100644
index 0000000..0ebc00c
--- /dev/null
+++ b/src/context/hooks/useUpdateContext.jsx
@@ -0,0 +1,29 @@
+// import { useEffect } from 'react';
+// import { useLocation } from 'react-router-dom';
+// import useAppContext from './useAppContext';
+
+// const useUpdateAppContext = () => {
+//   const location = useLocation();
+//   const { setContext } = useAppContext(); // Destructuring from object
+
+//   useEffect(() => {
+//     switch (location.pathname) {
+//       case '/deckbuilder':
+//         setContext('Deck');
+//         break;
+//       case '/collection':
+//         setContext('Collection');
+//         break;
+//       case '/cart':
+//         setContext('Cart');
+//         break;
+//       default:
+//         setContext('Home');
+//         break;
+//     }
+//   }, [location, setContext]);
+
+//   return null;
+// };
+
+// export default useUpdateAppContext;
diff --git a/src/context/hooks/useWindowSize.jsx b/src/context/hooks/useWindowSize.jsx
new file mode 100644
index 0000000..c7daa7f
--- /dev/null
+++ b/src/context/hooks/useWindowSize.jsx
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+  const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 598);
+
+  useEffect(() => {
+    const updateView = () => {
+      setIsMobileView(window.innerWidth <= 598);
+    };
+
+    window.addEventListener('resize', updateView);
+    return () => {
+      window.removeEventListener('resize', updateView);
+    };
+  }, []);
+
+  return isMobileView;
+};
+
+export default useWindowSize;
diff --git a/src/index.js b/src/index.js
index 0cf2588..74c02c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './assets/styles/index.css';
 import App from './App';
 import GlobalStyles from './assets/GlobalStyles';
+import ErrorBoundary from './context/ErrorBoundary';
 import AuthProvider from './context/Auth/authContext';
 import { CartProvider } from './context/CartContext/CartContext';
 import { DeckProvider } from './context/DeckContext/DeckContext';
@@ -12,14 +12,17 @@ import { ModalProvider } from './context/ModalContext/ModalContext';
 import { UserProvider } from './context/UserContext/UserContext';
 import { CombinedProvider } from './context/CombinedProvider';
 import { ThemeProvider } from '@mui/styles';
-import { useMode } from './context/hooks/colormode';
 import { ColorModeProvider } from './context/ColorModeProvider';
-// import { ApiServiceProvider } from './context/cleanUp/ApiServiceProvider';
-import ErrorBoundary from './context/ErrorBoundary';
 import { SocketProvider } from './context/SocketProvider';
 import { SidebarProvider } from './context/SideBarProvider';
 import { ChartProvider } from './context/ChartContext/ChartContext';
 import { UtilityProvider } from './context/UtilityContext/UtilityContext';
+import { AppContextProvider } from './context/AppContext/AppContextProvider';
+import { useMode } from './context/hooks/colormode';
+import { PopoverProvider } from './context/PopoverContext/PopoverContext';
+import { CronJobProvider } from './context/CronJobContext/CronJobContext';
+import { CardImagesProvider } from './context/CardImagesContext/CardImagesContext';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 const root = document.getElementById('root');
 
@@ -29,38 +32,44 @@ function Main() {
   return (
     <ErrorBoundary>
       <UtilityProvider>
-        <AuthProvider>
-          <ColorModeProvider>
-            <SocketProvider>
-              {/* <UtilityProvider> */}
-              {/* <ApiServiceProvider> */}
-              <UserProvider>
-                <ModalProvider>
-                  <CollectionProvider>
-                    <CombinedProvider>
-                      <CardProvider>
-                        <DeckProvider>
-                          <CartProvider>
-                            <GlobalStyles />
-                            <ThemeProvider theme={theme}>
-                              <ChartProvider>
-                                <SidebarProvider>
-                                  <App />
-                                </SidebarProvider>
-                              </ChartProvider>
-                            </ThemeProvider>
-                          </CartProvider>
-                        </DeckProvider>
-                      </CardProvider>
-                    </CombinedProvider>
-                  </CollectionProvider>
-                </ModalProvider>
-              </UserProvider>
-              {/* </ApiServiceProvider> */}
-              {/* </UtilityProvider> */}
-            </SocketProvider>
-          </ColorModeProvider>
-        </AuthProvider>
+        <Router>
+          <AuthProvider>
+            <ColorModeProvider>
+              <SocketProvider>
+                <UserProvider>
+                  <ModalProvider>
+                    <PopoverProvider>
+                      <CollectionProvider>
+                        <CombinedProvider>
+                          <CardProvider>
+                            <CronJobProvider>
+                              <DeckProvider>
+                                <CartProvider>
+                                  {/* <CardImagesProvider> */}
+                                  <GlobalStyles />
+                                  <ThemeProvider theme={theme}>
+                                    <ChartProvider>
+                                      <SidebarProvider>
+                                        <AppContextProvider>
+                                          <App />
+                                        </AppContextProvider>
+                                      </SidebarProvider>
+                                    </ChartProvider>
+                                  </ThemeProvider>
+                                  {/* </CardImagesProvider> */}
+                                </CartProvider>
+                              </DeckProvider>
+                            </CronJobProvider>
+                          </CardProvider>
+                        </CombinedProvider>
+                      </CollectionProvider>
+                    </PopoverProvider>
+                  </ModalProvider>
+                </UserProvider>
+              </SocketProvider>
+            </ColorModeProvider>
+          </AuthProvider>
+        </Router>
       </UtilityProvider>
     </ErrorBoundary>
   );
diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
index 1b40e9e..a7f113c 100644
--- a/src/pages/CartPage.js
+++ b/src/pages/CartPage.js
@@ -7,14 +7,15 @@ import {
   Container,
 } from '@mui/material';
 import { useCartStore } from '../context/CartContext/CartContext';
-import LoadingIndicator from '../components/indicators/LoadingIndicator';
-import ErrorIndicator from '../components/indicators/ErrorIndicator';
-import CartContentContainer from '../containers/CartContentContainer';
-import CustomerFormContainer from '../containers/CustomerFormContainer';
+import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
+import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
+import CartContentContainer from '../containers/cartPageContainers/CartContentContainer';
+import CustomerFormContainer from '../containers/cartPageContainers/CustomerFormContainer';
+import useUpdateAppContext from '../context/hooks/useUpdateContext';
 
 const CartPage = () => {
-  const [cookies] = useCookies(['userCookie']);
-  const user = cookies.userCookie;
+  const [cookies] = useCookies(['user']);
+  const user = cookies.user;
   const userId = user?.id;
 
   const {
diff --git a/src/pages/CollectionPage.js b/src/pages/CollectionPage.js
index 8bfb325..2f611df 100644
--- a/src/pages/CollectionPage.js
+++ b/src/pages/CollectionPage.js
@@ -1,54 +1,107 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { useCookies } from 'react-cookie';
-import LoadingIndicator from '../components/indicators/LoadingIndicator';
-import ErrorIndicator from '../components/indicators/ErrorIndicator';
-import CollectionBanner from './pageStyles/CollectionBanner';
-import CollectionTitle from './pageStyles/CollectionTitle';
+import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
+import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import CardPortfolio from '../components/collection/CardPortfolio';
-import { useCollectionStore } from '../context/hooks/collection';
-import HeaderTitle from '../components/reusable/HeaderTitle';
 import Subheader from '../components/reusable/Subheader';
+import { useCollectionStore } from '../context/CollectionContext/CollectionContext';
+import { ModalContext } from '../context/ModalContext/ModalContext';
+import GenericCardModal from '../components/modals/cardModal/GenericCardModal';
+import { CollectionBanner } from './pageStyles/StyledComponents';
 
-const CollectionPage = () => {
-  // const [defaultCollection, setDefaultCollection] = useState([]);
-  const { userCookie } = useCookies(['userCookie'])[0];
-  const {
-    fetchAllCollectionsForUser,
-    allCollections = [],
-    setAllCollections,
-    selectedCollection,
-    setSelectedCollection,
-    loading,
-    calculateTotalPrice,
-    error,
-  } = useCollectionStore();
-  const userId = userCookie?.id;
+const HeroCenter = ({ decorative, title, subtitle }) => (
+  <Box
+    sx={{
+      flex: 1,
+      height: '50vh',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: 2,
+      my: 6,
+      textAlign: 'center',
+    }}
+  >
+    <Typography
+      component="span"
+      sx={{
+        color: 'primary.main',
+        fontWeight: 600,
+        fontSize: 'sm',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+      }}
+    >
+      {decorative}
+    </Typography>
+    <Typography
+      variant="h1"
+      sx={{
+        fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
+        fontWeight: 800,
+      }}
+    >
+      {title}
+    </Typography>
+    <Typography
+      sx={{
+        fontSize: 'lg',
+        color: 'text.secondary',
+        maxWidth: '54ch',
+      }}
+    >
+      {subtitle}
+    </Typography>
+  </Box>
+);
+
+// Default props for the HeroCenter component for ease of use and maintainability
+HeroCenter.defaultProps = {
+  decorative: 'All-in-One',
+  title: "Your Collection's Home",
+  subtitle:
+    // eslint-disable-next-line max-len
+    'Welcome to your collection! Here you can view all of your cards, add new cards, and remove cards from your collection.',
+};
 
-  useEffect(() => {
-    fetchAllCollectionsForUser()
-      .then(() => {
-        console.log('Fetched collections successfully');
-      })
-      .catch((err) => {
-        console.error('Failed to get all collections:', err);
-      });
-  }, [fetchAllCollectionsForUser]);
+// Main collection page component
+const CollectionPage = () => {
+  const [{ user }] = useCookies(['user']);
+  const { allCollections, selectedCollection, loading, error } =
+    useCollectionStore();
+  const { openModalWithCard, closeModal, isModalOpen, modalContent } =
+    useContext(ModalContext);
+  const userId = user?.id;
 
   if (loading) return <LoadingIndicator />;
   if (error) return <ErrorIndicator error={error} />;
 
   return (
-    <div>
+    <React.Fragment>
       <CollectionBanner>
-        <HeaderTitle
-          title="Collection Portfolio"
-          size="large"
-          location="center"
-        />
-        <Subheader text={`${selectedCollection?.name}`} />
-        <CardPortfolio allCollections={allCollections} />
+        <Box>
+          <HeroCenter />
+          <Subheader text={selectedCollection?.name || 'Your Collection'} />
+        </Box>
       </CollectionBanner>
-    </div>
+      <Box
+        sx={{
+          maxHeight: '200vh',
+        }}
+      >
+        <CardPortfolio allCollections={allCollections} />
+      </Box>{' '}
+      {isModalOpen && (
+        <GenericCardModal
+          open={isModalOpen}
+          closeModal={closeModal}
+          card={modalContent}
+          // context and other props if necessary
+        />
+      )}
+    </React.Fragment>
   );
 };
 
diff --git a/src/pages/DeckBuilderPage.js b/src/pages/DeckBuilderPage.js
index 43629d5..f8f1e46 100644
--- a/src/pages/DeckBuilderPage.js
+++ b/src/pages/DeckBuilderPage.js
@@ -1,20 +1,66 @@
 import React, { useEffect, useState, useContext } from 'react';
-import DeckBuilderBanner from './pageStyles/DeckBuilderBanner';
-import DeckBuilderTitle from './pageStyles/DeckBuilderTitle';
 import { useCookies } from 'react-cookie';
-import { DeckContext } from '../context/DeckContext/DeckContext';
-import LoadingIndicator from '../components/indicators/LoadingIndicator';
-import ErrorIndicator from '../components/indicators/ErrorIndicator';
+import { DeckContext, useDeckStore } from '../context/DeckContext/DeckContext';
+import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
+import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
 import DeckBuilderContainer from '../containers/deckBuilderPageContainers/DeckBuilderContainer';
-import { Grid } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
+import { ModalContext } from '../context/ModalContext/ModalContext';
+import GenericCardModal from '../components/modals/cardModal/GenericCardModal';
+import HeaderTitle from '../components/reusable/HeaderTitle';
+import { useMode } from '../context/hooks/colormode';
+import { DeckBuilderBanner } from './pageStyles/StyledComponents';
+import useUpdateAppContext from '../context/hooks/useUpdateContext';
+
+const HeroCenter2 = ({ title, subtitle }) => (
+  <Box
+    sx={{
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: 2,
+      my: 6,
+      textAlign: 'center',
+    }}
+  >
+    <Typography
+      variant="h1"
+      sx={{
+        fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
+        fontWeight: 800,
+        color: 'black',
+      }}
+    >
+      {title}
+    </Typography>
+    <Typography
+      sx={{
+        fontSize: 'lg',
+        color: 'text.secondary',
+        maxWidth: '54ch',
+      }}
+    >
+      {subtitle}
+    </Typography>
+  </Box>
+);
+
+HeroCenter2.defaultProps = {
+  title: 'Welcome to Deck Builder',
+  subtitle: 'Craft, refine, and explore your deck strategies in one place.',
+};
 
 const DeckBuilderPage = () => {
   const [userDecks, setUserDecks] = useState([]);
-  const { userCookie } = useCookies(['userCookie'])[0];
-  const { fetchAllDecksForUser, allDecks, loading, error } =
-    useContext(DeckContext);
-  const userId = userCookie?.id;
+  const { user } = useCookies(['user'])[0];
+  const { theme } = useMode();
+  const { fetchAllDecksForUser, allDecks, loading, error } = useDeckStore();
+  const { openModalWithCard, closeModal, isModalOpen, modalContent } =
+    useContext(ModalContext);
+  const userId = user?.id;
+  // useUpdateAppContext(); // This will set the context to 'Deck' when this page is rendered
 
+  console.log('userid', userId);
   useEffect(() => {
     fetchAllDecksForUser().catch((err) =>
       console.error('Failed to get all decks:', err)
@@ -23,9 +69,9 @@ const DeckBuilderPage = () => {
 
   useEffect(() => {
     if (allDecks && userId) {
-      const filteredDecks = allDecks.filter((deck) => deck.userId === userId);
+      const filteredDecks = allDecks?.filter((deck) => deck?.userId === userId);
+      console.log('filteredDecks', filteredDecks);
       setUserDecks(filteredDecks);
-      // console.log('(DECK PAGE) -- (USERDECKS):', userDecks);
     }
   }, [allDecks, userId]);
 
@@ -33,14 +79,23 @@ const DeckBuilderPage = () => {
   if (error) return <ErrorIndicator error={error} />;
 
   return (
-    <DeckBuilderBanner>
-      <DeckBuilderTitle>Deck Builder</DeckBuilderTitle>
-      <Grid container>
-        <Grid item xs={12}>
-          <DeckBuilderContainer userDecks={userDecks} />
+    <React.Fragment>
+      <DeckBuilderBanner>
+        <HeroCenter2 />
+        <Grid container>
+          <Grid item xs={12}>
+            <DeckBuilderContainer userDecks={userDecks} />
+          </Grid>
         </Grid>
-      </Grid>
-    </DeckBuilderBanner>
+      </DeckBuilderBanner>
+      {isModalOpen && (
+        <GenericCardModal
+          open={isModalOpen}
+          closeModal={closeModal}
+          card={modalContent}
+        />
+      )}
+    </React.Fragment>
   );
 };
 
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index caddf7b..d690580 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,42 +1,32 @@
 import React, { useContext, useEffect, useRef } from 'react';
 import { Carousel } from 'react-responsive-carousel';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
-import { Container, Typography, Box } from '@mui/material';
-import { makeStyles, useTheme } from '@mui/styles';
-import { ColorModeContext } from '../context/ColorModeProvider';
+import {
+  Container,
+  Typography,
+  Box,
+  Stack,
+  Button,
+  CssBaseline,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Card,
+  Grid,
+  Paper,
+} from '@mui/material';
 import { useMode } from '../context/hooks/colormode';
-import HeaderTitle from '../components/reusable/HeaderTitle';
-import useStyles from './styles';
-// import Hero from './pageStyles/Hero';
-
-const carouselImages = [
-  { image: '/images/yugioh.jpeg', caption: 'Yu-Gi-Oh!' },
-  { image: '/images/pokemon.jpeg', caption: 'Pokemon' },
-  {
-    image: '/images/magic-the-gathering.jpeg',
-    caption: 'Magic: The Gathering',
-  },
-];
-
-const HomeBanner = ({ children }) => {
-  return (
-    <Box
-      className="home-banner"
-      sx={{
-        backgroundImage: (theme) =>
-          `linear-gradient(to right, ${theme.palette.primary.light}, ${theme.palette.secondary.main})`,
-        Height: '100vh',
-        padding: 4,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
+import useStyles from './pageStyles/styles';
+import DeckOfCardsIcon from '../components/reusable/icons/DeckOfCardsIcon';
+import { ModalContext } from '../context/ModalContext/ModalContext';
+import GenericCardModal from '../components/modals/cardModal/GenericCardModal';
+import {
+  TertiaryContainer,
+  SecondaryContainer,
+} from './pageStyles/StyledComponents';
+// import LoadingIndicator2 from '../components/reusable/indicators/LoadingIndicator2';
+// import LoadingCardAnimation from '../assets/animations/LoadingCardAnimation';
+import pages from './pages.json';
 const CarouselImage = ({ image, caption }) => {
   return (
     <div>
@@ -49,7 +39,7 @@ const CarouselImage = ({ image, caption }) => {
         sx={{
           position: 'absolute',
           bottom: 0,
-          backgroundColor: (theme) => theme.palette.secondary.main,
+          // backgroundColor: (theme) => theme.palette.secondary.main,
           color: (theme) =>
             theme.palette.secondary.contrastText || 'common.white',
           width: '100%',
@@ -66,73 +56,174 @@ const CarouselImage = ({ image, caption }) => {
   );
 };
 
-const CarouselContainer = ({ isMounted }) => {
-  if (!isMounted.current) {
-    return;
-  }
-  const classes = useStyles();
-  return (
-    <Carousel
-      showThumbs={false}
-      showStatus={false}
-      infiniteLoop
-      useKeyboardArrows
-      autoPlay
-      className={classes.carouselContainer}
-    >
-      {carouselImages?.map(({ image, caption }, index) => (
-        <CarouselImage key={index} image={image} caption={caption} />
-      ))}
-    </Carousel>
-  );
-};
-
 const HomePage = () => {
-  const classes = useStyles();
-  const theme = useTheme();
-  const isMounted = useRef(true);
-
-  useEffect(() => {
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
+  // const theme = useTheme();
+  const { theme, setMode } = useMode();
+  const classes = useStyles(theme);
+  const { openModalWithCard, closeModal, isModalOpen, modalContent } =
+    useContext(ModalContext);
+  const { initialState, carouselImages, tiers } = pages;
 
   return (
-    <HomeBanner>
+    // <HomeBanner>
+    <React.Fragment>
+      <CssBaseline />
+      <TertiaryContainer>
+        <Box
+          sx={{
+            // background: (theme) =>
+            //   `linear-gradient(to right, ${theme.palette.success.light}, ${theme.palette.success.dark})`,
+            background: theme.palette.primary.light,
+            p: 8,
+            m: 4,
+            borderRadius: 2,
+          }}
+        >
+          <Typography
+            component="h1"
+            variant="h2"
+            align="center"
+            color="text.primary"
+            gutterBottom
+          >
+            Enhanced Cardstore
+          </Typography>
+          <Typography
+            variant="h5"
+            align="center"
+            color="text.secondary"
+            paragraph
+          >
+            The purpose of this site is to provide an enhanced user experience
+            for competitive and novice card collectors alike. We provide an
+            advanced collection tracker and deck builder which allows users to
+            build decks and track the prices of the cards they need so they can
+            make the best financial decisions when buying and selling cards.
+          </Typography>
+          <Stack
+            sx={{ pt: 4 }}
+            direction="row"
+            spacing={2}
+            justifyContent="center"
+          ></Stack>
+          {/* </Container> */}
+        </Box>
+        <SecondaryContainer>
+          <Paper className={classes.secondaryPaperContainer}>
+            <Carousel
+              showThumbs={false}
+              showStatus={false}
+              infiniteLoop
+              useKeyboardArrows
+              autoPlay
+              // className={classes.carouselContainer}
+            >
+              {carouselImages.map(({ image, caption }, index) => (
+                <CarouselImage
+                  key={index}
+                  image={image}
+                  caption={caption}
+                  classes={classes}
+                />
+              ))}
+            </Carousel>
+          </Paper>
+        </SecondaryContainer>
+      </TertiaryContainer>
+
       <Container
+        maxWidth="100%"
+        component="main"
         sx={{
-          padding: 3,
+          padding: 6,
           borderRadius: 2,
-          backgroundColor: 'background.paper',
+          backgroundColor: theme.palette.background.paper,
           boxShadow: theme.shadows[10],
         }}
-        maxWidth="md"
       >
-        <HeaderTitle
-          title="Welcome to Our Application!"
-          size="huge"
-          location="center"
-        />
-        <Carousel
-          showThumbs={false}
-          showStatus={false}
-          infiniteLoop
-          useKeyboardArrows
-          autoPlay
-          className={classes.carouselContainer}
-        >
-          {carouselImages.map(({ image, caption }, index) => (
-            <CarouselImage
-              key={index}
-              image={image}
-              caption={caption}
-              classes={classes}
-            />
+        <Grid container spacing={5} alignItems="flex-end">
+          {tiers.map((tier) => (
+            <Grid
+              item
+              key={tier.title}
+              xs={12}
+              sm={tier.title === 'Enterprise' ? 12 : 6}
+              md={4}
+            >
+              <Card
+                sx={{
+                  '&:hover': {
+                    transform: 'scale(1.05)',
+                    transition: 'transform 0.3s ease-in-out',
+                  },
+                  background: theme.palette.success.light,
+                }}
+              >
+                {' '}
+                <CardHeader
+                  title={tier.title}
+                  subheader={tier.subheader}
+                  titleTypographyProps={{ align: 'center' }}
+                  action={
+                    tier.title === 'Deck Builder' ? <DeckOfCardsIcon /> : null
+                  }
+                  subheaderTypographyProps={{
+                    align: 'center',
+                  }}
+                  sx={{
+                    background: theme.palette.success.main,
+                    // backgroundColor: (theme) =>
+                    //   theme.palette.mode === 'light'
+                    //     ? theme.palette.grey[200]
+                    //     : theme.palette.grey[700],
+                  }}
+                />
+                <CardContent>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'baseline',
+                      mb: 2,
+                    }}
+                  ></Box>
+                  <ul>
+                    {tier.description.map((line) => (
+                      <Typography
+                        component="li"
+                        variant="subtitle1"
+                        align="center"
+                        key={line}
+                      >
+                        {line}
+                      </Typography>
+                    ))}
+                  </ul>
+                </CardContent>
+                <CardActions>
+                  <Button
+                    fullWidth
+                    variant={'contained'}
+                    sx={{ background: theme.palette.success.main }}
+                  >
+                    {tier.buttonText}
+                  </Button>
+                </CardActions>
+              </Card>
+            </Grid>
           ))}
-        </Carousel>
+        </Grid>
       </Container>
-    </HomeBanner>
+      {isModalOpen && (
+        <GenericCardModal
+          open={isModalOpen}
+          closeModal={closeModal}
+          card={modalContent}
+          // context and other props if necessary
+        />
+      )}
+    </React.Fragment>
+    // </HomeBanner>
   );
 };
 
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index f4a5705..cb276a6 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -13,24 +13,27 @@ import {
 } from '@mui/material';
 import { Edit as EditIcon } from '@mui/icons-material';
 import placeholder from '../assets/images/placeholder.jpeg';
-import UserStats from '../components/other/UserStats';
+import UserStats from '../components/other/dataDisplay/UserStats';
 import { useUserContext } from '../context/UserContext/UserContext';
 import { useCookies } from 'react-cookie';
-import ThemeToggleButton from '../components/buttons/ThemeToggleButton';
+import ThemeToggleButton from '../components/buttons/other/ThemeToggleButton';
 import { useCombinedContext } from '../context/CombinedProvider';
-import { useCollectionStore } from '../context/hooks/collection';
 import {
   AvatarStyled,
   TypographyStyled,
   IconButtonStyled,
   ButtonStyled,
-} from './StyledComponents';
+  ButtonsContainer,
+  CustomButton,
+  ProfileFormContainer,
+} from './pageStyles/StyledComponents';
 import ProfileForm from '../components/forms/ProfileForm';
+import { useCollectionStore } from '../context/CollectionContext/CollectionContext';
 
 const ProfilePage = () => {
   const { selectedCollection } = useCollectionStore();
   const { user, updateUser } = useUserContext();
-  const [cookies] = useCookies(['userCookie']);
+  const [cookies] = useCookies(['user']);
   const [snackbarData, setSnackbarData] = useState({
     open: false,
     message: '',
@@ -50,8 +53,9 @@ const ProfilePage = () => {
   const openSnackbar = (message) => {
     setSnackbarData({ open: true, message });
   };
-  const userId = user?.userID;
-  // console.log('USER ID:', userId);
+  // const userId = user?.id;
+  const userId = cookies.user?.id;
+  console.log('USER ID:', userId);
   // console.log('USER:', user);
   const handleSaveChanges = useCallback(
     (data) => {
@@ -81,33 +85,13 @@ const ProfilePage = () => {
     }
   };
 
-  const handleTriggerCronJob = () => {
-    // if (userId) {
-    //   handleCronRequest(userId);
-    //   console.log('TRIGGERING CRON JOB');
-    // }
-    if (userId && listOfMonitoredCards && retrievedListOfMonitoredCards) {
-      handleSendAllCardsInCollections(
-        userId,
-        listOfMonitoredCards,
-        retrievedListOfMonitoredCards
-      );
-      console.log('SENDING ALL CARDS IN COLLECTIONS');
-      openSnackbar('Triggered the cron job.');
-    } else if (
-      userId &&
-      listOfMonitoredCards &&
-      !retrievedListOfMonitoredCards
-    ) {
-      console.log('RETRIEVING LIST OF MONITORED CARDS');
-      handleSendAllCardsInCollections(
-        userId,
-        listOfMonitoredCards,
-        handleRetreiveListOfMonitoredCards()
-      );
-      openSnackbar('Triggered the cron job.');
-    }
-  };
+  // const handleTriggerCronJob = () => {
+  //   if (userId && listOfMonitoredCards) {
+  //     handleSendAllCardsInCollections(userId, listOfMonitoredCards);
+  //     console.log('SENDING ALL CARDS IN COLLECTIONS');
+  //     openSnackbar('Triggered the cron job.');
+  //   }
+  // };
 
   const handleStopCronJob = () => {
     if (userId) {
@@ -128,52 +112,57 @@ const ProfilePage = () => {
         <IconButtonStyled>
           <EditIcon />
         </IconButtonStyled>
-        <ButtonStyled
+      </Box>
+
+      <ButtonsContainer>
+        <CustomButton
           variant="contained"
           color="primary"
           onClick={handleSendMessage}
         >
           Send Message to Server
-        </ButtonStyled>
+        </CustomButton>
 
-        <ButtonStyled
+        <CustomButton
           variant="contained"
           color="primary"
           onClick={handleRequestCollectionDataFunction}
         >
           Request Collection Data
-        </ButtonStyled>
+        </CustomButton>
 
-        <ButtonStyled
+        <CustomButton
           variant="contained"
           color="primary"
           onClick={handleRequestChartDataFunction}
         >
           Request Chart Data
-        </ButtonStyled>
+        </CustomButton>
 
-        <ButtonStyled
+        {/* <CustomButton
           variant="contained"
           color="primary"
           onClick={handleTriggerCronJob}
         >
           Trigger Cron Job
-        </ButtonStyled>
-        <ButtonStyled
+        </CustomButton> */}
+        <CustomButton
           variant="contained"
           color="secondary"
           onClick={handleStopCronJob}
         >
           Stop Cron Job
-        </ButtonStyled>
-      </Box>
-      <Box mt={3}>
+        </CustomButton>
+      </ButtonsContainer>
+
+      <ProfileFormContainer>
         <ProfileForm
           {...user}
           userName={cookies.userCookie?.username}
           onSave={handleSaveChanges}
         />
-      </Box>
+      </ProfileFormContainer>
+
       <UserStats />
       <ThemeToggleButton />
       <Snackbar
diff --git a/src/pages/Splash.css b/src/pages/Splash.css
deleted file mode 100644
index efba8b5..0000000
--- a/src/pages/Splash.css
+++ /dev/null
@@ -1,113 +0,0 @@
-:root {
-  --calendar-width: 200px;
-  --calendar-height: 100px;
-}
-
-/* Combine styles for splash_wrapper */
-.splash_wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  background: linear-gradient(
-    45deg,
-    #305270,
-    #284b60,
-    #20444f,
-    #173d3e,
-    #0e362e,
-    #052f1d
-  );
-  background-size: 600% 600%;
-  animation: Gradient 16s ease infinite;
-}
-
-.logo_container {
-  margin-bottom: 2rem;
-}
-
-.loading_text {
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: #284b60; /* Using the Adjusted Indigo dye from your pentenary color theme */
-  letter-spacing: 1.5px;
-}
-
-@keyframes Gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-/* splash calendar animation */
-
-.github_calendar_container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 60px; /* More space from the animation */
-  padding: 20px;
-  /* width: 200px;
-  height: 100px; */
-  width: var(--calendar-width);
-  height: var(--calendar-height);
-}
-
-/* 
-  .rotating-border {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1; /* Place it below the GitHub calendar 
-}
-*/
-
-.rotating-border rect {
-  width: var(--calendar-width);
-  height: var(--calendar-height);
-  stroke-dasharray: 1000;
-  stroke-dashoffset: 1000;
-  animation:
-    rotateBorder 9s infinite linear,
-    dashOffset 9s infinite linear;
-}
-
-.calendar-box {
-  position: relative;
-  z-index: 1; /* Place it above the rotating border */
-}
-
-@keyframes rotateBorder {
-  0% {
-    /* stroke: #4db0a8; */
-    stroke: red;
-  }
-  50% {
-    stroke: #052f1d;
-  }
-  100% {
-    /* stroke: #4db0a8; */
-    stroke: red;
-  }
-}
-
-@keyframes dashOffset {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
diff --git a/src/pages/Splash.js b/src/pages/Splash.js
deleted file mode 100644
index 5a4ed53..0000000
--- a/src/pages/Splash.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import './Splash.css';
-// import { motion } from 'framer-motion';
-// import { theme } from '../../assets/theme';
-// import Particle from '../utils/Particle';
-// import logo from '../../assets/logo.png'; // Import the logo
-// import GitHubCalendar from 'react-github-calendar';
-// import { Box } from '@chakra-ui/react';
-import CardDeckAnimation from './CardDeckAnimation';
-
-// const logoVariants = {
-//   hidden: { opacity: 0 },
-//   visible: {
-//     opacity: 1,
-//     rotate: [0, 360], // Add rotation animation
-//     transition: {
-//       duration: 4,
-//       repeat: Infinity,
-//       ease: 'linear',
-//     },
-//   },
-//   exit: { opacity: 0, transition: { duration: 0.5 } },
-// };
-
-// const ellipsisVariants = {
-//   hidden: { opacity: 0 },
-//   visible: {
-//     opacity: [0, 1, 1, 1, 0], // This makes the ellipsis fade in and out
-//     x: ['0%', '5%', '10%', '15%', '20%'], // Move the ellipsis to the right
-//     transition: {
-//       duration: 2,
-//       repeat: Infinity,
-//       repeatType: 'loop',
-//     },
-//   },
-//   exit: { opacity: 0, transition: { duration: 0.5 } },
-// };
-
-// const textVariants = {
-//   hidden: { opacity: 0 },
-//   visible: {
-//     opacity: 1,
-//     color: [
-//       theme.colors.quaternary[400],
-//       theme.colors.quaternary[500],
-//       theme.colors.quaternary[600],
-//       theme.colors.quaternary[700],
-//       theme.colors.quaternary[800],
-//       theme.colors.quaternary[900],
-//     ],
-//     textShadow: ['0px 0px', '5px 5px', '3px 3px', '0px 0px'],
-//     transition: {
-//       duration: 6, // Increased due to more colors
-//       repeat: Infinity,
-//       repeatType: 'loop',
-//     },
-//   },
-//   exit: { opacity: 0, transition: { duration: 0.5 } },
-// };
-
-// function AnimatedSplash() {
-//   const [calendarSize, setCalendarSize] = useState({ width: 0, height: 0 });
-//   const calendarRef = useRef(null);
-//   // const rect = document.getElementById('myElement').getBoundingClientRect();
-
-//   // Declare minimum dimensions here
-//   const minWidth = window.innerWidth * 0.65;
-//   const minHeight = 100;
-
-//   useEffect(() => {
-//     if (calendarRef.current) {
-//       // Check if the ref is assigned to a DOM element
-//       // const rect = calendarRef.current.getBoundingClientRect();
-
-//       const breakpoints = {
-//         xs: 20 * 16,
-//         sm: 28 * 16,
-//         md: 36 * 16,
-//         lg: 45 * 16,
-//         xl: 60 * 16,
-//       };
-
-//       const adjustSize = () => {
-//         const width = window.innerWidth;
-//         let newWidth, newHeight;
-//         if (width <= breakpoints.xs) {
-//           newWidth = '40px';
-//           newHeight = '20px';
-//         } else if (width <= breakpoints.sm) {
-//           newWidth = '50px';
-//           newHeight = '25px';
-//         } else if (width <= breakpoints.md) {
-//           newWidth = '60px';
-//           newHeight = '30px';
-//         } else if (width <= breakpoints.lg) {
-//           newWidth = '70px';
-//           newHeight = '35px';
-//         } else {
-//           newWidth = '200px';
-//           newHeight = '40px';
-//         }
-//         document.documentElement.style.setProperty(
-//           '--calendar-width',
-//           newWidth
-//         );
-//         document.documentElement.style.setProperty(
-//           '--calendar-height',
-//           newHeight
-//         );
-//       };
-//       adjustSize();
-//       window.addEventListener('resize', adjustSize);
-
-//       if (calendarRef.current) {
-//         const rect = calendarRef.current.getBoundingClientRect();
-//         setCalendarSize({
-//           width: Math.max(rect.width + 15, minWidth),
-//           height: Math.max(rect.height + 15, minHeight),
-//         });
-//       }
-//       console.log('Updated calendar size:', calendarSize);
-
-//       return () => {
-//         window.removeEventListener('resize', adjustSize);
-//       };
-//     }
-//   }, [calendarSize]);
-
-//   return (
-//     <motion.div
-//       className="splash_wrapper"
-//       initial="hidden"
-//       animate="visible"
-//       exit="exit"
-//       style={{
-//         backgroundColor: theme.colors.quaternary[100],
-//         display: 'flex',
-//         flexDirection: 'column',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//       }}
-//     >
-//       <motion.div
-//         className="logo_container"
-//         variants={logoVariants}
-//         style={{ marginRight: '20px' }}
-//       >
-//         <h1
-//           style={{
-//             fontSize: '5rem',
-//             color: theme.colors.quaternary[900],
-//             fontWeight: 'bold',
-//           }}
-//         >
-//           ReedVogt.com
-//         </h1>
-//       </motion.div>
-
-//       {Particle && <Particle />}
-//       <CardDeckAnimation />
-//       <div style={{ display: 'flex', alignItems: 'center' }}>
-//         <motion.p
-//           className="loading_text"
-//           variants={textVariants}
-//           style={{
-//             rotateX: [0, 10, -10, 0],
-//             transition: {
-//               repeat: Infinity,
-//               repeatType: 'mirror',
-//               duration: 4,
-//             },
-//             color: theme.colors.quaternary[500],
-//           }}
-//         >
-//           Loading
-//         </motion.p>
-//         <motion.span
-//           className="loading_ellipsis"
-//           variants={ellipsisVariants}
-//           style={{
-//             fontSize: 'inherit',
-//             marginLeft: '5px',
-//           }}
-//         >
-//           <motion.span>.</motion.span>
-//           <motion.span>.</motion.span>
-//           <motion.span>.</motion.span>
-//         </motion.span>
-//       </div>
-
-//       <div
-//         className="github_calendar_container"
-//         style={{ position: 'relative' }}
-//       >
-//         <svg
-//           className="rotating-border"
-//           viewBox={`0 0 ${calendarSize.width} ${calendarSize.height}`}
-//           style={{ position: 'absolute', zIndex: 0 }}
-//         >
-//           <rect
-//             x="0"
-//             y="0"
-//             rx="15"
-//             ry="15"
-//             width={calendarSize.width}
-//             height={calendarSize.height}
-//           />
-//         </svg>
-//         <Box
-//           className="calendar-box"
-//           ref={calendarRef}
-//           minW="50vw"
-//           style={{ position: 'relative', zIndex: 1 }}
-//         >
-//           <GitHubCalendar username="reedoooo" />
-//         </Box>
-//       </div>
-//     </motion.div>
-//   );
-// }
-
-function Splash() {
-  const [redirected, setRedirected] = useState(false);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const id = setTimeout(() => setRedirected(true), 10000);
-    return () => clearTimeout(id);
-  }, []);
-
-  useEffect(() => {
-    if (redirected) {
-      navigate('/');
-    }
-  }, [redirected, navigate]);
-
-  return redirected ? null : <CardDeckAnimation />;
-  // return redirected ? null : <AnimatedSplash />;
-}
-
-export default Splash;
diff --git a/src/pages/SplashPage.js b/src/pages/SplashPage.js
index d94e3df..44b87bf 100644
--- a/src/pages/SplashPage.js
+++ b/src/pages/SplashPage.js
@@ -4,7 +4,7 @@ import placeholder from '../assets/images/placeholder.jpeg';
 import { useUtilityContext } from '../context/UtilityContext/UtilityContext';
 
 const SplashPage = () => {
-  const { fetchDirectedResponses } = useUtilityContext();
+  // const { fetchDirectedResponses } = useUtilityContext();
 
   useEffect(() => {
     // Initialize the scene, camera, and renderer
@@ -63,10 +63,14 @@ const SplashPage = () => {
 
     // Start the animation loop
     animate();
+    console.log('Three.js scene initialized'); // Debug log
+  }, []); // Empty dependency array ensures this runs once when component mounts
 
-    // Fetch the directed responses
-    fetchDirectedResponses();
-  }, [fetchDirectedResponses]); // Add fetchDirectedResponses as a dependency to ensure it is called when the component mounts
+  // useEffect(() => {
+  //   // Fetch the directed responses
+  //   fetchDirectedResponses();
+  //   console.log('fetchDirectedResponses called'); // Debug log
+  // }, [fetchDirectedResponses]); // fetchDirectedResponses as a dependency
 
   return <div id="splash-container"></div>;
 };
diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js
index 81e8ddb..549f7b9 100644
--- a/src/pages/StorePage.js
+++ b/src/pages/StorePage.js
@@ -1,31 +1,15 @@
 import React, { useState, useContext, useEffect } from 'react';
-import styled from 'styled-components';
-import { Grid } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import { useCookies } from 'react-cookie';
 import SearchBar from '../components/search/SearchBar';
 import ProductGrid from '../components/grids/storeSearchResultsGrid/ProductGrid';
 import { useCardStore } from '../context/CardContext/CardStore';
 import { useCartStore } from '../context/CartContext/CartContext';
-import LoadingIndicator from '../components/indicators/LoadingIndicator';
-import ErrorIndicator from '../components/indicators/ErrorIndicator';
-
-const StoreBanner = styled.div`
-  display: flex;
-  max-width: 100%;
-  justify-content: center;
-  margin: 0 auto;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  background-color: #f7f7f7;
-`;
-
-const StoreTitle = styled.h2`
-  color: #333;
-  font-size: 1.5rem;
-  text-align: center;
-  margin-bottom: 20px;
-`;
+import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
+import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
+import { StoreBanner, StoreTitle } from './pageStyles/StyledComponents';
+import { themeSettings } from '../assets/themeSettings';
+import { useMode } from '../context/hooks/colormode';
 
 const SearchContainer = () => {
   return (
@@ -36,19 +20,81 @@ const SearchContainer = () => {
 };
 
 const CardContainer = () => {
+  const { theme } = useMode();
+
   return (
-    <Grid item xs={12}>
+    <Grid
+      item
+      xs={12}
+      sx={{
+        backgroundColor: theme.palette.background.paper,
+        height: '100%',
+      }}
+    >
       <ProductGrid />
     </Grid>
   );
 };
 
+const HeroCenter3 = ({ decorative, title, subtitle, theme }) => (
+  <Box
+    sx={{
+      flex: 1,
+      height: '50vh',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: 2,
+      my: 6,
+      textAlign: 'center',
+    }}
+  >
+    <Typography
+      component="span"
+      sx={{
+        color: theme.palette.primary.main,
+        fontWeight: 600,
+        fontSize: 'sm',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+      }}
+    >
+      {decorative}
+    </Typography>
+    <Typography
+      variant="h1"
+      sx={{
+        fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
+        fontWeight: 800,
+      }}
+    >
+      {title}
+    </Typography>
+    <Typography
+      sx={{
+        fontSize: 'lg',
+        color: 'text.secondary',
+        maxWidth: '54ch',
+      }}
+    >
+      {subtitle}
+    </Typography>
+  </Box>
+);
+
+HeroCenter3.defaultProps = {
+  title: 'Welcome to Store',
+  subtitle: 'Search for cards and add them to your cart.',
+};
+
 const StorePage = () => {
-  const [cookies] = useCookies(['userCookie']);
+  const [cookies] = useCookies(['user']);
+
+  const { theme } = useMode();
   const { fetchUserCart, loading, error } = useCartStore();
   const { searchData } = useCardStore();
 
-  const userId = cookies.userCookie?.id;
+  const userId = cookies?.user?.id;
 
   useEffect(() => {
     if (userId) {
@@ -68,13 +114,28 @@ const StorePage = () => {
   }
 
   return (
-    <StoreBanner>
-      <StoreTitle>Store</StoreTitle>
-      <Grid container>
+    <React.Fragment>
+      <HeroCenter3 theme={theme} />
+      <Grid
+        container
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          // maxWidth: '100vw',
+          padding: theme.spacing(3),
+          width: '100%',
+          // margin: 'auto',
+          // padding: theme.spacing(3),
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+        }}
+      >
         <SearchContainer />
-        <CardContainer />
+        <CardContainer theme={theme} />
       </Grid>
-    </StoreBanner>
+    </React.Fragment>
   );
 };
 
diff --git a/src/pages/StyledComponents.jsx b/src/pages/StyledComponents.jsx
deleted file mode 100644
index 54975ef..0000000
--- a/src/pages/StyledComponents.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from '@emotion/styled';
-import { Avatar, Box, Button, IconButton, Typography } from '@mui/material';
-export const AvatarStyled = styled(Avatar)({
-  width: 60,
-  height: 60,
-  marginBottom: 15,
-});
-
-export const TypographyStyled = styled(Typography)({
-  marginBottom: 15,
-});
-
-export const IconButtonStyled = styled(IconButton)({
-  marginBottom: 20,
-});
-
-export const DataBoxStyled = styled(Box)({
-  margin: '10px 0',
-  padding: '10px',
-  border: '1px solid #ddd',
-  borderRadius: '8px',
-  textAlign: 'center',
-  width: '100%',
-});
-
-export const ButtonStyled = styled(Button)({
-  margin: '15px 0',
-  padding: '10px',
-  color: '#fff',
-  backgroundColor: '#3f51b5',
-  '&:hover': {
-    backgroundColor: '#303f9f',
-  },
-});
-
-export const DataTextStyled = styled(Typography)({
-  margin: '5px 0',
-  fontSize: '0.9rem',
-});
-
-export const DataTextBoldStyled = styled(Typography)({
-  margin: '5px 0',
-  fontSize: '0.9rem',
-  fontWeight: 'bold',
-});
diff --git a/src/pages/pageStyles/CollectionBanner.jsx b/src/pages/pageStyles/CollectionBanner.jsx
deleted file mode 100644
index ee3dd21..0000000
--- a/src/pages/pageStyles/CollectionBanner.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const CollectionBanner = styled.div`
-  display: flex;
-  max-width: 100vw;
-  ${'' /* min-width: '100vw'; */}
-  justify-content: center;
-  margin: 0 auto;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  background-color: #f7f7f7;
-`;
-
-export default CollectionBanner;
diff --git a/src/pages/pageStyles/CollectionTitle.jsx b/src/pages/pageStyles/CollectionTitle.jsx
deleted file mode 100644
index 394e73c..0000000
--- a/src/pages/pageStyles/CollectionTitle.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const CollectionTitle = styled.h2`
-  color: #333;
-  font-size: 1.5rem;
-  text-align: center;
-  margin-bottom: 20px;
-`;
-
-export default CollectionTitle;
diff --git a/src/pages/pageStyles/DeckBuilderBanner.jsx b/src/pages/pageStyles/DeckBuilderBanner.jsx
deleted file mode 100644
index 4abda8b..0000000
--- a/src/pages/pageStyles/DeckBuilderBanner.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const DeckBuilderBanner = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #f9f9f9;
-  width: 100%;
-  max-width: 1600px;
-  margin: auto;
-`;
-
-export default DeckBuilderBanner;
diff --git a/src/pages/pageStyles/DeckBuilderTitle.jsx b/src/pages/pageStyles/DeckBuilderTitle.jsx
deleted file mode 100644
index 0f5c25d..0000000
--- a/src/pages/pageStyles/DeckBuilderTitle.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const DeckBuilderTitle = styled.h2`
-  color: #333;
-  font-size: 1.5rem;
-  text-align: center;
-  margin-bottom: 20px;
-`;
-
-export default DeckBuilderTitle;
diff --git a/src/pages/pageStyles/Hero.jsx b/src/pages/pageStyles/Hero.jsx
deleted file mode 100644
index 45ca420..0000000
--- a/src/pages/pageStyles/Hero.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { Box, Container, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { Canvas } from '@react-three/fiber';
-import Cube from './Cube';
-
-const useStyles = makeStyles((theme) => ({
-  bannerBox: {
-    backgroundImage: `linear-gradient(to right, ${theme.palette.primary.light}, ${theme.palette.primary.main})`,
-    minHeight: '100vh',
-    padding: theme.spacing(4),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-}));
-
-const Hero = () => {
-  const classes = useStyles();
-  return (
-    <Box className={classes.bannerBox}>
-      <Canvas
-        style={{ position: 'absolute', top: 0, left: 0, zIndex: 0 }}
-        camera={{ position: [0, 0, 5] }}
-      >
-        <ambientLight />
-        {/* eslint-disable-next-line react/no-unknown-property */}
-        <pointLight position={[10, 10, 10]} />
-        <Cube />
-      </Canvas>
-      <Container
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          zIndex: 1,
-          textAlign: 'center',
-        }}
-      >
-        <Typography variant="h2" gutterBottom>
-          Buy Amazing Cards
-        </Typography>
-      </Container>
-    </Box>
-  );
-};
-
-export default Hero;
diff --git a/src/pages/pageStyles/StyledComponents.jsx b/src/pages/pageStyles/StyledComponents.jsx
new file mode 100644
index 0000000..8b3013e
--- /dev/null
+++ b/src/pages/pageStyles/StyledComponents.jsx
@@ -0,0 +1,218 @@
+import { Avatar, Box, Button, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/styles';
+
+// export const AppContainer = styled.div`
+export const AppContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
+}));
+export const MainContainer = styled('div')(({ theme }) => ({
+  background: '#222', // Dark background
+  padding: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  maxHeight: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  boxShadow: theme.shadows[3],
+  borderRadius: theme.shape.borderRadius,
+}));
+export const MainContainer2 = styled('div')(({ theme }) => ({
+  background: '#333', // Dark background
+  padding: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  maxHeight: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  boxShadow: theme.shadows[3],
+  borderRadius: theme.shape.borderRadius,
+}));
+export const MainContainer3 = styled('div')(({ theme }) => ({
+  background: '#444', // Dark background
+  padding: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  maxHeight: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  boxShadow: theme.shadows[3],
+  borderRadius: theme.shape.borderRadius,
+}));
+export const SecondaryContainer = styled('div')(({ theme }) => ({
+  background: '#b7ebde',
+  padding: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  maxHeight: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  boxShadow: theme.shadows[3],
+  borderRadius: theme.shape.borderRadius,
+}));
+export const TertiaryContainer = styled('div')(({ theme }) => ({
+  padding: 3,
+  borderRadius: 2,
+  background: theme.palette.success.main,
+  boxShadow: theme.shadows[10],
+  mb: 4,
+}));
+export const MainPaperContainer = styled('div')(({ theme }) => ({
+  elevation: 3,
+  borderRadius: 2,
+  margin: 0,
+  marginBottom: theme.spacing(2),
+  background: theme.palette.background.main,
+  width: '100%',
+  padding: theme.spacing(2),
+}));
+
+export const SecondaryPaperContainer = styled('div')(({ theme }) => ({
+  elevation: 3,
+  borderRadius: 2,
+  margin: 0,
+  marginBottom: theme.spacing(2),
+  background: '#70d8bd',
+  width: '100%',
+  padding: theme.spacing(2),
+}));
+
+export const DeckBuilderBanner = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  backgroundColor: theme.palette.background.paper,
+  width: '100%',
+  maxWidth: '1600px',
+  margin: 'auto',
+  padding: theme.spacing(6, 2),
+  boxShadow: theme.shadows[4],
+  textAlign: 'center',
+}));
+// export const DeckBuilderBanner = styled(Box)(({ theme }) => ({
+//   backgroundColor: theme.palette.background.paper,
+//   padding: theme.spacing(6, 2),
+//   boxShadow: theme.shadows[4],
+//   textAlign: 'center',
+// }));
+// export const DeckBuilderBanner = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   background-color: #f9f9f9;
+//   width: 100%;
+//   max-width: 1600px;
+//   margin: auto;
+// `;
+export const AvatarStyled = styled(Avatar)({
+  width: 60,
+  height: 60,
+  marginBottom: 15,
+});
+
+export const TypographyStyled = styled(Typography)({
+  marginBottom: 15,
+});
+
+export const IconButtonStyled = styled(IconButton)({
+  marginBottom: 20,
+});
+
+export const DataBoxStyled = styled(Box)({
+  margin: '10px 0',
+  padding: '10px',
+  border: '1px solid #ddd',
+  borderRadius: '8px',
+  textAlign: 'center',
+  width: '100%',
+});
+
+export const ButtonStyled = styled(Button)({
+  margin: '15px 0',
+  padding: '10px',
+  color: '#fff',
+  backgroundColor: '#3f51b5',
+  '&:hover': {
+    backgroundColor: '#303f9f',
+  },
+});
+
+export const DataTextStyled = styled(Typography)({
+  margin: '5px 0',
+  fontSize: '0.9rem',
+});
+
+export const DataTextBoldStyled = styled(Typography)({
+  margin: '5px 0',
+  fontSize: '0.9rem',
+  fontWeight: 'bold',
+});
+
+export const DeckBuilderTitle = styled(Typography)(({ theme }) => ({
+  color: '#333',
+  fontSize: '1.5rem',
+  textAlign: 'center',
+  marginBottom: theme.spacing(2.5),
+}));
+
+export const CollectionTitle = styled(Typography)(({ theme }) => ({
+  color: '#333',
+  fontSize: '1.5rem',
+  textAlign: 'center',
+  marginBottom: theme.spacing(2.5),
+}));
+
+export const CollectionBanner = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 auto',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: theme.spacing(2.5),
+  backgroundColor: '#f7f7f7',
+}));
+
+export const StoreBanner = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  maxWidth: '100%',
+  justifyContent: 'center',
+  margin: '0 auto',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: theme.spacing(2.5),
+  backgroundColor: '#f7f7f7',
+}));
+
+export const StoreTitle = styled(Typography)(({ theme }) => ({
+  color: '#333',
+  fontSize: '1.5rem',
+  textAlign: 'center',
+  marginBottom: theme.spacing(2.5),
+}));
+
+export const CustomButton = styled(Button)({
+  margin: '10px',
+  width: '100%',
+  padding: '10px 0',
+  fontSize: '16px',
+});
+
+export const ButtonsContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: '20px',
+  margin: '10px 0',
+});
+
+export const ProfileFormContainer = styled(Box)({
+  marginTop: '20px',
+  padding: '20px',
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+  borderRadius: '8px',
+});
diff --git a/src/pages/styles.jsx b/src/pages/pageStyles/styles.jsx
similarity index 67%
rename from src/pages/styles.jsx
rename to src/pages/pageStyles/styles.jsx
index 330a361..91c27ca 100644
--- a/src/pages/styles.jsx
+++ b/src/pages/pageStyles/styles.jsx
@@ -1,6 +1,52 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
+  mainContainer: {
+    padding: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    background: '#222', // Dark background
+    // background: theme.palette.primary.light,
+    maxHeight: '100%', // Set the container height to 25vh
+    width: '100%', // Set the container width to 100%
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxShadow: theme.shadows[3],
+    borderRadius: theme.shape.borderRadius,
+  },
+  secondaryContainer: {
+    padding: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    // background: '#222', // Dark background
+    background: '#b7ebde',
+    // background: theme.palette.primary.light,
+    maxHeight: '100%', // Set the container height to 25vh
+    width: '100%', // Set the container width to 100%
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxShadow: theme.shadows[3],
+    borderRadius: theme.shape.borderRadius,
+  },
+  mainPaperContainer: {
+    elevation: 3,
+    borderRadius: 2,
+    margin: 0,
+    marginBottom: theme.spacing(2),
+    background: theme.palette.background.main,
+    width: '100%', // Set the container width to 100%
+    padding: theme.spacing(2),
+  },
+  secondaryPaperContainer: {
+    elevation: 3,
+    borderRadius: 2,
+    margin: 0,
+    marginBottom: theme.spacing(2),
+    // background: theme.palette.background.main,
+    background: '#70d8bd',
+    width: '100%', // Set the container width to 100%
+    padding: theme.spacing(2),
+  },
   // return {
   banner: {
     backgroundImage: `linear-gradient(to right, ${theme.palette.primary.light}, ${theme.palette.secondary.main})`,
@@ -110,6 +156,17 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: '30px',
     fontSize: '18px',
   },
+  cardHoverEffect: {
+    '&:hover': {
+      transform: 'scale(1.05)', // Enlarge card on hover
+      transition: 'transform 0.3s ease-in-out', // Smooth transition for the hover effect
+    },
+  },
+  // carouselContainer: {
+  //   '& .carousel .slide': {
+  //     backgroundColor: (theme) => theme.palette.background.paper,
+  //   },
+  // },
   title: {
     paddingBottom: '15px',
   },
diff --git a/src/pages/pages.json b/src/pages/pages.json
new file mode 100644
index 0000000..ed27827
--- /dev/null
+++ b/src/pages/pages.json
@@ -0,0 +1,46 @@
+{
+  "carouselImages": [
+    { "image": "/images/yugioh.jpeg", "caption": "Yu-Gi-Oh!" },
+    { "image": "/images/pokemon.jpeg", "caption": "Pokemon" },
+    {
+      "image": "/images/magic-the-gathering.jpeg",
+      "caption": "Magic: The Gathering"
+    }
+  ],
+  "tiers": [
+    {
+      "title": "Deck Builder",
+      "description": [
+        "Build and test decks digitally",
+        "Access to a wide library of cards",
+        "Deck performance analytics",
+        "Community deck sharing and rating"
+      ],
+      "buttonText": "Get Started",
+      "buttonVariant": "outlined"
+    },
+    {
+      "title": "Store",
+      "subheader": "Most popular",
+      "description": [
+        "Sell and buy cards with ease",
+        "Secure transaction platform",
+        "Real-time market price tracking",
+        "Exclusive member discounts"
+      ],
+      "buttonText": "Shop now",
+      "buttonVariant": "contained"
+    },
+    {
+      "title": "Collection Tracker",
+      "description": [
+        "Track and manage your card collection",
+        "Value estimation based on market trends",
+        "Automatic collection organization",
+        "Trade and wishlist creation tools"
+      ],
+      "buttonText": "Track Collection",
+      "buttonVariant": "outlined"
+    }
+  ]
+}
diff --git a/src/theme.jsx b/src/theme.jsx
deleted file mode 100644
index e69de29..0000000