diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index eeabcb7..bfd3136 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@mui/material": "^5.14.20",
     "@mui/styles": "^5.14.13",
     "@mui/system": "^5.14.1",
+    "@mui/x-charts": "^6.18.4",
     "@mui/x-data-grid": "^6.16.2",
     "@mui/x-date-pickers": "^6.10.1",
     "@nivo/line": "^0.83.0",
diff --git a/src/App.js b/src/App.js
index e887de4..dc6177e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,369 +1,14 @@
-// // Note: Main App Component
-// import React, { useCallback, useEffect, useRef, useState } from 'react';
-// import {
-//   BrowserRouter as Router,
-//   Route,
-//   Routes,
-//   useNavigate,
-// } from 'react-router-dom';
-// import { Helmet } from 'react-helmet';
+// App.js
+import React from 'react';
+import Main from './Main';
+import WithPageProvider from './context/WithPageProvider';
 
-// // Component Imports
-// import Header from './components/headings/header/Header';
-// import PrivateRoute from './components/reusable/PrivateRoute';
-// import LoginDialog from './components/dialogs/LoginDialog';
-
-// // Page Imports
-// import {
-//   HomePage,
-//   StorePage,
-//   CartPage,
-//   ProfilePage,
-//   CollectionPage,
-//   DeckBuilderPage,
-//   NotFoundPage,
-//   LoginPage,
-// } from './pages';
-
-// import {
-//   useUserContext,
-//   useCollectionStore,
-//   useDeckStore,
-//   useCartStore,
-//   useCardImages,
-//   useAuthContext,
-//   usePageContext,
-// } from './context';
-// import { AppContainer } from './pages/pageStyles/StyledComponents';
-
-// const App = () => {
-//   const { fetchAllCollectionsForUser } = useCollectionStore();
-//   const { fetchAllDecksForUser } = useDeckStore();
-//   const { fetchUserCart } = useCartStore();
-//   const { user } = useUserContext();
-//   const { logoutTimerRef, resetLogoutTimer } = useAuthContext();
-//   const {
-//     isPageLoading,
-//     setIsPageLoading,
-//     displaySplashPage,
-//     handleLoadingTimeout,
-//   } = usePageContext();
-//   const navigate = useNavigate();
-//   const loadingTimeoutRef = useRef(null);
-//   const userId = user?.id;
-//   const [showLoginDialog, setShowLoginDialog] = useState(!userId);
-//   // const [toolbarHeight, setToolbarHeight] = useState('64px'); // Default height
-
-//   const handleLoginSuccess = (isLoggedIn, userId) => {
-//     setShowLoginDialog(false);
-//     setIsPageLoading(false);
-//     if (isLoggedIn && userId) {
-//       resetLogoutTimer();
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (userId) {
-//       window.addEventListener('mousemove', resetLogoutTimer);
-//       window.addEventListener('keypress', resetLogoutTimer);
-//     }
-
-//     return () => {
-//       window.removeEventListener('mousemove', resetLogoutTimer);
-//       window.removeEventListener('keypress', resetLogoutTimer);
-//       if (logoutTimerRef.current) {
-//         clearTimeout(logoutTimerRef.current);
-//       }
-//     };
-//   }, [userId, resetLogoutTimer]);
-
-//   useEffect(() => {
-//     console.log('useEffect triggered for fetch data');
-
-//     const fetchData = async () => {
-//       try {
-//         if (userId && typeof userId === 'string') {
-//           console.log('Fetching user data');
-//           await Promise.all([
-//             fetchAllCollectionsForUser(),
-//             fetchAllDecksForUser(),
-//             // fetchUserCart(),
-//           ]);
-//         }
-//       } catch (error) {
-//         console.error('Error fetching data:', error);
-//       } finally {
-//         setIsPageLoading(false);
-//       }
-//     };
-
-//     fetchData();
-//   }, [userId, fetchAllCollectionsForUser, fetchAllDecksForUser]);
-
-//   useEffect(() => {
-//     if (isPageLoading) {
-//       loadingTimeoutRef.current = setTimeout(() => {
-//         handleLoadingTimeout();
-//         navigate('/login');
-//       }, 45000); // 45 seconds
-//     }
-//     return () => {
-//       if (loadingTimeoutRef.current) {
-//         clearTimeout(loadingTimeoutRef.current);
-//       }
-//     };
-//   }, [isPageLoading, navigate, handleLoadingTimeout]);
-
-//   useEffect(() => {
-//     if (window.location.pathname === '/login') {
-//       setShowLoginDialog(true);
-//       setIsPageLoading(false);
-//       // setIsLoading(false);
-//     }
-//   }, []);
-//   return (
-//     <>
-//       <Helmet>
-//         <link rel="preconnect" href="https://fonts.googleapis.com" />
-//         <link
-//           rel="preconnect"
-//           href="https://fonts.gstatic.com"
-//           crossOrigin="true"
-//         />
-//         <link
-//           href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
-//           rel="stylesheet"
-//         />
-//       </Helmet>{' '}
-//       {displaySplashPage()}
-//       {!userId ? (
-//         <LoginDialog
-//           open={showLoginDialog}
-//           onClose={() => setShowLoginDialog(false)}
-//           onLogin={handleLoginSuccess}
-//         />
-//       ) : (
-//         <AppContainer>
-//           <Header />
-//           <Routes>
-//             <Route path="/" element={<HomePage />} />
-//             <Route path="/home" element={<HomePage />} />
-//             <Route path="/store" element={<StorePage />} />
-//             <Route
-//               path="/cart"
-//               element={
-//                 <PrivateRoute>
-//                   <CartPage />
-//                 </PrivateRoute>
-//               }
-//             />
-//             <Route
-//               path="/userprofile"
-//               element={
-//                 <PrivateRoute>
-//                   <ProfilePage />
-//                 </PrivateRoute>
-//               }
-//             />
-//             <Route
-//               path="/collection"
-//               element={
-//                 <PrivateRoute>
-//                   <CollectionPage />
-//                 </PrivateRoute>
-//               }
-//             />
-//             <Route
-//               path="/deckbuilder"
-//               element={
-//                 <PrivateRoute>
-//                   <DeckBuilderPage />
-//                 </PrivateRoute>
-//               }
-//             />
-//             <Route path="/profile" element={<ProfilePage />} />
-//             <Route path="/login" element={<LoginPage />} />
-//             {/* <Route path="/threejs" element={<ThreeJsCube />} /> */}
-//             {/* <Route path="/cardDeck" element={<CardDeckAnimation />} /> */}
-//             <Route path="*" element={<NotFoundPage />} />{' '}
-//           </Routes>
-//           {/* <Footer /> */}
-//         </AppContainer>
-//       )}
-//     </>
-//   );
-// };
-
-// export default App;
-// Note: Main App Component
-import React, { useEffect, useRef, useState } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-
-// Component and Page Imports
-import Header from './components/headings/header/Header';
-import PrivateRoute from './components/reusable/PrivateRoute';
-import LoginDialog from './components/dialogs/LoginDialog';
-import {
-  HomePage,
-  StorePage,
-  CartPage,
-  ProfilePage,
-  CollectionPage,
-  DeckBuilderPage,
-  NotFoundPage,
-  LoginPage,
-} from './pages';
-
-// Context Hooks
-import {
-  useUserContext,
-  useCollectionStore,
-  useDeckStore,
-  useAuthContext,
-  usePageContext,
-} from './context';
-import { AppContainer } from './pages/pageStyles/StyledComponents';
+// Call the higher-order component function outside the component function
+// to avoid remounting on every render
+const WrappedMain = WithPageProvider(Main);
 
 const App = () => {
-  const { user, fetchUserCart } = useUserContext();
-  const { fetchAllCollectionsForUser } = useCollectionStore();
-  const { fetchAllDecksForUser } = useDeckStore();
-  const { logoutTimerRef, resetLogoutTimer } = useAuthContext();
-  const {
-    isPageLoading,
-    setIsPageLoading,
-    displaySplashPage,
-    handleLoadingTimeout,
-  } = usePageContext();
-
-  const userId = user?.id;
-  const [showLoginDialog, setShowLoginDialog] = useState(!userId);
-  const loadingTimeoutRef = useRef(null);
-
-  const setupEventListeners = () => {
-    window.addEventListener('mousemove', resetLogoutTimer);
-    window.addEventListener('keypress', resetLogoutTimer);
-  };
-
-  const removeEventListeners = () => {
-    window.removeEventListener('mousemove', resetLogoutTimer);
-    window.removeEventListener('keypress', resetLogoutTimer);
-  };
-
-  const fetchData = async () => {
-    try {
-      await Promise.all([
-        fetchAllCollectionsForUser(),
-        fetchAllDecksForUser(),
-        // Consider uncommenting if cart data is required immediately
-        // fetchUserCart(),
-      ]);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    } finally {
-      setIsPageLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (userId) setupEventListeners();
-    return () => {
-      removeEventListeners();
-      if (logoutTimerRef.current) clearTimeout(logoutTimerRef.current);
-    };
-  }, [userId, resetLogoutTimer]);
-
-  useEffect(() => {
-    if (userId) fetchData();
-  }, [userId]);
-
-  useEffect(() => {
-    if (isPageLoading) {
-      loadingTimeoutRef.current = setTimeout(() => {
-        handleLoadingTimeout();
-      }, 45000); // 45 seconds timeout
-    }
-    return () => clearTimeout(loadingTimeoutRef.current);
-  }, [isPageLoading, handleLoadingTimeout]);
-
-  useEffect(() => {
-    if (window.location.pathname === '/login') {
-      setShowLoginDialog(true);
-      setIsPageLoading(false);
-    }
-  }, []);
-
-  return (
-    <>
-      <Helmet>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="true"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
-          rel="stylesheet"
-        />
-      </Helmet>{' '}
-      {displaySplashPage()}
-      {!userId ? (
-        <LoginDialog
-          open={showLoginDialog}
-          onClose={() => setShowLoginDialog(false)}
-          onLogin={(isLoggedIn, userId) => setShowLoginDialog(false)}
-        />
-      ) : (
-        <AppContainer>
-          <Header />
-          <Routes>
-            <Route path="/" element={<HomePage />} />
-            <Route path="/home" element={<HomePage />} />
-            <Route path="/store" element={<StorePage />} />
-            <Route
-              path="/cart"
-              element={
-                <PrivateRoute>
-                  <CartPage />
-                </PrivateRoute>
-              }
-            />
-            <Route
-              path="/userprofile"
-              element={
-                <PrivateRoute>
-                  <ProfilePage />
-                </PrivateRoute>
-              }
-            />
-            <Route
-              path="/collection"
-              element={
-                <PrivateRoute>
-                  <CollectionPage />
-                </PrivateRoute>
-              }
-            />
-            <Route
-              path="/deckbuilder"
-              element={
-                <PrivateRoute>
-                  <DeckBuilderPage />
-                </PrivateRoute>
-              }
-            />
-            <Route path="/profile" element={<ProfilePage />} />
-            <Route path="/login" element={<LoginPage />} />
-            {/* <Route path="/threejs" element={<ThreeJsCube />} /> */}
-            {/* <Route path="/cardDeck" element={<CardDeckAnimation />} /> */}
-            <Route path="*" element={<NotFoundPage />} />{' '}
-          </Routes>
-        </AppContainer>
-      )}
-    </>
-  );
+  return <WrappedMain />;
 };
 
 export default App;
diff --git a/src/Main.jsx b/src/Main.jsx
new file mode 100644
index 0000000..9613800
--- /dev/null
+++ b/src/Main.jsx
@@ -0,0 +1,229 @@
+// Note: Main App Component
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  // useNavigate,
+} from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+
+// Component and Page Imports
+import Header from './components/headings/header/Header';
+import PrivateRoute from './components/reusable/PrivateRoute';
+import LoginDialog from './components/dialogs/LoginDialog';
+import {
+  HomePage,
+  StorePage,
+  CartPage,
+  ProfilePage,
+  CollectionPage,
+  DeckBuilderPage,
+  NotFoundPage,
+  LoginPage,
+} from './pages';
+import {
+  useCollectionStore,
+  useDeckStore,
+  useAuthContext,
+  usePageContext,
+} from './context';
+import { AppContainer } from './pages/pageStyles/StyledComponents';
+import { useCookies } from 'react-cookie';
+import useDialog from './context/hooks/useDialog';
+import useSnackBar from './context/hooks/useSnackBar';
+
+const Main = () => {
+  const [cookies] = useCookies(['authUser']);
+  const authUser = cookies?.authUser;
+  const { isLoggedIn, resetLogoutTimer } = useAuthContext();
+  const { loadingStatus, returnDisplay, setLoading } = usePageContext();
+  const { fetchAllCollectionsForUser } = useCollectionStore();
+  const { fetchAllDecksForUser } = useDeckStore();
+  const handleSnackBar = useSnackBar()[1];
+
+  const { isLoginDialogOpen, openLoginDialog, closeLoginDialog } =
+    useDialog(handleSnackBar); // Assuming false represents the logged-in state
+
+  const routeConfig = [
+    { path: '/', component: HomePage, isPrivate: false },
+    { path: '/home', component: HomePage, isPrivate: false },
+    { path: '/store', component: StorePage, isPrivate: false },
+    { path: '/cart', component: CartPage, isPrivate: true },
+    { path: '/userprofile', component: ProfilePage, isPrivate: true },
+    { path: '/collection', component: CollectionPage, isPrivate: true },
+    { path: '/deckbuilder', component: DeckBuilderPage, isPrivate: true },
+    { path: '/profile', component: ProfilePage, isPrivate: false },
+    { path: '/login', component: LoginPage, isPrivate: false },
+    { path: '*', component: NotFoundPage, isPrivate: false },
+  ];
+  // const [showLoginDialog, setShowLoginDialog] = useState(!isLoggedIn);
+  const fetchData = async () => {
+    setLoading('isPageLoading', true);
+    try {
+      await Promise.all([fetchAllCollectionsForUser(), fetchAllDecksForUser()]);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading('isPageLoading', false);
+    }
+  };
+  const renderHelmet = () => {
+    console.log('Rendering helmet...');
+    return (
+      <Helmet>
+        {/* Basic */}
+        <title>Your Website Title</title>
+        <meta name="description" content="Description of your site or page" />
+        <link rel="canonical" href="http://mysite.com/example" />
+        <link rel="icon" type="image/png" href="/favicon.png" sizes="16x16" />
+
+        {/* SEO */}
+        <meta name="keywords" content="your, tags" />
+        {/* Social Media */}
+        <meta property="og:title" content="Title Here" />
+        <meta property="og:description" content="Description Here" />
+        <meta
+          property="og:image"
+          content="http://mysite.com/path/to/image.jpg"
+        />
+        <meta property="og:url" content="http://mysite.com" />
+        <meta name="twitter:card" content="summary_large_image" />
+
+        {/* Responsive and mobile */}
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        {/* Additional links and styles */}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="true"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
+          rel="stylesheet"
+        />
+
+        {/* Specify language and character set */}
+        <html lang="en" />
+        <meta charSet="utf-8" />
+
+        {/* Scripts */}
+        {/* Example: Add a script needed for a service or functionality */}
+        {/* <script src="https://cdn.service.com/library.js"></script> */}
+      </Helmet>
+    );
+  };
+  const renderRoutes = () => (
+    <Routes>
+      {routeConfig.map(({ path, component: Component, isPrivate }, index) => (
+        <Route
+          key={index}
+          path={path}
+          element={
+            isPrivate ? (
+              <PrivateRoute>
+                <Component />
+              </PrivateRoute>
+            ) : (
+              <Component />
+            )
+          }
+        />
+      ))}
+    </Routes>
+  );
+  const renderLoginDialog = () => {
+    console.log('Auth user not found, rendering login dialog...', authUser);
+    return <LoginDialog />;
+  };
+  // useEffect(() => {
+  //   if (isLoggedIn) {
+  //     resetLogoutTimer();
+  //     fetchData(); // Fetch data when the user is logged in
+  //   }
+  // }, [isLoggedIn, resetLogoutTimer, fetchData]); // Remove authUser from dependencies
+
+  // useEffect(() => {
+  //   // Manage login dialog based on isLoggedIn status
+  //   if (isLoggedIn && isLoginDialogOpen) {
+  //     closeLoginDialog();
+  //   } else if (!isLoggedIn && !isLoginDialogOpen) {
+  //     openLoginDialog();
+  //   }
+  // }, [isLoggedIn, isLoginDialogOpen, openLoginDialog, closeLoginDialog]);
+
+  return (
+    <>
+      {renderHelmet()}
+      {!authUser ? (
+        renderLoginDialog()
+      ) : (
+        <AppContainer>
+          {/* {authUser} */}
+
+          <Header />
+          {/* {returnDisplay()} */}
+          {renderRoutes()}
+          {/* <Routes>
+            {renderRoutes(routeConfig)} {/* Use the renderRoutes function */}
+          {/* </Routes>  */}
+          {/* {snackbar} */}
+        </AppContainer>
+      )}
+    </>
+  );
+};
+
+export default Main;
+// useEffect(() => {
+//   if (userId) setupEventListeners();
+//   return () => {
+//     removeEventListeners();
+//     if (logoutTimerRef.current) clearTimeout(logoutTimerRef.current);
+//   };
+// }, [userId, resetLogoutTimer]);
+// // Manage loading display
+// useEffect(() => {
+//   if (!isLoggedIn) return;
+//   if (!authUser) return;
+
+//   const fetchData = async () => {
+//     if (isLoggedIn && authUser) {
+//       setLoading('isPageLoading', true);
+//       try {
+//         await Promise.all([
+//           fetchAllCollectionsForUser(),
+//           fetchAllDecksForUser(),
+//         ]);
+//       } catch (error) {
+//         console.error('Error fetching data:', error);
+//       } finally {
+//         setLoading('isPageLoading', false);
+//       }
+//     }
+//   };
+//   fetchData();
+// }, [isLoggedIn, authUser, fetchAllCollectionsForUser, fetchAllDecksForUser]);
+// // Manage logout timer reset
+// useEffect(() => {
+//   if (isLoggedIn) resetLogoutTimer();
+// }, [isLoggedIn, resetLogoutTimer]);
+// // Manage login dialog visibility
+// useEffect(() => {
+//   if (isLoggedIn && isLoginDialogOpen) {
+//     console.log('Closing login dialog...');
+//     closeLoginDialog();
+//   }
+//   if (!isLoggedIn && !isLoginDialogOpen) {
+//     console.log('Opening login dialog...');
+//     openLoginDialog();
+//   }
+//   // if (!isLoggedIn) {
+//   // }
+//   // setShowLoginDialog(
+//   //   // window.location.pathname === '/login' ||
+//   //   !isLoggedIn
+//   // );
+// }, [isLoggedIn]);
diff --git a/src/components/collection/PortfolioContent.jsx b/src/assets/PortfolioContent.jsx
similarity index 71%
rename from src/components/collection/PortfolioContent.jsx
rename to src/assets/PortfolioContent.jsx
index 2aff7a3..0a7f197 100644
--- a/src/components/collection/PortfolioContent.jsx
+++ b/src/assets/PortfolioContent.jsx
@@ -1,14 +1,14 @@
 // PortfolioContent.jsx
 import React, { useEffect, useState } from 'react';
 import { Box, Grid, Paper } from '@mui/material';
-import HeaderTitle from '../reusable/HeaderTitle';
+import HeaderTitle from '../components/reusable/HeaderTitle';
 // eslint-disable-next-line max-len
-import CollectionPortfolioChartContainer from '../../containers/collectionPageContainers/CollectionPortfolioChartContainer';
+import CollectionPortfolioChartContainer from '../containers/collectionPageContainers/CollectionPortfolioChartContainer';
 // eslint-disable-next-line max-len
-import CollectionPortfolioListContainer from '../../containers/collectionPageContainers/CollectionPortfolioListContainer';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-import usePortfolioStyles from '../../context/hooks/usePortfolioStyles';
-import { useMode } from '../../context';
+import CollectionPortfolioListContainer from '../containers/collectionPageContainers/CollectionPortfolioListContainer';
+import { useCollectionStore } from '../context/CollectionContext/CollectionContext';
+import usePortfolioStyles from '../context/hooks/usePortfolioStyles';
+import { useMode } from '../context';
 
 const PortfolioContent = ({ selectedCards, removeCard }) => {
   const { theme } = useMode();
diff --git a/src/assets/animations/CardRowsAnimation.jsx b/src/assets/animations/CardRowsAnimation.jsx
index fc6f40b..dc76243 100644
--- a/src/assets/animations/CardRowsAnimation.jsx
+++ b/src/assets/animations/CardRowsAnimation.jsx
@@ -16,46 +16,53 @@ const CardRowsAnimation = () => {
     );
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-
-    // Append renderer to the container ref
     if (containerRef.current) {
       containerRef.current.appendChild(renderer.domElement);
     }
 
-    // Camera position
     camera.position.z = 5;
 
     // Texture loader
     const textureLoader = new THREE.TextureLoader();
     const cardTexture = textureLoader.load(placeholder);
 
-    // Define card geometry and material
     const geometry = new THREE.PlaneGeometry(1, 1.4);
     const material = new THREE.MeshBasicMaterial({ map: cardTexture });
 
-    // Rows and columns configuration
-    const rows = 4;
-    const cardSpacing = 1.8;
+    const rows = 4; // Define how many rows of cards you want
+    const cardSpacing = 1.8; // Define the spacing between cards
+    // Calculate initial cards per row based on the window width
     let cardsPerRow = Math.floor(
       window.innerWidth / (geometry.parameters.width * cardSpacing)
     );
 
-    // Create card meshes and add to scene
     const cardRows = [];
+    // for (let i = 0; i < rows; i++) {
+    //   const row = new THREE.Group();
+    //   for (let j = 0; j < cardsPerRow; j++) {
+    //     const card = new THREE.Mesh(geometry, material);
+    //     card.position.x = (j - cardsPerRow / 2) * cardSpacing;
+    //     card.position.y = (i - rows / 2) * cardSpacing;
+    //     row.add(card);
+    //   }
+    //   // Alternate direction for each row
+    //   row.userData = { direction: i % 2 === 0 ? 0.005 : -0.005 };
+    //   cardRows.push(row);
+    //   scene.add(row);
+    // }
     for (let i = 0; i < rows; i++) {
       const row = new THREE.Group();
       for (let j = 0; j < cardsPerRow; j++) {
         const card = new THREE.Mesh(geometry, material);
+        // Position cards horizontally centered
         card.position.x = (j - cardsPerRow / 2) * cardSpacing;
-        card.position.y = (i - rows / 2) * cardSpacing;
+        // Adjust 'y' positioning to stack from top to bottom
+        card.position.y = -i * cardSpacing; // Flipping the direction for y
         row.add(card);
       }
-      // Alternate direction for each row
-      row.userData = { direction: i % 2 === 0 ? 0.005 : -0.005 };
       cardRows.push(row);
       scene.add(row);
     }
-
     // Animation loop
     const animate = () => {
       requestAnimationFrame(animate);
diff --git a/src/assets/animations/LoadingCardAnimation.jsx b/src/assets/animations/LoadingCardAnimation.jsx
index 12a4f02..3fd0647 100644
--- a/src/assets/animations/LoadingCardAnimation.jsx
+++ b/src/assets/animations/LoadingCardAnimation.jsx
@@ -1,228 +1,93 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef } 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]);
+const sizes = {
+  extraSmall: { width: 0.3, height: 0.4 },
+  small: { width: 0.5, height: 0.7 },
+  medium: { width: 1, height: 1.4 },
+  large: { width: 2, height: 2.8 },
+  extraLarge: { width: 3, height: 4.2 },
+};
+
+function LoadingCardAnimation({ selected, size = 'medium' }) {
+  const mount = useRef(null);
+  const placeholderImage = '../../assets/images/placeholder.png'; // Replace with your placeholder image path
+  const placeholderTexture = new THREE.TextureLoader().load(placeholderImage);
 
   useEffect(() => {
-    if (!randomCardImage) return;
+    if (!selected) return;
+
+    const currentMount = mount.current;
+
+    // Get dimensions from the sizes object
+    const { width, height } = sizes[size];
 
+    // Scene, Camera, and Renderer setup
     const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(
-      75,
-      window.innerWidth / window.innerHeight,
-      0.1,
-      1000
-    );
+    // Smaller FOV can make objects appear larger within the same canvas size
+    const camera = new THREE.PerspectiveCamera(45, width / height, 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);
-      }
-    );
 
+    // Keep the canvas size the same but make the content appear larger
+    renderer.setSize(width * 100, height * 100); // Keeping canvas size
+
+    currentMount.appendChild(renderer.domElement);
+
+    // Geometry and Material setup
+    const cardGeometry = new THREE.BoxGeometry(1, 1.4, 0.01); // Standard size for the geometry
+    const cardMaterial = new THREE.MeshBasicMaterial({
+      map: placeholderTexture,
+    });
+
+    const card = new THREE.Mesh(cardGeometry, [
+      cardMaterial,
+      cardMaterial,
+      cardMaterial,
+      cardMaterial,
+      cardMaterial,
+      cardMaterial,
+    ]);
+
+    // Scale the card based on size prop
+    card.scale.set(width, height, 1); // Scaling the card
+
+    scene.add(card);
+    // Adjust the camera position closer to make the object appear larger
+    camera.position.z = 2;
+
+    const animate = function () {
+      requestAnimationFrame(animate);
+      card.rotation.y += 0.01; // Speed of rotation
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    // Clean up
     return () => {
-      if (loadingIconContainer.contains(renderer.domElement)) {
-        loadingIconContainer.removeChild(renderer.domElement);
-      }
+      currentMount.removeChild(renderer.domElement);
+      scene.remove(card);
+      cardMaterial.dispose();
+      cardGeometry.dispose();
     };
-  }, [randomCardImage]);
+  }, [selected, size]); // Rerun effect if selected or size changes
 
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error}</div>;
+  if (!selected) {
+    return null;
+  }
 
   return (
-    <div id="loadingIcon" style={{ width: '100%', height: '400px' }}>
-      Three.js animation should appear here
-    </div>
+    <div
+      ref={mount}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center', // Center horizontally
+        alignItems: 'center', // Center vertically
+      }}
+    />
   );
 }
 
 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/components/collection/CardPortfolio.jsx b/src/assets/cleanup/CardPortfolio.jsx
similarity index 68%
rename from src/components/collection/CardPortfolio.jsx
rename to src/assets/cleanup/CardPortfolio.jsx
index 8a9aa79..70cee31 100644
--- a/src/components/collection/CardPortfolio.jsx
+++ b/src/assets/cleanup/CardPortfolio.jsx
@@ -1,30 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import SelectCollection from './SelectCollection';
-import PortfolioContent from './PortfolioContent';
-import { Box, Typography, useTheme } from '@mui/material';
+import SelectCollection from '../../layout/collection/SelectCollection';
+import PortfolioContent from '../PortfolioContent';
+import { Box } from '@mui/material';
 import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
 import { useMode } from '../../context';
-import { makeStyles } from '@mui/styles';
 import { usePortfolioStyles } from '../../context/hooks/usePortfolioStyles';
-// const useCardPortfolioStyles = makeStyles((theme) => ({
-//   boxStyle: {
-//     display: 'flex',
-//     flexDirection: 'column',
-//     alignItems: 'center',
-//     justifyContent: 'center',
-//     borderRadius: theme.shape.borderRadius,
-//     flexGrow: 1,
-//     background: '#333',
-//     padding: {
-//       xs: theme.spacing(1),
-//       sm: theme.spacing(1),
-//       md: theme.spacing(2.5),
-//       lg: theme.spacing(2.5),
-//     },
-//     height: '100%',
-//     width: '100%',
-//   },
-// }));
+
 const CardPortfolio = ({ allCollections, onCollectionSelect }) => {
   const { theme } = useMode();
   const classes = usePortfolioStyles(theme);
diff --git a/src/components/cards/CarouselCard.jsx b/src/assets/cleanup/CarouselCard.jsx
similarity index 98%
rename from src/components/cards/CarouselCard.jsx
rename to src/assets/cleanup/CarouselCard.jsx
index 75000f7..08ddd93 100644
--- a/src/components/cards/CarouselCard.jsx
+++ b/src/assets/cleanup/CarouselCard.jsx
@@ -11,7 +11,7 @@ import {
 import { useMode } from '../../context/hooks/colormode';
 import { makeStyles, styled } from '@mui/styles';
 import { ModalContext } from '../../context/ModalContext/ModalContext';
-import GenericCard from './GenericCard';
+import GenericCard from '../../components/cards/GenericCard';
 import {
   MainContainer2,
   MainContainer,
diff --git a/src/assets/cleanup/PortfolioChart.jsx b/src/assets/cleanup/PortfolioChart.jsx
new file mode 100644
index 0000000..517354e
--- /dev/null
+++ b/src/assets/cleanup/PortfolioChart.jsx
@@ -0,0 +1,193 @@
+// import React, {
+//   useCallback,
+//   useEffect,
+//   useLayoutEffect,
+//   useMemo,
+//   useRef,
+//   useState,
+// } from 'react';
+// import {
+//   Box,
+//   Container,
+//   Grid,
+//   Paper,
+//   styled,
+//   useMediaQuery,
+//   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 debounce from 'lodash/debounce';
+// import { getUniqueValidData } from '../../../../context/CollectionContext/helpers';
+// import { usePageContext } from '../../../../context';
+// import LoadingIndicator from '../../../reusable/indicators/LoadingIndicator';
+
+// 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),
+// }));
+
+// const ResponsiveSquare = styled(Box)(({ theme }) => ({
+//   width: '100%',
+//   paddingTop: '100%',
+//   backgroundColor: theme.palette.background.paper,
+//   borderRadius: theme.shape.borderRadius,
+//   boxShadow: theme.shadows[5],
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+// }));
+
+// function handleThresholdUpdate(lastUpdateTime, setLastUpdateTime) {
+//   const currentTime = new Date().getTime();
+//   if (!lastUpdateTime || currentTime - lastUpdateTime >= 600000) {
+//     setLastUpdateTime(currentTime);
+//     return currentTime;
+//   }
+//   return lastUpdateTime;
+// }
+
+// const PortfolioChart = () => {
+//   const { selectedCollection, allXYValues } = useCollectionStore();
+//   console.log('allXYValues', allXYValues);
+//   const { latestData, timeRange, groupAndAverageData, convertDataForNivo2 } =
+//     useChartContext();
+//   const { isLoading, setIsLoading, displayLoadingIndicator } = usePageContext();
+//   const theme = useTheme();
+//   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+//   // const [lastUpdateTime, setLastUpdateTime] = useState(null);
+//   const lastUpdateTimeRef = useRef(null);
+
+//   const chartContainerRef = useRef(null);
+//   const [chartDimensions, setChartDimensions] = useState({
+//     width: 0,
+//     height: 0,
+//   });
+//   const HEIGHT_TO_WIDTH_RATIO = 7 / 10;
+//   const threshold = useMemo(
+//     () => handleThresholdUpdate(lastUpdateTimeRef),
+//     [lastUpdateTimeRef]
+//   );
+//   const [dataReady, setDataReady] = useState(false);
+//   const calculateChartDimensions = useCallback(() => {
+//     if (chartContainerRef.current) {
+//       const width = chartContainerRef.current.offsetWidth;
+//       const height = width * HEIGHT_TO_WIDTH_RATIO;
+//       setChartDimensions({ width, height });
+//     }
+//   }, []);
+
+//   // Effect: Update chart dimensions on window resize
+//   useEffect(() => {
+//     const handleResize = debounce(calculateChartDimensions, 100);
+//     window.addEventListener('resize', handleResize);
+//     return () => {
+//       handleResize.cancel();
+//       window.removeEventListener('resize', handleResize);
+//     };
+//   }, [calculateChartDimensions]);
+
+//   // Effect: Set data ready state based on allXYValues
+//   useEffect(() => {
+//     if (Array.isArray(allXYValues) && allXYValues?.length > 0) {
+//       setDataReady(true);
+//     }
+//   }, [allXYValues]);
+//   useLayoutEffect(() => {
+//     if (dataReady) {
+//       calculateChartDimensions();
+//     }
+//   }, [dataReady]);
+//   // const getFilteredData2 = useCallback((values) => {
+//   //   if (!values || !Array.isArray(values) || !values?.length > 0) return [];
+//   //   return getUniqueValidData(values || []);
+//   // }, []);
+//   // const filteredChartData2 = useMemo(
+//   //   () => getFilteredData2(allXYValues),
+//   //   [allXYValues, timeRange, getFilteredData2]
+//   // );
+//   const isEnoughData = allXYValues?.length >= 5;
+//   const rawData2 = useMemo(() => {
+//     return groupAndAverageData(allXYValues, threshold, timeRange);
+//   }, [allXYValues, threshold, timeRange]);
+
+//   const nivoReadyData2 = useMemo(() => {
+//     return rawData2?.length > 0 ? convertDataForNivo2(rawData2) : [];
+//   }, [rawData2]);
+
+//   useLayoutEffect(() => {
+//     if (dataReady) calculateChartDimensions();
+//   }, [dataReady, calculateChartDimensions]);
+
+//   // Render loading indicator, error message or chart based on conditions
+//   if (!dataReady) {
+//     return <LoadingIndicator />;
+//   }
+
+//   if (!isEnoughData || !rawData2?.length) {
+//     return (
+//       <ResponsiveSquare>
+//         <div>Not enough data points</div>
+//       </ResponsiveSquare>
+//     );
+//   }
+
+//   return (
+//     <Container
+//       maxWidth="lg"
+//       sx={{
+//         display: 'flex',
+//         flexDirection: 'column',
+//         alignItems: 'center',
+//         padding: isMobile ? theme.spacing(1) : theme.spacing(2),
+//         gap: theme.spacing(2),
+//         background: '#333',
+//         color: '#fff',
+//         border: '1px solid #555',
+//         borderRadius: 2,
+//         justifyContent: 'center', // Centers vertically
+//       }}
+//     >
+//       <ErrorBoundary>
+//         <Grid container spacing={2}>
+//           <Grid
+//             item
+//             xs={12}
+//             sx={{ height: '100%', borderRadius: 2, width: '100%' }}
+//           >
+//             <ChartPaper elevation={3} ref={chartContainerRef}>
+//               {allXYValues?.length > 0 && rawData2?.length > 0 ? (
+//                 <LinearChart
+//                   nivoReadyData={nivoReadyData2}
+//                   // filteredChartData={filteredChartData2}
+//                   latestData={latestData}
+//                   timeRange={timeRange}
+//                   dimensions={chartDimensions}
+//                   timeRanges={timeRange}
+//                 />
+//               ) : (
+//                 <div>No data available</div>
+//               )}
+//             </ChartPaper>
+//           </Grid>
+//         </Grid>
+//       </ErrorBoundary>
+//     </Container>
+//   );
+// };
+
+// export default PortfolioChart;
diff --git a/src/assets/data/card_sample.json b/src/assets/data/card_sample.json
new file mode 100644
index 0000000..3a43dea
--- /dev/null
+++ b/src/assets/data/card_sample.json
@@ -0,0 +1,295 @@
+{
+  "data": [
+    {
+      "id": 83764719,
+      "name": "Monster Reborn",
+      "type": "Spell Card",
+      "frameType": "spell",
+      "desc": "Target 1 monster in either GY; Special Summon it.",
+      "race": "Normal",
+      "ygoprodeck_url": "https://ygoprodeck.com/card/monster-reborn-7027",
+      "card_sets": [
+        {
+          "set_name": "2019 Gold Sarcophagus Tin",
+          "set_code": "TN19-EN011",
+          "set_rarity": "Prismatic Secret Rare",
+          "set_rarity_code": "(PScR)",
+          "set_price": "4.44"
+        },
+        {
+          "set_name": "Battle Pack 2: War of the Giants",
+          "set_code": "BP02-EN128",
+          "set_rarity": "Mosaic Rare",
+          "set_rarity_code": "(MSR)",
+          "set_price": "2.1"
+        },
+        {
+          "set_name": "Battle Pack 2: War of the Giants",
+          "set_code": "BP02-EN128",
+          "set_rarity": "Rare",
+          "set_rarity_code": "(R)",
+          "set_price": "2.2"
+        },
+        {
+          "set_name": "Battles of Legend: Relentless Revenge",
+          "set_code": "BLRR-EN046",
+          "set_rarity": "Secret Rare",
+          "set_rarity_code": "(ScR)",
+          "set_price": "5.49"
+        },
+        {
+          "set_name": "Dark Beginning 1",
+          "set_code": "DB1-EN133",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "23.1"
+        },
+        {
+          "set_name": "Dark Legends",
+          "set_code": "DLG1-EN017",
+          "set_rarity": "Super Rare",
+          "set_rarity_code": "(SR)",
+          "set_price": "14.92"
+        },
+        {
+          "set_name": "Duelist Pack: Yugi",
+          "set_code": "DPYG-EN019",
+          "set_rarity": "Rare",
+          "set_rarity_code": "(R)",
+          "set_price": "1.91"
+        },
+        {
+          "set_name": "Egyptian God Deck: Obelisk the Tormentor",
+          "set_code": "EGO1-EN024",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.44"
+        },
+        {
+          "set_name": "Egyptian God Deck: Slifer the Sky Dragon",
+          "set_code": "EGS1-EN023",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.51"
+        },
+        {
+          "set_name": "Hobby League 7 participation card A",
+          "set_code": "HL07-EN001",
+          "set_rarity": "Ultra Parallel Rare",
+          "set_rarity_code": "(UPR)",
+          "set_price": "43.71"
+        },
+        {
+          "set_name": "Legend of Blue Eyes White Dragon",
+          "set_code": "LOB-118",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "27.29"
+        },
+        {
+          "set_name": "Legend of Blue Eyes White Dragon",
+          "set_code": "LOB-E096",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "27.53"
+        },
+        {
+          "set_name": "Legend of Blue Eyes White Dragon",
+          "set_code": "LOB-EN118",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "49.86"
+        },
+        {
+          "set_name": "Legendary Collection 3: Yugi's World Mega Pack",
+          "set_code": "LCYW-EN058",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "6.68"
+        },
+        {
+          "set_name": "Legendary Collection 4: Joey's World Mega Pack",
+          "set_code": "LCJW-EN060",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "4.63"
+        },
+        {
+          "set_name": "Legendary Duelists: Rage of Ra",
+          "set_code": "LED7-EN012",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.57"
+        },
+        {
+          "set_name": "Legendary Hero Decks",
+          "set_code": "LEHD-ENA23",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.58"
+        },
+        {
+          "set_name": "Legendary Hero Decks",
+          "set_code": "LEHD-ENB19",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.4"
+        },
+        {
+          "set_name": "Legendary Hero Decks",
+          "set_code": "LEHD-ENC16",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.42"
+        },
+        {
+          "set_name": "Maximum Gold",
+          "set_code": "MAGO-EN045",
+          "set_rarity": "Premium Gold Rare",
+          "set_rarity_code": "(PG)",
+          "set_price": "2.97"
+        },
+        {
+          "set_name": "Retro Pack",
+          "set_code": "RP01-EN016",
+          "set_rarity": "Super Rare",
+          "set_rarity_code": "(SR)",
+          "set_price": "50.61"
+        },
+        {
+          "set_name": "Saga of Blue-Eyes White Dragon Structure Deck",
+          "set_code": "SDBE-EN028",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.81"
+        },
+        {
+          "set_name": "Starter Deck: Codebreaker",
+          "set_code": "YS18-EN024",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.77"
+        },
+        {
+          "set_name": "Starter Deck: Joey",
+          "set_code": "SDJ-035",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "2.19"
+        },
+        {
+          "set_name": "Starter Deck: Kaiba",
+          "set_code": "SDK-036",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.77"
+        },
+        {
+          "set_name": "Starter Deck: Kaiba",
+          "set_code": "SDK-E033",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "16.52"
+        },
+        {
+          "set_name": "Starter Deck: Kaiba Evolution",
+          "set_code": "SKE-029",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "2.28"
+        },
+        {
+          "set_name": "Starter Deck: Pegasus",
+          "set_code": "SDP-035",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "2.07"
+        },
+        {
+          "set_name": "Starter Deck: Yugi",
+          "set_code": "SDY-030",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "2.68"
+        },
+        {
+          "set_name": "Starter Deck: Yugi",
+          "set_code": "SDY-E028",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "10.09"
+        },
+        {
+          "set_name": "Starter Deck: Yugi Evolution",
+          "set_code": "SYE-029",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "2.02"
+        },
+        {
+          "set_name": "The Lost Art Promotion (series)",
+          "set_code": "LART-EN001",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "0"
+        },
+        {
+          "set_name": "The Lost Art Promotion A",
+          "set_code": "LART-EN001",
+          "set_rarity": "Ultra Rare",
+          "set_rarity_code": "(UR)",
+          "set_price": "62.69"
+        },
+        {
+          "set_name": "Yugi's Legendary Decks",
+          "set_code": "YGLD-ENA23",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.78"
+        },
+        {
+          "set_name": "Yugi's Legendary Decks",
+          "set_code": "YGLD-ENB16",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.84"
+        },
+        {
+          "set_name": "Yugi's Legendary Decks",
+          "set_code": "YGLD-ENC24",
+          "set_rarity": "Common",
+          "set_rarity_code": "(C)",
+          "set_price": "1.73"
+        }
+      ],
+      "banlist_info": {
+        "ban_tcg": "Limited",
+        "ban_ocg": "Limited",
+        "ban_goat": "Banned"
+      },
+      "card_images": [
+        {
+          "id": 83764719,
+          "image_url": "https://images.ygoprodeck.com/images/cards/83764719.jpg",
+          "image_url_small": "https://images.ygoprodeck.com/images/cards_small/83764719.jpg",
+          "image_url_cropped": "https://images.ygoprodeck.com/images/cards_cropped/83764719.jpg"
+        },
+        {
+          "id": 83764718,
+          "image_url": "https://images.ygoprodeck.com/images/cards/83764718.jpg",
+          "image_url_small": "https://images.ygoprodeck.com/images/cards_small/83764718.jpg",
+          "image_url_cropped": "https://images.ygoprodeck.com/images/cards_cropped/83764718.jpg"
+        }
+      ],
+      "card_prices": [
+        {
+          "cardmarket_price": "0.16",
+          "tcgplayer_price": "0.27",
+          "ebay_price": "0.99",
+          "amazon_price": "0.79",
+          "coolstuffinc_price": "0.79"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/assets/themeSettings.jsx b/src/assets/themeSettings.jsx
index f75a57f..554551e 100644
--- a/src/assets/themeSettings.jsx
+++ b/src/assets/themeSettings.jsx
@@ -19,13 +19,13 @@ export const themeSettings = (mode) => {
   const colors = tokens(mode);
 
   const backgroundA = {
-    darkest: '#70d8bd', // '#70d8bd',
-    darker: '#70d8bd',
-    dark: '#70d8bd',
-    default: '#4cceac', // '#4cceac',
-    light: '#4cceac',
-    lighter: '#4cceac',
-    lightest: '#4cceac',
+    darkest: '#2e7c67', // '#70d8bd',
+    darker: '#3da58a',
+    dark: '#4cceac',
+    default: '#70d8bd', // '#4cceac',
+    light: '#94e2cd',
+    lighter: '#b7ebde',
+    lightest: '#dbf5ee',
   };
   const backgroundB = {
     darkest: '#111',
@@ -96,13 +96,16 @@ export const themeSettings = (mode) => {
         // paper: mode === 'dark' ? colors.grey[300] : '#ffffff',
       },
       backgroundA: {
-        darkest: '#70d8bd', // '#70d8bd',
-        darker: '#70d8bd',
-        dark: '#70d8bd',
-        default: '#4cceac', // '#4cceac',
-        light: '#4cceac',
-        lighter: '#4cceac',
-        lightest: '#4cceac',
+        darkest: '#2e7c67', // '#70d8bd',
+        darker: '#3da58a',
+        dark: '#4cceac',
+        default: '#70d8bd', // '#4cceac',
+        light: '#94e2cd',
+        lighter: '#b7ebde',
+        lightest: '#dbf5ee',
+        contrastTextA: '#FBFAF2',
+        contrastTextB: '#333',
+        contrastTextC: '#555',
       },
       backgroundB: {
         darkest: '#111',
@@ -134,6 +137,22 @@ export const themeSettings = (mode) => {
         lightest: hexToRgba(backgroundA.lightest, 0.2),
         contrastText: '#FBFAF2',
       },
+      rarity: {
+        common: '#C0C0C0', // Silver
+        uncommon: '#B8860B', // DarkGoldenRod
+        rare: '#FFD700', // Gold
+        super: '#00BFFF', // DeepSkyBlue
+        ultra: '#FF6347', // Tomato
+        secret: '#800080', // Purple
+        ghost: '#F8F8FF', // GhostWhite
+        starlight: '#F0E68C', // Khaki
+        prismatic: '#E6E6FA', // Lavender
+        collector: '#DAA520', // GoldenRod
+        shortPrint: '#778899', // LightSlateGrey
+        parallel: '#BA55D3', // MediumOrchid
+        qcr: '#FF4500', // OrangeRed
+        // Add more rarities as needed
+      },
       error: {
         main: colors.redAccent[500],
         dark: colors.redAccent[700],
diff --git a/src/components/buttons/actionButtons/GenericActionButtons.jsx b/src/components/buttons/actionButtons/GenericActionButtons.jsx
index a414560..c41a6cd 100644
--- a/src/components/buttons/actionButtons/GenericActionButtons.jsx
+++ b/src/components/buttons/actionButtons/GenericActionButtons.jsx
@@ -24,18 +24,10 @@ import { useMode } from '../../../context/hooks/colormode';
 import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
 import { useDeckStore } from '../../../context/DeckContext/DeckContext';
 import { useCartStore } from '../../../context/CartContext/CartContext';
-import Logger from '../../reusable/Logger';
-import useSelectedContext from '../../../context/hooks/useSelectedContext';
 import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
 import { useGenericActionButtonStyles } from '../../../context/hooks/useGenericActionButtonStyles';
 import { useSelectionDialog } from '../../../context/hooks/useSelectionDialog';
 import { useCardActions } from '../../../context/hooks/useCardActions';
-const cardOtherLogger = new Logger([
-  'Action',
-  'Card Name',
-  'Quantity',
-  'Total Price',
-]);
 const GenericActionButtons = ({
   card,
   context,
@@ -139,34 +131,6 @@ const GenericActionButtons = ({
     return `Add to ${context}`;
   };
 
-  // const getButtonLabel = () => {
-  //   if (isXSmall && isModalOpen) {
-  //     return `${context}`; // Abbreviated text for medium-large screens
-  //   }
-  //   if (isMobile && isModalOpen) {
-  //     return `${context}`; // Abbreviated text for medium-large screens
-  //   }
-  //   if (isMedium && isModalOpen) {
-  //     return `${context}`; // Abbreviated text for medium-large screens
-  //   }
-  //   if (isLarge && isModalOpen) {
-  //     return `Add to ${context}`; // Full text for larger screens
-  //   }
-
-  //   if (isXSmall && !isModalOpen) {
-  //     return `${context}`; // Shortened text for small screens
-  //   }
-  //   if (isMobile && !isModalOpen) {
-  //     return `${context}`; // Shortened text for small screens
-  //   }
-  //   if (isMedium && !isModalOpen) {
-  //     return `Add to ${context}`; // Full text for larger screens
-  //   }
-  //   if (isLarge && !isModalOpen) {
-  //     return `${context}`; // Shortened text for small screens
-  //   }
-  // };
-
   return (
     <React.Fragment>
       {renderSelectionDialog()}
diff --git a/src/components/buttons/other/SignupSwitch.jsx b/src/components/buttons/other/SignupSwitch.jsx
index 5eadffb..024d047 100644
--- a/src/components/buttons/other/SignupSwitch.jsx
+++ b/src/components/buttons/other/SignupSwitch.jsx
@@ -1,4 +1,3 @@
-// SignupSwitch.js
 import React from 'react';
 import {
   Switch,
@@ -6,19 +5,55 @@ import {
   Typography,
   FormControl,
 } from '@mui/material';
+import { useFormContext, useMode } from '../../../context'; // Adjust with actual path
 
-const SignupSwitch = ({ signupMode, setSignupMode }) => (
-  <FormControl>
-    <FormControlLabel
-      control={
-        <Switch
-          checked={signupMode}
-          onChange={(e) => setSignupMode(e.target.checked)}
-        />
-      }
-      label={<Typography variant="body1">Sign up mode</Typography>}
-    />
-  </FormControl>
-);
+const SignupSwitch = () => {
+  const { theme } = useMode(); // Ensures theme is applied correctly
+  const { forms, handleChange } = useFormContext(); // Access form context
+
+  // Retrieve and cast signupMode to boolean. Ensure forms.signupForm exists to avoid errors
+  const signupMode = Boolean(forms.signupForm?.signupMode);
+
+  // Function to toggle signupMode in context
+  const toggleSignupMode = () => {
+    // Pass the new value directly to handleChange function
+    handleChange(
+      'signupForm',
+      'signupMode'
+    )({
+      target: { value: !signupMode },
+    });
+  };
+
+  return (
+    <FormControl component="fieldset">
+      <FormControlLabel
+        control={
+          <Switch
+            checked={signupMode} // Ensure proper boolean value
+            onChange={toggleSignupMode} // Toggle function
+            sx={{
+              '& .MuiSwitch-thumb': {
+                color: signupMode ? theme.palette.primary.main : '', // Change thumb color based on mode
+              },
+              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                backgroundColor: theme.palette.primary.main, // Change track color when checked
+              },
+            }}
+          />
+        }
+        label={
+          <Typography variant="body1" color="textPrimary">
+            Sign up mode
+          </Typography>
+        }
+        style={{
+          margin: theme.spacing(1), // Provide some spacing
+          justifyContent: 'space-between', // Align items nicely
+        }}
+      />
+    </FormControl>
+  );
+};
 
 export default SignupSwitch;
diff --git a/src/components/cards/CardDetail.jsx b/src/components/cards/CardDetail.jsx
new file mode 100644
index 0000000..df4a11e
--- /dev/null
+++ b/src/components/cards/CardDetail.jsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { Box, Typography, Chip } from '@mui/material';
+import useResponsiveStyles from '../../context/hooks/useResponsiveStyles';
+import { useMode } from '../../context';
+import { useTheme } from '@mui/styles';
+
+const CardDetail = ({
+  title,
+  values,
+  value,
+  className,
+  onRarityClick,
+  icon,
+}) => {
+  const { theme } = useMode();
+  const theme2 = useTheme();
+  const { getHeaderStyle, getButtonTypographyVariant } =
+    useResponsiveStyles(theme);
+
+  const styles = {
+    cardDetailContainer: {
+      padding: theme.spacing(2),
+      borderRadius: theme.shape.borderRadius,
+      boxShadow: `0 4px 8px 0 ${theme2.palette.shadow}`,
+      backgroundColor: theme.palette.background.paper,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
+      '&:hover': {
+        transform: 'scale(1.03)',
+        boxShadow: `0 6px 12px 0 ${theme.palette.shadow}`,
+      },
+    },
+    iconWrapper: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: theme.spacing(4),
+      width: theme.spacing(4),
+      borderRadius: '50%',
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
+      marginRight: theme.spacing(1),
+      '& svg': {
+        fontSize: theme.typography.pxToRem(20),
+      },
+    },
+    titleStyle: {
+      fontWeight: 700,
+      color: theme.palette.text.primary,
+      textTransform: 'uppercase',
+    },
+    valuesContainer: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
+    },
+    valueStyle: {
+      fontWeight: 400,
+      color: theme.palette.text.secondary,
+    },
+    chipStyle: {
+      // Additional styles for chips can go here
+    },
+  };
+  const getChipColor = (rarity) => {
+    switch (rarity) {
+      case 'Common':
+        return theme.palette.rarity.common;
+      case 'Uncommon':
+        return theme.palette.rarity.uncommon;
+      case 'Rare':
+        return theme.palette.rarity.rare;
+      case 'Super Rare':
+        return theme.palette.rarity.super;
+      case 'Ultra Rare':
+        return theme.palette.rarity.ultra;
+      case 'Secret Rare':
+        return theme.palette.rarity.secret;
+      case 'Ghost Rare':
+        return theme.palette.rarity.ghost;
+      case 'Starlight Rare':
+        return theme.palette.rarity.starlight;
+      case 'Prismatic Secret Rare':
+        return theme.palette.rarity.prismatic;
+      case 'Collector’s Rare':
+        return theme.palette.rarity.collector;
+      case 'Short Print':
+        return theme.palette.rarity.shortPrint;
+      case 'Parallel Rare':
+        return theme.palette.rarity.parallel;
+      case 'Quarter Century Rare':
+        return theme.palette.rarity.qcr;
+      default:
+        return theme.palette.grey[500];
+    }
+  };
+  return (
+    <Box className={className} sx={styles.cardDetailContainer}>
+      {icon && <Box sx={styles.iconWrapper}>{icon}</Box>}
+      <Typography variant="subtitle1">
+        <span style={styles.titleStyle}>{title}:</span>
+        <span style={styles.valueStyle}> {value || 'N/A'}</span>
+      </Typography>
+      {/* {value && <span style={styles.valueStyle}> {value || 'N/A'}</span>}
+      {icon && <Box sx={styles.iconWrapper}>{icon}</Box>} */}
+
+      <Box sx={styles.valuesContainer}>
+        {values && Array.isArray(values)
+          ? values.map((rarityvalue, index) => (
+              <Chip
+                key={index}
+                label={rarityvalue || ''}
+                onClick={() => onRarityClick(value)}
+                sx={{
+                  borderColor: getChipColor(value),
+                  borderWidth: '5px',
+                  fontWeight: 700,
+                  color: getChipColor(value),
+                }}
+                variant="outlined"
+              />
+            ))
+          : 'N/A'}
+      </Box>
+    </Box>
+  );
+};
+
+export default CardDetail;
diff --git a/src/components/cards/CardDetails.jsx b/src/components/cards/CardDetails.jsx
new file mode 100644
index 0000000..5f83600
--- /dev/null
+++ b/src/components/cards/CardDetails.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import useResponsiveStyles from '../../context/hooks/useResponsiveStyles';
+import { useMode } from '../../context';
+import { useTheme } from '@mui/styles';
+
+const CardDetails = ({ details, className }) => {
+  // details expected to be an array of objects with { icon, title, value }
+  const { theme } = useMode();
+  const theme2 = useTheme();
+  const { getHeaderStyle, getButtonTypographyVariant } =
+    useResponsiveStyles(theme);
+
+  const styles = {
+    cardDetailContainer: {
+      padding: theme.spacing(2),
+      borderRadius: theme.shape.borderRadius,
+      boxShadow: `0 4px 8px 0 ${theme2.palette.shadow}`,
+      backgroundColor: theme.palette.background.paper,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
+      '&:hover': {
+        transform: 'scale(1.03)',
+        boxShadow: `0 6px 12px 0 ${theme.palette.shadow}`,
+      },
+    },
+    detailRow: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(2),
+    },
+    iconWrapper: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: theme.spacing(4),
+      width: theme.spacing(4),
+      borderRadius: '50%',
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
+      '& svg': {
+        fontSize: theme.typography.pxToRem(20),
+      },
+    },
+    titleStyle: {
+      fontWeight: 700,
+      color: theme.palette.text.primary,
+      textTransform: 'uppercase',
+    },
+    valueStyle: {
+      fontWeight: 400,
+      color: theme.palette.text.secondary,
+    },
+  };
+
+  return (
+    <Box className={className} sx={styles.cardDetailContainer}>
+      {details.map(({ icon, title, value }, index) => (
+        <Box key={index} sx={styles.detailRow}>
+          {icon && <Box sx={styles.iconWrapper}>{icon}</Box>}
+          <Typography variant="subtitle1">
+            <span style={styles.titleStyle}>{title}:</span>
+            <span style={styles.valueStyle}> {value || ''}</span>
+          </Typography>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default CardDetails;
diff --git a/src/components/cards/CardToolTip.jsx b/src/components/cards/CardToolTip.jsx
index 14f9b48..3028329 100644
--- a/src/components/cards/CardToolTip.jsx
+++ b/src/components/cards/CardToolTip.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@mui/styles';
 import { Tooltip } from '@mui/material';
-import { useStyles } from './cardStyles';
+import { useStyles } from './styles/cardStyles';
 
 const formatKey = (key) => {
   return key
@@ -23,9 +23,9 @@ const CardToolTip = ({ card }) => {
     set_rarity_code,
     set_price,
     id,
-    image_url,
-    image_url_small,
-    image_url_cropped,
+    // image_url,
+    // image_url_small,
+    // image_url_cropped,
     cardmarket_price,
     tcgplayer_price,
     cardkingdom_price,
@@ -40,9 +40,9 @@ const CardToolTip = ({ card }) => {
   const chPrice = cardhoarder_price?.value || 'N/A';
 
   // Ensure safe rendering for URLs
-  const imageUrl = image_url || '';
-  const imageUrlSmall = image_url_small || '';
-  const imageUrlCropped = image_url_cropped || '';
+  // const imageUrl = image_url || '';
+  // const imageUrlSmall = image_url_small || '';
+  // const imageUrlCropped = image_url_cropped || '';
 
   return (
     <Tooltip
@@ -63,6 +63,9 @@ const CardToolTip = ({ card }) => {
       //   </>
       // }
       arrow
+      title="Card"
+      placement="right-end"
+      classes={{ tooltip: classes.tooltip }}
     >
       <div className={classes.tooltip}>
         {name && <h4 className={classes.tooltipTitle}>{name}</h4>}
@@ -93,9 +96,9 @@ CardToolTip.propTypes = {
     set_rarity_code: PropTypes.string,
     set_price: PropTypes.object,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    image_url: PropTypes.string,
-    image_url_small: PropTypes.string,
-    image_url_cropped: PropTypes.string,
+    // image_url: PropTypes.string,
+    // image_url_small: PropTypes.string,
+    // image_url_cropped: PropTypes.string,
     cardmarket_price: PropTypes.object,
     tcgplayer_price: PropTypes.object,
     cardkingdom_price: PropTypes.object,
diff --git a/src/components/cards/GenericCard.jsx b/src/components/cards/GenericCard.jsx
index 0acb835..f73a44e 100644
--- a/src/components/cards/GenericCard.jsx
+++ b/src/components/cards/GenericCard.jsx
@@ -16,21 +16,23 @@ import {
   QuantityLine,
   StyledCard,
   StyledCardContent,
-} from './cardStyledComponents';
+} from './styles/cardStyledComponents';
+import { getQuantity } from '../componentHelpers';
 const GenericCard = React.forwardRef((props, ref) => {
   const { card, context, page } = props;
 
+  // console.log('ref', ref);
   const { theme } = useMode();
   const theme2 = useTheme();
   const cardRef = useRef(null);
   const { cartData } = useCartStore();
   const { selectedCollection, allCollections } = useCollectionStore();
   const { selectedDeck, allDecks } = useDeckStore();
-  const { openModalWithCard, setModalOpen, setClickedCard } = useModalContext();
+  const { openModalWithCard, setModalOpen, setClickedCard, isModalOpen } =
+    useModalContext();
   const { setHoveredCard, setIsPopoverOpen, hoveredCard } =
     useContext(PopoverContext);
 
-  // Event handlers and callbacks
   const handleClick = useCallback(() => {
     openModalWithCard(card);
     setModalOpen(true);
@@ -80,94 +82,67 @@ const GenericCard = React.forwardRef((props, ref) => {
     'N/A'
   }`;
   // Get the quantity of card across all contexts
-  const getQuantity = useCallback(() => {
-    const findCardQuantity = (collectionsOrDecks) =>
-      collectionsOrDecks?.reduce(
-        (acc, item) =>
-          acc + (item?.cards?.find((c) => c.id === card.id)?.quantity ?? 0),
-        0
-      ) ?? 0;
-
-    const cartQuantity = isInContext
-      ? cartData?.cart?.find((c) => c.id === card.id)?.quantity ?? 0
-      : 0;
-    const collectionQuantity =
-      isInContext && selectedCollection
-        ? selectedCollection?.cards?.find((c) => c.id === card.id)?.quantity ??
-          0
-        : findCardQuantity(allCollections);
-    const deckQuantity =
-      isInContext && selectedDeck
-        ? selectedDeck?.cards?.find((c) => c.id === card.id)?.quantity ?? 0
-        : findCardQuantity(allDecks);
-
-    return Math.max(cartQuantity, collectionQuantity, deckQuantity);
-  }, [
-    card,
-    cartData,
-    selectedCollection,
-    allCollections,
-    selectedDeck,
-    allDecks,
-  ]);
-
-  // let cartQuantity = isInContext
-  //   ? cartData?.cart?.find((c) => c?.id === card?.id)?.quantity
-  //   : 0;
-  // let storeQuantity = isInContext
-  //   ? cartData?.cart?.find((c) => c?.id === card?.id)?.quantity
-  //   : 0;
-
-  // // Modify the logic to calculate quantity across all decks or collections if none is selected
-  // let deckQuantity = selectedDeck
-  //   ? selectedDeck?.cards?.find((c) => c.id === card.id)?.quantity
-  //   : allDecks?.reduce((acc, deck) => {
-  //       const foundCard = deck?.cards?.find((c) => c.id === card.id);
-  //       return foundCard ? acc + foundCard.quantity : acc;
-  //     }, 0);
-
-  // let collectionQuantity = selectedCollection
-  //   ? selectedCollection?.cards?.find((c) => c.id === card.id)?.quantity
-  //   : allCollections?.reduce((acc, collection) => {
-  //       const foundCard = collection?.cards?.find((c) => c.id === card.id);
-  //       return foundCard ? acc + foundCard.quantity : acc;
-  //     }, 0);
-  // // Simplify the method to retrieve the relevant quantity
-  // let relevantQuantity = 0;
-  // switch (page) {
-  //   case 'Store':
-  //   case 'StorePage':
-  //     relevantQuantity = storeQuantity;
-  //     break;
-  //   case 'Cart':
-  //   case 'CartPage':
-  //     relevantQuantity = cartQuantity;
-  //     break;
-  //   case 'Deck':
-  //   case 'DeckPage':
-  //   case 'DeckBuilder':
-  //     relevantQuantity = deckQuantity;
-  //     break;
-  //   case 'Collection':
-  //     relevantQuantity = collectionQuantity;
-  //     break;
-  //   default:
-  //     relevantQuantity = card?.quantity;
-  // }
+  // const getQuantity = useCallback(() => {
+  //   const findCardQuantity = (collectionsOrDecks) =>
+  //     collectionsOrDecks?.reduce(
+  //       (acc, item) =>
+  //         acc + (item?.cards?.find((c) => c.id === card.id)?.quantity ?? 0),
+  //       0
+  //     ) ?? 0;
+
+  //   const cartQuantity = isInContext
+  //     ? cartData?.cart?.find((c) => c.id === card.id)?.quantity ?? 0
+  //     : 0;
+  //   const collectionQuantity =
+  //     isInContext && selectedCollection
+  //       ? selectedCollection?.cards?.find((c) => c.id === card.id)?.quantity ??
+  //         0
+  //       : findCardQuantity(allCollections);
+  //   const deckQuantity =
+  //     isInContext && selectedDeck
+  //       ? selectedDeck?.cards?.find((c) => c.id === card.id)?.quantity ?? 0
+  //       : findCardQuantity(allDecks);
+
+  //   return Math.max(cartQuantity, collectionQuantity, deckQuantity);
+  // }, [
+  //   card,
+  //   cartData,
+  //   selectedCollection,
+  //   allCollections,
+  //   selectedDeck,
+  //   allDecks,
+  // ]);
+  // Use the getQuantity helper function
+  // const quantity = getQuantity({
+  //   card: card,
+  //   cartData: useCartStore().cartData, // assuming useCartStore returns cartData
+  //   selectedCollection: useCollectionStore().selectedCollection,
+  //   allCollections: useCollectionStore().allCollections,
+  //   selectedDeck: useDeckStore().selectedDeck,
+  //   allDecks: useDeckStore().allDecks,
+  // });
+  const cartQuantity = getQuantity({ card: card, cartData: cartData });
+  const collectionQuantity = getQuantity({
+    card: card,
+    collectionData: selectedCollection,
+  });
+  const deckQuantity = getQuantity({ card: card, deckData: selectedDeck });
 
   // Function to render the card's media section
   const renderCardMediaSection = () => (
-    <AspectRatioBox ref={ref} theme={theme}>
+    <AspectRatioBox ref={cardRef} theme={theme}>
       <CardMediaSection
         isRequired={true}
         imgUrl={imgUrl}
         card={card}
         context={context}
         page={page}
-        quantity={getQuantity()}
+        quantity={cartQuantity}
         isHovered={hoveredCard === card}
         handleInteraction={handleInteraction}
         handleClick={handleClick}
+        isModalOpen={isModalOpen}
+        ref={cardRef}
       />
     </AspectRatioBox>
   );
@@ -180,19 +155,11 @@ const GenericCard = React.forwardRef((props, ref) => {
         <Typography variant="body2" color="text.secondary" gutterBottom>
           {price}
         </Typography>
-        <QuantityLine theme={theme}>{`Cart: ${
-          cartData?.cart?.find((c) => c.id === card.id)?.quantity ?? 0
-        }`}</QuantityLine>
-
-        <QuantityLine theme={theme}>
-          {`Collection: ${
-            selectedCollection?.cards?.find((c) => c.id === card.id)
-              ?.quantity ?? 0
-          }`}
-        </QuantityLine>
-        <QuantityLine>{`Deck: ${
-          selectedDeck?.cards?.find((c) => c.id === card.id)?.quantity ?? 0
-        }`}</QuantityLine>
+        <QuantityLine theme={theme}>{`Cart: ${cartQuantity}`}</QuantityLine>
+        <QuantityLine
+          theme={theme}
+        >{`Collection: ${collectionQuantity}`}</QuantityLine>
+        <QuantityLine theme={theme}>{`Deck: ${deckQuantity}`}</QuantityLine>
       </StyledCardContent>
     );
   };
diff --git a/src/components/cards/cardStyles.jsx b/src/components/cards/cardStyles.jsx
deleted file mode 100644
index 95af636..0000000
--- a/src/components/cards/cardStyles.jsx
+++ /dev/null
@@ -1,208 +0,0 @@
-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/cards/media/CardMediaSection.js b/src/components/cards/media/CardMediaSection.js
index db4f66f..f3af08d 100644
--- a/src/components/cards/media/CardMediaSection.js
+++ b/src/components/cards/media/CardMediaSection.js
@@ -1,5 +1,5 @@
-import React, { useEffect, forwardRef } from 'react';
-import { CardMedia, Popover } from '@mui/material';
+import React, { useEffect, forwardRef, useState } from 'react';
+import { CardMedia, Popover, Popper } from '@mui/material';
 import CardToolTip from '../CardToolTip';
 import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
@@ -12,11 +12,16 @@ const useStyles = makeStyles((theme) => ({
   },
   popover: {
     pointerEvents: 'none',
+    height: 'auto',
+    width: 'auto',
+    maxWidth: '300px',
+    maxHeight: 'auto',
   },
   media: {
     width: '100%',
     height: 'auto',
     flexGrow: 1,
+    alignItems: 'flex-end',
     [theme.breakpoints.down('xs')]: {
       padding: theme.spacing(1),
     },
@@ -36,8 +41,8 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const anchorOrigin = {
-  vertical: 'bottom',
-  horizontal: 'left',
+  vertical: 'top',
+  horizontal: 'right',
 };
 
 const transformOrigin = {
@@ -47,35 +52,48 @@ const transformOrigin = {
 
 const CardMediaSection = forwardRef(
   (
-    { imgUrl, card, isHovered, handleInteraction, handleClick, isRequired },
+    {
+      imgUrl,
+      card,
+      isHovered,
+      handleInteraction,
+      handleClick,
+      isRequired,
+      isModalOpen,
+    },
     ref
   ) => {
     const classes = useStyles();
-    const { setModalImgUrl, clickedCard, setClickedCard } = useModalContext();
+    const [anchorEl, setAnchorEl] = useState(null);
 
-    const eventHandlers = isRequired
-      ? {
-          onMouseEnter: () => handleInteraction?.(true),
-          onMouseLeave: () => handleInteraction?.(false),
-          onClick: () => {
-            handleClick?.();
-            setClickedCard?.(card);
-          },
-        }
-      : {};
+    // Handle overlay state and interaction
+    const [overlay, setOverlay] = useState(null);
+
+    const handleOverlayChange = (newOverlay) => {
+      // Logic to change overlay based on rarity or other property
+      setOverlay(newOverlay);
+    };
 
     useEffect(() => {
-      if (imgUrl && clickedCard) {
-        setModalImgUrl(imgUrl);
+      if (isHovered && ref?.current) {
+        setAnchorEl(ref.current);
+      } else {
+        setAnchorEl(null);
       }
-    }, [imgUrl, clickedCard, setModalImgUrl]);
+    }, [isHovered, ref]);
 
     return (
       <div
         className={classes.mediaContainer}
         ref={ref}
-        {...eventHandlers}
-        onClick={() => handleClick?.()}
+        {...(isRequired && {
+          onMouseEnter: () => handleInteraction(!isModalOpen ? true : false),
+          onMouseLeave: () => handleInteraction(false),
+          onClick: () => {
+            handleClick?.();
+            handleOverlayChange('newOverlayValue'); // Replace with actual value or function call
+          },
+        })}
       >
         <CardMedia
           className={classes.media}
@@ -83,18 +101,25 @@ const CardMediaSection = forwardRef(
           alt={`Image for ${imgUrl || 'the card'}`}
           image={imgUrl}
         />
-        {isRequired && isHovered && (
-          <Popover
+
+        {/* Potentially additional elements for overlays and interactivity */}
+        {overlay && (
+          <div className={classes.overlay}>
+            {' '}
+            {/* Add styles and logic for overlay */}
+            {overlay}
+          </div>
+        )}
+
+        {anchorEl && isHovered && (
+          <Popper
             className={classes.popover}
             open={isHovered}
-            anchorEl={ref?.current} // Make sure this is not undefined
-            onClose={() => handleInteraction(false)}
-            anchorOrigin={anchorOrigin}
-            transformOrigin={transformOrigin}
-            disableRestoreFocus
+            anchorEl={anchorEl}
+            placement="right-start"
           >
             <CardToolTip card={card} />
-          </Popover>
+          </Popper>
         )}
       </div>
     );
diff --git a/src/components/cards/cardStyledComponents.jsx b/src/components/cards/styles/cardStyledComponents.jsx
similarity index 100%
rename from src/components/cards/cardStyledComponents.jsx
rename to src/components/cards/styles/cardStyledComponents.jsx
diff --git a/src/components/cards/styles/cardStyles.jsx b/src/components/cards/styles/cardStyles.jsx
new file mode 100644
index 0000000..69bf6f9
--- /dev/null
+++ b/src/components/cards/styles/cardStyles.jsx
@@ -0,0 +1,110 @@
+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: {
+    // maxWidth: '75vw', // 75% of the viewport width
+    width: 'auto', // Let the width be automatic
+    border: `1px solid ${theme.palette.divider}`, // Add border
+    borderRadius: theme.shape.borderRadius, // Use theme border radius
+    padding: theme.spacing(2), // Add some padding
+    backgroundColor: theme.palette.backgroundA.lightest, // Use theme background
+    color: theme.palette.text.primary, // Use theme text color
+    boxShadow: theme.shadows[3], // Use theme shadow
+    alignContent: 'flex-start',
+    alignItems: 'flex-start',
+    height: '100%',
+    // Add more styles here for intricate design
+    // You can add background images, gradients, etc.
+    maxWidth: 220,
+    position: 'relative',
+    '&::before': {
+      // Create a pseudo-element to control the aspect ratio
+      content: '""',
+      display: 'block',
+      paddingTop: '100%', // This controls the aspect ratio, 100% for 1:1, 56.25% for 16:9, etc.
+    },
+    '& > img': {
+      // Assuming you are including an image
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover', // This makes sure your image covers the entire content area
+    },
+  },
+  // tooltip: {
+  //   // Define the width or max-width for your tooltip
+  //   maxWidth: 220,
+  //   position: 'relative',
+  //   '&::before': {
+  //     // Create a pseudo-element to control the aspect ratio
+  //     content: '""',
+  //     display: 'block',
+  //     paddingTop: '100%' // This controls the aspect ratio, 100% for 1:1, 56.25% for 16:9, etc.
+  //   },
+  //   '& > img': { // Assuming you are including an image
+  //     position: 'absolute',
+  //     top: 0,
+  //     left: 0,
+  //     width: '100%',
+  //     height: '100%',
+  //     objectFit: 'cover', // This makes sure your image covers the entire content area
+  //   },
+  // Define styles for children components like headers, images, etc.
+  tooltipTitle: {
+    fontWeight: 'bold',
+    marginBottom: theme.spacing(1),
+    alignContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  descriptionSpan: {
+    display: 'block', // Make description appear on a new line
+    marginTop: theme.spacing(1),
+    flexGrow: 1,
+  },
+  attributeSpan: {
+    display: 'block',
+    marginBottom: theme.spacing(0.5),
+  },
+}));
diff --git a/src/components/chart/ChartTooltip.jsx b/src/components/chart/ChartTooltip.jsx
deleted file mode 100644
index 72064de..0000000
--- a/src/components/chart/ChartTooltip.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { makeStyles, Tooltip, Typography } from '@mui/material';
-
-const useStyles = makeStyles((theme) => ({
-  tooltipTarget: {
-    cursor: 'pointer', // Change the cursor to indicate it's hoverable
-  },
-}));
-
-const ChartTooltip = ({ point, lastData, hoveredData, latestData }) => {
-  const classes = useStyles();
-  if (!point) return null;
-  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/PortfolioChart.jsx b/src/components/chart/PortfolioChart.jsx
deleted file mode 100644
index 928b032..0000000
--- a/src/components/chart/PortfolioChart.jsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Box,
-  Container,
-  Grid,
-  Paper,
-  styled,
-  useMediaQuery,
-  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 debounce from 'lodash/debounce';
-import { getUniqueValidData } from '../../context/CollectionContext/helpers';
-import { usePageContext } from '../../context';
-import LoadingIndicator from '../reusable/indicators/LoadingIndicator';
-
-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),
-}));
-
-const ResponsiveSquare = styled(Box)(({ theme }) => ({
-  width: '100%',
-  paddingTop: '100%',
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: theme.shape.borderRadius,
-  boxShadow: theme.shadows[5],
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-function handleThresholdUpdate(lastUpdateTime, setLastUpdateTime) {
-  const currentTime = new Date().getTime();
-  if (!lastUpdateTime || currentTime - lastUpdateTime >= 600000) {
-    setLastUpdateTime(currentTime);
-    return currentTime;
-  }
-  return lastUpdateTime;
-}
-
-const PortfolioChart = () => {
-  const { selectedCollection, allXYValues } = useCollectionStore();
-  const { latestData, timeRange, groupAndAverageData, convertDataForNivo2 } =
-    useChartContext();
-  const { isLoading, setIsLoading, displayLoadingIndicator } = usePageContext();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const [lastUpdateTime, setLastUpdateTime] = useState(null);
-  const chartContainerRef = useRef(null);
-  const [chartDimensions, setChartDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-  const HEIGHT_TO_WIDTH_RATIO = 7 / 10;
-  const [dataReady, setDataReady] = useState(false);
-  const threshold = useMemo(
-    () => handleThresholdUpdate(lastUpdateTime, setLastUpdateTime),
-    [lastUpdateTime]
-  );
-  const calculateChartDimensions = () => {
-    if (chartContainerRef.current) {
-      const width = chartContainerRef.current.offsetWidth;
-      const height = width * HEIGHT_TO_WIDTH_RATIO;
-      setChartDimensions({ width, height });
-    }
-  };
-  useEffect(() => {
-    if (allXYValues && Array.isArray(allXYValues) && allXYValues.length > 0) {
-      setDataReady(true);
-    }
-  }, [allXYValues]);
-  useLayoutEffect(() => {
-    if (dataReady) {
-      calculateChartDimensions();
-    }
-  }, [dataReady]);
-  const getFilteredData2 = useCallback((values) => {
-    if (!values || !Array.isArray(values) || !values?.length > 0) return [];
-    return getUniqueValidData(values || []);
-  }, []);
-  const filteredChartData2 = useMemo(
-    () => getFilteredData2(allXYValues),
-    [allXYValues, timeRange, getFilteredData2]
-  );
-  const isEnoughData = filteredChartData2?.length >= 5;
-  const rawData2 = useMemo(() => {
-    return groupAndAverageData(filteredChartData2, threshold, timeRange);
-  }, [filteredChartData2, threshold, timeRange]);
-
-  const nivoReadyData2 = useMemo(() => {
-    return rawData2?.length > 0 ? convertDataForNivo2(rawData2) : [];
-  }, [rawData2]);
-  // useMemo for expensive calculations
-
-  // Debounced window resize handler
-  const debouncedCalculateChartDimensions = useMemo(
-    () => debounce(calculateChartDimensions, 100),
-    []
-  );
-
-  useEffect(() => {
-    window.addEventListener('resize', debouncedCalculateChartDimensions);
-    return () => {
-      window.removeEventListener('resize', debouncedCalculateChartDimensions);
-      debouncedCalculateChartDimensions.cancel();
-    };
-  }, [debouncedCalculateChartDimensions]);
-
-  if (!dataReady) {
-    return LoadingIndicator();
-  }
-
-  if (!isEnoughData || rawData2?.length === 0) {
-    return (
-      <ResponsiveSquare>
-        <div>Not enough data points</div>
-      </ResponsiveSquare>
-    );
-  }
-
-  if (!filteredChartData2 || filteredChartData2?.length === 0) {
-    return <div>No data available</div>;
-  }
-
-  return (
-    <Container
-      maxWidth="lg"
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: isMobile ? theme.spacing(1) : theme.spacing(2),
-        gap: theme.spacing(2),
-        background: '#333',
-        color: '#fff',
-        border: '1px solid #555',
-        borderRadius: 2,
-        justifyContent: 'center', // Centers vertically
-      }}
-    >
-      <ErrorBoundary>
-        <Grid container spacing={2}>
-          <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}
-                  timeRange={timeRange}
-                  dimensions={chartDimensions}
-                  timeRanges={timeRange}
-                />
-              ) : (
-                <div>No data available</div>
-              )}
-            </ChartPaper>
-          </Grid>
-        </Grid>
-      </ErrorBoundary>
-    </Container>
-  );
-};
-
-export default PortfolioChart;
diff --git a/src/components/collection/SelectCollection.jsx b/src/components/collection/SelectCollection.jsx
deleted file mode 100644
index 7eec5a3..0000000
--- a/src/components/collection/SelectCollection.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// SelectCollection.jsx
-import React, { useState, useCallback } from 'react';
-import { Box, Button, Grid, Typography } from '@mui/material';
-import SelectCollectionList from '../grids/collectionGrids/SelectCollectionList';
-import CreateOrEditCollectionDialog from '../dialogs/CreateOrEditCollectionDialog';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-import usePortfolioStyles from '../../context/hooks/usePortfolioStyles';
-import { useMode } from '../../context';
-
-const SelectCollection = ({ handleSelectCollection }) => {
-  const { theme } = useMode();
-  const classes = usePortfolioStyles(theme);
-  const [isDialogOpen, setDialogOpen] = useState(false);
-  const [isNew, setIsNew] = useState(false);
-  const { setSelectedCollection, selectedCollection } = useCollectionStore();
-
-  const handleDialogToggle = useCallback(() => {
-    setDialogOpen(!isDialogOpen);
-  }, [isDialogOpen]);
-  const closeDialog = useCallback(() => setDialogOpen(false), []);
-
-  const handleSave = useCallback(
-    (collection) => {
-      setSelectedCollection(collection);
-      closeDialog();
-    },
-    [setSelectedCollection, closeDialog]
-  );
-  const openNewDialog = () => {
-    setIsNew(true);
-    handleDialogToggle();
-  };
-
-  return (
-    <Box className={classes.portfolioBoxB}>
-      <Grid container className={classes.gridContainer}>
-        <Grid item xs={12} sm={6}>
-          <Typography className={classes.typography}>
-            Choose a Collection
-          </Typography>
-        </Grid>
-        <Grid item xs={12} sm={6} className={classes.gridItem}>
-          <Button className={classes.button} onClick={openNewDialog}>
-            Add New Collection
-          </Button>
-        </Grid>
-      </Grid>
-      <Box className={classes.listContainer}>
-        <SelectCollectionList
-          handleSelectCollection={handleSelectCollection}
-          onSave={handleSave}
-          openDialog={handleDialogToggle}
-        />
-      </Box>
-      <CreateOrEditCollectionDialog
-        isDialogOpen={isDialogOpen}
-        closeDialog={handleDialogToggle}
-        onSave={handleSave}
-        isNew={isNew}
-        initialName={isNew ? '' : selectedCollection?.name}
-        initialDescription={isNew ? '' : selectedCollection?.description}
-      />
-    </Box>
-  );
-};
-
-export default SelectCollection;
diff --git a/src/components/componentHelpers.jsx b/src/components/componentHelpers.jsx
new file mode 100644
index 0000000..cfd16b5
--- /dev/null
+++ b/src/components/componentHelpers.jsx
@@ -0,0 +1,27 @@
+export const getQuantity = ({
+  card,
+  cartData,
+  selectedCollection,
+  allCollections,
+  selectedDeck,
+  allDecks,
+}) => {
+  // Helper function to find the quantity of a card in a list of collections or decks
+  const findCardQuantity = (collectionsOrDecks) =>
+    collectionsOrDecks?.reduce(
+      (acc, item) =>
+        acc + (item?.cards?.find((c) => c.id === card.id)?.quantity ?? 0),
+      0
+    ) ?? 0;
+
+  const cartQuantity =
+    cartData?.cart?.find((c) => c.id === card.id)?.quantity ?? 0;
+  const collectionQuantity = selectedCollection
+    ? selectedCollection?.cards?.find((c) => c.id === card.id)?.quantity ?? 0
+    : findCardQuantity(allCollections);
+  const deckQuantity = selectedDeck
+    ? selectedDeck?.cards?.find((c) => c.id === card.id)?.quantity ?? 0
+    : findCardQuantity(allDecks);
+
+  return Math.max(cartQuantity, collectionQuantity, deckQuantity);
+};
diff --git a/src/components/dialogs/CollectionDialog.jsx b/src/components/dialogs/CollectionDialog.jsx
new file mode 100644
index 0000000..3a997c4
--- /dev/null
+++ b/src/components/dialogs/CollectionDialog.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dialog, DialogContent } from '@mui/material';
+import CollectionForm from '../forms/CollectionForm';
+
+const CollectionDialog = ({
+  isDialogOpen,
+  closeDialog,
+  onSave,
+  isNew,
+  initialName = '',
+  initialDescription = '',
+}) => {
+  return (
+    <Dialog open={isDialogOpen} onClose={closeDialog}>
+      <DialogContent>
+        <CollectionForm
+          onSave={onSave}
+          isNew={isNew}
+          isDialogOpen={isDialogOpen}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+CollectionDialog.propTypes = {
+  isDialogOpen: PropTypes.bool.isRequired,
+  closeDialog: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  isNew: PropTypes.bool,
+  initialName: PropTypes.string,
+  initialDescription: PropTypes.string,
+};
+
+export default CollectionDialog;
diff --git a/src/components/dialogs/CreateOrEditCollectionDialog.jsx b/src/components/dialogs/CreateOrEditCollectionDialog.jsx
deleted file mode 100644
index 4c0e527..0000000
--- a/src/components/dialogs/CreateOrEditCollectionDialog.jsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Dialog,
-  DialogContent,
-  Button,
-  TextField,
-  Typography,
-  Alert,
-} from '@mui/material';
-import { useCookies } from 'react-cookie';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-
-const CreateOrEditCollectionDialog = ({
-  isDialogOpen,
-  closeDialog,
-  onSave,
-  isNew,
-  initialName = '',
-  initialDescription = '',
-  // editedName,
-  // setEditedName,
-  // editedDescription,
-  // setEditedDescription,
-}) => {
-  const [error, setError] = useState('');
-  const [editedName, setEditedName] = useState(initialName);
-  const [editedDescription, setEditedDescription] =
-    useState(initialDescription);
-
-  const {
-    createUserCollection,
-    removeCollection,
-    selectedCollection,
-    updateCollectionDetails,
-  } = useCollectionStore();
-  const [cookies] = useCookies(['user']);
-  const userId = cookies.user?.id;
-
-  useEffect(() => {
-    setError('');
-  }, [isDialogOpen]);
-  useEffect(() => {
-    // Update internal state when dialog opens
-    setEditedName(initialName);
-    setEditedDescription(initialDescription);
-  }, [initialName, initialDescription, isDialogOpen]);
-
-  const handleSave = () => {
-    if (!editedName.trim() || !editedDescription.trim()) {
-      setError('Please fill in all fields.');
-      return;
-    }
-
-    const newCollectionInfo = {
-      name: editedName,
-      description: editedDescription,
-      userId: userId,
-      tag: 'new',
-    };
-
-    if (isNew) {
-      createUserCollection(userId, newCollectionInfo, 'create');
-    } else {
-      updateCollectionDetails(newCollectionInfo, selectedCollection._id);
-    }
-
-    onSave(newCollectionInfo);
-    closeDialog();
-  };
-
-  const handleRemove = (e) => {
-    e.preventDefault();
-    removeCollection(selectedCollection);
-    closeDialog();
-  };
-
-  return (
-    <Dialog open={isDialogOpen} onClose={closeDialog}>
-      <DialogContent>
-        <Typography variant="h6">
-          {isNew ? 'Create a new collection' : 'Edit your collection'}
-        </Typography>
-        {error && (
-          <Alert severity="error" style={{ marginBottom: '16px' }}>
-            {error}
-          </Alert>
-        )}
-        <TextField
-          label="Collection Name"
-          value={editedName}
-          onChange={(e) => setEditedName(e.target.value)}
-          variant="outlined"
-          fullWidth
-          margin="normal"
-        />
-        <TextField
-          label="Collection Description"
-          value={editedDescription}
-          onChange={(e) => setEditedDescription(e.target.value)}
-          variant="outlined"
-          multiline
-          rows={4}
-          fullWidth
-          margin="normal"
-        />
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            marginTop: '16px',
-          }}
-        >
-          <Button variant="contained" onClick={handleSave} color="primary">
-            {isNew ? 'Create Collection' : 'Save Changes'}
-          </Button>
-          {!isNew && (
-            <Button
-              variant="outlined"
-              onClick={handleRemove}
-              color="secondary"
-              style={{ marginLeft: '16px' }}
-            >
-              Delete
-            </Button>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-CreateOrEditCollectionDialog.propTypes = {
-  isDialogOpen: PropTypes.bool.isRequired,
-  closeDialog: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  isNew: PropTypes.bool,
-  editedName: PropTypes.string,
-  setEditedName: PropTypes.func,
-  editedDescription: PropTypes.string,
-  setEditedDescription: PropTypes.func,
-};
-
-export default CreateOrEditCollectionDialog;
diff --git a/src/components/dialogs/LoginDialog.jsx b/src/components/dialogs/LoginDialog.jsx
index 4a495a7..d5b4305 100644
--- a/src/components/dialogs/LoginDialog.jsx
+++ b/src/components/dialogs/LoginDialog.jsx
@@ -1,90 +1,108 @@
 import React, { useEffect } from 'react';
 import {
+  Box,
   Button,
+  CircularProgress,
   Dialog,
   DialogContent,
   DialogTitle,
   IconButton,
+  Typography,
 } from '@mui/material';
 import LoginForm from '../forms/LoginForm';
-import SignupSwitch from '../buttons/other/SignupSwitch';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
-import { useMode } from '../../context/hooks/colormode';
-import { useLoginForm } from '../../context/hooks/useLoginForm';
-
-function LoginDialog({ open, onClose, onLogin }) {
-  const {
-    username,
-    setUsername,
-    password,
-    setPassword,
-    email,
-    setEmail,
-    name,
-    setName,
-    roleData,
-    setRoleData,
-    signupMode,
-    setSignupMode,
-    handleSubmit,
-    handleLogout,
-    isLoggedIn,
-    error,
-    isLoading,
-    cookies,
-  } = useLoginForm(onLogin);
+import {
+  useAuthContext,
+  useFormContext,
+  useMode,
+  usePageContext,
+} from '../../context';
+import {
+  StyledDialog,
+  StyledDialogContent,
+  StyledDialogTitle,
+} from '../forms/styled';
+import useDialog from '../../context/hooks/useDialog';
+import useSnackBar from '../../context/hooks/useSnackBar';
 
+function LoginDialog() {
+  const { theme } = useMode(); // Ensures theme is applied correctly
   const { toggleColorMode, mode } = useMode();
+  const { logout, isLoggedIn } = useAuthContext();
+  const handleSnackBar = useSnackBar()[1];
+  const { isLoginDialogOpen, openLoginDialog, closeLoginDialog } =
+    useDialog(handleSnackBar);
 
+  const { returnDisplay, loadingStatus, setLoading } = usePageContext(); // Access loading display or error status
+  const { forms } = useFormContext();
+  const loginValues = forms?.loginForm;
+  const signupValues = forms?.signupForm;
+  const signupMode = signupValues?.signupMode;
+  const currentValues = signupMode ? signupValues : loginValues;
+
+  // console.log('LoginDialog', { currentValues });
+  // console.log('LoginDialog', { loadingStatus });
+  // console.log('LoginDialog', { isLoginDialogOpen });
+  // console.log('LoginDialog', { isLoggedIn });
+  // console.log('LoginDialog', { signupMode });
+  // useEffect for checking dialog status
   useEffect(() => {
-    if (isLoggedIn) {
-      onLogin(isLoggedIn, cookies['userId']);
+    if (!isLoggedIn && !isLoginDialogOpen) {
+      openLoginDialog();
+      // closeLoginDialog();
+    }
+    if (isLoggedIn && isLoginDialogOpen) {
+      closeLoginDialog();
     }
-  }, [isLoggedIn, onLogin, cookies]);
+  }, [isLoggedIn, isLoginDialogOpen, closeLoginDialog]); // Make sure dependencies are accurate
+  // console.log('LoginDialog', { theme });
+  // console.log('LoginDialog', { mode });
+
+  // useEffect(() => {
+  //   if (isLoggedIn && isLoginDialogOpen) {
+  //     closeLoginDialog();
+  //   }
+  // }, [isLoggedIn, isLoginDialogOpen, closeLoginDialog]); // Make sure dependencies are accurate
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
-      <DialogTitle>{signupMode ? 'Sign Up' : 'Login'}</DialogTitle>
-      <IconButton
-        onClick={toggleColorMode}
-        style={{ position: 'absolute', right: '16px', top: '16px' }}
-      >
-        {mode ? <Brightness7Icon /> : <Brightness4Icon />}
-      </IconButton>
-      <DialogContent>
+    <StyledDialog
+      open={isLoginDialogOpen}
+      onClose={closeLoginDialog}
+      maxWidth="lg"
+      fullWidth
+      theme={theme}
+    >
+      <StyledDialogTitle theme={theme}>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">
+            {signupMode ? 'Sign Up' : 'Login'}
+          </Typography>
+          <IconButton onClick={toggleColorMode} color="inherit">
+            {mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+          </IconButton>
+        </Box>
+      </StyledDialogTitle>
+      <StyledDialogContent dividers theme={theme}>
         {isLoggedIn ? (
-          <Button color="primary" variant="outlined" onClick={handleLogout}>
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={() => {
+              logout();
+              openLoginDialog();
+            }}
+            fullWidth
+          >
             Log Out
           </Button>
         ) : (
           <>
-            <LoginForm
-              {...{
-                username,
-                password,
-                email,
-                name,
-                roleData,
-                signupMode,
-                setUsername,
-                setPassword,
-                setEmail,
-                setName,
-                setRoleData,
-                handleSubmit,
-              }}
-            />
-            <SignupSwitch
-              signupMode={signupMode}
-              setSignupMode={setSignupMode}
-            />
+            <LoginForm />
           </>
         )}
-        {error && <p>{error}</p>}
-        {isLoading && <p>Loading...</p>}
-      </DialogContent>
-    </Dialog>
+      </StyledDialogContent>
+    </StyledDialog>
   );
 }
 
diff --git a/src/components/dialogs/cardDialog/CardDetail.jsx b/src/components/dialogs/cardDialog/CardDetail.jsx
deleted file mode 100644
index f5d210d..0000000
--- a/src/components/dialogs/cardDialog/CardDetail.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
-import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
-import { useMode } from '../../../context';
-
-const CardDetail = ({ icon, title, value, className }) => {
-  const { theme } = useMode();
-  const { getHeaderStyle, getButtonTypographyVariant } =
-    useResponsiveStyles(theme);
-
-  return (
-    <Box
-      className={className}
-      display="flex"
-      alignItems="center"
-      gap="10px"
-      marginBottom="16px"
-    >
-      {icon && <Box mr={1}>{icon}</Box>}
-      <Typography variant={getButtonTypographyVariant()}>
-        {title}: {value || 'N/A'}
-      </Typography>
-    </Box>
-  );
-};
-
-export default CardDetail;
diff --git a/src/components/dialogs/cardDialog/GenericCardDialog.jsx b/src/components/dialogs/cardDialog/GenericCardDialog.jsx
index 9ed87df..074373b 100644
--- a/src/components/dialogs/cardDialog/GenericCardDialog.jsx
+++ b/src/components/dialogs/cardDialog/GenericCardDialog.jsx
@@ -11,6 +11,17 @@ import {
   Slide,
   Fade,
   IconButton,
+  InputLabel,
+  Select,
+  MenuItem,
+  Stack,
+  Typography,
+  Card,
+  CardHeader,
+  List,
+  CardContent,
+  ListItem,
+  ListItemText,
 } from '@mui/material';
 import { useTheme } from '@mui/styles';
 import useSnackbar from '../../../context/hooks/useSnackBar';
@@ -24,13 +35,14 @@ import CardMediaSection from '../../cards/media/CardMediaSection';
 import GenericActionButtons from '../../buttons/actionButtons/GenericActionButtons';
 import CloseIcon from '@mui/icons-material/Close';
 import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
-import CardDetail from './CardDetail';
+import CardDetail from '../../cards/CardDetail';
 import { FaRegCopy } from 'react-icons/fa';
-import CardDetailsContainer from './CardDetailsContainer';
+import CardDetailsContainer from '../../../layout/CardDetailsContainer';
+import { FormControl } from 'react-bootstrap';
+import CardDetails from '../../cards/CardDetails';
 
 const GenericCardDialog = (props) => {
   const theme = useTheme();
-
   const {
     open = false,
     transition = false,
@@ -41,7 +53,7 @@ const GenericCardDialog = (props) => {
     actions = '',
     dividers = false,
     closeIcon = true,
-    fullScreen = false,
+    // fullScreen = false,
     actionPosition = 'left',
     closeIconSx = {
       position: 'absolute',
@@ -53,22 +65,20 @@ const GenericCardDialog = (props) => {
     context,
     ...other
   } = props || {};
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+
   const { closeModal } = useModalContext();
-  const { user } = useUserContext();
-  // const { updateCollection, selectedCollection } = useCollectionStore();
   const { getHeaderStyle, isMobile } = useResponsiveStyles(theme);
-  // const [updatedCard, setUpdatedCard] = useState(card);
   const [imageUrl, setImageUrl] = useState(card?.card_images[0]?.image_url);
-  const [snackbar, handleSnackbar, handleCloseSnackbar] = useSnackbar();
+  const [snackbar, handleSnackBar, handleCloseSnackbar] = useSnackbar();
   const [hasLoggedCard, setHasLoggedCard] = useState(false);
   const { setContext, setIsContextSelected } = useSelectedContext();
-  // Helper function to handle successful and failed actions
   const handleAction = useCallback(
     (message, severity, error) => {
-      handleSnackbar(message, severity);
+      handleSnackBar(message, severity);
       if (error) console.error('Action failed:', error);
     },
-    [handleSnackbar]
+    [handleSnackBar]
   );
   // Update card data from the server if necessary
   // useEffect(() => {
@@ -97,13 +107,13 @@ const GenericCardDialog = (props) => {
   // Snackbar handling for loading card details
   useEffect(() => {
     if (open && card && !hasLoggedCard) {
-      handleSnackbar('Card details loaded successfully.', 'success');
+      handleSnackBar('Card details loaded successfully.', 'success');
       setHasLoggedCard(true);
     }
     return () => {
       if (!open) setHasLoggedCard(false);
     };
-  }, [open, card, handleSnackbar, hasLoggedCard]);
+  }, [open, card, handleSnackBar, hasLoggedCard]);
   // Context selection handling
   const handleContextSelect = useCallback(
     (newContext) => {
@@ -119,10 +129,19 @@ const GenericCardDialog = (props) => {
       TransitionComponent={transition ? Slide : Fade}
       keepMounted
       onClose={closeModal}
-      hideBackdrop={hideBackdrop}
       fullScreen={fullScreen}
       aria-describedby="alert-dialog-slide-description"
-      {...other}
+      maxWidth="md" // Adjust this value as per your requirement
+      // fullWidth
+      PaperProps={{
+        style: {
+          width: '75%', // Set dialog width to 75% of screen width
+          height: 'auto', // Set height to auto
+          maxHeight: '90vh', // Optional: Set max height to 90% of view height
+          borderRadius: theme.shape.borderRadius, // Use theme's border radius
+          // Add more PaperProps styles if needed
+        },
+      }}
     >
       <DialogTitle sx={getHeaderStyle(theme)}>
         {title}
@@ -147,6 +166,8 @@ const GenericCardDialog = (props) => {
                 imgUrl={imageUrl}
               />
             </Grid>
+
+            {/* these two grid items are for the card details */}
             <Grid item xs={6} sm={6} md={6} lg={6}>
               <CardDetail
                 className={'card-detail'}
@@ -154,32 +175,69 @@ const GenericCardDialog = (props) => {
                 title="Description"
                 value={card?.desc}
               />
+              <CardDetail
+                className={'card-detail'}
+                // icon={<FaRegCopy />}
+                title="Price"
+                value={card?.price}
+              />
+              <CardDetail
+                className={'card-detail'}
+                title="Rarity"
+                values={card?.card_sets?.map((set) => set.set_rarity)}
+                onRarityClick={(rarity) => {
+                  // Handle the click event here
+                  console.log(`Rarity ${rarity} was clicked.`);
+                }}
+              />
+
+              {/* Price History Dropdown */}
+              <Grid item xs={12} sm={6} md={6} lg={6}>
+                {/* Price History Dropdown */}
+              </Grid>
             </Grid>
             <Grid item xs={6} sm={6} md={6} lg={6}>
               <CardDetailsContainer card={card} className={'card-detail'} />
             </Grid>
 
-            {/* these two grid items are for the card carousel and action buttons */}
+            {/* these two grid items are for the related user inventory data and action buttons */}
             <Grid item xs={12} sm={6} md={6} lg={6}>
-              {['Deck', 'Collection', 'Cart'].map((mappedContext) => (
-                <GenericActionButtons
-                  key={mappedContext}
-                  card={card}
-                  context={mappedContext}
-                  originalContext={context}
-                  onClick={() => handleContextSelect(mappedContext)}
-                  onSuccess={() =>
-                    handleAction('Action was successful!', 'success')
-                  }
-                  onFailure={(error) =>
-                    handleAction(
-                      'Action failed. Please try again.',
-                      'error',
-                      error
-                    )
-                  }
-                />
-              ))}
+              <Stack>
+                <Card>
+                  <CardHeader>
+                    <Typography variant="h6">Inventory</Typography>
+                  </CardHeader>
+                  <CardContent>
+                    <List>
+                      {/* <ListItemText primary="Deck" secondary="Deck" /> */}
+                      <ListItem>{'Cart'}</ListItem>
+                      <ListItem>{'Deck'}</ListItem>
+                      <ListItem>{'Collection'}</ListItem>
+                    </List>
+                  </CardContent>
+                </Card>
+              </Stack>
+              <Stack>
+                {['Deck', 'Collection', 'Cart'].map((mappedContext) => (
+                  <GenericActionButtons
+                    key={mappedContext}
+                    card={card}
+                    context={mappedContext}
+                    originalContext={context}
+                    onClick={() => handleContextSelect(mappedContext)}
+                    onSuccess={() =>
+                      handleAction('Action was successful!', 'success')
+                    }
+                    onFailure={(error) =>
+                      handleAction(
+                        'Action failed. Please try again.',
+                        'error',
+                        error
+                      )
+                    }
+                  />
+                ))}
+              </Stack>
             </Grid>
           </Grid>
         </Container>
diff --git a/src/components/dialogs/modalStyles.jsx b/src/components/dialogs/modalStyles.jsx
deleted file mode 100644
index 764369d..0000000
--- a/src/components/dialogs/modalStyles.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-// // import { makeStyles } from '@mui/styles';
-// import { makeStyles } from '@mui/styles';
-
-// export const useStyles = makeStyles((theme) => ({
-//   flexCenter: {
-//     display: 'flex',
-//     alignItems: 'center',
-//   },
-//   actionButtons: {
-//     justifyContent: 'center',
-//     gap: '1.5rem',
-//   },
-//   media: {
-//     objectFit: 'cover',
-//     borderRadius: '4px',
-//     boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-//   },
-//   details: {
-//     gap: '1.5rem',
-//     marginBottom: '1.5rem',
-//   },
-//   dialogTitle: {
-//     fontSize: '1.5rem',
-//     fontWeight: 600,
-//     color: theme.palette.primary.dark,
-//   },
-//   dialogContent: {
-//     padding: '2rem',
-//   },
-//   listItem: {
-//     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),
-//   },
-//   // flexCenter: {
-//   //   display: 'flex',
-//   //   alignItems: 'center',
-//   //   justifyContent: 'center',
-//   // },
-//   // actionButtons: {
-//   //   order: { xs: 2, md: 3 },
-//   // },
-//   mediaAndDetails: {
-//     order: { xs: 1, md: 1 },
-//   },
-//   carousel: {
-//     order: { xs: 3, md: 2 },
-//     display: 'flex',
-//     justifyContent: 'center',
-//   },
-//   swiperSlide: {
-//     '& .swiper-slide': {
-//       opacity: 0.5,
-//       transform: 'scale(0.85)',
-//       transition: 'transform 0.3s, opacity 0.3s',
-//       '&-active': {
-//         opacity: 1,
-//         transform: 'scale(1.2)',
-//       },
-//       '&-next, &-prev': {
-//         transform: 'scale(0.8)',
-//       },
-//     },
-//   },
-//   carouselContainer: {
-//     bottom: theme.spacing(2),
-//     right: theme.spacing(2),
-//     width: '100%',
-//     height: 180,
-//     perspective: '1200px',
-//   },
-// }));
-
-// // 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/forms/CollectionForm.jsx b/src/components/forms/CollectionForm.jsx
new file mode 100644
index 0000000..36148c8
--- /dev/null
+++ b/src/components/forms/CollectionForm.jsx
@@ -0,0 +1,74 @@
+import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Alert } from '@mui/material';
+import { useFormContext, useMode } from '../../context';
+import { FormWrapper, StyledButton, StyledTextField } from './styled';
+
+const CollectionForm = ({ onSave, isNew }) => {
+  const { theme } = useMode();
+  const { forms, handleChange, handleSubmit } = useFormContext();
+  const [formValues, setFormValues] = useState({ name: '', description: '' });
+  const formType = isNew ? 'addCollectionForm' : 'updateCollectionForm';
+
+  useEffect(() => {
+    setFormValues(
+      isNew ? forms?.addCollectionForm || {} : forms?.updateCollectionForm || {}
+    );
+  }, [isNew, forms.addCollectionForm, forms.updateCollectionForm]);
+
+  const handleValueChange = (field) => (event) => {
+    setFormValues((prev) => ({ ...prev, [field]: event.target.value }));
+  };
+
+  const handleSave = async (e) => {
+    e.preventDefault();
+    // You might need to ensure onSave is properly defined and used, or use the provided handleSubmit for form submission
+    onSave(formValues); // Replace or use along with your context's handleSubmit
+  };
+  return (
+    <FormWrapper onSubmit={handleSave} theme={theme}>
+      <Typography variant="h6">
+        {isNew ? 'Create a new collection' : 'Edit your collection'}
+      </Typography>
+      {/* {error && <Alert severity="error">{error}</Alert>} */}
+      <StyledTextField
+        label="Collection Name"
+        value={formValues?.name}
+        onChange={handleValueChange('name')}
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        theme={theme}
+      />
+      <StyledTextField
+        label="Collection Description"
+        value={formValues?.description}
+        onChange={handleValueChange('description')}
+        variant="outlined"
+        multiline
+        rows={4}
+        fullWidth
+        margin="normal"
+        theme={theme}
+      />
+      <StyledButton
+        variant="contained"
+        color="primary"
+        theme={theme}
+        type="button" // Ensuring it's a button to prevent any accidental form submissions
+        onClick={handleSave} // Use onClick to handle the button click event
+      >
+        {isNew ? 'Create Collection' : 'Save Changes'}
+      </StyledButton>
+    </FormWrapper>
+  );
+};
+
+CollectionForm.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  isNew: PropTypes.bool,
+  // initialName: PropTypes.string,
+  // initialDescription: PropTypes.string,
+};
+
+export default CollectionForm;
diff --git a/src/components/forms/EditUserProfileForm.jsx b/src/components/forms/EditUserProfileForm.jsx
new file mode 100644
index 0000000..0f3aac5
--- /dev/null
+++ b/src/components/forms/EditUserProfileForm.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { useCookies } from 'react-cookie';
+import { Box, Button, TextField, Typography } from '@mui/material';
+import { useMode } from '../../context/hooks/colormode';
+import { useUserContext } from '../../context/UserContext/UserContext';
+import { usePageContext } from '../../context/PageContext/PageContext';
+import { useTheme } from '@mui/styles';
+import { useSpring, animated } from 'react-spring';
+import { PageLayout, PageHeader, PageContent } from '../../layout';
+import LoadingIndicator from '../../components/reusable/indicators/LoadingIndicator';
+import ErrorIndicator from '../../components/reusable/indicators/ErrorIndicator';
+import ThemeToggleButton from '../../components/reusable/buttons/ThemeToggleButton';
+import { FormWrapper, StyledTextField, StyledButton } from './styled';
+import { useFormContext } from '../../context';
+
+const EditUserProfileForm = () => {
+  const { theme } = useMode();
+  // const { user } = useAuthContext();
+  const { user, fetchUserData } = useUserContext();
+  const userId = user?.id;
+  const { isPageLoading, setIsPageLoading, setPageError } = usePageContext();
+  const { forms, handleChange, handleSubmit, formErrors } = useFormContext();
+  const userDataValues = forms.updateUserDataForm;
+  const userDataErrors = formErrors.updateUserDataForm || {};
+
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    handleSubmit('updateUserDataForm');
+  };
+  useEffect(() => {
+    if (!userId) return;
+
+    const initializeUser = async () => {
+      setIsPageLoading(true);
+      try {
+        if (!user || Object.keys(user).length === 0) {
+          await fetchUserData();
+        }
+      } catch (e) {
+        setPageError(e);
+      } finally {
+        setIsPageLoading(false);
+      }
+    };
+
+    initializeUser();
+  }, [userId]);
+
+  return (
+    <PageLayout>
+      <PageHeader>
+        <Typography variant="h4" color="primary">
+          Edit User Settings
+        </Typography>
+      </PageHeader>
+      <PageContent>
+        <FormWrapper onSubmit={handleSubmit('updateUserDataForm')}>
+          <StyledTextField
+            label="Email"
+            placeholder="Enter your email"
+            value={userDataValues.email}
+            onChange={handleChange('updateUserDataForm', 'email')}
+            margin="normal"
+            variant="outlined"
+            type="email"
+            required
+            theme={theme}
+          />
+          <StyledTextField
+            label="First Name"
+            placeholder="Enter your first name"
+            value={userDataValues.firstName}
+            onChange={handleChange('updateUserDataForm', 'firstName')}
+            margin="normal"
+            variant="outlined"
+            required
+            theme={theme}
+          />
+          <StyledTextField
+            label="Last Name"
+            placeholder="Enter your last name"
+            value={userDataValues.lastName}
+            onChange={handleChange('updateUserDataForm', 'lastName')}
+            margin="normal"
+            variant="outlined"
+            required
+            theme={theme}
+          />
+          <StyledTextField
+            label="Phone"
+            placeholder="Enter your role data"
+            value={userDataValues.phone}
+            onChange={handleChange('updateUserDataForm', 'phone')}
+            margin="normal"
+            variant="outlined"
+            required
+            theme={theme}
+          />
+          <StyledButton
+            type="submit"
+            fullWidth
+            margin="normal"
+            variant="contained"
+            theme={theme}
+          >
+            Save
+          </StyledButton>
+        </FormWrapper>
+      </PageContent>
+    </PageLayout>
+  );
+};
+
+export default EditUserProfileForm;
diff --git a/src/components/forms/EditUserSettingsForm.jsx b/src/components/forms/EditUserSettingsForm.jsx
new file mode 100644
index 0000000..baa0458
--- /dev/null
+++ b/src/components/forms/EditUserSettingsForm.jsx
@@ -0,0 +1,152 @@
+// Import dependencies
+import React, { useState, useEffect } from 'react';
+import { useCookies } from 'react-cookie';
+import { Box, Button, TextField, Typography } from '@mui/material';
+import { useMode } from '../../context/hooks/colormode';
+import { useUserContext } from '../../context/UserContext/UserContext';
+import { usePageContext } from '../../context/PageContext/PageContext';
+import { useTheme } from '@mui/styles';
+import { useSpring, animated } from 'react-spring';
+import { PageLayout, PageHeader, PageContent } from '../../layout';
+import LoadingIndicator from '../../components/reusable/indicators/LoadingIndicator';
+import ErrorIndicator from '../../components/reusable/indicators/ErrorIndicator';
+import ThemeToggleButton from '../../components/reusable/buttons/ThemeToggleButton';
+
+const EditUserSettingsForm = ({ user }) => {
+  const [cookies] = useCookies(['user']);
+  const { theme } = useMode();
+  const { user: currentUser } = cookies;
+  const userId = currentUser?.id;
+
+  const {
+    userData,
+    updateUser,
+    fetchUserData,
+    isLoading,
+    setIsLoading,
+    pageError,
+    setPageError,
+    logPageData,
+  } = useUserContext();
+
+  const {
+    isPageLoading,
+    setIsPageLoading,
+    // pageError,
+    // setPageError,
+    // logPageData,
+  } = usePageContext();
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const [formError, setFormError] = useState(null);
+
+  const { email, password, confirmPassword } = formState;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormState((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setFormError('Passwords do not match');
+      return;
+    }
+    try {
+      setIsLoading(true);
+      await updateUser(userId, formState);
+      await fetchUserData();
+      logPageData('EditUserSettingsForm', userData);
+    } catch (e) {
+      console.error('Failed to update user settings:', e);
+      setPageError(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!userId) return;
+
+    const initializeUser = async () => {
+      setIsPageLoading(true);
+      try {
+        if (!userData || Object.keys(userData).length === 0) {
+          await fetchUserData();
+        }
+        logPageData('EditUserSettingsForm', userData);
+      } catch (e) {
+        setPageError(e);
+      } finally {
+        setIsPageLoading(false);
+      }
+    };
+
+    initializeUser();
+  }, [userId]);
+
+  if (isPageLoading) return <LoadingIndicator />;
+  if (pageError) return <ErrorIndicator error={pageError} />;
+  if (isLoading) return <LoadingIndicator />;
+
+  return (
+    <PageLayout>
+      <PageHeader>
+        <Typography variant="h4" color="primary">
+          Edit User Settings
+        </Typography>
+      </PageHeader>
+      <PageContent>
+        <form onSubmit={handleSubmit}>
+          <TextField
+            label="Email"
+            id="email"
+            name="email"
+            value={email}
+            onChange={handleChange}
+            fullWidth
+            margin="normal"
+          />
+          <TextField
+            label="Password"
+            id="password"
+            name="password"
+            value={password}
+            onChange={handleChange}
+            fullWidth
+            margin="normal"
+          />
+          <TextField
+            label="Confirm Password"
+            id="confirmPassword"
+            name="confirmPassword"
+            value={confirmPassword}
+            onChange={handleChange}
+            fullWidth
+            margin="normal"
+          />
+          <Box mt={3} display="flex" justifyContent="center">
+            <ThemeToggleButton />
+          </Box>
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            fullWidth
+            margin="normal"
+          >
+            Save
+          </Button>
+        </form>
+      </PageContent>
+    </PageLayout>
+  );
+};
+
+export default EditUserSettingsForm;
diff --git a/src/components/forms/LoginForm.jsx b/src/components/forms/LoginForm.jsx
index f203972..a42b24b 100644
--- a/src/components/forms/LoginForm.jsx
+++ b/src/components/forms/LoginForm.jsx
@@ -1,81 +1,117 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormWrapper,
   StyledTextField,
   StyledButton,
-  StyledBorderContainer,
-} from './styled'; // Ensure this path is correct for your project
-import { useMode } from '../../context'; // Ensure this path is correct for your project
+  StyledBox,
+} from './styled';
+import { useFormContext, useMode, usePageContext } from '../../context';
+import SignupSwitch from '../buttons/other/SignupSwitch';
+import { Box } from '@mui/material';
 
-const LoginForm = ({
-  username,
-  password,
-  email,
-  signupMode,
-  name,
-  roleData,
-  setUsername,
-  setPassword,
-  setEmail,
-  setName,
-  setRoleData,
-  handleSubmit,
-}) => {
-  const { theme } = useMode(); // Ensure your context provides theme correctly
+const LoginForm = () => {
+  const { theme } = useMode(); // Ensures theme is applied correctly
+  const { returnDisplay, loadingStatus } = usePageContext(); // Access loading display or error status
+  const { forms, handleChange, handleSubmit } = useFormContext();
+  const loginValues = forms?.loginForm || {};
+  const signupValues = forms?.signupForm || {};
+  const signupMode = signupValues?.signupMode;
+  const formType = signupMode ? 'signupForm' : 'loginForm';
+  const valueType = signupMode ? signupValues : loginValues;
+
+  // Define the form submission handler
+  const handleFormSubmit = (event) => {
+    event.preventDefault(); // Prevent the default form submission behavior
+    handleSubmit(formType)(event); // Pass the event to your form handler
+  };
 
   return (
-    <FormWrapper onSubmit={handleSubmit}>
-      <StyledTextField
-        label="Username"
-        placeholder="Enter your username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        variant="outlined"
-        required
-        theme={theme}
-      />
+    <>
+      {/* Display loading indicator or error if form is in the loading or error state */}
+      {loadingStatus?.isFormDataLoading && returnDisplay()}
+
+      <FormWrapper onSubmit={handleFormSubmit}>
+        {/* Conditional rendering of signup fields */}
+        {signupMode && (
+          <>
+            <StyledTextField
+              label="Email"
+              placeholder="Enter your email"
+              value={valueType.email || ''}
+              onChange={handleChange(formType, 'email')}
+              margin="normal"
+              variant="outlined"
+              type="email"
+              required
+              theme={theme}
+            />
+            <StyledTextField
+              label="First Name"
+              placeholder="Enter your first name"
+              value={valueType.firstName || ''}
+              onChange={handleChange(formType, 'firstName')}
+              margin="normal"
+              variant="outlined"
+              required
+              theme={theme}
+            />
+            <StyledTextField
+              label="Last Name"
+              placeholder="Enter your last name"
+              value={valueType.lastName || ''}
+              onChange={handleChange(formType, 'lastName')}
+              margin="normal"
+              variant="outlined"
+              required
+              theme={theme}
+            />
+            <StyledTextField
+              label="Phone"
+              placeholder="Enter your phone number"
+              value={valueType.phone || ''}
+              onChange={handleChange(formType, 'phone')}
+              margin="normal"
+              variant="outlined"
+              required
+              theme={theme}
+            />
+          </>
+        )}
+
+        {/* Common fields for both login and signup */}
+        <StyledTextField
+          label="Username"
+          placeholder="Enter your username"
+          value={valueType.username || ''}
+          onChange={handleChange(formType, 'username')}
+          margin="normal"
+          variant="outlined"
+          required
+          theme={theme}
+        />
 
-      {/* Additional fields appear if in signup mode */}
-      {signupMode && (
-        <>
-          <StyledTextField
-            label="Email"
-            placeholder="Enter your email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            variant="outlined"
-            type="email"
-            required
-            theme={theme}
-          />
-          <StyledTextField
-            label="Role Data"
-            placeholder="Enter your role data"
-            value={roleData}
-            onChange={(e) => setRoleData(e.target.value)}
-            variant="outlined"
-            required
-            theme={theme}
-          />
-        </>
-      )}
+        <StyledTextField
+          label="Password"
+          placeholder="Enter your password"
+          value={valueType.password || ''}
+          type="password"
+          onChange={handleChange(formType, 'password')}
+          margin="normal"
+          variant="outlined"
+          required
+          theme={theme}
+        />
 
-      <StyledTextField
-        label="Password"
-        placeholder="Enter your password"
-        value={password}
-        type="password"
-        onChange={(e) => setPassword(e.target.value)}
-        variant="outlined"
-        required
-        theme={theme}
-      />
+        <StyledBox theme={theme}>
+          <StyledButton type="submit" variant="contained" theme={theme}>
+            {signupMode ? 'Sign Up' : 'Login'}
+          </StyledButton>
 
-      {/* Submit Button */}
-      <StyledButton type="submit" variant="contained" theme={theme}>
-        {signupMode ? 'Sign Up' : 'Login'}
-      </StyledButton>
-    </FormWrapper>
+          {/* Toggle between login and signup modes */}
+          <SignupSwitch signupMode={signupMode} />
+        </StyledBox>
+      </FormWrapper>
+    </>
   );
 };
 
diff --git a/src/components/forms/ProfileForm.jsx b/src/components/forms/ProfileForm.jsx
index 3684bf0..9dbe179 100644
--- a/src/components/forms/ProfileForm.jsx
+++ b/src/components/forms/ProfileForm.jsx
@@ -1,79 +1,98 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TextField, Button } from '@mui/material';
+import { FormWrapper } from './styled';
+import { useFormContext } from '../../context';
 
 const ProfileForm = ({ userName, name, age, status, onSave }) => {
-  const [formData, setFormData] = useState({
-    userName: userName || '', // default to empty string if undefined
-    name: name || '',
-    age: age || '',
-    status: status || '',
-  });
-  const handleChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.id]: e.target.value,
-    });
-  };
+  const { forms, handleChange, handleSubmit } = useFormContext();
+  const profileValues = forms?.updateUserDataForm || {};
+  const formType = 'updateUserDataForm';
+  // const [formData, setFormData] = useState({
+  //   userName: userName || '', // default to empty string if undefined
+  //   name: name || '',
+  //   age: age || '',
+  //   status: status || '',
+  // });
+  // const handleChange = (e) => {
+  //   setFormData({
+  //     ...formData,
+  //     [e.target.id]: e.target.value,
+  //   });
+  // };
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSave(formData);
-  };
+  // const handleSubmit = (e) => {
+  //   e.preventDefault();
+  //   onSave(formData);
+  // };
 
-  useEffect(() => {
-    setFormData({
-      userName: userName || '',
-      name: name || '',
-      age: age || '',
-      status: status || '',
-    });
-  }, [userName, name, age, status]);
+  // useEffect(() => {
+  //   setFormData({
+  //     userName: userName || '',
+  //     name: name || '',
+  //     age: age || '',
+  //     status: status || '',
+  //   });
+  // }, [userName, name, age, status]);
+  const handleFormSubmit = (event) => {
+    event.preventDefault(); // Prevent the default form submission behavior
+    handleSubmit(formType)(event); // Pass the event to your form handler
+  };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <FormWrapper onSubmit={handleFormSubmit}>
       <TextField
         label="Username"
-        id="userName"
-        value={formData?.userName}
-        onChange={handleChange}
+        id="username"
+        value={profileValues?.username}
+        onChange={handleChange(formType, 'username')}
+        fullWidth
+        margin="normal"
+      />
+      <TextField
+        label="First Name"
+        id="firstName"
+        value={profileValues?.firstName}
+        onChange={handleChange(formType, 'firstName')}
         fullWidth
         margin="normal"
       />
       <TextField
-        label="Name"
-        id="name"
-        value={formData?.name}
-        onChange={handleChange}
+        label="Last Name"
+        id="lastName"
+        value={profileValues?.lastName}
+        onChange={handleChange(formType, 'lastName')}
         fullWidth
         margin="normal"
       />
       <TextField
         label="Age"
         id="age"
-        value={formData?.age}
-        onChange={handleChange}
+        value={profileValues?.age}
+        onChange={handleChange(formType, 'age')}
         fullWidth
         margin="normal"
       />
       <TextField
         label="Status"
         id="status"
-        value={formData?.status}
-        onChange={handleChange}
+        value={profileValues?.status}
+        onChange={handleChange(formType, 'status')}
         fullWidth
         margin="normal"
       />
       <Button type="submit" variant="contained" color="primary" fullWidth>
         Save Changes
       </Button>
-    </form>
+    </FormWrapper>
   );
 };
 
 ProfileForm.propTypes = {
-  userName: PropTypes.string,
-  name: PropTypes.string,
+  username: PropTypes.string,
+  firstName: PropTypes.string,
+  lastName: PropTypes.string,
+
   age: PropTypes.string,
   status: PropTypes.string,
   onSave: PropTypes.func.isRequired,
diff --git a/src/components/forms/SearchForm.jsx b/src/components/forms/SearchForm.jsx
index f4ac873..1a7d59d 100644
--- a/src/components/forms/SearchForm.jsx
+++ b/src/components/forms/SearchForm.jsx
@@ -1,25 +1,35 @@
 import React from 'react';
 import { useMode } from '../../context/hooks/colormode';
-import { StyledButton, StyledPaper, StyledTextField } from './styled';
-import SearchButton from '../buttons/other/SearchButton';
+import {
+  FormWrapper,
+  StyledButton,
+  StyledPaper,
+  StyledTextField,
+} from './styled';
+
+import { Button, Grid } from '@mui/material';
 
 const SearchForm = ({
   searchTerm,
   handleChange,
+  handleSubmit,
+  handleKeyPress,
   onFocus,
   onBlur,
-  handleSubmit,
 }) => {
   const { theme } = useMode();
 
   return (
     <StyledPaper theme={theme}>
-      <form
-        // onSubmit={handleSubmit}
+      <FormWrapper
+        onSubmit={handleSubmit}
+        theme={theme}
         style={{
           display: 'flex',
           flexDirection: 'column',
           gap: theme.spacing(2),
+          width: '100%',
+          // background: theme.palette.backgroundA.light,
           // background: theme.palette.background.quaternary,
         }}
       >
@@ -31,13 +41,24 @@ const SearchForm = ({
           label="Search for cards"
           variant="outlined"
           fullWidth
+          onKeyDown={handleKeyPress} // Add keydown listener here
           theme={theme}
         />
-        <SearchButton handleSubmit={handleSubmit} />
-        {/* <StyledButton type="submit" fullWidth theme={theme}>
+        <Button
+          fullWidth
+          variant="contained"
+          color="primary"
+          type="submit"
+          sx={{
+            mt: 1,
+            mb: 1,
+            background: theme.palette.backgroundA.dark,
+            '&:hover': { background: theme.palette.backgroundA.darkest },
+          }}
+        >
           Search
-        </StyledButton> */}
-      </form>
+        </Button>
+      </FormWrapper>
     </StyledPaper>
   );
 };
diff --git a/src/components/forms/styled.jsx b/src/components/forms/styled.jsx
index d04a400..423ae3c 100644
--- a/src/components/forms/styled.jsx
+++ b/src/components/forms/styled.jsx
@@ -1,11 +1,45 @@
 import styled, { keyframes, css } from 'styled-components';
-import { Button, Paper, TextField } from '@mui/material';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Paper,
+  TextField,
+} from '@mui/material';
+
+export const StyledDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiDialog-paper': {
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(4),
+    backgroundColor: theme.palette.background.default, // Choose a subtle color
+    color: theme.palette.text.primary,
+    boxShadow: theme.shadows[5],
+    '@media (max-width:600px)': {
+      margin: theme.spacing(2),
+    },
+  },
+  '& .MuiDialog-paperScrollPaper': {
+    maxHeight: '90vh', // Slightly more space
+  },
+}));
+
+export const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+  padding: theme.spacing(3),
+  backgroundColor: theme.palette.background.paper,
+}));
 
 export const FormWrapper = styled('form')`
   display: 'flex';
   flex-direction: column;
   gap: '20px';
-  max-width: '400px';
+  align-items: center;
+  padding: '20px';
+  ${'' /* max-width: '400px'; */}
   margin: auto;
 `;
 
@@ -13,7 +47,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
   width: '100%',
   padding: theme.spacing(3),
   borderRadius: theme.shape.borderRadius,
-  backgroundColor: theme.palette.success.lighter,
+  background: theme.palette.backgroundA.lighter,
   boxShadow: theme.shadows[5],
   maxWidth: '550px',
   margin: 'auto',
@@ -24,13 +58,14 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
 }));
 
 export const StyledButton = styled(Button)(({ theme }) => ({
-  backgroundColor: theme.palette.success.lightish,
-  color: theme.palette.background.dark,
+  background: theme.palette.backgroundA.default,
+  color: theme.palette.backgroundA.contrastTextB,
   padding: theme.spacing(1.5),
-  fontWeight: 'bold',
+  // fontWeight: 'bold',
   marginTop: theme.spacing(2),
   '&:hover': {
-    backgroundColor: theme.palette.secondary.dark,
+    backgroundColor: theme.palette.backgroundA.darkest,
+    color: theme.palette.backgroundA.contrastTextA,
   },
 }));
 
@@ -46,72 +81,49 @@ export const StyledTextField = styled(TextField)(({ theme }) => ({
 
     // Change border color on hover
     '&:hover .MuiOutlinedInput-notchedOutline': {
-      borderColor: theme.palette.primary.light,
+      color: theme.palette.backgroundA.darker,
+      borderColor: theme.palette.backgroundA.darker,
     },
 
     // Change border color on focus
     '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-      borderColor: theme.palette.primary.main,
+      borderColor: theme.palette.backgroundA.darker,
       borderWidth: '2px', // or other width as you like
     },
   },
   borderRadius: theme.shape.borderRadius,
-  color: theme.palette.success.main,
+  color: theme.palette.backgroundA.darkest,
   width: '100%',
   backgroundColor: theme.palette.background.paper,
-  boxShadow: theme.shadows[1],
+  // boxShadow: theme.shadows[1],
+  boxShadow: `0px 2px 4px -1px ${theme.palette.grey[400]}`,
+  marginBottom: theme.spacing(2),
 }));
 
-// Define simple expand animations
-const expandWidth = keyframes`
-  from { width: 0%; }
-  to { width: 100%; }
-`;
-
-const expandHeight = keyframes`
-  from { height: 0%; }
-  to { height: 100%; }
-`;
+export const StyledBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: theme.spacing(3),
+  minHeight: '100%',
+  // backgroundColor: theme.palette.backgroundA.lightest,
+  borderRadius: theme.shape.borderRadius,
+  color: theme.palette.text.primary,
+}));
 
-export const StyledBorderContainer = styled('div')(({ theme }) => ({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  '&:before, &:after': {
-    content: '""',
-    position: 'absolute',
-    backgroundColor: theme.palette.primary.light,
-    zIndex: 1,
-    transition: 'all 0.5s ease',
-  },
-  '&:before': {
-    top: 0,
-    left: 0,
-    height: '2px',
-    animation: css`
-      ${expandWidth} 0.5s ease forwards
-    `,
-  },
-  '&:after': {
-    bottom: 0,
-    right: 0,
-    height: '2px',
-    animation: css`
-      ${expandWidth} 0.5s 1.5s ease forwards
-    `,
-  },
-  '&::before': {
-    width: '2px',
-    top: 0,
-    animation: css`
-      ${expandHeight} 0.5s 0.5s ease forwards
-    `,
+export const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
+  background: theme.palette.primary.main, // Or any other appropriate color
+  color: theme.palette.primary.contrastText,
+  padding: theme.spacing(2),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`, // Only round the top corners
+  '& .MuiTypography-root': {
+    fontWeight: 'bold',
   },
-  '&::after': {
-    width: '2px',
-    bottom: 0,
-    animation: css`
-      ${expandHeight} 0.5s 2s ease forwards
-    `,
+  '& .MuiIconButton-root': {
+    color: theme.palette.primary.contrastText, // Ensure it stands out or matches
   },
 }));
diff --git a/src/components/grids/collectionGrids/CardList.jsx b/src/components/grids/collectionGrids/CardList.jsx
index 2028631..fa07073 100644
--- a/src/components/grids/collectionGrids/CardList.jsx
+++ b/src/components/grids/collectionGrids/CardList.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import {
   Box,
   Typography,
@@ -14,6 +14,7 @@ import {
   Button,
   TableHead,
   Divider,
+  Container,
 } from '@mui/material';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import TablePaginationActions from '../../reusable/TablePaginationActions';
@@ -21,6 +22,8 @@ import { useCollectionStore } from '../../../context/CollectionContext/Collectio
 import Logger from '../../reusable/Logger';
 import { useMode } from '../../../context';
 import useCardListStyles from '../../../context/hooks/useCardListStyles';
+import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
+import usePortfolioStyles from '../../../context/hooks/usePortfolioStyles';
 
 const cardLogger = new Logger([
   'Action',
@@ -31,13 +34,7 @@ const cardLogger = new Logger([
 
 const CardList = () => {
   const { theme } = useMode();
-
-  const {
-    StyledContainer,
-    StyledButtonGroup,
-    StyledTableHeader,
-    StyledTableCell,
-  } = useCardListStyles(theme);
+  const classes = usePortfolioStyles(theme);
 
   const {
     selectedCollection,
@@ -45,13 +42,12 @@ const CardList = () => {
     removeOneFromCollection,
     addOneToCollection,
   } = useCollectionStore();
-  // const { theme } = useMode();
 
+  const { isMedium, isLarge, isMediumExtraLarge } = useResponsiveStyles(theme);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const selectedCards = selectedCollection?.cards;
   const count = selectedCards?.length || 0;
-
   const emptyRows = useMemo(
     () => Math.max(0, (1 + page) * rowsPerPage - (selectedCards?.length || 0)),
     [page, rowsPerPage, selectedCards]
@@ -78,507 +74,332 @@ const CardList = () => {
     cardLogger.logCardAction('add', card);
   };
 
-  return (
-    <StyledContainer theme={theme} maxWidth="lg">
-      <Typography
-        variant="h4"
-        gutterBottom
-        sx={{
-          fontWeight: 'bold',
-          paddingLeft: '1rem',
-          display: 'flex',
-          alignItems: 'center',
-          color: theme.palette.primary.main,
-        }}
-      >
-        <IconButton
-          color={theme.palette.success.main}
-          background={theme.palette.primary.main}
-          sx={{
-            color: theme.palette.primary.main,
-            // background: theme.palette.primary.main,
-            marginRight: '4px',
-          }}
-        >
-          <AssessmentIcon />
-        </IconButton>
-        Cards in Portfolio
-      </Typography>
-      <CardListTable
-        theme={theme}
-        selectedCards={selectedCards}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        handleChangePage={handleChangePage}
-        handleChangeRowsPerPage={handleChangeRowsPerPage}
-        handleRemoveCard={handleRemoveCard}
-        handleAddCard={handleAddCard}
-        emptyRows={emptyRows}
-        StyledTableHeader={StyledTableHeader}
-        StyledTableCell={StyledTableCell}
-        StyledButtonGroup={StyledButtonGroup}
-        count={count}
-      />
-      <TotalPriceBox totalPrice={getTotalPrice()} />
-    </StyledContainer>
-  );
-};
-
-const CardListTable = ({
-  selectedCards,
-  rowsPerPage,
-  page,
-  handleChangePage,
-  handleChangeRowsPerPage,
-  handleRemoveCard,
-  handleAddCard,
-  emptyRows,
-  StyledTableHeader,
-  StyledTableCell,
-  count,
-  StyledButtonGroup,
-}) => {
-  const { theme } = useMode();
+  useEffect(() => {
+    const updateRowsPerPage = () =>
+      setRowsPerPage(window.innerWidth > 960 ? 10 : 5);
+    window.addEventListener('resize', updateRowsPerPage);
+    return () => window.removeEventListener('resize', updateRowsPerPage);
+  }, []);
+
+  // Helper function to round the total price to the nearest tenth
+  const roundToNearestTenth = (value) => Math.round(value * 10) / 10;
+
+  // Render functions
+  const renderTableHeader = () => {
+    return (
+      <TableHead className={classes.tableHeader}>
+        <TableRow className={classes.tableRow}>
+          <TableCell className={classes.tableCell}>Name</TableCell>
+          <TableCell align="right" className={classes.tableCell}>
+            Price
+          </TableCell>
+          <TableCell align="right" className={classes.tableCell}>
+            Total Price
+          </TableCell>
+          <TableCell align="right" className={classes.tableCell}>
+            Quantity
+          </TableCell>
+          <TableCell align="right" className={classes.tableCell}>
+            Actions
+          </TableCell>
+        </TableRow>
+      </TableHead>
+    );
+  };
 
-  return (
-    <TableContainer component={Paper}>
-      <Table aria-label="custom pagination table">
-        <StyledTableHeader theme={theme}>
-          <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>
+  const renderTableBody = () => {
+    return (
+      <TableBody className={classes.tableBody}>
+        {(rowsPerPage > 0
+          ? selectedCollection.cards?.slice(
+              page * rowsPerPage,
+              page * rowsPerPage + rowsPerPage
+            )
+          : selectedCollection.cards
+        )?.map((card) => (
+          <TableRow key={card.id} className={classes.tableRow}>
+            <TableCell component="th" scope="row" className={classes.tableCell}>
+              {card.name}
+            </TableCell>
+            <TableCell align="right" className={classes.tableCell}>
+              {card.price}
+            </TableCell>
+            <TableCell align="right" className={classes.tableCell}>
+              {roundToNearestTenth(card.totalPrice)}
+            </TableCell>
+            <TableCell align="right" className={classes.tableCell}>
+              {card.quantity}
+            </TableCell>
+            <TableCell align="right" className={classes.tableCell}>
+              {/* Action Buttons */}
+              <Button color="error" onClick={() => handleRemoveCard(card)}>
+                Remove
+              </Button>
+              <Divider orientation="vertical" flexItem />
+              <Button color="primary" onClick={() => handleAddCard(card)}>
+                Add
+              </Button>
+            </TableCell>
           </TableRow>
-        </StyledTableHeader>
+        ))}
+      </TableBody>
+    );
+  };
 
-        <TableBody>
-          {(rowsPerPage > 0
-            ? selectedCards?.slice(
-                page * rowsPerPage,
-                page * rowsPerPage + rowsPerPage
-              )
-            : selectedCards
-          )?.map((card, index) => (
-            <TableRow key={card.id || index}>
-              <StyledTableCell component="th" scope="row">
-                {card?.name}
-              </StyledTableCell>
-              <StyledTableCell align="right">{card?.price}</StyledTableCell>
-              <StyledTableCell align="right">
-                {card?.totalPrice}
-              </StyledTableCell>
-              <StyledTableCell align="right">{card?.quantity}</StyledTableCell>
-              <StyledTableCell align="right">
-                {/* TCGPlayer Price rendering logic */}
-              </StyledTableCell>
-              <StyledTableCell align="right">
-                <StyledButtonGroup>
-                  <Button
-                    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',
-                    }}
-                  >
-                    Remove
-                  </Button>
-                  <Divider orientation="horizontal" flexItem />
-                  <Button
-                    onClick={() => handleAddCard(card)}
-                    sx={{
-                      padding: '10px 20px',
-                      border: 'none',
-                      borderRadius: '5px',
-                      cursor: 'pointer',
-                      backgroundColor: theme.palette.success.main,
-                      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
-                      width: '100%',
-                      hover: {
-                        backgroundColor: theme.palette.success.dark,
-                      },
-                      fontSize: '0.6rem',
-                      minWidth: 'inherit',
-                      color: 'white',
-                    }}
-                  >
-                    Add
-                  </Button>
-                </StyledButtonGroup>
-              </StyledTableCell>
-            </TableRow>
-          ))}
+  const renderTableFooter = () => {
+    return (
+      <TableFooter className={classes.tableFooter}>
+        <TableRow className={classes.tableRow}>
+          <TablePagination
+            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+            colSpan={5}
+            count={selectedCollection.cards?.length || 0}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            ActionsComponent={TablePaginationActions}
+          />
+        </TableRow>
+      </TableFooter>
+    );
+  };
 
-          {emptyRows > 0 && (
-            <TableRow style={{ height: 53 * emptyRows }}>
-              <StyledTableCell colSpan={6} />
-            </TableRow>
-          )}
-        </TableBody>
+  const renderTotalPriceBox = () => {
+    const renderTotalPrice = () => {
+      return (
+        <Typography
+          variant="h6"
+          sx={{
+            color: theme.palette.backgroundA.light,
+            width: '100%',
+            marginLeft: 'auto',
+          }}
+        >
+          {`$${roundToNearestTenth(getTotalPrice())}`}
+        </Typography>
+      );
+    };
+    return (
+      <Box
+        display="flex"
+        justifyContent="flex-end"
+        mt={2}
+        className={classes.tablePriceBox}
+        sx={{ width: '100%', flexDirection: 'row', borderRadius: '5px' }}
+      >
+        <Typography variant="h5" sx={{ width: '100%', marginLeft: '70%' }}>
+          Total:
+        </Typography>
+        {renderTotalPrice()}
+      </Box>
+    );
+  };
 
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-              colSpan={6}
-              count={count}
-              rowsPerPage={rowsPerPage}
-              page={page}
-              color={theme.palette.primary.main}
-              onPageChange={handleChangePage}
-              onRowsPerPageChange={handleChangeRowsPerPage}
-              ActionsComponent={TablePaginationActions}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </TableContainer>
+  return (
+    <Paper className={classes.tablePaper}>
+      <TableContainer component={Container} className={classes.tableContainer}>
+        <Table aria-label="custom pagination table" className={classes.table}>
+          {renderTableHeader()}
+          {renderTableBody()}
+          {renderTableFooter()}
+        </Table>
+      </TableContainer>
+      {renderTotalPriceBox()}
+    </Paper>
   );
 };
 
-const TotalPriceBox = ({ totalPrice }) => (
-  <Box display="flex" justifyContent="flex-end" mt={2} sx={{ width: '100%' }}>
-    <Typography variant="h5" sx={{ color: '#fff' }}>
-      {`Total: $${totalPrice}`}
-    </Typography>
-  </Box>
-);
-
 export default CardList;
+//   useEffect(() => {
+//     // if its bigger than small
+//     if (
+//       isLarge ||
+//       isMediumExtraLarge ||
+//       // isMedium ||
+//       (isMedium && isLarge) ||
+//       (isMedium && isMediumExtraLarge)
+//     ) {
+//       setRowsPerPage(10);
+//     } else {
+//       setRowsPerPage(5);
+//     }
+//   }, [isLarge]);
 
-// import React, { useMemo, useRef, useState } from 'react';
-// import {
-//   Box,
-//   Typography,
-//   Paper,
-//   Container,
-//   IconButton,
-//   Table,
-//   TableBody,
-//   TableCell,
-//   TableContainer,
-//   TableFooter,
-//   TablePagination,
-//   TableRow,
-//   Button,
-//   TableHead,
-//   useTheme,
-//   ButtonGroup,
-//   Divider,
-// } from '@mui/material';
-// import AssessmentIcon from '@mui/icons-material/Assessment';
-// import TablePaginationActions from '../../reusable/TablePaginationActions';
-// import PropTypes from 'prop-types';
-// import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
-// import { styled } from '@mui/styles';
-// import { useMode } from '../../../context/hooks/colormode';
-// import Logger from '../../reusable/Logger';
-// import useCardListStyles from '../../../context/hooks/useCardListStyles';
-// // Instantiate logger outside of the component
-// const cardLogger = new Logger([
-//   'Action',
-//   'Card Name',
-//   'Quantity',
-//   'Total Price',
-// ]);
-
-// const StyledContainer = styled(Container)(({ theme }) => ({
-//   display: 'flex',
-//   flexDirection: 'column',
-//   height: '100%',
-//   width: '100%',
-//   alignItems: 'center',
-//   // background: theme.palette.background.main,
-//   background: theme.palette.background.dark,
-//   padding: theme.spacing(2),
-//   color: '#fff', // White text color
-//   // padding: 2,
-//   borderRadius: 4,
-// }));
-
-// 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 StyledTableHeader = styled(TableHead)(({ theme }) => ({
-//   backgroundColor: '#555', // Darker shade for header
-//   color: '#fff',
-// }));
-// const StyledTableCell = styled(TableCell)(({ theme }) => ({
-//   color: '#ddd', // Lighter text for better readability
-// }));
+//   return (
+//     <StyledContainer theme={theme} maxWidth="lg">
+//       <CardListTable
+//         theme={theme}
+//         selectedCards={selectedCards}
+//         rowsPerPage={rowsPerPage}
+//         page={page}
+//         handleChangePage={handleChangePage}
+//         handleChangeRowsPerPage={handleChangeRowsPerPage}
+//         handleRemoveCard={handleRemoveCard}
+//         handleAddCard={handleAddCard}
+//         emptyRows={emptyRows}
+//         StyledTableHeader={StyledTableHeader}
+//         StyledTableCell={StyledTableCell}
+//         StyledButtonGroup={StyledButtonGroup}
+//         count={count}
+//       />
+//       <TotalPriceBox totalPrice={getTotalPrice()} />
+//     </StyledContainer>
+//   );
+// };
 
-// const CardList = () => {
+// const CardListTable = ({
+//   selectedCards,
+//   rowsPerPage,
+//   page,
+//   handleChangePage,
+//   handleChangeRowsPerPage,
+//   handleRemoveCard,
+//   handleAddCard,
+//   emptyRows,
+//   StyledTableHeader,
+//   StyledTableCell,
+//   count,
+//   StyledButtonGroup,
+// }) => {
 //   const { theme } = useMode();
-//   const {
-//     StyledContainer,
-//     StyledButtonGroup,
-//     StyledTableHeader,
-//     StyledTableCell,
-//   } = useCardListStyles();
-
-//   const {
-//     selectedCollection,
-//     getTotalPrice,
-//     removeOneFromCollection,
-//     addOneToCollection,
-//   } = useCollectionStore();
-//   const [page, setPage] = useState(0);
-//   const [rowsPerPage, setRowsPerPage] = useState(5);
-//   const selectedCards = selectedCollection?.cards;
-//   const count = selectedCards?.length || 0;
-//   const [chartDimensions, setChartDimensions] = useState({
-//     width: 0,
-//     height: 0,
-//   });
-//   const emptyRows = useMemo(() => {
-//     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', {});
-//     setPage(newPage);
-//   };
-
-//   const handleChangeRowsPerPage = (event) => {
-//     cardLogger.logCardAction('Change Rows Per Page', {});
-//     setRowsPerPage(parseInt(event.target.value, 10));
-//     setPage(0);
-//   };
-
-//   const handleRemoveCard = (card) => {
-//     removeOneFromCollection(card, selectedCollection);
-//     cardLogger.logCardAction('remove', card);
-//   };
-
-//   const handleAddCard = (card) => {
-//     addOneToCollection(card, selectedCollection);
-//     cardLogger.logCardAction('add', card);
-//   };
 
 //   return (
-//     <StyledContainer maxWidth="lg">
-//       <Paper
-//         elevation={8}
+//     <TableContainer
+//       component={Paper}
+//       sx={{
+//         backgroundColor: theme.palette.backgroundA.lightest,
+//         border: '3px solid',
+//         borderColor: theme.palette.backgroundB.lightest,
+//         boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+//         borderRadius: '5px',
+//         width: '100%',
+//         maxWidth: '100%',
+//       }}
+//     >
+//       <Table
+//         aria-label="custom pagination table"
 //         sx={{
-//           padding: theme.spacing(1), // Reduced padding for mobile screens
-//           borderRadius: 2,
 //           width: '100%',
-//           color: '#fff',
-//           background: theme.palette.background.main,
+
+//           maxWidth: '100%',
 //         }}
 //       >
-//         <Typography
-//           variant="h4"
-//           gutterBottom
-//           sx={{
-//             fontWeight: 'bold',
-//             paddingLeft: theme.spacing(1),
-//             display: 'flex',
-//             alignItems: 'center',
-//             color: theme.palette.primary.main,
-//           }}
-//         >
-//           <IconButton
-//             color="primary"
-//             sx={{
-//               color: theme.palette.primary.main,
-//               marginRight: '4px',
-//             }}
-//           >
-//             <AssessmentIcon />
-//           </IconButton>
-//           Cards in Portfolio
-//         </Typography>
-//         {/* Include the CronTrigger button */}
-//         <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
-//                 ? // eslint-disable-next-line no-unsafe-optional-chaining
-//                   selectedCards?.slice(
-//                     page * rowsPerPage,
-//                     page * rowsPerPage + rowsPerPage
-//                   )
-//                 : selectedCards
-//               )?.map((card, index) => (
-//                 <TableRow key={card.id || index}>
-//                   <StyledTableCell component="th" scope="row">
-//                     {card?.name}
-//                   </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?.latestPrice?.num ||
-//                           card?.price ||
-//                           card.card_prices[0].tcgplayer_price
-//                         }`
-//                       : 'Price not available'}
-//                   </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 }}>
-//                   <StyledTableCell colSpan={3} />
-//                 </TableRow>
-//               )}
-//             </TableBody>
-//             <TableFooter>
-//               {/* <TableRow>
-//                 <TablePagination
-//                   rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-//                   colSpan={3}
-//                   count={count}
-//                   rowsPerPage={rowsPerPage}
-//                   page={page}
-//                   SelectProps={{
-//                     inputProps: { 'aria-label': 'rows per page' },
-//                     native: true,
-//                   }}
-//                   onPageChange={handleChangePage}
-//                   onRowsPerPageChange={handleChangeRowsPerPage}
-//                   ActionsComponent={TablePaginationActions}
-//                 />
-//               </TableRow> */}
-//               <TableRow>
-//                 <TablePagination
-//                   rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-//                   colSpan={6}
-//                   count={count}
-//                   rowsPerPage={rowsPerPage}
-//                   page={page}
-//                   onPageChange={handleChangePage}
-//                   onRowsPerPageChange={handleChangeRowsPerPage}
-//                   ActionsComponent={TablePaginationActions}
-//                 />
-//               </TableRow>
-//             </TableFooter>
-//           </Table>
-//         </TableContainer>
-//         <Box
-//           display="flex"
-//           justifyContent="flex-end"
-//           mt={2}
-//           sx={{ width: '100%' }}
-//         >
-//           <Typography variant="h5" sx={{ color: '#fff' }}>
-//             {`Total: $${getTotalPrice()}`}
-//           </Typography>
-//         </Box>
-//       </Paper>
-//     </StyledContainer>
+//         <StyledTableHeader theme={theme}>
+//           <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(
+//                 page * rowsPerPage,
+//                 page * rowsPerPage + rowsPerPage
+//               )
+//             : selectedCards
+//           )?.map((card, index) => (
+//             <TableRow key={card.id || index}>
+//               <StyledTableCell component="th" scope="row">
+//                 {card?.name}
+//               </StyledTableCell>
+//               <StyledTableCell align="right">{card?.price}</StyledTableCell>
+//               <StyledTableCell align="right">
+//                 {card?.totalPrice}
+//               </StyledTableCell>
+//               <StyledTableCell align="right">{card?.quantity}</StyledTableCell>
+
+//               <StyledTableCell align="right">
+//                 <StyledButtonGroup theme={theme}>
+//                   <Button
+//                     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',
+//                     }}
+//                   >
+//                     Remove
+//                   </Button>
+//                   <Divider orientation="horizontal" flexItem />
+//                   <Button
+//                     onClick={() => handleAddCard(card)}
+//                     sx={{
+//                       padding: '10px 20px',
+//                       border: 'none',
+//                       borderRadius: '5px',
+//                       cursor: 'pointer',
+//                       backgroundColor: theme.palette.success.main,
+//                       boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+//                       width: '100%',
+//                       hover: {
+//                         backgroundColor: theme.palette.success.dark,
+//                       },
+//                       fontSize: '0.6rem',
+//                       minWidth: 'inherit',
+//                       color: 'white',
+//                     }}
+//                   >
+//                     Add
+//                   </Button>
+//                 </StyledButtonGroup>
+//               </StyledTableCell>
+//             </TableRow>
+//           ))}
+
+//           {emptyRows > 0 && (
+//             <TableRow style={{ height: 53 * emptyRows }}>
+//               <StyledTableCell theme={theme} colSpan={6} />
+//             </TableRow>
+//           )}
+//         </TableBody>
+
+//         <TableFooter>
+//           <TableRow>
+//             <TablePagination
+//               rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+//               colSpan={6}
+//               count={count}
+//               rowsPerPage={rowsPerPage}
+//               page={page}
+//               color={theme.palette.primary.main}
+//               onPageChange={handleChangePage}
+//               onRowsPerPageChange={handleChangeRowsPerPage}
+//               ActionsComponent={TablePaginationActions}
+//             />
+//           </TableRow>
+//         </TableFooter>
+//       </Table>
+//     </TableContainer>
 //   );
 // };
 
-// const TotalPriceBox = ({ totalPrice }) => (
-//   <Box display="flex" justifyContent="flex-end" mt={2} sx={{ width: '100%' }}>
-//     <Typography variant="h5" sx={{ color: '#fff' }}>
-//       {`Total: $${totalPrice}`}
-//     </Typography>
-//   </Box>
-// );
+// const TotalPriceBox = ({ totalPrice }) => {
+//   const roundToNearestTenth = (value) => {
+//     return Math.round(value * 10) / 10;
+//   };
+//   return (
+//     <Box display="flex" justifyContent="flex-end" mt={2} sx={{ width: '100%' }}>
+//       <Typography variant="h5" sx={{ color: '#fff' }}>
+//         {`Total: $${roundToNearestTenth(totalPrice)}`}
+//       </Typography>
+//     </Box>
+//   );
+// };
 
 // export default CardList;
diff --git a/src/components/grids/collectionGrids/CollectionListItem.jsx b/src/components/grids/collectionGrids/CollectionListItem.jsx
new file mode 100644
index 0000000..8efbd86
--- /dev/null
+++ b/src/components/grids/collectionGrids/CollectionListItem.jsx
@@ -0,0 +1,121 @@
+/* eslint-disable react/display-name */
+import React, { memo, useState } from 'react';
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  Grid,
+  Typography,
+  useTheme,
+  IconButton,
+  Divider,
+  Tooltip,
+} from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { styled } from '@mui/system';
+import PropTypes from 'prop-types';
+import { useMode } from '../../../context';
+import useSelectCollectionListStyles from '../../../context/hooks/useSelectCollectionListStyles';
+import LongMenu from '../../reusable/LongMenu';
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  margin: theme.spacing(1),
+  transition: '0.3s',
+  boxShadow: '0 8px 40px -12px rgba(0,0,0,0.3)',
+  '&:hover': {
+    boxShadow: '0 16px 70px -12.125px rgba(0,0,0,0.3)',
+  },
+}));
+
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  textAlign: 'left',
+  padding: theme.spacing(2),
+}));
+const StatisticTypography = styled(Typography)(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.text.secondary,
+}));
+
+const CollectionListItem = memo(
+  ({
+    collection,
+    handleSelect,
+    statsByCollectionId,
+    handleOpenDialog,
+    roundToNearestTenth,
+  }) => {
+    const { theme } = useMode();
+    const classes = useSelectCollectionListStyles(theme);
+    const [showOptions, setShowOptions] = useState(false);
+    const twentyFourHourChange = statsByCollectionId?.twentyFourHourAverage;
+
+    return (
+      <StyledCard variant="outlined" theme={theme}>
+        <CardActionArea onClick={() => handleSelect(collection._id)}>
+          <StyledCardContent theme={theme}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6} md={3}>
+                <Typography>Name: {collection?.name}</Typography>
+              </Grid>
+              <Grid item xs={12} sm={6} md={3}>
+                <Typography>
+                  Value: ${roundToNearestTenth(collection?.totalPrice)}
+                </Typography>
+              </Grid>
+              <Grid item xs={12} sm={6} md={3}>
+                <StatisticTypography theme={theme}>
+                  Performance:{' '}
+                  {twentyFourHourChange?.priceChange > 0 ? (
+                    <ArrowUpwardIcon />
+                  ) : (
+                    <ArrowDownwardIcon />
+                  )}
+                  {twentyFourHourChange?.percentageChange}
+                </StatisticTypography>
+              </Grid>
+              <Grid item xs={12} sm={6} md={3}>
+                <Typography>Cards: {collection?.totalQuantity}</Typography>
+              </Grid>
+              {/* Add more grid items for other details like Performance */}
+            </Grid>
+          </StyledCardContent>
+        </CardActionArea>
+        <Tooltip title="Options">
+          <IconButton
+            size="small"
+            onClick={() => setShowOptions(!showOptions)}
+            style={{ position: 'absolute', top: 5, right: 5 }}
+          >
+            <MoreVertIcon />
+          </IconButton>
+        </Tooltip>
+        {showOptions && (
+          <LongMenu
+            onEdit={() => handleOpenDialog(collection)}
+            onStats={() => console.log('Stats:', collection)}
+            onView={() => console.log('View:', collection)}
+            onClose={() => setShowOptions(false)}
+          />
+        )}
+      </StyledCard>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.collection._id === nextProps.collection._id &&
+    prevProps.isSelected === nextProps.isSelected
+);
+
+CollectionListItem.propTypes = {
+  collection: PropTypes.object.isRequired,
+  handleSelect: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool,
+};
+
+CollectionListItem.defaultProps = {
+  isSelected: false,
+};
+
+export default CollectionListItem;
diff --git a/src/components/grids/collectionGrids/SelectCollectionList.jsx b/src/components/grids/collectionGrids/SelectCollectionList.jsx
index f713747..81495d8 100644
--- a/src/components/grids/collectionGrids/SelectCollectionList.jsx
+++ b/src/components/grids/collectionGrids/SelectCollectionList.jsx
@@ -10,9 +10,9 @@ import {
   Typography,
   useTheme,
   Skeleton,
+  Card,
 } from '@mui/material';
 import PropTypes from 'prop-types';
-import LoadingIndicator from '../../reusable/indicators/LoadingIndicator';
 import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
 import { useStatisticsStore } from '../../../context/StatisticsContext/StatisticsContext';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
@@ -20,13 +20,45 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import LongMenu from '../../reusable/LongMenu';
 import { roundToNearestTenth } from '../../../context/Helpers';
 import useSelectCollectionListStyles from '../../../context/hooks/useSelectCollectionListStyles';
+import { styled } from '@mui/styles';
+import { useMode, usePageContext } from '../../../context';
+import CollectionListItem from './CollectionListItem';
+
+const StyledSkeletonCard = styled(Card)(({ theme }) => ({
+  // Use the same styles as in StyledCard
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: '109px',
+  maxWidth: '100%',
+  width: 'auto',
+  maxHeight: '80vh',
+  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 AspectRatioBoxSkeleton = styled('div')(({ theme }) => ({
+  width: '100%',
+  position: 'relative',
+  paddingTop: '56.25%', // 16:9 aspect ratio
+}));
+
 // eslint-disable-next-line react/display-name
 const ListItemSkeleton = memo(
   () => {
-    const classes = useSelectCollectionListStyles();
+    const { theme } = useMode();
+    const classes = useSelectCollectionListStyles(theme);
     return (
-      <ListItem className={classes.listItem}>
-        <Skeleton variant="rectangular" height={50} />
+      <ListItem className={classes.listItemSkeleton}>
+        <StyledSkeletonCard theme={theme}>
+          <AspectRatioBoxSkeleton theme={theme}>
+            <Skeleton variant="rectangular" animation="wave" height={50} />
+          </AspectRatioBoxSkeleton>
+        </StyledSkeletonCard>
       </ListItem>
     );
   },
@@ -34,116 +66,120 @@ const ListItemSkeleton = memo(
 );
 
 // eslint-disable-next-line react/display-name
-const CollectionListItem = memo(
-  ({
-    collection,
-    handleSelect,
-    handleOpenDialog,
-    isSelected,
-    statsByCollectionId,
-    isPlaceholder,
-  }) => {
-    const classes = useSelectCollectionListStyles();
+// const CollectionListItem = memo(
+//   ({
+//     collection,
+//     handleSelect,
+//     handleOpenDialog,
+//     isSelected,
+//     statsByCollectionId,
+//     isPlaceholder,
+//   }) => {
+//     const { theme } = useMode();
+//     const classes = useSelectCollectionListStyles(theme);
+//     console.log('statsByCollectionId', statsByCollectionId);
+//     const twentyFourHourChange = statsByCollectionId?.twentyFourHourAverage;
+//     return (
+//       <React.Fragment>
+//         <ListItem
+//           className={classes.collectionListItem}
+//           // className={`${classes.listItem} ${
+//           //   isSelected ? classes.selectedListItem : ''
+//           // }`}
+//           style={{ opacity: 1 }}
+//         >
+//           <ButtonBase
+//             sx={{ width: '100%' }}
+//             disabled={isPlaceholder}
+//             onClick={() => !isPlaceholder && handleSelect(collection?._id)}
+//           >
+//             <Grid container spacing={1}>
+//               <Grid item xs={6} sm={3} className={classes.gridItem}>
+//                 <Typography className={classes.gridItemText}>Name:</Typography>
+//                 <Typography>{collection?.name}</Typography>
+//               </Grid>
+//               <Grid item xs={6} sm={3} className={classes.gridItem}>
+//                 <Typography className={classes.gridItemText}>Value:</Typography>
+//                 <Typography>
+//                   ${roundToNearestTenth(collection?.totalPrice)}
+//                 </Typography>
+//               </Grid>
+//               <Grid item xs={6} sm={3} className={classes.gridItem}>
+//                 <Typography className={classes.gridItemText}>
+//                   Performance:
+//                 </Typography>
+//                 <Typography
+//                   component="div"
+//                   sx={{ display: 'flex', alignItems: 'center' }}
+//                 >
+//                   {twentyFourHourChange?.priceChange > 0 ? (
+//                     <ArrowUpwardIcon className={classes.positivePerformance} />
+//                   ) : (
+//                     <ArrowDownwardIcon
+//                       className={classes.negativePerformance}
+//                     />
+//                   )}
+//                   {twentyFourHourChange?.percentageChange}
+//                 </Typography>
+//               </Grid>
+//               <Grid item xs={6} sm={3} className={classes.gridItem}>
+//                 <Typography className={classes.gridItemText}>Cards:</Typography>
+//                 <Typography>{collection?.totalQuantity}</Typography>
+//               </Grid>
+//             </Grid>
+//           </ButtonBase>
+//           <div className={classes.menuButton}>
+//             <LongMenu
+//               onEdit={() => handleOpenDialog(collection)}
+//               onStats={() => console.log('Stats:', collection)}
+//               onView={() => console.log('View:', collection)}
+//             />
+//           </div>
+//         </ListItem>
+//         <Divider />
+//       </React.Fragment>
+//     );
+//   },
+//   (prevProps, nextProps) => {
+//     // Only re-render if specific props have changed
+//     return (
+//       prevProps.collection._id === nextProps.collection._id &&
+//       prevProps.isSelected === nextProps.isSelected
+//     );
+//   }
+// );
 
-    const twentyFourHourChange =
-      statsByCollectionId[collection?._id]?.twentyFourHourAverage;
-    return (
-      <React.Fragment>
-        <ListItem
-          className={`${classes.listItem} ${
-            isSelected ? classes.selectedListItem : ''
-          }`}
-          style={{ opacity: 1 }}
-        >
-          <ButtonBase
-            sx={{ width: '100%' }}
-            disabled={isPlaceholder}
-            onClick={() => !isPlaceholder && handleSelect(collection?._id)}
-          >
-            <Grid container spacing={1}>
-              <Grid item xs={6} sm={3} className={classes.gridItem}>
-                <Typography className={classes.gridItemText}>Name:</Typography>
-                <Typography>{collection?.name}</Typography>
-              </Grid>
-              <Grid item xs={6} sm={3} className={classes.gridItem}>
-                <Typography className={classes.gridItemText}>Value:</Typography>
-                <Typography>
-                  ${roundToNearestTenth(collection?.totalPrice)}
-                </Typography>
-              </Grid>
-              <Grid item xs={6} sm={3} className={classes.gridItem}>
-                <Typography className={classes.gridItemText}>
-                  Performance:
-                </Typography>
-                <Typography
-                  component="div"
-                  sx={{ display: 'flex', alignItems: 'center' }}
-                >
-                  {twentyFourHourChange?.priceChange > 0 ? (
-                    <ArrowUpwardIcon className={classes.positivePerformance} />
-                  ) : (
-                    <ArrowDownwardIcon
-                      className={classes.negativePerformance}
-                    />
-                  )}
-                  {twentyFourHourChange?.percentageChange}
-                </Typography>
-              </Grid>
-              <Grid item xs={6} sm={3} className={classes.gridItem}>
-                <Typography className={classes.gridItemText}>Cards:</Typography>
-                <Typography>{collection?.totalQuantity}</Typography>
-              </Grid>
-            </Grid>
-          </ButtonBase>
-          <div className={classes.menuButton}>
-            <LongMenu
-              onEdit={() => handleOpenDialog(collection)}
-              onStats={() => console.log('Stats:', collection)}
-              onView={() => console.log('View:', collection)}
-            />
-          </div>
-        </ListItem>
-        <Divider />
-      </React.Fragment>
-    );
-  },
-  (prevProps, nextProps) => {
-    // Only re-render if specific props have changed
-    return (
-      prevProps.collection._id === nextProps.collection._id &&
-      prevProps.isSelected === nextProps.isSelected
-    );
-  }
-);
 const SelectCollectionList = ({
   onSave,
   openDialog,
   handleSelectCollection,
+  isLoadingNewCollection,
 }) => {
-  const classes = useSelectCollectionListStyles();
+  const { theme } = useMode();
+  const classes = useSelectCollectionListStyles(theme);
   const [selectedCollectionId, setSelectedCollectionId] = useState(null);
-
+  const [loadingCollectionIds, setLoadingCollectionIds] = useState([]);
   const { allCollections, setSelectedCollection, fetchAllCollectionsForUser } =
     useCollectionStore();
+  const { setLoading } = usePageContext();
   const { statsByCollectionId } = useStatisticsStore();
-  const [isComponentMounted, setIsComponentMounted] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
 
   const handleSelect = useCallback(
     (selectedId) => {
       setSelectedCollectionId(selectedId); // Keep track of the selected collection ID
-      const selected = allCollections.find(
+      const selected = allCollections?.find(
         (collection) => collection._id === selectedId
       );
       if (!selected) {
         console.error('Collection not found with ID:', selectedId);
         return;
       }
-      setSelectedCollection(selected);
+      // setSelectedCollection(selected);
       handleSelectCollection(selected?._id);
       onSave(selected);
+      setLoadingCollectionIds((prev) => [...prev, selectedId]);
     },
-    [allCollections, onSave, setSelectedCollection, handleSelectCollection]
+    [allCollections, onSave, handleSelectCollection] // Dependencies
   );
   const handleOpenDialog = useCallback(
     (collection) => {
@@ -152,43 +188,58 @@ const SelectCollectionList = ({
     },
     [openDialog, setSelectedCollection]
   );
-  return (
-    <>
-      {isLoading ? (
-        <List>
-          {[...new Array(5)].map(
-            (
-              _,
-              index // Render 5 skeleton list items
-            ) => (
-              <React.Fragment key={index}>
-                <ListItemSkeleton />
-                <Divider />
-              </React.Fragment>
-            )
-          )}
-        </List>
-      ) : (
-        <List>
-          {allCollections?.map((collection) => {
-            const isSelected = collection?._id === selectedCollectionId;
+  useEffect(() => {
+    if (isLoadingNewCollection) {
+      setLoading('isLoading', true);
+      const newCollectionId = allCollections[allCollections?.length - 1]?._id;
+      if (newCollectionId) {
+        setLoadingCollectionIds((prev) => [...prev, newCollectionId]);
+        setLoading('isLoading', false);
+      }
+    }
+  }, [isLoadingNewCollection, allCollections]);
+  // Effect to remove loading state once collection is considered "loaded"
+  useEffect(() => {
+    // Define a method to "load" collection, maybe after a fetch or certain condition
+    const loadCollection = (collectionId) => {
+      setLoadingCollectionIds((prev) =>
+        prev.filter((id) => id !== collectionId)
+      );
+    };
+    loadingCollectionIds?.forEach((collectionId) => {
+      setTimeout(() => loadCollection(collectionId), 1000); // simulate delay
+    });
+  }, [loadingCollectionIds]);
+  // useEffect(() => {
+  //   fetchAllCollectionsForUser().catch((err) =>
+  //     console.error('Failed to get all collections:', err)
+  //   );
+  // }. [fetchAllCollectionsForUser]);
 
-            return (
-              <CollectionListItem
-                key={collection._id}
-                collection={collection}
-                handleSelect={handleSelect}
-                handleOpenDialog={handleOpenDialog}
-                isSelected={isSelected}
-                classes={classes}
-                statsByCollectionId={statsByCollectionId}
-                isPlaceholder={false}
-              />
-            );
-          })}
-        </List>
-      )}
-    </>
+  return (
+    <List>
+      {allCollections?.map((collection) => {
+        const isSelected = collection?._id === selectedCollectionId;
+        const isLoading = loadingCollectionIds?.includes(collection?._id);
+        return isLoading ? (
+          // Render skeleton if the collection is still loading
+          <ListItemSkeleton key={`loading-${collection?._id}`} />
+        ) : (
+          // Render actual collection item if it's not in loading state
+          <CollectionListItem
+            key={collection._id}
+            collection={collection}
+            handleSelect={handleSelect}
+            handleOpenDialog={handleOpenDialog}
+            roundToNearestTenth={roundToNearestTenth}
+            isSelected={isSelected}
+            classes={classes}
+            statsByCollectionId={statsByCollectionId}
+            isPlaceholder={false}
+          />
+        );
+      })}
+    </List>
   );
 };
 
@@ -196,6 +247,8 @@ SelectCollectionList.propTypes = {
   onSave: PropTypes.func.isRequired,
   openDialog: PropTypes.func.isRequired,
   handleSelectCollection: PropTypes.func.isRequired,
+  isLoadingNewCollection: PropTypes.bool,
+  allCollections: PropTypes.array.isRequired, // Ensure this is passed or obtained from context
 };
 
 export default SelectCollectionList;
diff --git a/src/components/grids/deckBuilderGrids/CardsGrid.js b/src/components/grids/deckBuilderGrids/CardsGrid.js
index 2d0e44a..f8c697e 100644
--- a/src/components/grids/deckBuilderGrids/CardsGrid.js
+++ b/src/components/grids/deckBuilderGrids/CardsGrid.js
@@ -1,9 +1,10 @@
 import React, { useMemo, useState } from 'react';
 import { Grid, Typography } from '@mui/material';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import DeckItem from '../DeckItem';
+import { CSSTransition } from 'react-transition-group';
+import DeckItem from '../gridItems/DeckItem';
 import { useDeckStore } from '../../../context/DeckContext/DeckContext';
-import SkeletonDeckItem from '../SkeletonDeckItem';
+import SkeletonDeckItem from '../gridItems/SkeletonDeckItem';
+import GridLayout from '../searchResultsGrids/GridLayout';
 const CardsGrid = ({ isLoading }) => {
   const { selectedCards } = useDeckStore();
   const [error, setError] = useState('');
@@ -35,34 +36,37 @@ const CardsGrid = ({ isLoading }) => {
   console.log('LOADING', isLoading);
 
   return (
-    <Grid container spacing={2}>
-      <TransitionGroup component={null}>
-        {isLoading
-          ? Array.from({ length: skeletonCount }).map((_, index) => (
-              <CSSTransition key={index} timeout={500} classNames="card">
-                <Grid item xs={6} sm={4} md={3} lg={3}>
-                  <SkeletonDeckItem context={'Deck'} />
-                </Grid>
-              </CSSTransition>
-            ))
-          : flattenSelectedCards?.map((card, index) => (
-              <CSSTransition
-                key={card?.uniqueKey || index}
-                timeout={500}
-                classNames="card"
-              >
-                <Grid item xs={6} sm={4} md={4} lg={3}>
-                  <DeckItem
-                    card={card}
-                    page={'Deck'}
-                    index={index}
-                    context={'Deck'}
-                  />
-                </Grid>
-              </CSSTransition>
-            ))}
-      </TransitionGroup>
-    </Grid>
+    <GridLayout
+      containerStyles={{ marginTop: '1rem' }}
+      isLoading={isLoading}
+      skeletonCount={9}
+      gridItemProps={{ xs: 12, sm: 6, md: 4, lg: 4 }}
+    >
+      {isLoading
+        ? Array.from({ length: skeletonCount }).map((_, index) => (
+            <CSSTransition key={index} timeout={500} className="card">
+              <Grid item xs={6} sm={4} md={3} lg={3}>
+                <SkeletonDeckItem context={'Deck'} />
+              </Grid>
+            </CSSTransition>
+          ))
+        : flattenSelectedCards?.map((card, index) => (
+            <CSSTransition
+              key={card?.cardData?.uniqueKey || index}
+              timeout={500}
+              className="card"
+            >
+              <Grid item xs={6} sm={4} md={4} lg={3}>
+                <DeckItem
+                  card={card?.cardData}
+                  page={'Deck'}
+                  index={index}
+                  context={'Deck'}
+                />
+              </Grid>
+            </CSSTransition>
+          ))}
+    </GridLayout>
   );
 };
 
diff --git a/src/components/grids/deckBuilderGrids/SelectDeckList.jsx b/src/components/grids/deckBuilderGrids/SelectDeckList.jsx
index 1105e12..7076d98 100644
--- a/src/components/grids/deckBuilderGrids/SelectDeckList.jsx
+++ b/src/components/grids/deckBuilderGrids/SelectDeckList.jsx
@@ -1,38 +1,35 @@
-import React, { useContext } from 'react';
-import { Grid, Button, Typography } from '@mui/material';
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-import { useDeckStore } from '../../../context/DeckContext/DeckContext';
+import React from 'react';
+import { Grid, Chip, Typography } from '@mui/material';
 import DeckBuilderIcon from '../../reusable/icons/DeckBuilderIcon';
+import { useDeckStore } from '../../../context/DeckContext/DeckContext';
 import { useTheme } from '@mui/styles';
 
 const SelectDeckList = ({ handleSelectDeck }) => {
-  const { selectedDeck, allDecks } = useDeckStore();
-
+  const { allDecks } = useDeckStore();
   const theme = useTheme();
+
   return (
     <Grid container spacing={2}>
       {allDecks?.map((deck) => (
         <Grid item xs={12} sm={6} md={4} lg={3} key={deck?._id}>
-          <Button
+          <Chip
+            label={
+              <Typography variant="caption">
+                {deck?.name || 'Unnamed'}
+              </Typography>
+            }
+            onClick={() => handleSelectDeck(deck?._id)}
+            icon={<DeckBuilderIcon style={{ fontSize: 20 }} />}
             variant="outlined"
             color="primary"
-            fullWidth
-            onClick={() => handleSelectDeck(deck?._id)}
-            startIcon={
-              <DeckBuilderIcon
-                style={{ fontSize: 20 }} // Adjust the size as needed
-                color="primary" // This sets the color of the icon
-              />
-            }
+            clickable
             sx={{
-              textTransform: 'none',
               justifyContent: 'flex-start',
               padding: 1,
               borderRadius: theme.shape.borderRadius,
+              width: '100%', // Make chip full width of the container
             }}
-          >
-            <Typography variant="caption">{deck?.name || 'Unnamed'}</Typography>
-          </Button>
+          />
         </Grid>
       ))}
     </Grid>
diff --git a/src/components/grids/CartItem.jsx b/src/components/grids/gridItems/CartItem.jsx
similarity index 84%
rename from src/components/grids/CartItem.jsx
rename to src/components/grids/gridItems/CartItem.jsx
index 36d4826..6f11258 100644
--- a/src/components/grids/CartItem.jsx
+++ b/src/components/grids/gridItems/CartItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import GenericCard from '../cards/GenericCard';
+import GenericCard from '../../cards/GenericCard';
 
 const CartItem = ({ card, page, index, context }) => (
   <Box sx={{ marginBottom: '1rem', flexGrow: '1' }}>
diff --git a/src/components/grids/DeckItem.jsx b/src/components/grids/gridItems/DeckItem.jsx
similarity index 91%
rename from src/components/grids/DeckItem.jsx
rename to src/components/grids/gridItems/DeckItem.jsx
index d9cabb2..6abec3d 100644
--- a/src/components/grids/DeckItem.jsx
+++ b/src/components/grids/gridItems/DeckItem.jsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { Box } from '@mui/material';
-import GenericCard from '../cards/GenericCard';
+import GenericCard from '../../cards/GenericCard';
 
 // eslint-disable-next-line react/display-name
 const DeckItem = memo(({ card, userDecks, context, page, index }) => {
diff --git a/src/components/grids/gridItems/ReusableSkeletonItem.jsx b/src/components/grids/gridItems/ReusableSkeletonItem.jsx
new file mode 100644
index 0000000..158318d
--- /dev/null
+++ b/src/components/grids/gridItems/ReusableSkeletonItem.jsx
@@ -0,0 +1,18 @@
+// ReusableSkeletonItem.jsx
+import React from 'react';
+import { Grid } from '@mui/material';
+import SkeletonStoreItem from './SkeletonStoreItem'; // Or your Skeleton Deck Item
+
+const ReusableSkeletonItem = ({ itemType, count, gridItemProps }) => (
+  <>
+    {Array(count)
+      .fill(0)
+      .map((_, index) => (
+        <Grid item {...gridItemProps} key={index}>
+          <SkeletonStoreItem /> {/* Use your specific skeleton item */}
+        </Grid>
+      ))}
+  </>
+);
+
+export default ReusableSkeletonItem;
diff --git a/src/components/grids/SkeletonDeckItem.jsx b/src/components/grids/gridItems/SkeletonDeckItem.jsx
similarity index 100%
rename from src/components/grids/SkeletonDeckItem.jsx
rename to src/components/grids/gridItems/SkeletonDeckItem.jsx
diff --git a/src/components/grids/SkeletonStoreItem.jsx b/src/components/grids/gridItems/SkeletonStoreItem.jsx
similarity index 100%
rename from src/components/grids/SkeletonStoreItem.jsx
rename to src/components/grids/gridItems/SkeletonStoreItem.jsx
diff --git a/src/components/grids/StoreItem.jsx b/src/components/grids/gridItems/StoreItem.jsx
similarity index 85%
rename from src/components/grids/StoreItem.jsx
rename to src/components/grids/gridItems/StoreItem.jsx
index 862668e..b155bc9 100644
--- a/src/components/grids/StoreItem.jsx
+++ b/src/components/grids/gridItems/StoreItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import GenericCard from '../cards/GenericCard';
+import GenericCard from '../../cards/GenericCard';
 
 const StoreItem = ({ card, page, index, context }) => (
   <Box sx={{ marginBottom: '1rem', flexGrow: '1' }}>
diff --git a/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx b/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
deleted file mode 100644
index 67c655a..0000000
--- a/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Box, Grid, useMediaQuery } from '@mui/material';
-import GenericCard from '../../cards/GenericCard';
-import { useMode } from '../../../context/hooks/colormode';
-import { styled } from '@mui/system';
-import SkeletonDeckItem from '../SkeletonDeckItem';
-import DeckItem from '../DeckItem';
-import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
-
-const DeckSearchCardGrid = ({ cards, userDecks }) => {
-  const { theme } = useMode();
-  const [isLoading, setIsLoading] = useState(true);
-  const { getStyledGridStyle, getStyledGridItemStyle } =
-    useResponsiveStyles(theme);
-  const StyledGrid = getStyledGridStyle(theme);
-  const StyledGridItem = getStyledGridItemStyle(theme);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), 1000);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const uniqueCards = useMemo(
-    () => Array.from(new Map(cards.map((card) => [card.id, card])).values()),
-    [cards]
-  );
-
-  if (isLoading) {
-    return (
-      <Grid container style={StyledGrid} spacing={2}>
-        {Array.from({ length: 9 }).map((_, index) => (
-          <Grid
-            item
-            style={StyledGridItem}
-            xs={6}
-            sm={6}
-            md={4}
-            lg={4}
-            key={index}
-          >
-            <SkeletonDeckItem />
-          </Grid>
-        ))}
-      </Grid>
-    );
-  }
-
-  return (
-    <Grid container style={StyledGrid} spacing={2}>
-      {uniqueCards.map((card) => (
-        <Grid
-          item
-          style={StyledGridItem}
-          xs={6}
-          sm={6}
-          md={4}
-          lg={4}
-          key={card.id}
-        >
-          <Box sx={{ flexGrow: 1, display: 'flex' }}>
-            <DeckItem
-              card={card}
-              userDecks={userDecks}
-              context={'Deck'}
-              page={'DeckBuilder'}
-            />
-            {/* <GenericCard
-              card={card}
-              context={'Deck'}
-              page={'Deck'}
-              userDecks={userDecks}
-            /> */}
-          </Box>
-        </Grid>
-      ))}
-    </Grid>
-  );
-};
-
-export default DeckSearchCardGrid;
diff --git a/src/components/grids/searchResultsGrids/DeckSearchCardGrid.jsx b/src/components/grids/searchResultsGrids/DeckSearchCardGrid.jsx
new file mode 100644
index 0000000..3861ac0
--- /dev/null
+++ b/src/components/grids/searchResultsGrids/DeckSearchCardGrid.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Grid, useMediaQuery } from '@mui/material';
+import GenericCard from '../../cards/GenericCard';
+import { useMode } from '../../../context/hooks/colormode';
+import { styled } from '@mui/system';
+import SkeletonDeckItem from '../gridItems/SkeletonDeckItem';
+import DeckItem from '../gridItems/DeckItem';
+import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
+import GridLayout from './GridLayout';
+import ReusableSkeletonItem from '../gridItems/ReusableSkeletonItem';
+
+const DeckSearchCardGrid = ({ cards, userDecks }) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const uniqueCards = useMemo(
+    () => Array.from(new Map(cards.map((card) => [card.id, card])).values()),
+    [cards]
+  );
+
+  return (
+    <GridLayout
+      containerStyles={{ marginTop: '1rem' }}
+      isLoading={isLoading}
+      skeletonCount={9}
+      gridItemProps={{ xs: 12, sm: 6, md: 4, lg: 4 }}
+    >
+      {/* Define the grid item size for 3 columns layout */}
+      {isLoading ? (
+        <ReusableSkeletonItem
+          count={9}
+          gridItemProps={{ xs: 12, sm: 6, md: 4, lg: 4 }}
+        />
+      ) : (
+        uniqueCards.map((card) => (
+          <Grid item xs={12} sm={6} md={4} lg={4} key={card.id}>
+            <Box sx={{ flexGrow: 1, display: 'flex' }}>
+              <DeckItem
+                card={card}
+                userDecks={userDecks}
+                context={'Deck'}
+                page={'DeckBuilder'}
+              />
+            </Box>
+          </Grid>
+        ))
+      )}
+    </GridLayout>
+  );
+};
+
+export default DeckSearchCardGrid;
diff --git a/src/components/grids/searchResultsGrids/GridLayout.jsx b/src/components/grids/searchResultsGrids/GridLayout.jsx
new file mode 100644
index 0000000..21144f5
--- /dev/null
+++ b/src/components/grids/searchResultsGrids/GridLayout.jsx
@@ -0,0 +1,36 @@
+// GridLayoutComponent.jsx
+import React from 'react';
+import { Grid, Container } from '@mui/material';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+const GridLayout = ({
+  children,
+  containerStyles,
+  isLoading,
+  skeletonCount,
+  gridItemProps,
+}) => (
+  <Container sx={containerStyles}>
+    <Grid container spacing={1}>
+      <TransitionGroup component={null}>
+        {/* Ensure children are properly formatted for transition */}
+        {React.Children.map(children, (child, index) => (
+          <CSSTransition key={index} timeout={500} classNames="card">
+            {React.cloneElement(child, gridItemProps)}
+          </CSSTransition>
+        ))}
+        {/* {isLoading
+          ? Array.from({ length: skeletonCount }).map((_, index) => (
+              <CSSTransition key={index} timeout={500} classNames="card">
+                <Grid item sx={{ ...gridItemProps }}>
+                  {React.cloneElement(children, { key: index })}
+                </Grid>
+              </CSSTransition>
+            ))
+          : children} */}
+      </TransitionGroup>
+    </Grid>
+  </Container>
+);
+
+export default GridLayout;
diff --git a/src/components/grids/storeSearchResultsGrid/ProductGrid.js b/src/components/grids/searchResultsGrids/ProductGrid.js
similarity index 58%
rename from src/components/grids/storeSearchResultsGrid/ProductGrid.js
rename to src/components/grids/searchResultsGrids/ProductGrid.js
index aa763b2..3e388af 100644
--- a/src/components/grids/storeSearchResultsGrid/ProductGrid.js
+++ b/src/components/grids/searchResultsGrids/ProductGrid.js
@@ -1,15 +1,17 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { Grid, Container } from '@mui/material';
-import StoreItem from '../StoreItem'; // Ensure StoreItem is wrapped with React.memo
 import CustomPagination from '../../reusable/CustomPagination';
 import { useCardStore, useMode } from '../../../context';
-import SkeletonStoreItem from '../SkeletonStoreItem'; // A new component for skeleton screens
+import SkeletonStoreItem from '../gridItems/SkeletonStoreItem'; // A new component for skeleton screens
 import useResponsiveStyles from '../../../context/hooks/useResponsiveStyles';
+import GridLayout from './GridLayout';
+import ReusableSkeletonItem from '../gridItems/ReusableSkeletonItem';
+import StoreItem from '../gridItems/StoreItem';
 
 const ProductGrid = ({ updateHeight }) => {
   const { theme } = useMode();
   const { getProductGridContainerStyle } = useResponsiveStyles(theme); // Use the hook
-  const containerStyles = getProductGridContainerStyle(); // Get the styles
+  const containerStyles = getProductGridContainerStyle(theme); // Get the styles
   const { searchData, setSlicedAndMergedSearchData, isCardDataValid } =
     useCardStore();
   const [page, setPage] = useState(1);
@@ -33,37 +35,27 @@ const ProductGrid = ({ updateHeight }) => {
   }, [currentStoreSearchData, updateHeight]);
 
   return (
-    <Container
-      ref={containerRef}
-      sx={containerStyles} // Apply the styles
-    >
-      <Grid container spacing={3}>
-        {isCardDataValid
-          ? currentStoreSearchData?.map((card, index) => (
-              <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
-                <StoreItem
-                  card={card}
-                  context="Cart"
-                  page="Store"
-                  index={index}
-                />
-              </Grid>
-            ))
-          : Array(itemsPerPage)
-              .fill(0)
-              .map((_, index) => (
-                <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
-                  <SkeletonStoreItem />
-                </Grid>
-              ))}
-      </Grid>
+    <GridLayout containerRef={containerRef} containerStyles={containerStyles}>
+      {/* Define the grid item size for 3 columns layout */}
+      {isCardDataValid ? (
+        currentStoreSearchData?.map((card, index) => (
+          <Grid item xs={12} sm={6} md={4} lg={4} key={index}>
+            <StoreItem card={card} context="Cart" page="Store" index={index} />
+          </Grid>
+        ))
+      ) : (
+        <ReusableSkeletonItem
+          count={itemsPerPage}
+          gridItemProps={{ xs: 12, sm: 6, md: 4, lg: 4 }}
+        />
+      )}
       <CustomPagination
         totalCount={searchData?.length}
         itemsPerPage={itemsPerPage}
         currentPage={page}
         handlePagination={handlePagination}
       />
-    </Container>
+    </GridLayout>
   );
 };
 
diff --git a/src/components/headings/collection/SelectCollectionHeader.jsx b/src/components/headings/collection/SelectCollectionHeader.jsx
new file mode 100644
index 0000000..3a7b52a
--- /dev/null
+++ b/src/components/headings/collection/SelectCollectionHeader.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Grid, Typography, Button } from '@mui/material';
+import { useMode } from '../../../context';
+
+const SelectCollectionHeader = ({ openNewDialog }) => {
+  const { theme } = useMode();
+  return (
+    <Grid container sx={{ padding: 1, alignItems: 'center' }}>
+      <Grid item xs={12} sm={6}>
+        <Typography
+          variant="h5"
+          sx={{ fontWeight: 'bold', color: theme.palette.backgroundA.lighter }}
+        >
+          Choose a Collection
+        </Typography>
+      </Grid>
+      <Grid
+        item
+        xs={12}
+        sm={6}
+        sx={{ display: 'flex', justifyContent: 'flex-end' }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            color: theme.palette.backgroundA.contrastTextC,
+            background: theme.palette.backgroundA.dark,
+            '&:hover': {
+              background: theme.palette.backgroundA.darkest,
+            },
+          }}
+          // color={theme.palette.backgroundA.default}
+          onClick={openNewDialog}
+        >
+          Add New Collection
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default SelectCollectionHeader;
diff --git a/src/components/headings/header/Header.js b/src/components/headings/header/Header.js
index 88ca29c..761bc15 100644
--- a/src/components/headings/header/Header.js
+++ b/src/components/headings/header/Header.js
@@ -6,46 +6,60 @@ import TopBar from '../navigation/TopBar';
 import SideBar from '../navigation/SideBar';
 import LoginDialog from '../../dialogs/LoginDialog';
 import { useMode } from '../../../context';
+import useSnackBar from '../../../context/hooks/useSnackBar';
+import useDialog from '../../../context/hooks/useDialog';
+import getMenuItemsData from './menuItemsData';
 
 const Header = () => {
   const { theme } = useMode();
   const { isOpen, toggleSidebar, setIsOpen } = useSidebarContext();
   const { isLoggedIn, logout } = useAuthContext();
-  const [isLoginDialogOpen, setLoginDialogOpen] = useState(false);
-  const isMobileView = useMediaQuery(theme.breakpoints.down('md'));
+  const handleSnackBar = useSnackBar()[1];
+  const { isLoginDialogOpen, openLoginDialog, closeLoginDialog } =
+    useDialog(handleSnackBar); // Assuming false represents the logged-in state
 
+  const isMobileView = useMediaQuery(theme.breakpoints.down('md'));
+  const menuItemsData = getMenuItemsData(isLoggedIn);
   useEffect(() => {
     if (isMobileView) setIsOpen(false);
   }, [isMobileView, setIsOpen]);
 
-  const toggleLoginDialog = () => setLoginDialogOpen((prevState) => !prevState);
-  const closeLoginDialog = () => setLoginDialogOpen(false);
-  const handleLogout = () => {
-    logout();
-  };
   return (
     <>
       <TopBar
-        handleDrawerState={toggleSidebar}
-        handleLoginDialogState={toggleLoginDialog}
+        // dialog management
+        isDialogOpen={isLoginDialogOpen}
+        openDialog={openLoginDialog}
+        closeDialog={closeLoginDialog}
+        // login management
+        isLoggedIn={isLoggedIn}
+        handleLogout={logout}
+        // drawer management
+        handleDrawer={toggleSidebar}
         isOpen={isOpen}
         isMobileView={isMobileView}
-        isLoggedIn={isLoggedIn}
-        handleLogoutt={handleLogout}
+        menuItemsData={menuItemsData}
       />
       <SideBar
-        handleDrawerState={toggleSidebar}
-        handleLoginDialogState={toggleLoginDialog}
+        // dialog management
+        isDialogOpen={isLoginDialogOpen}
+        openDialog={openLoginDialog}
+        closeDialog={closeLoginDialog}
+        // login management
+        isLoggedIn={isLoggedIn}
+        handleLogout={logout}
+        // drawer management
+        handleDrawer={toggleSidebar}
         isOpen={isOpen}
         isMobileView={isMobileView}
-        isLoggedIn={isLoggedIn}
-        handleLogout={handleLogout}
+        menuItemsData={menuItemsData}
       />
       <LoginDialog
-        open={isLoginDialogOpen}
-        onClose={closeLoginDialog}
-        onLogin={closeLoginDialog}
+      // open={isLoginDialogOpen}
+      // onClose={handleToggleLoginDialog('Close')}
+      // onLogin={handleToggleLoginDialog('Close')}
       />
+      {/* {snackbar} */}
     </>
   );
 };
diff --git a/src/components/headings/navigation/SideBar.jsx b/src/components/headings/navigation/SideBar.jsx
index 0ddde7a..4b8c289 100644
--- a/src/components/headings/navigation/SideBar.jsx
+++ b/src/components/headings/navigation/SideBar.jsx
@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
-  Drawer,
+  SwipeableDrawer,
   List,
   Divider,
   Hidden,
   ListItemIcon,
   ListItemText,
   ListItem,
+  ListItemButton,
+  Box,
 } from '@mui/material';
 import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
@@ -28,64 +30,83 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const SideBar = ({
-  handleDrawerState,
-  isOpen,
-  handleLoginDialogState,
+  // dialog management
+  isDialogOpen,
+  openDialog,
+  closeDialog,
+  // login management
+  isLoggedIn,
   handleLogout,
+  // drawer management
+  handleDrawer,
+  isOpen,
+  isMobileView,
+  menuItemsData,
 }) => {
   const classes = useStyles();
-  const [selected, setSelected] = useState('Dashboard');
-  const { isLoggedIn } = useAuthContext();
-  const menuItemsData = getMenuItemsData(isLoggedIn);
 
-  const handleItemClick = (name) => {
-    setSelected(name);
-    handleDrawerState();
-  };
+  const iOS =
+    typeof navigator !== 'undefined' &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent);
 
   return (
     <Hidden smDown implementation="css">
-      <Drawer
-        anchor="right"
+      <SwipeableDrawer
+        anchor="right" // Drawer opens from the right
         open={isOpen}
-        onClose={handleDrawerState}
+        onClose={handleDrawer}
+        onOpen={handleDrawer} // Handle opening the drawer
         classes={{ paper: classes.drawerPaper }}
+        disableBackdropTransition={!iOS}
+        disableDiscovery={iOS}
+        edge="right" // Optimize swiping from the right
       >
-        <List>
-          {menuItemsData.map((item) => (
-            <MenuItemComponent
-              key={item.name}
-              name={item.name}
-              item={item}
-              onClick={() => handleItemClick(item.name)}
-            />
-          ))}
-          <Divider />
-          {isLoggedIn ? (
-            <ListItem
-              button
-              className={classes.listItem}
-              onClick={handleLogout}
-            >
-              <ListItemIcon>
-                <LogoutIcon />
-              </ListItemIcon>
-              <ListItemText primary="Logout" />
-            </ListItem>
-          ) : (
-            <ListItem
-              button
-              className={classes.listItem}
-              onClick={handleLoginDialogState}
-            >
-              <ListItemIcon>
-                <LoginIcon />
-              </ListItemIcon>
-              <ListItemText primary="Login" />
-            </ListItem>
-          )}
-        </List>
-      </Drawer>
+        <Box sx={{ width: 250 }} role="presentation">
+          <List>
+            {menuItemsData.map((item) => (
+              <MenuItemComponent
+                key={item.name}
+                name={item.name}
+                item={item}
+                // toggles the drawer state
+                onClick={() => handleDrawer()}
+              />
+            ))}
+            <Divider />
+            {isLoggedIn ? (
+              <ListItem
+                className={classes.listItem}
+                onClick={() => {
+                  handleDrawer();
+                  handleLogout();
+                }}
+              >
+                <ListItemButton>
+                  <ListItemIcon>
+                    <LogoutIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Logout" />
+                </ListItemButton>
+              </ListItem>
+            ) : (
+              <ListItem
+                className={classes.listItem}
+                onClick={() => {
+                  handleDrawer();
+                  openDialog();
+                }}
+              >
+                <ListItemButton>
+                  <ListItemIcon>
+                    <LoginIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Login" />
+                </ListItemButton>
+              </ListItem>
+            )}
+          </List>
+        </Box>
+      </SwipeableDrawer>
     </Hidden>
   );
 };
diff --git a/src/components/headings/navigation/TopBar.jsx b/src/components/headings/navigation/TopBar.jsx
index 1ac5bac..6ae296a 100644
--- a/src/components/headings/navigation/TopBar.jsx
+++ b/src/components/headings/navigation/TopBar.jsx
@@ -4,25 +4,27 @@ import MenuIcon from '@mui/icons-material/Menu';
 import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
 import { useMode } from '../../../context/hooks/colormode';
-import getMenuItemsData from '../header/menuItemsData';
 import MenuItemComponent from '../header/MenuItemComponent';
 import { StyledToolbar } from './styled';
 
 const TopBar = ({
   handleDrawerState,
-  handleLoginDialogState,
+  toggleDialog,
   isMobileView,
   isLoggedIn,
   handleLogout,
+  menuItemsData,
 }) => {
   const { theme } = useMode();
-  const menuItemsData = getMenuItemsData(isLoggedIn);
-
   const handleUserIconClick = () => {
     if (isLoggedIn) {
-      handleLogout();
+      // handleLogout();
+      console.log('Clicked User Icon', isLoggedIn);
     } else {
-      handleLoginDialogState();
+      console.log('Clicked User Icon', isLoggedIn);
+      // toggles the drawer state and login dialog
+      handleDrawerState();
+      toggleDialog();
     }
   };
 
@@ -41,7 +43,7 @@ const TopBar = ({
               edge="start"
               color="inherit"
               aria-label="menu"
-              onClick={handleDrawerState}
+              onClick={() => handleDrawerState()}
             >
               <MenuIcon />
             </IconButton>
@@ -54,7 +56,7 @@ const TopBar = ({
             <MenuItemComponent
               key={item.name}
               item={item}
-              onClick={handleDrawerState}
+              onClick={() => handleDrawerState()}
             />
           ))
         )}
diff --git a/src/components/other/InputComponents/CollectionStatisticsSelector.jsx b/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
index af4d262..a49b8a5 100644
--- a/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
+++ b/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
@@ -4,31 +4,45 @@ import { useCollectionStore } from '../../../context/CollectionContext/Collectio
 import { useStatisticsStore } from '../../../context/StatisticsContext/StatisticsContext';
 import StatCard from '../dataDisplay/StatCard';
 const CollectionStatisticsSelector = () => {
-  const [selectedStat, setSelectedStat] = useState('');
   const { selectedCollection } = useCollectionStore();
-  const { statsByCollectionId, stats } = useStatisticsStore();
+  const { statsByCollectionId, stats, selectedStat, setSelectedStat } =
+    useStatisticsStore();
 
   const handleChange = (event) => setSelectedStat(event.target.value);
 
   const specificCollectionStats =
     statsByCollectionId[selectedCollection?._id] || {};
-
+  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
+    },
+  };
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 2,
-        width: '100%',
-        height: '100%',
-      }}
-    >
+    <Box style={styles.container}>
       <Select
         value={selectedStat}
         onChange={handleChange}
         displayEmpty
-        sx={{ width: '100%', marginBottom: 2 }}
+        sx={{
+          width: '100%',
+          marginBottom: 2,
+          color: '#fff',
+          border: '1px solid #fff',
+        }}
       >
         <MenuItem value="" disabled>
           Select Statistic
diff --git a/src/components/other/InputComponents/DeckEditPanel.js b/src/components/other/InputComponents/DeckEditPanel.js
index 47eb375..8da52b3 100644
--- a/src/components/other/InputComponents/DeckEditPanel.js
+++ b/src/components/other/InputComponents/DeckEditPanel.js
@@ -1,141 +1,131 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
-  Button,
-  TextField,
   Paper,
   Typography,
+  Button,
+  TextField,
   Chip,
   Stack,
+  FormControl,
   InputLabel,
   Select,
   MenuItem,
-  FormControl,
+  Box,
+  FormControlLabel,
+  Switch,
 } from '@mui/material';
-import { useMode } from '../../../context/hooks/colormode';
-import DeleteIcon from '@material-ui/icons/Delete';
-
-const DeckEditPanel = ({
-  selectedDeck,
-  onSave,
-  onDelete,
-  isEditing,
-  userId,
-  deckId,
-}) => {
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useDeckStore, useMode } from '../../../context';
+import useDeckStyles from '../../../context/hooks/useDeckStyles';
+
+const DeckEditPanel = ({ selectedDeck, handleToggleEdit, isEditing }) => {
   const { theme } = useMode();
-  const [name, setName] = useState(selectedDeck?.name || '');
-  const [description, setDescription] = useState(
-    selectedDeck?.description || ''
-  );
-  const [tags, setTags] = useState(selectedDeck?.tags || []);
-  const [color, setColor] = useState(selectedDeck?.color || '');
+  const { updateDeckDetails, deleteUserDeck } = useDeckStore();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [tags, setTags] = useState([]);
+  const [color, setColor] = useState('');
+  const [newTag, setNewTag] = useState('');
+  const { switchControlStyles } = useDeckStyles();
+
+  useEffect(() => {
+    if (selectedDeck) {
+      setName(selectedDeck.name || '');
+      setDescription(selectedDeck.description || '');
+      setTags(selectedDeck.tags || []);
+      setColor(selectedDeck.color || '');
+    }
+  }, [selectedDeck]);
 
   const handleSave = () => {
-    onSave({
-      ...selectedDeck,
-      userId: userId,
-      deckId: deckId,
-      updatedInfo: {
-        name: name || 'Unnamed',
-        description: description || '',
-        tags: tags || [],
-        color: color || 'red',
-      },
-    });
+    const updatedInfo = { name, description, tags, color };
+    updateDeckDetails(selectedDeck?._id, updatedInfo);
   };
 
-  const handleDeleteDeck = () => {
-    // Placeholder for delete logic
-    onDelete(deckId);
+  const handleDelete = () => {
+    deleteUserDeck(selectedDeck._id);
   };
 
-  const handleDeleteTag = (tagToDelete) => {
-    setTags((tags) => tags.filter((tag) => tag !== tagToDelete));
+  const handleTagDelete = (tagToDelete) => {
+    setTags(tags.filter((tag) => tag !== tagToDelete));
   };
 
-  const handleAddTag = (event) => {
-    if (event.key === 'Enter' && event.target.value !== '') {
-      setTags([...tags, event.target.value]);
-      event.target.value = '';
+  const handleTagSubmit = (event) => {
+    event.preventDefault();
+    if (newTag && !tags.includes(newTag)) {
+      setTags([...tags, newTag]);
+      setNewTag('');
     }
   };
 
-  useEffect(() => {
-    // Update form state when selectedDeck changes
-    setName(selectedDeck?.name || '');
-    setDescription(selectedDeck?.description || '');
-    setTags(selectedDeck?.tags || []);
-    setColor(selectedDeck?.color || '');
-  }, [selectedDeck]);
-
   return (
     <Paper
       elevation={3}
       sx={{
-        padding: theme.spacing(4),
-        margin: 'auto',
-        maxWidth: 600,
-        borderRadius: theme.shape.borderRadius,
-        boxShadow: theme.shadows[3],
-        backgroundColor: theme.palette.background.paper,
-        color: theme.palette.text.secondary,
+        padding: 3,
+        margin: 2,
+        // backgroundColor: theme.palette.background.paper,
       }}
     >
-      <Typography
-        variant="h6"
+      <Box
         sx={{
-          marginBottom: theme.spacing(3),
-          fontWeight: theme.typography.fontWeightBold,
-          color: theme.palette.primary.main,
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+          alignItems: 'center',
         }}
       >
-        {isEditing ? 'Edit Deck' : 'Create New Deck'}
-      </Typography>
-      {/* Deck Name Input */}
+        <Typography
+          variant="h6"
+          sx={{ marginBottom: 2, color: theme.palette.text.primary }}
+        >
+          Deck Editor
+        </Typography>
+        <FormControlLabel
+          control={<Switch checked={isEditing} onChange={handleToggleEdit} />}
+          label={isEditing ? 'Edit Deck' : 'Create New Deck'}
+          sx={switchControlStyles}
+        />
+      </Box>
       <TextField
-        label="Deck Name"
+        label="Name"
         value={name}
-        variant="outlined"
-        fullWidth
         onChange={(e) => setName(e.target.value)}
-        sx={{ marginBottom: theme.spacing(2) }}
+        fullWidth
+        sx={{ marginBottom: 2 }}
       />
-      {/* Deck Description Input */}
       <TextField
-        label="Deck Description"
+        label="Description"
         value={description}
-        variant="outlined"
-        fullWidth
-        multiline
-        rows={4}
         onChange={(e) => setDescription(e.target.value)}
-        sx={{ marginBottom: theme.spacing(2) }}
-      />
-      {/* Tags Input */}
-      <TextField
-        label="Add Tag"
-        value={tags}
-        variant="outlined"
+        multiline
         fullWidth
-        onKeyPress={handleAddTag}
-        sx={{ marginBottom: theme.spacing(2) }}
+        sx={{ marginBottom: 2 }}
       />
-      <Stack
-        direction="row"
-        spacing={1}
-        sx={{ marginBottom: theme.spacing(2) }}
-      >
-        {tags.map((tag) => (
-          <Chip key={tag} label={tag} onDelete={() => handleDeleteTag(tag)} />
-        ))}
-      </Stack>
-      {/* Color Selector */}
-      <FormControl fullWidth sx={{ marginBottom: theme.spacing(3) }}>
-        <InputLabel id="deck-color-label">Deck Color</InputLabel>
+      <form onSubmit={handleTagSubmit}>
+        <Stack direction="row" spacing={1} sx={{ marginBottom: 2 }}>
+          {tags.map((tag, index) => (
+            <Chip
+              key={index}
+              label={tag}
+              onDelete={() => handleTagDelete(tag)}
+            />
+          ))}
+          <TextField
+            label="New Tag"
+            value={newTag}
+            onChange={(e) => setNewTag(e.target.value)}
+            size="small"
+            sx={{ flex: 1 }}
+          />
+        </Stack>
+      </form>
+      <FormControl fullWidth sx={{ marginBottom: 2 }}>
+        <InputLabel id="deck-color-selector-label">Color</InputLabel>
         <Select
-          labelId="deck-color-label"
+          labelId="deck-color-selector-label"
           value={color}
-          label="Deck Color"
+          label="Color"
           onChange={(e) => setColor(e.target.value)}
         >
           <MenuItem value="red">Red</MenuItem>
@@ -144,41 +134,225 @@ const DeckEditPanel = ({
           <MenuItem value="yellow">Yellow</MenuItem>
         </Select>
       </FormControl>
-      {/* Save Button */}
-      <Button
-        variant="contained"
-        onClick={handleSave}
+      <Box
         sx={{
-          textTransform: 'none',
-          backgroundColor: theme.palette.success.main,
-          color: theme.palette.success.contrastText,
-          '&:hover': {
-            backgroundColor: theme.palette.success.dark,
-          },
+          display: 'flex',
+          justifyContent: 'space-between',
+          gap: 1,
+          flexWrap: 'wrap',
         }}
       >
-        Save Changes
-      </Button>
-      {/* Delete Deck Button */}
-      {isEditing && (
         <Button
           variant="contained"
-          startIcon={<DeleteIcon />}
-          onClick={handleDeleteDeck}
+          onClick={handleSave}
           sx={{
-            textTransform: 'none',
-            backgroundColor: theme.palette.error.main,
-            color: theme.palette.error.contrastText,
-            '&:hover': {
-              backgroundColor: theme.palette.error.dark,
-            },
+            flexGrow: 1,
+            margin: '4px',
+            backgroundColor: theme.palette.primary.main,
           }}
+        >
+          Save Changes
+        </Button>
+        <Button
+          variant="contained"
+          color="error"
+          startIcon={<DeleteIcon />}
+          onClick={handleDelete}
+          sx={{ flexGrow: 1, margin: '4px' }}
         >
           Delete Deck
         </Button>
-      )}
+      </Box>
     </Paper>
   );
 };
-
 export default DeckEditPanel;
+
+// import React, { useEffect, useState } from 'react';
+// import {
+//   Button,
+//   TextField,
+//   Paper,
+//   Typography,
+//   Chip,
+//   Stack,
+//   InputLabel,
+//   Select,
+//   MenuItem,
+//   FormControl,
+// } from '@mui/material';
+// import { useMode } from '../../../context/hooks/colormode';
+// import DeleteIcon from '@material-ui/icons/Delete';
+// import { FormWrapper } from '../../forms/styled';
+
+// const DeckEditPanel = ({
+//   selectedDeck,
+//   onSave,
+//   onDelete,
+//   isEditing,
+//   userId,
+//   deckId,
+// }) => {
+//   const { theme } = useMode();
+//   const [name, setName] = useState(selectedDeck?.name || '');
+//   const [description, setDescription] = useState(
+//     selectedDeck?.description || ''
+//   );
+//   const [tags, setTags] = useState(selectedDeck?.tags || []);
+//   const [color, setColor] = useState(selectedDeck?.color || '');
+
+//   const handleSave = () => {
+//     onSave({
+//       ...selectedDeck,
+//       userId: userId,
+//       deckId: deckId,
+//       updatedInfo: {
+//         name: name || 'Unnamed',
+//         description: description || '',
+//         tags: tags || [],
+//         color: color || 'red',
+//       },
+//     });
+//   };
+
+//   const handleDeleteDeck = () => {
+//     // Placeholder for delete logic
+//     onDelete(deckId);
+//   };
+
+//   const handleDeleteTag = (tagToDelete) => {
+//     setTags((tags) => tags.filter((tag) => tag !== tagToDelete));
+//   };
+
+//   const handleAddTag = (event) => {
+//     if (event.key === 'Enter' && event.target.value !== '') {
+//       setTags([...tags, event.target.value]);
+//       event.target.value = '';
+//     }
+//   };
+
+//   useEffect(() => {
+//     // Update form state when selectedDeck changes
+//     setName(selectedDeck?.name || '');
+//     setDescription(selectedDeck?.description || '');
+//     setTags(selectedDeck?.tags || []);
+//     setColor(selectedDeck?.color || '');
+//   }, [selectedDeck]);
+
+//   return (
+//     <Paper
+//       elevation={3}
+//       sx={{
+//         padding: theme.spacing(4),
+//         margin: 'auto',
+//         maxWidth: 600,
+//         borderRadius: theme.shape.borderRadius,
+//         boxShadow: theme.shadows[3],
+//         backgroundColor: theme.palette.background.paper,
+//         color: theme.palette.text.secondary,
+//       }}
+//     >
+//       <Typography
+//         variant="h6"
+//         sx={{
+//           marginBottom: theme.spacing(3),
+//           fontWeight: theme.typography.fontWeightBold,
+//           color: theme.palette.primary.main,
+//         }}
+//       >
+//         {isEditing ? 'Edit Deck' : 'Create New Deck'}
+//       </Typography>
+//       <FormWrapper onSubmit={handleFormSubmit}>
+//         {/* Deck Name Input */}
+//         <TextField
+//           label="Deck Name"
+//           value={name}
+//           variant="outlined"
+//           fullWidth
+//           onChange={(e) => setName(e.target.value)}
+//           sx={{ marginBottom: theme.spacing(2) }}
+//         />
+//         {/* Deck Description Input */}
+//         <TextField
+//           label="Deck Description"
+//           value={description}
+//           variant="outlined"
+//           fullWidth
+//           multiline
+//           rows={4}
+//           onChange={(e) => setDescription(e.target.value)}
+//           sx={{ marginBottom: theme.spacing(2) }}
+//         />
+//         {/* Tags Input */}
+//         <TextField
+//           label="Add Tag"
+//           value={tags}
+//           variant="outlined"
+//           fullWidth
+//           onChange={(e) => setTags(e.target.value)}
+//           // onKeyPress={handleAddTag}
+//           sx={{ marginBottom: theme.spacing(2) }}
+//         />
+//         <Stack
+//           direction="row"
+//           spacing={1}
+//           sx={{ marginBottom: theme.spacing(2) }}
+//         >
+//           {tags.map((tag) => (
+//             <Chip key={tag} label={tag} onDelete={() => handleDeleteTag(tag)} />
+//           ))}
+//         </Stack>
+//         {/* Color Selector */}
+//         <FormControl fullWidth sx={{ marginBottom: theme.spacing(3) }}>
+//           <InputLabel id="deck-color-label">Deck Color</InputLabel>
+//           <Select
+//             labelId="deck-color-label"
+//             value={color}
+//             label="Deck Color"
+//             onChange={(e) => setColor(e.target.value)}
+//           >
+//             <MenuItem value="red">Red</MenuItem>
+//             <MenuItem value="blue">Blue</MenuItem>
+//             <MenuItem value="green">Green</MenuItem>
+//             <MenuItem value="yellow">Yellow</MenuItem>
+//           </Select>
+//         </FormControl>
+//         {/* Save Button */}
+//         <Button
+//           variant="contained"
+//           onClick={handleSave}
+//           sx={{
+//             textTransform: 'none',
+//             backgroundColor: theme.palette.success.main,
+//             color: theme.palette.success.contrastText,
+//             '&:hover': {
+//               backgroundColor: theme.palette.success.dark,
+//             },
+//           }}
+//         >
+//           Save Changes
+//         </Button>
+//         {/* Delete Deck Button */}
+//         {isEditing && (
+//           <Button
+//             variant="contained"
+//             startIcon={<DeleteIcon />}
+//             onClick={handleDeleteDeck}
+//             sx={{
+//               textTransform: 'none',
+//               backgroundColor: theme.palette.error.main,
+//               color: theme.palette.error.contrastText,
+//               '&:hover': {
+//                 backgroundColor: theme.palette.error.dark,
+//               },
+//             }}
+//           >
+//             Delete Deck
+//           </Button>
+//         )}
+//       </FormWrapper>
+//     </Paper>
+//   );
+// };
+
+// export default DeckEditPanel;
diff --git a/src/components/other/InputComponents/TimeRangeSelector.jsx b/src/components/other/InputComponents/TimeRangeSelector.jsx
index dedff6c..460f010 100644
--- a/src/components/other/InputComponents/TimeRangeSelector.jsx
+++ b/src/components/other/InputComponents/TimeRangeSelector.jsx
@@ -1,24 +1,49 @@
 import React from 'react';
-import { MenuItem, Select } from '@mui/material';
+import { Box, MenuItem, Select } from '@mui/material';
 import { useChartContext } from '../../../context/ChartContext/ChartContext';
 
 const TimeRangeSelector = () => {
   const { timeRange, timeRanges, handleChange } = useChartContext();
-
+  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
+    },
+  };
   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>
+    <Box style={styles.container}>
+      <Select
+        value={timeRange}
+        onChange={handleChange}
+        displayEmpty
+        variant="outlined"
+        sx={{
+          width: '100%',
+          marginBottom: 2,
+          color: '#fff',
+          border: '1px solid #fff',
+        }}
+      >
+        {timeRanges.map((range) => (
+          <MenuItem key={range.label} value={range.value}>
+            {range.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </Box>
   );
 };
 
diff --git a/src/components/other/InputComponents/UpdateStatusBox.jsx b/src/components/other/InputComponents/UpdateStatusBox.jsx
index bfbfff1..eb0df63 100644
--- a/src/components/other/InputComponents/UpdateStatusBox.jsx
+++ b/src/components/other/InputComponents/UpdateStatusBox.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useCombinedContext } from '../../../context/CombinedProvider';
 import { useCookies } from 'react-cookie';
 
@@ -8,7 +8,7 @@ const UpdateStatusBox = ({ socket }) => {
     useCombinedContext();
   const [currentTime, setCurrentTime] = useState(new Date());
   const [updateStatus, setUpdateStatus] = useState('Waiting for updates...');
-  const [cookies] = useCookies(['user']);
+  const [cookies] = useCookies(['authUser']);
 
   useEffect(() => {
     const timeInterval = setInterval(() => {
@@ -83,7 +83,7 @@ const UpdateStatusBox = ({ socket }) => {
   };
 
   return (
-    <div style={styles.container}>
+    <Box style={styles.container}>
       <Typography variant="subtitle1">
         Current Time: {currentTime.toLocaleTimeString()}
       </Typography>
@@ -93,7 +93,7 @@ const UpdateStatusBox = ({ socket }) => {
       <button style={styles.button} onClick={sendUpdateRequest}>
         Request Update
       </button>
-    </div>
+    </Box>
   );
 };
 
diff --git a/src/components/other/InputComponents/UpdateStatusBox2.jsx b/src/components/other/InputComponents/UpdateStatusBox2.jsx
index d42be6e..52caf1d 100644
--- a/src/components/other/InputComponents/UpdateStatusBox2.jsx
+++ b/src/components/other/InputComponents/UpdateStatusBox2.jsx
@@ -52,12 +52,12 @@ const UpdateStatusBox2 = ({ socket }) => {
   const [currentTime, setCurrentTime] = useState(new Date());
   const [updateStatus, setUpdateStatus] = useState('Waiting for cron...');
   // const [openSnackbar, setOpenSnackbar] = useState(false);
-  const [cookies] = useCookies(['user']);
+  const [cookies] = useCookies(['authUser']);
   const [snackbarData, setSnackbarData] = useState({
     open: false,
     message: '',
   });
-  const userId = cookies.user?.id;
+  const userId = cookies?.authUser?.userId;
   const openSnackbar = (message) => {
     setSnackbarData({ open: true, message });
   };
diff --git a/src/components/other/auth.jsx b/src/components/other/auth.jsx
index eb2aacf..84dc77e 100644
--- a/src/components/other/auth.jsx
+++ b/src/components/other/auth.jsx
@@ -3,10 +3,10 @@ import { Routes, Route } from 'react-router-dom';
 import { AuthContext } from '../../context/Auth/authContext';
 
 function Auth({ children }) {
-  const { isLoggedIn, user, can } = useContext(AuthContext);
+  const { isLoggedIn, authUser, can } = useContext(AuthContext);
 
   console.log('isLoggedIn', isLoggedIn);
-  console.log('user', user);
+  console.log('authUser', authUser);
 
   return isLoggedIn ? (
     <Routes>
diff --git a/src/components/other/dataDisplay/CollectionValueTracker.jsx b/src/components/other/dataDisplay/CollectionValueTracker.jsx
deleted file mode 100644
index 54a534f..0000000
--- a/src/components/other/dataDisplay/CollectionValueTracker.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-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/ImageDisplayFromHook.jsx b/src/components/other/dataDisplay/ImageDisplayFromHook.jsx
new file mode 100644
index 0000000..5a88148
--- /dev/null
+++ b/src/components/other/dataDisplay/ImageDisplayFromHook.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useCardImages } from '../../../context';
+
+const ImageDisplayFromHook = () => {
+  console.log('ImageDisplayFromHook');
+  // // const { downloadCardImages, error, imageSrc } = useCardImages();
+
+  // // React.useEffect(() => {
+  // //   downloadCardImages();
+  // // }, [downloadCardImages, imageUrl]);
+
+  // if (error) return <div>Error fetching image: {error.message}</div>;
+
+  // if (!imageSrc) return <div>Loading...</div>;
+
+  // return <img src={imageSrc} alt="Fetched" />;
+};
+
+export default ImageDisplayFromHook;
diff --git a/src/components/other/dataDisplay/StatisticsArea.jsx b/src/components/other/dataDisplay/StatisticsArea.jsx
deleted file mode 100644
index c55f24b..0000000
--- a/src/components/other/dataDisplay/StatisticsArea.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
index b172b31..bb3a162 100644
--- a/src/components/other/dataDisplay/TopCardsDisplay.jsx
+++ b/src/components/other/dataDisplay/TopCardsDisplay.jsx
@@ -14,7 +14,7 @@ import { useCollectionStore } from '../../../context/CollectionContext/Collectio
 import { useMode } from '../../../context/hooks/colormode';
 import { makeStyles, styled } from '@mui/styles';
 import { MainContainer } from '../../../pages/pageStyles/StyledComponents';
-import CarouselCard from '../../cards/CarouselCard';
+import CarouselCard from '../../../assets/cleanup/CarouselCard';
 import LoadingIndicator from '../../reusable/indicators/LoadingIndicator';
 const useStyles = makeStyles((theme) => ({
   stepper: {
@@ -129,7 +129,6 @@ const TopCardsDisplay = () => {
                 disabled={activeStep === maxSteps - 1}
                 sx={{
                   color: theme.palette.success.main,
-                  // backGround: theme.palette.success.main,
                 }}
               >
                 {theme.direction === 'rtl' ? (
diff --git a/src/components/other/dataDisplay/TopFiveExpensiveCards.jsx b/src/components/other/dataDisplay/TopFiveExpensiveCards.jsx
new file mode 100644
index 0000000..e97b862
--- /dev/null
+++ b/src/components/other/dataDisplay/TopFiveExpensiveCards.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Box, Grid, Paper, Typography, useTheme } from '@mui/material';
+import { styled } from '@mui/system';
+import { useMode } from '../../../context';
+
+// Define styled components
+const StatisticPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+  color: theme.palette.text.secondary,
+  background: theme.palette.background.paper,
+  boxShadow: theme.shadows[2],
+  borderRadius: theme.shape.borderRadius,
+  transition: 'box-shadow 0.3s',
+  '&:hover': {
+    boxShadow: theme.shadows[4],
+  },
+}));
+
+const StatisticHeader = styled(Typography)(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+  fontWeight: 'bold',
+  color: theme.palette.primary.main,
+}));
+
+const CardDetail = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  '&:first-of-type': {
+    marginRight: theme.spacing(1),
+  },
+}));
+
+const TopFiveExpensiveCards = ({ topFiveCards }) => {
+  const theme2 = useTheme();
+  const { theme } = useMode();
+
+  return (
+    <Grid item xs={12} sm={4}>
+      <StatisticPaper theme={theme}>
+        <StatisticHeader variant="h6" theme={theme}>
+          Top Five Most Expensive Cards
+        </StatisticHeader>
+        <Box
+          sx={{
+            width: '100%',
+            height: '150px',
+            overflow: 'auto',
+          }}
+        >
+          {topFiveCards.map((card, index) => (
+            <Box
+              key={card?.cardData?.id}
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                // justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: theme.spacing(0.5),
+                borderBottom: `1px solid ${theme.palette.divider}`,
+                '&:last-child': {
+                  borderBottom: 'none',
+                },
+              }}
+            >
+              <CardDetail variant="body2" theme={theme}>
+                {index + 1}.
+              </CardDetail>
+              <CardDetail variant="body2" theme={theme}>
+                {card?.cardData?.name} - ${card?.cardData?.price?.toFixed(2)}
+              </CardDetail>
+            </Box>
+          ))}
+        </Box>
+      </StatisticPaper>
+    </Grid>
+  );
+};
+
+export default TopFiveExpensiveCards;
diff --git a/src/components/other/dataDisplay/TotalValueOfCollectionsDisplay.jsx b/src/components/other/dataDisplay/TotalValueOfCollectionsDisplay.jsx
new file mode 100644
index 0000000..4f7f757
--- /dev/null
+++ b/src/components/other/dataDisplay/TotalValueOfCollectionsDisplay.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Grid, Paper, Typography, useTheme } from '@mui/material';
+import { styled } from '@mui/system';
+import { useMode } from '../../../context';
+
+// Styled components
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+  background: theme.palette.background.paper,
+  boxShadow: theme.shadows[2],
+  borderRadius: theme.shape.borderRadius,
+  transition: 'box-shadow 0.3s',
+  '&:hover': {
+    boxShadow: theme.shadows[4],
+  },
+}));
+
+const StatisticHeader = styled(Typography)(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.primary.main,
+  marginBottom: theme.spacing(1),
+}));
+
+const StatisticValue = styled(Typography)(({ theme }) => ({
+  fontWeight: 'bold',
+  fontSize: '2rem',
+  color: theme.palette.secondary.main,
+}));
+
+const TotalValueOfCollectionsDisplay = ({ totalValue }) => {
+  // const theme = useTheme();
+  const { theme } = useMode();
+
+  return (
+    <Grid item xs={12} sm={4}>
+      <StyledPaper theme={theme} sx={{ height: '100%', alignItems: 'center' }}>
+        <StatisticHeader variant="h6" theme={theme}>
+          Total Value of Collections
+        </StatisticHeader>
+        <Box sx={{ height: '100%' }}>
+          <StatisticValue variant="h2" theme={theme}>
+            ${totalValue.toFixed(2)}
+          </StatisticValue>
+        </Box>
+      </StyledPaper>
+    </Grid>
+  );
+};
+
+export default TotalValueOfCollectionsDisplay;
diff --git a/src/components/chart/LinearChart.js b/src/components/other/dataDisplay/chart/LinearChart.js
similarity index 54%
rename from src/components/chart/LinearChart.js
rename to src/components/other/dataDisplay/chart/LinearChart.js
index 1c35dc2..59e4f3c 100644
--- a/src/components/chart/LinearChart.js
+++ b/src/components/other/dataDisplay/chart/LinearChart.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { ResponsiveLine } from '@nivo/line';
 import {
   Typography,
@@ -7,9 +7,10 @@ import {
   useTheme,
   useMediaQuery,
 } from '@mui/material';
-import ChartErrorBoundary from '../reusable/ChartErrorBoundary';
-import { useMode } from '../../context/hooks/colormode';
+import ChartErrorBoundary from '../../../reusable/ChartErrorBoundary';
+import { useMode } from '../../../../context/hooks/colormode';
 import { makeStyles } from '@mui/styles';
+import { useChartContext, useStatisticsStore } from '../../../../context';
 const useStyles = makeStyles((theme) => ({
   axisLabel: {
     position: 'absolute',
@@ -33,8 +34,52 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const CustomTooltip = ({ point }) => {
+const CustomTooltipLayer = ({ points, xScale, yScale, specialPoints }) => {
+  console.log('CustomTooltipLayer points: ', specialPoints);
+  return (
+    <>
+      {points?.map((point, index) => {
+        // Render special marker for special points
+        if (
+          specialPoints?.some(
+            (sp) => sp.x === point.data.x && sp.y === point.data.y
+          )
+        ) {
+          const specialPoint = specialPoints?.find(
+            (sp) => sp.x === point.data.x && sp.y === point.data.y
+          );
+          return (
+            <g
+              key={index}
+              transform={`translate(${xScale(point?.data?.x)},${yScale(
+                point?.data?.y
+              )})`}
+            >
+              <circle r={10} fill="red" stroke="white" strokeWidth={2} />
+              <text
+                x={15}
+                y={5}
+                textAnchor="start"
+                alignmentBaseline="middle"
+                fill="#fff"
+              >
+                {specialPoint.label}
+              </text>
+            </g>
+          );
+        }
+        return null;
+      })}
+    </>
+  );
+};
+
+const CustomTooltip = ({ point, specialPoints }) => {
   const theme = useTheme();
+  const isSpecial = specialPoints?.some(
+    (sp) => sp.x === point.data.x && sp.y === point.data.y
+  );
+
   const { serieId, data: { label, xFormatted, yFormatted } = {} } = point;
   return (
     <Tooltip title={`Series: ${serieId}`}>
@@ -47,7 +92,7 @@ const CustomTooltip = ({ point }) => {
         border={1}
       >
         <Typography variant="subtitle1" color="textPrimary">
-          {`Card: ${label}`}
+          {`Card: ${label}` || `Collection: ${label}`}
         </Typography>
         <Typography variant="body2">
           {`Time: ${new Date(xFormatted).toLocaleString()}`}
@@ -55,6 +100,7 @@ const CustomTooltip = ({ point }) => {
         <Typography variant="h6" color="textSecondary">
           {`Value: $${parseFloat(yFormatted).toFixed(2)}`}
         </Typography>
+        {isSpecial && <Typography color="secondary">Special Point!</Typography>}
       </Box>
     </Tooltip>
   );
@@ -63,64 +109,42 @@ const CustomTooltip = ({ point }) => {
 export const useEventHandlers = () => {
   const [hoveredData, setHoveredData] = useState(null);
   const handleMouseMove = useCallback((point) => {
-    setHoveredData(point ? { x: point.data.x, y: point.data.y } : null);
+    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,
+  specialPoints,
 }) => {
   const { theme } = useMode();
   const classes = useStyles(theme);
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const { statsByCollectionId, markers } = useStatisticsStore();
+  const { tickValues, xFormat } = useChartContext();
 
   const [isZoomed, setIsZoomed] = useState(false);
   const { handleMouseMove, handleMouseLeave } = useEventHandlers();
-  if (
-    !Array.isArray(filteredChartData) ||
-    filteredChartData.some((d) => !d.x || !d.y)
-  ) {
-    return (
-      <Typography variant="body1" color="textSecondary">
-        No valid data available
-      </Typography>
-    );
-  }
-  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 hour';
-        break;
-      case '7 days':
-        format = '%b %d';
-        ticks = 'every day';
-        break;
-      case '1 month':
-        format = '%b %d';
-        ticks = 'every 3 days';
-        break;
-      default:
-        format = '%b %d';
-        ticks = 'every 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 currentTime = new Date().getTime();
   const dataWithinTimeRange = useMemo(() => {
-    return nivoReadyData.map((series) => ({
+    return nivoReadyData?.map((series) => ({
       ...series,
-      data: series?.data.filter((dataPoint) => {
+      data: series?.data?.filter((dataPoint) => {
         const dataPointTime = new Date(dataPoint?.x).getTime();
         const isWithinRange = dataPointTime >= currentTime - timeRange;
         return isWithinRange;
@@ -130,7 +154,8 @@ const LinearChart = ({
 
   const chartProps = useMemo(
     () => ({
-      margin: { top: 50, right: 110, bottom: 50, left: 60 },
+      margin: { top: 10, right: 20, bottom: 30, left: 40 },
+      // border: { color: theme.palette.divider, lineWidth: 3 },
       data: dataWithinTimeRange,
       animate: true,
       motionStiffness: 90,
@@ -145,7 +170,7 @@ const LinearChart = ({
       xFormat: 'time:%Y-%m-%d %H:%M:%S',
       axisBottom: {
         tickRotation: 0,
-        legendOffset: -24,
+        legendOffset: -12,
         legend: 'Time',
         tickPadding: 10,
         tickSize: 1,
@@ -174,16 +199,52 @@ const LinearChart = ({
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
       onClick: () => setIsZoomed(!isZoomed),
-      tooltip: CustomTooltip,
+      // tooltip: CustomTooltip,
+      markers,
+
+      layers: [
+        'grid',
+        'markers',
+        'areas',
+        'lines',
+        'slices',
+        'points',
+        'axes',
+        'legends',
+        ({ points, xScale, yScale }) => (
+          <CustomTooltipLayer
+            points={points}
+            xScale={xScale}
+            yScale={yScale}
+            specialPoints={markers}
+          />
+        ),
+      ],
+      tooltip: ({ point }) => {
+        return (
+          <CustomTooltip
+            point={point}
+            // Pass additional props as needed, e.g., to show high point marker
+            isHighPoint={point.data.isHighPoint}
+          />
+        );
+      },
     }),
     [theme, nivoReadyData, timeRange]
   );
 
+  useEffect(() => {
+    console.log('Chart data: ', nivoReadyData);
+  }, [nivoReadyData]);
+
   return (
     <ChartErrorBoundary>
       <Box
         className={classes.chartContainer}
-        style={{ height: isMobile ? '350px' : dimensions?.height ?? '500px' }}
+        style={{
+          height: isMobile ? '350px' : dimensions?.height ?? '500px',
+          flexGrow: 1,
+        }}
       >
         {/* <div style={{ width: '100%', height: dimensions?.height ?? '100%' }}> */}
         <ResponsiveLine {...chartProps} />
diff --git a/src/components/other/dataDisplay/chart/PieChartStats.jsx b/src/components/other/dataDisplay/chart/PieChartStats.jsx
new file mode 100644
index 0000000..4437ebf
--- /dev/null
+++ b/src/components/other/dataDisplay/chart/PieChartStats.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Grid, Paper, Typography, useTheme } from '@mui/material';
+import { styled } from '@mui/system';
+import { useMode } from '../../../../context';
+import { PieChart } from '@mui/x-charts';
+
+// Define styled components
+const StatisticPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+  color: theme.palette.text.secondary,
+  background: theme.palette.background.paper,
+  boxShadow: theme.shadows[2],
+  borderRadius: theme.shape.borderRadius,
+  transition: 'box-shadow 0.3s',
+  '&:hover': {
+    boxShadow: theme.shadows[4],
+  },
+}));
+
+const StatisticHeader = styled(Typography)(({ theme }) => ({
+  fontWeight: 'bold',
+  color: theme.palette.primary.main,
+  marginBottom: theme.spacing(1),
+}));
+
+const PieChartStats = ({ chartData }) => {
+  const { theme } = useMode();
+
+  return (
+    <Grid item xs={12} sm={4}>
+      <StatisticPaper theme={theme}>
+        <StatisticHeader variant="h6" theme={theme}>
+          Collection Statistics
+        </StatisticHeader>
+        <Box>
+          <PieChart
+            series={[{ data: chartData }]}
+            width={200}
+            height={150}
+            theme={theme}
+          />
+        </Box>
+      </StatisticPaper>
+    </Grid>
+  );
+};
+
+export default PieChartStats;
diff --git a/src/components/other/dataDisplay/commonStyles.jsx b/src/components/other/dataDisplay/commonStyles.jsx
new file mode 100644
index 0000000..1cacd17
--- /dev/null
+++ b/src/components/other/dataDisplay/commonStyles.jsx
@@ -0,0 +1,17 @@
+export const commonStatisticPaperStyle = {
+  padding: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  boxShadow: 3,
+};
+
+export const commonStatisticHeaderStyle = {
+  marginBottom: 1,
+  fontWeight: 'bold',
+  color: 'secondary.main',
+};
+
+// Use these styles in your components below
diff --git a/src/components/other/search/DeckSearch.js b/src/components/other/search/DeckSearch.js
new file mode 100644
index 0000000..de422a2
--- /dev/null
+++ b/src/components/other/search/DeckSearch.js
@@ -0,0 +1,140 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Box, Fade } from '@mui/material';
+import { useCardStore } from '../../../context/CardContext/CardStore';
+import DeckSearchCardGrid from '../../grids/searchResultsGrids/DeckSearchCardGrid';
+import CustomPagination from '../../reusable/CustomPagination';
+import SearchBar from './SearchBar';
+
+const DeckSearch = ({ userDecks }) => {
+  const [page, setPage] = useState(1);
+  const { searchData, setSlicedAndMergedSearchData } = useCardStore();
+
+  // Pagination Control
+  const itemsPerPage = 36;
+  const handlePagination = (event, value) => setPage(value);
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * itemsPerPage;
+    return searchData?.slice(start, start + itemsPerPage);
+  }, [searchData, page]);
+
+  useEffect(() => {
+    setSlicedAndMergedSearchData(paginatedData);
+  }, [paginatedData]);
+
+  return (
+    <Fade in={true} timeout={500}>
+      <Box
+        p={1}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <SearchBar /> {/* Already contains all needed functionality */}
+        <DeckSearchCardGrid cards={paginatedData} userDecks={userDecks} />
+        <CustomPagination
+          totalCount={searchData?.length}
+          itemsPerPage={itemsPerPage}
+          currentPage={page}
+          handlePagination={handlePagination}
+        />
+      </Box>
+    </Fade>
+  );
+};
+
+export default DeckSearch;
+
+// import React, { useEffect, useMemo, useRef, useState } from 'react';
+// import { Box, Fade } from '@mui/material';
+// import { useCardStore } from '../../../context/CardContext/CardStore';
+// import SearchForm from '../../forms/SearchForm';
+// import DeckSearchCardGrid from '../../grids/searchResultsGrids/DeckSearchCardGrid';
+// import CustomPagination from '../../reusable/CustomPagination';
+// import SearchBar from './SearchBar';
+
+// const DeckSearch = ({ userDecks }) => {
+//   const [searchTerm, setSearchTerm] = useState('');
+//   const [page, setPage] = useState(1);
+//   const {
+//     // deckSearchData,
+//     searchData,
+//     handleRequest,
+//     setSlicedAndMergedSearchData,
+//   } = useCardStore();
+
+//   const handleChange = (event) => setSearchTerm(event.target.value);
+//   const handleSubmit = () => {
+//     // event.preventDefault();
+//     handleRequest({ name: searchTerm });
+//   };
+//   const handlePagination = (event, value) => setPage(value);
+
+//   const itemsPerPage = 36;
+//   const start = (page - 1) * itemsPerPage;
+//   const end = start + itemsPerPage;
+//   // const currentDeckSearchData = deckSearchData?.slice(start, end);
+//   const currentStoreSearchData = useMemo(
+//     () => searchData?.slice(start, end),
+//     [searchData, page]
+//   );
+
+//   useEffect(() => {
+//     setSlicedAndMergedSearchData(currentStoreSearchData);
+//   }, [currentStoreSearchData]);
+
+//   return (
+//     <Fade in={true} timeout={500}>
+//       <Box
+//         p={1}
+//         sx={{
+//           display: 'flex',
+//           flexDirection: 'column',
+//           alignItems: 'center',
+//           justifyContent: 'center',
+//           width: '100%',
+//           height: '100%',
+//         }}
+//       >
+//         <Box
+//           sx={{
+//             display: 'flex',
+//             flexDirection: 'column',
+//             alignItems: 'flex-start',
+//             width: '100%',
+//             marginBottom: 2, // Add some margin below the search form
+//           }}
+//         >
+//           {/* <SearchForm
+//             searchTerm={searchTerm}
+//             handleChange={handleChange}
+//             handleSubmit={handleSubmit}
+//           /> */}
+//           <SearchBar
+//             searchTerm={searchTerm}
+//             handleChange={handleChange}
+//             handleSubmit={handleSubmit}
+//           />
+//         </Box>
+//         <DeckSearchCardGrid
+//           // cards={currentDeckSearchData}
+//           cards={currentStoreSearchData}
+//           userDecks={userDecks}
+//         />
+//         <CustomPagination
+//           // totalCount={deckSearchData.length}
+//           totalCount={searchData?.length}
+//           itemsPerPage={itemsPerPage}
+//           currentPage={page}
+//           handlePagination={handlePagination}
+//         />
+//       </Box>
+//     </Fade>
+//   );
+// };
+
+// export default DeckSearch;
diff --git a/src/components/other/search/SearchBar.js b/src/components/other/search/SearchBar.js
new file mode 100644
index 0000000..8cdcb47
--- /dev/null
+++ b/src/components/other/search/SearchBar.js
@@ -0,0 +1,159 @@
+// commonStyles.js (or use theme.js)
+export const commonPaperStyles = (theme) => ({
+  padding: 3,
+  borderRadius: 2,
+  background: theme.palette.success.dark,
+  boxShadow: 3,
+  margin: 'auto',
+  width: '100%',
+  maxWidth: 'md',
+  '&:hover': {
+    boxShadow: 6,
+  },
+});
+
+// SearchBar.jsx
+import React, { useState, useEffect } from 'react';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+import {
+  Container,
+  Paper,
+  Typography,
+  Box,
+  IconButton,
+  Menu,
+  MenuItem,
+} from '@mui/material';
+import {
+  useCardStore,
+  useDeckStore,
+  useFormContext,
+  useMode,
+} from '../../../context';
+import SearchForm from '../../forms/SearchForm';
+import SearchSettings from './SearchSettings';
+
+const SearchBar = ({ onSearchFocus, onSearchBlur }) => {
+  const { theme } = useMode();
+  const { handleRequest } = useCardStore();
+  const { forms, handleChange, handleSubmit } = useFormContext(); // Consume context
+  useEffect(
+    () => {
+      console.log('SearchBar forms', forms);
+      if (!forms?.searchForm?.searchTerm) return;
+      handleRequest(forms?.searchForm?.searchTerm);
+    },
+    [forms?.searchForm?.searchTerm],
+    handleSubmit
+  ); // Watch for changes in the form data
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <React.Fragment>
+      <Paper elevation={3} sx={commonPaperStyles(theme)}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            p: theme.spacing(2),
+          }}
+        >
+          <Typography
+            variant="h4"
+            align="left"
+            sx={{
+              fontWeight: 'bold',
+              color: theme.palette.background.main,
+              textTransform: 'uppercase',
+            }}
+          >
+            Search Cards
+          </Typography>
+          <IconButton aria-label="settings" onClick={handleClick} size="large">
+            <SettingsIcon />
+          </IconButton>
+          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+            <MenuItem onClick={handleClose}>Option 1</MenuItem>
+            <MenuItem onClick={handleClose}>Option 2</MenuItem>
+            {/* Add more menu items as needed */}
+          </Menu>
+        </Box>
+        <Container>
+          {/* eslint-disable-next-line max-len */}
+          <SearchForm
+            searchTerm={forms?.searchForm?.searchTerm}
+            handleChange={handleChange('searchForm', 'searchTerm')} // Pass handleChange for specific form field
+            handleSubmit={(e) => {
+              e.preventDefault();
+              handleSubmit('searchForm')(e); // Pass the event to the handleSubmit function
+            }}
+            handleKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleSubmit('searchForm')(e);
+              }
+            }}
+            onFocus={onSearchFocus}
+            onBlur={onSearchBlur}
+          />
+        </Container>
+      </Paper>
+    </React.Fragment>
+  );
+};
+
+export default SearchBar;
+
+// // // SearchForm.jsx
+// // import React from 'react';
+// // import { Button, TextField, Paper } from '@mui/material';
+
+// const SearchForm = ({
+//   searchTerm,
+//   handleChange,
+//   handleSubmit,
+//   handleKeyPress,
+// }) => {
+//   const { theme } = useMode();
+//   return (
+//     <Paper sx={{ padding: theme.spacing(2) }}>
+//       <form
+//         onSubmit={(e) => {
+//           e.preventDefault();
+//           handleSubmit();
+//         }}
+//       >
+//         <TextField
+//           value={searchTerm}
+//           onChange={handleChange}
+//           label="Search for cards"
+//           variant="outlined"
+//           fullWidth
+//           onKeyDown={handleKeyPress}
+//         />
+//         <Button
+//           fullWidth
+//           variant="contained"
+//           // color={theme.palette.backgroundA.default}
+//           // background={theme.palette.backgroundA.default}
+//           type="submit"
+//           sx={{ mt: 1, mb: 1, background: theme.palette.backgroundA.default }}
+//         >
+//           Search
+//         </Button>
+//       </form>
+//     </Paper>
+//   );
+// };
+
+// // export default SearchForm;
diff --git a/src/components/other/search/SearchFormB.jsx b/src/components/other/search/SearchFormB.jsx
new file mode 100644
index 0000000..7f0e0b5
--- /dev/null
+++ b/src/components/other/search/SearchFormB.jsx
@@ -0,0 +1,58 @@
+// SearchForm.jsx
+import React from 'react';
+import {
+  TextField,
+  MenuItem,
+  FormControl,
+  Select,
+  InputLabel,
+} from '@mui/material';
+import { styled } from '@mui/system';
+
+const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  minWidth: 120,
+}));
+
+const SearchFormB = ({
+  searchSettings,
+  handleSearch,
+  handleSearchBy,
+  handleSortBy,
+}) => {
+  return (
+    <>
+      <TextField
+        fullWidth
+        label="Search"
+        variant="outlined"
+        value={searchSettings.search}
+        onChange={handleSearch}
+        placeholder="Search"
+      />
+      <StyledFormControl fullWidth>
+        <InputLabel>Search by</InputLabel>
+        <Select
+          value={searchSettings.searchBy}
+          onChange={handleSearchBy}
+          label="Search by"
+        >
+          <MenuItem value="title">Title</MenuItem>
+          <MenuItem value="genres">Genre</MenuItem>
+        </Select>
+      </StyledFormControl>
+      <StyledFormControl fullWidth>
+        <InputLabel>Sort by</InputLabel>
+        <Select
+          value={searchSettings.sortBy}
+          onChange={handleSortBy}
+          label="Sort by"
+        >
+          <MenuItem value="release_date">Release date</MenuItem>
+          <MenuItem value="vote_average">Rating</MenuItem>
+        </Select>
+      </StyledFormControl>
+    </>
+  );
+};
+
+export default SearchFormB;
diff --git a/src/components/other/search/SearchSettings.jsx b/src/components/other/search/SearchSettings.jsx
new file mode 100644
index 0000000..a7fa97c
--- /dev/null
+++ b/src/components/other/search/SearchSettings.jsx
@@ -0,0 +1,86 @@
+// SearchSettings.jsx
+import React, { useState } from 'react';
+import { Paper, Box, Container, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import SearchFormB from './SearchFormB'; // Ensure path is correct
+import { useMode } from '../../../context';
+
+export const commonPaperStyles = (theme) => ({
+  padding: theme.spacing(3),
+  borderRadius: theme.shape.borderRadius,
+  background: theme.palette.success.dark,
+  boxShadow: theme.shadows[3],
+  margin: 'auto',
+  width: '100%',
+  maxWidth: 'md',
+  '&:hover': {
+    boxShadow: theme.shadows[6],
+  },
+});
+
+const SearchSettingsBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+}));
+
+const SearchSettings = () => {
+  const [searchSettings, setSearchSettings] = useState({
+    search: '',
+    searchBy: 'title',
+    sortBy: 'release_date',
+  });
+
+  const { theme } = useMode();
+
+  const handleSearch = (e) => {
+    setSearchSettings({
+      ...searchSettings,
+      search: e.target.value,
+    });
+  };
+
+  const handleSearchBy = (e) => {
+    setSearchSettings({
+      ...searchSettings,
+      searchBy: e.target.value,
+    });
+  };
+
+  const handleSortBy = (e) => {
+    setSearchSettings({
+      ...searchSettings,
+      sortBy: e.target.value,
+    });
+  };
+
+  return (
+    <Paper elevation={3} sx={commonPaperStyles(theme)}>
+      <Container>
+        {' '}
+        {/* <Typography
+          variant="h4"
+          align="center"
+          sx={{
+            mb: 3,
+            fontWeight: 'bold',
+            color: theme.palette.background.main,
+            textTransform: 'uppercase',
+          }}
+        >
+          Search Settings
+        </Typography> */}
+        <SearchSettingsBox theme={theme}>
+          <SearchFormB
+            searchSettings={searchSettings}
+            handleSearch={handleSearch}
+            handleSearchBy={handleSearchBy}
+            handleSortBy={handleSortBy}
+          />
+        </SearchSettingsBox>
+      </Container>
+    </Paper>
+  );
+};
+
+export default SearchSettings;
diff --git a/src/components/reusable/PrivateRoute.jsx b/src/components/reusable/PrivateRoute.jsx
index 20cebd4..f7856e1 100644
--- a/src/components/reusable/PrivateRoute.jsx
+++ b/src/components/reusable/PrivateRoute.jsx
@@ -1,18 +1,15 @@
 import React, { useContext } from 'react';
 import { Navigate } from 'react-router-dom';
-import { useCookies } from 'react-cookie';
-import { useAuthContext } from '../../context/hooks/auth';
+import { useAuthContext } from '../../context';
 
 const PrivateRoute = ({ children }) => {
-  const authContext = useAuthContext();
+  const { isLoggedIn } = useAuthContext();
 
-  // Use react-cookie's useCookies hook to read the 'isLoggedIn' cookie
-  const [cookies] = useCookies(['isLoggedIn']);
+  if (!isLoggedIn) {
+    return <Navigate to="/login" />;
+  }
 
-  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" />;
+  return children;
 };
 
 export default PrivateRoute;
diff --git a/src/components/search/DeckSearch.js b/src/components/search/DeckSearch.js
deleted file mode 100644
index c10c10f..0000000
--- a/src/components/search/DeckSearch.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Fade } from '@mui/material';
-import { useCardStore } from '../../context/CardContext/CardStore';
-import SearchForm from '../forms/SearchForm';
-import DeckSearchCardGrid from '../grids/searchResultGrids/DeckSearchCardGrid';
-import CustomPagination from '../reusable/CustomPagination';
-
-const DeckSearch = ({ userDecks }) => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [page, setPage] = useState(1);
-  const {
-    // deckSearchData,
-    searchData,
-    handleRequest,
-    setSlicedAndMergedSearchData,
-  } = useCardStore();
-
-  const handleChange = (event) => setSearchTerm(event.target.value);
-  const handleSubmit = () => {
-    // event.preventDefault();
-    handleRequest({ name: searchTerm });
-  };
-  const handlePagination = (event, value) => setPage(value);
-
-  const itemsPerPage = 36;
-  const start = (page - 1) * itemsPerPage;
-  const end = start + itemsPerPage;
-  // const currentDeckSearchData = deckSearchData?.slice(start, end);
-  const currentStoreSearchData = useMemo(
-    () => searchData?.slice(start, end),
-    [searchData, page]
-  );
-
-  useEffect(() => {
-    setSlicedAndMergedSearchData(currentStoreSearchData);
-  }, [currentStoreSearchData]);
-
-  return (
-    <Fade in={true} timeout={500}>
-      <Box
-        p={1}
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '100%',
-          height: '100%',
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            width: '100%',
-            marginBottom: 2, // Add some margin below the search form
-          }}
-        >
-          <SearchForm
-            searchTerm={searchTerm}
-            handleChange={handleChange}
-            handleSubmit={handleSubmit}
-          />
-        </Box>
-        <DeckSearchCardGrid
-          // cards={currentDeckSearchData}
-          cards={currentStoreSearchData}
-          userDecks={userDecks}
-        />
-        <CustomPagination
-          // totalCount={deckSearchData.length}
-          totalCount={searchData?.length}
-          itemsPerPage={itemsPerPage}
-          currentPage={page}
-          handlePagination={handlePagination}
-        />
-      </Box>
-    </Fade>
-  );
-};
-
-export default DeckSearch;
diff --git a/src/components/search/SearchBar.js b/src/components/search/SearchBar.js
deleted file mode 100644
index 8d70dcb..0000000
--- a/src/components/search/SearchBar.js
+++ /dev/null
@@ -1,107 +0,0 @@
-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/InputComponents/CardNameInput';
-import CustomSelector from '../other/InputComponents/CustomSelector';
-import search from './search.json';
-import { useMode } from '../../context/hooks/colormode';
-import SearchForm from '../forms/SearchForm';
-
-const SearchBar = ({ onSearchFocus, onSearchBlur }) => {
-  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 handleSubmit = () => {
-    // e.preventDefault(); // Prevent default form submission
-    handleRequest(searchParams);
-  };
-  return (
-    <Paper
-      sx={{
-        padding: 3,
-        borderRadius: 2,
-        // backgroundColor: 'background.paper',
-        background: theme.palette.success.dark,
-        boxShadow: 3,
-        margin: 'auto',
-        width: '100%',
-        maxWidth: 'md',
-        '&:hover': {
-          boxShadow: 6,
-        },
-      }}
-    >
-      <Container
-        sx={{
-          background: theme.palette.success.dark,
-        }}
-      >
-        <Typography
-          variant="h4"
-          align="center"
-          sx={{
-            mb: 3,
-            fontWeight: 'bold',
-            color: theme.palette.background.main,
-            textTransform: 'uppercase',
-          }}
-        >
-          Search Cards
-        </Typography>
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            {/* <CardNameInput
-              value={searchParams?.name}
-              handleChange={(event) => handleChange('name', event.target.value)}
-            /> */}
-            <SearchForm
-              searchTerm={searchParams.name}
-              handleChange={(e) => handleChange('name', e.target.value)}
-              handleSubmit={handleSubmit}
-              onFocus={onSearchFocus}
-              onBlur={onSearchBlur}
-            />
-          </Grid>
-
-          {filters?.map((filter) => (
-            <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)
-                }
-                setSearchParams={setSearchParams}
-                values={filter?.values}
-              />
-            </Grid>
-          ))}
-          {/* <Grid
-            item
-            xs={12}
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              mt: 2,
-            }}
-          >
-            <SearchButton handleSubmit={handleSubmit} />
-          </Grid> */}
-        </Grid>
-      </Container>
-    </Paper>
-  );
-};
-
-export default SearchBar;
diff --git a/src/containers/CardDetailsContainer.jsx b/src/containers/CardDetailsContainer.jsx
deleted file mode 100644
index 452ea69..0000000
--- a/src/containers/CardDetailsContainer.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// // 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();
-//   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>
-//       </Grid>
-//     </Grid>
-//   );
-// };
-
-// export default CardDetailsContainer;
diff --git a/src/containers/collectionPageContainers/CollectionPortfolioChartContainer.jsx b/src/containers/collectionPageContainers/CollectionPortfolioChartContainer.jsx
index 155a9f9..0f17ec7 100644
--- a/src/containers/collectionPageContainers/CollectionPortfolioChartContainer.jsx
+++ b/src/containers/collectionPageContainers/CollectionPortfolioChartContainer.jsx
@@ -1,6 +1,20 @@
-import React from 'react';
-import { Box, Grid, useTheme, useMediaQuery } from '@mui/material';
-import PortfolioChart from '../../components/chart/PortfolioChart';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Box,
+  Grid,
+  useTheme,
+  useMediaQuery,
+  Paper,
+  Container,
+} from '@mui/material';
+import PortfolioChart from '../../assets/cleanup/PortfolioChart';
 import TimeRangeSelector from '../../components/other/InputComponents/TimeRangeSelector';
 import UpdateStatusBox2 from '../../components/other/InputComponents/UpdateStatusBox2';
 import TopCardsDisplay from '../../components/other/dataDisplay/TopCardsDisplay';
@@ -11,16 +25,116 @@ import {
   useCombinedContext,
   useStatisticsStore,
   useMode,
+  ErrorBoundary,
+  usePageContext,
 } from '../../context';
+import { styled } from '@mui/styles';
+import { debounce } from 'lodash';
+import LoadingIndicator from '../../components/reusable/indicators/LoadingIndicator';
+import LinearChart from '../../components/other/dataDisplay/chart/LinearChart';
+
+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),
+  flexGrow: 1,
+}));
+
+const ResponsiveSquare = styled(Box)(({ theme }) => ({
+  width: '100%',
+  paddingTop: '100%',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[5],
+  display: 'flex',
+  flexGrow: 1,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
 
+function handleThresholdUpdate(lastUpdateTime, setLastUpdateTime) {
+  const currentTime = new Date().getTime();
+  if (!lastUpdateTime || currentTime - lastUpdateTime >= 600000) {
+    setLastUpdateTime(currentTime);
+    return currentTime;
+  }
+  return lastUpdateTime;
+}
 const CollectionPortfolioChartContainer = ({ selectedCards, removeCard }) => {
   const { theme } = useMode();
   const theme2 = useTheme();
   const isMobile = useMediaQuery(theme2.breakpoints.down('sm'));
-  const { timeRange } = useChartContext();
+  const [dataReady, setDataReady] = useState(false);
+
+  const { latestData, timeRange, groupAndAverageData, convertDataForNivo2 } =
+    useChartContext();
   const { allCollections } = useCollectionStore();
   const { socket } = useCombinedContext();
-  const { stats, statsByCollectionId } = useStatisticsStore();
+  const { stats, statsByCollectionId, markers } = useStatisticsStore();
+  const { selectedCollection, allXYValues } = useCollectionStore();
+  const lastUpdateTimeRef = useRef(null);
+
+  const chartRef = useRef(null);
+  const [chartDimensions, setChartDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const HEIGHT_TO_WIDTH_RATIO = 7 / 10;
+  const threshold = useMemo(
+    () => handleThresholdUpdate(lastUpdateTimeRef),
+    [lastUpdateTimeRef]
+  );
+  // Dynamically calculate and set chart dimensions
+  const calculateChartDimensions = useCallback(() => {
+    if (chartRef.current) {
+      const width = chartRef.current.offsetWidth;
+      const height = width * HEIGHT_TO_WIDTH_RATIO; // Maintain aspect ratio
+      setChartDimensions({ width, height });
+    }
+  }, []);
+
+  useEffect(() => {
+    calculateChartDimensions(); // Calculate on initial load
+    const handleResize = debounce(calculateChartDimensions, 100); // Debounce resize event
+    window.addEventListener('resize', handleResize);
+    return () => {
+      handleResize.cancel();
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [calculateChartDimensions]);
+
+  if (!allXYValues?.length) {
+    return <LoadingIndicator />; // Show loading indicator while data is being fetched
+  }
+
+  const rawData = groupAndAverageData(allXYValues, threshold, timeRange);
+  const nivoReadyData = convertDataForNivo2(rawData);
+
+  if (!nivoReadyData.length) {
+    return <ResponsiveSquare>No data available</ResponsiveSquare>;
+  }
+
+  // Effect: Set data ready state based on allXYValues
+  useEffect(() => {
+    if (Array.isArray(allXYValues) && allXYValues?.length > 0) {
+      setDataReady(true);
+    }
+  }, [allXYValues]);
+  useLayoutEffect(() => {
+    if (dataReady) {
+      calculateChartDimensions();
+    }
+  }, [dataReady]);
 
   return (
     <Box
@@ -37,10 +151,66 @@ const CollectionPortfolioChartContainer = ({ selectedCards, removeCard }) => {
       {/* Portfolio Chart Row */}
       <Grid container spacing={isMobile ? 1 : 2}>
         <Grid item xs={12}>
-          <PortfolioChart
-            selectedCards={selectedCards}
-            removeCard={removeCard}
-          />
+          <ErrorBoundary>
+            <Container
+              maxWidth="lg"
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: isMobile ? theme.spacing(1) : theme.spacing(2),
+                gap: theme.spacing(2),
+                background: '#333',
+                color: '#fff',
+                border: '1px solid #555',
+                borderRadius: 2,
+                justifyContent: 'center', // Centers vertically
+              }}
+            >
+              {/* Portfolio Chart */}
+              <Grid container spacing={isMobile ? 1 : 2}>
+                <Grid item xs={12}>
+                  <ChartPaper ref={chartRef}>
+                    <LinearChart
+                      nivoReadyData={nivoReadyData}
+                      dimensions={chartDimensions}
+                      timeRange={timeRange}
+                      specialPoints={markers}
+                      // specialPoints={[
+                      //   { highPoint: statsByCollectionId?.highPoint },
+                      //   { lowPoint: statsByCollectionId?.highPoint },
+                      //   { average: statsByCollectionId?.average },
+                      // ]}
+                    />
+                  </ChartPaper>
+                </Grid>
+              </Grid>
+              {/* <ErrorBoundary>
+              <Grid container spacing={2}>
+                <Grid
+                  item
+                  xs={12}
+                  sx={{ height: '100%', borderRadius: 2, width: '100%' }}
+                >
+                  <ChartPaper elevation={3} ref={chartContainerRef}>
+                    {allXYValues?.length > 0 && rawData2?.length > 0 ? (
+                      <LinearChart
+                        nivoReadyData={nivoReadyData2}
+                        // filteredChartData={filteredChartData2}
+                        latestData={latestData}
+                        timeRange={timeRange}
+                        dimensions={chartDimensions}
+                        timeRanges={timeRange}
+                      />
+                    ) : (
+                      <div>No data available</div>
+                    )}
+                  </ChartPaper>
+                </Grid>
+              </Grid>
+            </ErrorBoundary> */}
+            </Container>
+          </ErrorBoundary>
         </Grid>
       </Grid>
 
diff --git a/src/containers/collectionPageContainers/CollectionPortfolioListContainer.jsx b/src/containers/collectionPageContainers/CollectionPortfolioListContainer.jsx
index d556f78..cd63b7f 100644
--- a/src/containers/collectionPageContainers/CollectionPortfolioListContainer.jsx
+++ b/src/containers/collectionPageContainers/CollectionPortfolioListContainer.jsx
@@ -3,39 +3,17 @@ 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';
+import usePortfolioStyles from '../../context/hooks/usePortfolioStyles';
 
 const CollectionPortfolioListContainer = ({ selectedCards, removeCard }) => {
   const theme2 = useTheme();
   const { theme } = useMode();
+  const classes = usePortfolioStyles(theme);
 
   return (
-    <Box
-      sx={{
-        maxWidth: '100%',
-        background: theme.palette.background.dark,
-        borderRadius: theme.shape.borderRadius,
-        width: {
-          xs: '100%', // Full width on mobile screens
-          md: '100%', // Full width on mobile screens
-        },
-        padding: theme.spacing(1), // Reduced padding for mobile screens
-      }}
-    >
-      <Grid item xs={12} sx={{ maxHeight: '100vh', width: '100%' }}>
-        <Paper
-          elevation={3}
-          sx={{
-            background: theme.palette.background.dark,
-            borderRadius: theme.shape.borderRadius,
-            padding: theme.spacing(1), // Reduced padding for mobile screens
-            maxHeight: '100%',
-            height: 'auto',
-            width: '100%',
-            boxShadow: theme.shadows[3],
-          }}
-        >
-          <CardList selectedCards={selectedCards} removeCard={removeCard} />
-        </Paper>
+    <Box className={classes.cardListContainerBox}>
+      <Grid className={classes.cardListContainerGrid}>
+        <CardList selectedCards={selectedCards} removeCard={removeCard} />
       </Grid>
     </Box>
   );
diff --git a/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js b/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js
deleted file mode 100644
index 14ee2e4..0000000
--- a/src/containers/deckBuilderPageContainers/DeckBuilderContainer.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { Grid } from '@mui/material';
-import DeckDisplay from '../../layout/DeckDisplay';
-import DeckSearch from '../../components/search/DeckSearch';
-import { styled } from '@mui/styles';
-import { useMode } from '../../context/hooks/colormode';
-
-const SearchGrid = styled(Grid)(({ theme }) => ({
-  padding: theme.spacing(2),
-  [theme.breakpoints.down('md')]: {
-    width: '50%', // Half width on small and medium screens
-  },
-}));
-
-const DisplayGrid = styled(Grid)(({ theme }) => ({
-  padding: theme.spacing(2),
-  [theme.breakpoints.down('md')]: {
-    width: '50%', // Half width on small and medium screens
-  },
-}));
-
-const RootGrid = styled(Grid)(({ theme }) => ({
-  overflow: 'auto',
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap', // Ensure wrapping on smaller screens
-  backgroundColor: theme.palette.background.secondary,
-  padding: theme.spacing(3),
-  borderRadius: theme.shape.borderRadius,
-  boxShadow: theme.shadows[5],
-  width: '100%',
-}));
-
-const DeckBuilderContainer = () => {
-  const { theme } = useMode();
-
-  return (
-    <RootGrid container>
-      <SearchGrid item xs={12} md={6} lg={5}>
-        <DeckSearch />
-      </SearchGrid>
-      <DisplayGrid item xs={12} md={6} lg={7}>
-        <DeckDisplay />
-      </DisplayGrid>
-    </RootGrid>
-  );
-};
-
-export default DeckBuilderContainer;
diff --git a/src/context/AuthContext/authContext.js b/src/context/AuthContext/authContext.js
index a1cc68f..f1859ec 100644
--- a/src/context/AuthContext/authContext.js
+++ b/src/context/AuthContext/authContext.js
@@ -1,215 +1,504 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import React, {
   useState,
   useEffect,
-  useRef,
   useCallback,
+  useRef,
   useContext,
+  createContext,
+  useMemo,
 } from 'react';
 import axios from 'axios';
 import { useCookies } from 'react-cookie';
-import { debounce } from 'lodash';
-import {
-  AUTH_COOKIE,
-  LOGGED_IN_COOKIE,
-  USER_COOKIE,
-  processResponseData,
-} from './helpers';
-
-export const AuthContext = React.createContext();
+import { processResponseData } from './helpers';
+import { usePageContext } from '../PageContext/PageContext';
+
+// export const AuthContext = React.createContext();
+export const AuthContext = createContext({
+  isLoggedIn: false,
+  authUser: null,
+  token: null,
+  user: null,
+  responseData: null,
+  login: () => {},
+  signup: () => {},
+  logout: () => {},
+  resetLogoutTimer: () => {},
+  setUser: () => {},
+  setIsLoggedIn: () => {},
+  setAuthUser: () => {},
+});
 export default function AuthProvider({ children, serverUrl }) {
+  const { setLoading } = usePageContext();
   const [cookies, setCookie, removeCookie] = useCookies([
-    LOGGED_IN_COOKIE,
-    AUTH_COOKIE,
-    USER_COOKIE,
+    'basicData',
+    'securityData',
+    'user',
+    'isLoggedIn',
+    'userId',
+    'authUser',
+    'authToken',
+    'lastLogin',
+    'lastLogout',
   ]);
-  const [isLoading, setIsLoading] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  const [user, setUser] = useState({
-    username: '',
-    email: '',
-    id: '',
-    role: '',
-    cart: [],
-    decks: [],
-    collections: [],
+  const [basicData, setBasicData] = useState(cookies.basicData);
+  const [securityData, setSecurityData] = useState(cookies.securityData);
+  const [user, setUser] = useState(cookies.user);
+  const [authUser, setAuthUser] = useState(cookies.authUser);
+  const [token, setToken] = useState(cookies.authToken);
+  const [responseData, setResponseData] = useState(null);
+  const lastLogin = useRef(null);
+  const logoutTimerRef = useRef(null);
+  // function to set login times for tracking
+  const setLoginTimes = useCallback(() => {
+    lastLogin.current = new Date();
+    setCookie('lastLogin', lastLogin.current, { path: '/' });
+    setCookie('lastLogout', logoutTimerRef.current, { path: '/' });
+  }, [setCookie, logoutTimerRef]);
+  // value for tracking changes in login status
+  const [loginStatus, setLoginStatus] = useState({
+    isLoggedIn: isLoggedIn,
+    lastLogin: lastLogin.current,
+    lastLogout: logoutTimerRef.current,
+    authUser: authUser,
+    token: token,
+    user: user,
   });
-  const [updatedUser, setUpdatedUser] = useState({});
-  const [token, setToken] = useState(null);
-  const [error, setError] = useState(null);
-  // const logoutTimerRef = useRef(null);
-
   const REACT_APP_SERVER = serverUrl || process.env.REACT_APP_SERVER;
 
   const executeAuthAction = async (actionType, url, requestData) => {
-    setIsLoading(true);
+    setLoading('isPageLoading', true);
     try {
       const response = await axios.post(
         `${REACT_APP_SERVER}/api/users/${url}`,
         requestData
       );
-      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);
+      console.log('Response:', response);
+      const processedData = processResponseData(response, actionType);
+      if (response.status === 200 || response.status === 201) {
+        const {
+          token,
+          userData,
+          authData,
+          message,
+          data,
+          securityData,
+          basicData,
+        } = processedData;
+        // console.log('Processed Data: ', data);
+        console.log('Processed Data Message: ', message);
+        console.log('Processed User Data: ', userData);
+        console.log('Processed Auth Data', authData);
+        console.log('Processed Token: ', token);
+        console.log('Processed Security Data: ', securityData);
+        console.log('Processed Basic Data: ', basicData);
         setToken(token);
-        setUser(user || newUser);
+        setBasicData(basicData);
+        setSecurityData(securityData);
+        setUser(data);
+        setAuthUser(authData);
+        setResponseData(data);
+        setIsLoggedIn(true);
+        setLoginTimes();
+        setLoginStatus({
+          isLoggedIn: isLoggedIn,
+          lastLogin: lastLogin.current,
+          lastLogout: logoutTimerRef.current,
+          authUser: authUser,
+          token: token,
+          user: user,
+        });
+
+        setCookie('authToken', token, { path: '/' });
+        setCookie('basicData', basicData, { path: '/' });
+        setCookie('securityData', securityData, { path: '/' });
+        setCookie('user', userData, { path: '/' });
+        setCookie('authUser', authData, { path: '/' });
+        setCookie('isLoggedIn', true, { path: '/' });
+        setCookie('userId', authData?.id, { path: '/' });
+        setCookie('lastLogin', lastLogin.current, { path: '/' });
+        setCookie('lastLogout', logoutTimerRef.current, { path: '/' });
       }
-    } catch (err) {
-      setError(err.message);
+    } catch (error) {
+      console.error('Auth error:', error);
     } finally {
-      setIsLoading(false);
+      setLoading('isPageLoading', false);
     }
   };
+  // LOGIC FOR LOGOUT, TOKEN EXPIRATION, AND USER ACTIVITY
+  const logout = useCallback(() => {
+    removeCookie('authToken');
+    removeCookie('user');
+    removeCookie('authUser');
+    removeCookie('isLoggedIn');
+    removeCookie('userId');
+    removeCookie('lastLogin');
+    removeCookie('lastLogout');
 
-  axios.interceptors.request.use(
-    (config) => {
-      const token = cookies[AUTH_COOKIE];
-      if (token) {
-        config.headers.Authorization = `Bearer ${token}`;
-      }
-      return config;
-    },
-    (error) => Promise.reject(error)
-  );
-
-  // Login function
-  const login = async (username, password) => {
-    await executeAuthAction('Login', 'signin', { username, password });
-  };
-
-  // 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_COOKIE);
     setIsLoggedIn(false);
+    setLoginStatus({
+      isLoggedIn: isLoggedIn,
+      lastLogin: lastLogin.current,
+      lastLogout: logoutTimerRef.current,
+    });
+    setUser(null);
     setToken(null);
-    setUser({});
-  };
-
-  const logoutTimerRef = useRef(null);
-
-  // Function to start the logout timer
-  const startLogoutTimer = () => {
-    // Clear existing timer if any
     if (logoutTimerRef.current) clearTimeout(logoutTimerRef.current);
-
-    // Set a new timer for 30 minutes (1800000 milliseconds)
-    logoutTimerRef.current = setTimeout(() => {
-      logout(); // Call your logout function
-    }, 1800000);
-  };
-
-  const debouncedLogout = useCallback(
-    debounce(() => {
-      if (logoutTimerRef.current) {
-        clearTimeout(logoutTimerRef.current);
-      }
-      logoutTimerRef.current = setTimeout(logout, 1800000); // 30 minutes
-    }, 500),
-    [logout] // Dependency for useCallback
-  );
-
+  }, [removeCookie]);
   const resetLogoutTimer = useCallback(() => {
-    debouncedLogout();
-  }, [debouncedLogout]);
-
-  // Attach debounced event listeners for user activity
+    clearTimeout(logoutTimerRef.current);
+    logoutTimerRef.current = setTimeout(logout, 2700000); // 45 minutes
+  }, [logout]);
   useEffect(() => {
-    const events = ['mousemove', 'keypress', 'scroll', 'click'];
-    events.forEach((event) => window.addEventListener(event, resetLogoutTimer));
+    if (token) {
+      console.log('Token found, resetting logout timer...');
+      resetLogoutTimer();
+    }
+  }, [token, resetLogoutTimer]);
+  useEffect(() => {
+    const interceptorId = axios.interceptors.request.use(
+      (config) => {
+        if (token) config.headers.Authorization = `Bearer ${token}`;
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
 
-    return () => {
-      clearTimeout(logoutTimerRef.current);
-      events.forEach((event) =>
-        window.removeEventListener(event, resetLogoutTimer)
-      );
-    };
-  }, [resetLogoutTimer]);
+    return () => axios.interceptors.request.eject(interceptorId);
+  }, [token]);
 
-  // Attach event listeners for user activity
-  useEffect(() => {
-    startLogoutTimer();
-
-    window.addEventListener('mousemove', resetLogoutTimer);
-    window.addEventListener('keypress', resetLogoutTimer);
-    window.addEventListener('scroll', resetLogoutTimer);
-    window.addEventListener('click', resetLogoutTimer);
-
-    return () => {
-      clearTimeout(logoutTimerRef.current);
-      window.removeEventListener('mousemove', resetLogoutTimer);
-      window.removeEventListener('keypress', resetLogoutTimer);
-      window.removeEventListener('scroll', resetLogoutTimer);
-      window.removeEventListener('click', resetLogoutTimer);
-    };
-  }, []);
+  // LOGIC FOR LOGIN AND SIGNUP
+  const login = async (username, password) => {
+    await executeAuthAction('signin', 'signin', {
+      userSecurityData: { username, password },
+    });
+  };
+  const signup = async (securityData, basicData) => {
+    await executeAuthAction('signup', 'signup', {
+      userSecurityData: securityData,
+      userBasicData: basicData,
+    });
+  };
   useEffect(() => {
-    const storedToken = cookies[AUTH_COOKIE];
-    const storedUser = cookies[USER_COOKIE];
+    console.log('Auth Context: ');
+    const storedToken = cookies['authToken'];
+    // const storedUserId = cookies['userId'];
+    const storedUserBasicData = cookies['basicData'];
+    const storedUserSecurityData = cookies['securityData'];
+    const storedUser = cookies['user'];
+    const storedAuthUser = cookies['authUser'];
     if (storedToken && storedUser) {
       setToken(storedToken);
+      setBasicData(storedUserBasicData);
+      setSecurityData(storedUserSecurityData);
       setUser(storedUser);
+      setAuthUser(storedAuthUser);
       setIsLoggedIn(true);
-    } else {
-      setIsLoggedIn(false);
+      setLoginTimes();
+      setLoginStatus({
+        isLoggedIn: isLoggedIn,
+        lastLogin: lastLogin.current,
+        lastLogout: logoutTimerRef.current,
+        authUser: authUser,
+        token: token,
+        user: user,
+      });
+      resetLogoutTimer();
     }
-  }, [cookies]);
+  }, [
+    cookies['authToken'],
+    cookies['basicData'],
+    cookies['securityData'],
+    cookies['user'],
+    cookies['authUser'],
+    resetLogoutTimer,
+  ]);
+  const contextValue = useMemo(
+    () => ({
+      isLoggedIn,
+      authUser,
+      token,
+      user,
+      basicData,
+      securityData,
+      responseData,
+      loginStatus,
+
+      login,
+      signup,
+      logout,
+      resetLogoutTimer,
+      setUser,
+      setIsLoggedIn,
+      setAuthUser,
+    }),
+    [
+      loginStatus,
+      isLoggedIn,
+      authUser,
+      token,
+      user,
+      responseData,
+      login,
+      signup,
+      logout,
+      resetLogoutTimer,
+      setUser,
+      setIsLoggedIn,
+      setAuthUser,
+    ]
+  );
+  useEffect(() => {
+    console.log('AUTH CONTEXT:', {
+      isLoggedIn,
+      authUser,
+      token,
+      user,
+      responseData,
+      loginStatus,
+    });
+  }, [
+    // login,
+    // signup,
+    // logout,
+    // resetLogoutTimer,
+    setUser,
+    setIsLoggedIn,
+    setLoginStatus,
+    setAuthUser,
+  ]);
   return (
-    <AuthContext.Provider
-      value={{
-        isLoading,
-        isLoggedIn,
-        authUser: user,
-        error,
-        token,
-        updatedUser,
-        logoutTimerRef,
-        debouncedLogout,
-
-        resetLogoutTimer,
-        setIsLoading,
-        setIsLoggedIn,
-        setError,
-        setToken,
-        startLogoutTimer,
-        setUpdatedUser,
-        setUser,
-        login,
-        signup,
-        logout,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
+    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
   );
 }
 
-// // Custom hook to use the AuthContext
+export const useAuthContext = () => useContext(AuthContext);
+
+// import React, {
+//   useState,
+//   useEffect,
+//   useRef,
+//   useCallback,
+//   useContext,
+// } from 'react';
+// import axios from 'axios';
+// import { useCookies } from 'react-cookie';
+// import { debounce } from 'lodash';
+// import {
+//   AUTH_COOKIE,
+//   AUTH_USER_COOKIE,
+//   LOGGED_IN_COOKIE,
+//   USER_COOKIE,
+//   USER_ID_COOKIE,
+//   processResponseData,
+// } from './helpers';
+// import { usePageContext } from '../PageContext/PageContext';
+
+// export const AuthContext = React.createContext();
+
+// export default function AuthProvider({ children, serverUrl }) {
+//   const { setLoading, loadingStatus } = usePageContext();
+//   const [cookies, setCookie, removeCookie] = useCookies([
+//     LOGGED_IN_COOKIE,
+//     AUTH_COOKIE,
+//     USER_COOKIE,
+//     USER_ID_COOKIE,
+//     AUTH_USER_COOKIE,
+//   ]);
+//   // const [isLoading, setIsLoading] = useState(false);
+//   const [isLoggedIn, setIsLoggedIn] = useState(false);
+//   const [user, setUser] = useState({
+//     username: '',
+//     userBasicData: {
+//       firstName: '',
+//       lastName: '',
+//       userId: '',
+//     },
+//     userSecurityData: {
+//       username: '',
+//       password: '',
+//       email: '',
+//       phone: '',
+//       role_data: {
+//         name: '',
+//         capabilities: [],
+//       },
+//     },
+//     allDecks: [],
+//     allCollections: [],
+//     cart: {},
+//   });
+//   const [updatedUser, setUpdatedUser] = useState({});
+//   const [token, setToken] = useState(null);
+//   const [error, setError] = useState(null);
+//   const [minutes, setMinutes] = useState(0);
+//   const [logoutExpires, setLogoutExpires] = useState();
+//   const logoutTimerRef = useRef(null);
+//   const expires = new Date();
+//   const REACT_APP_SERVER = serverUrl || process.env.REACT_APP_SERVER;
+
+//   // Logout Function
+//   const logout = useCallback(() => {
+//     console.log('User is logged out');
+//     removeCookie(AUTH_COOKIE);
+//     removeCookie(USER_COOKIE);
+//     removeCookie(AUTH_USER_COOKIE);
+//     removeCookie(LOGGED_IN_COOKIE);
+//     removeCookie(USER_ID_COOKIE);
+//     setIsLoggedIn(false);
+//     setUser({});
+//     setToken(null);
+//     if (logoutTimerRef.current) clearTimeout(logoutTimerRef.current);
+//   }, [removeCookie]);
+
+//   // Reset Logout Timer
+//   const resetLogoutTimer = useCallback(() => {
+//     if (logoutTimerRef.current) clearTimeout(logoutTimerRef.current);
+//     logoutTimerRef.current = setTimeout(logout, 45 * 60 * 1000); // 45 minutes
+//   }, [logout]);
+
+//   // Execute Authentication Action
+//   const executeAuthAction = async (actionType, url, requestData) => {
+//     try {
+//       const response = await axios.post(
+//         `${serverUrl}/api/users/${url}`,
+//         requestData
+//       );
+//       const processedData = processResponseData(response, actionType);
+
+//       console.log('Processed Data: ', processedData);
+//       if (response.status === 200 || response.status === 201) {
+//         const { token, authData } = processedData; // Make sure this data is correctly retrieved
+//         setCookie(AUTH_COOKIE, token, { path: '/' });
+//         setCookie(USER_COOKIE, authData, { path: '/' });
+//         setCookie(AUTH_USER_COOKIE, authData.userSecurityData, { path: '/' });
+//         setCookie(LOGGED_IN_COOKIE, true, { path: '/' });
+//         setCookie(USER_ID_COOKIE, authData.userSecurityData.userId, {
+//           path: '/',
+//         });
+//         setIsLoggedIn(true);
+//         setUser(authData);
+//         setToken(token);
+//         resetLogoutTimer();
+//       }
+//       return processedData;
+//     } catch (error) {
+//       setError(error);
+//     }
+//   };
+//   // Set axios interceptors
+//   axios.interceptors.request.use(
+//     (config) => {
+//       const authToken = cookies[AUTH_COOKIE];
+//       if (authToken) config.headers.Authorization = `Bearer ${authToken}`;
+//       return config;
+//     },
+//     (error) => Promise.reject(error)
+//   );
+
+//   useEffect(() => {
+//     if (isLoggedIn) {
+//       resetLogoutTimer();
+//     }
+//   }, [isLoggedIn, resetLogoutTimer]);
+
+//   const signup = async (securityData, basicData) => {
+//     const data = await executeAuthAction('signup', 'signup', {
+//       userSecurityData: securityData,
+//       userBasicData: basicData,
+//     });
+//     // resetLogoutTimer();
+//     return data;
+//   };
+//   const login = async (username, password) => {
+//     const data = await executeAuthAction('signin', 'signin', {
+//       userSecurityData: { username: username, password: password },
+//     });
+//     console.log('User ' + username + ' is logged in');
+//     // resetLogoutTimer();
+//     return data;
+//   };
+
+//   useEffect(() => {
+//     const handleUserActivity = debounce(resetLogoutTimer, 1000);
+//     const events = ['mousemove', 'keypress', 'scroll', 'click'];
+
+//     events.forEach((event) =>
+//       window.addEventListener(event, handleUserActivity)
+//     );
+
+//     return () => {
+//       events.forEach((event) =>
+//         window.removeEventListener(event, handleUserActivity)
+//       );
+//       handleUserActivity.cancel();
+//       if (logoutTimerRef?.current) clearTimeout(logoutTimerRef?.current);
+//     };
+//   }, [resetLogoutTimer, logoutTimerRef]);
+//   // Check for stored tokens and user data in cookies
+//   // Initialize user and token from cookies
+//   useEffect(() => {
+//     const storedToken = cookies[AUTH_COOKIE];
+//     const storedUser = cookies[USER_COOKIE];
+//     if (storedToken && storedUser) {
+//       setToken(storedToken);
+//       setUser(storedUser);
+//       setIsLoggedIn(true);
+//       resetLogoutTimer();
+//     }
+//   }, [cookies, resetLogoutTimer]);
+
+//   return (
+//     <AuthContext.Provider
+//       value={{
+//         isLoggedIn,
+//         authUser: user,
+//         error,
+//         token,
+//         updatedUser,
+//         logoutTimerRef,
+//         // debouncedLogout,
+//         resetLogoutTimer,
+//         // startLogoutTimer,
+//         logout,
+//         setIsLoggedIn,
+//         setError,
+//         setToken,
+//         setUpdatedUser,
+//         setUser,
+//         login,
+//         signup,
+//       }}
+//     >
+//       {children}
+//     </AuthContext.Provider>
+//   );
+// }
+
 // export const useAuthContext = () => {
-//   const context = React.useContext(AuthContext);
-//   if (context === undefined) {
-//     throw new Error('useAuthContext must be used within a AuthProvider');
+//   const context = useContext(AuthContext);
+
+//   if (!context) {
+//     throw new Error('useAuth must be used within an AuthProvider');
 //   }
+
 //   return context;
 // };
-export const useAuthContext = () => {
-  const context = useContext(AuthContext);
+// // Attach event listeners for user activity
+// // useEffect(() => {
+// //   startLogoutTimer();
 
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
+// //   window.addEventListener('mousemove', resetLogoutTimer);
+// //   window.addEventListener('keypress', resetLogoutTimer);
+// //   window.addEventListener('scroll', resetLogoutTimer);
+// //   window.addEventListener('click', resetLogoutTimer);
 
-  return context;
-};
+// //   return () => {
+// //     clearTimeout(logoutTimerRef.current);
+// //     window.removeEventListener('mousemove', resetLogoutTimer);
+// //     window.removeEventListener('keypress', resetLogoutTimer);
+// //     window.removeEventListener('scroll', resetLogoutTimer);
+// //     window.removeEventListener('click', resetLogoutTimer);
+// //   };
+// // }, []);
diff --git a/src/context/AuthContext/helpers.jsx b/src/context/AuthContext/helpers.jsx
index 0865ad5..c83604f 100644
--- a/src/context/AuthContext/helpers.jsx
+++ b/src/context/AuthContext/helpers.jsx
@@ -1,9 +1,19 @@
 import jwt_decode from 'jwt-decode';
 
-export const LOGGED_IN_COOKIE = 'loggedIn';
+// login status
+export const LOGGED_IN_COOKIE = false;
+// token
 export const AUTH_COOKIE = 'authToken';
+// user login token + data
+export const AUTH_USER_COOKIE = 'authUser';
+// user basic data
+export const USER_BASIC_DATA_COOKIE = 'userBasicData';
+// user security data
+export const USER_SECURITY_DATA_COOKIE = 'userSecurityData';
+// all user data
 export const USER_COOKIE = 'user';
-
+// user id
+export const USER_ID_COOKIE = 'userId';
 // Validator function
 export const validateData = (data, eventName, functionName) => {
   if (!data || Object.keys(data).length === 0) {
@@ -14,21 +24,23 @@ export const validateData = (data, eventName, functionName) => {
 };
 
 // Process the server response based on the action type (Login/Signup)
-export 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 };
-  }
+export const processResponseData = (response, type) => {
+  // if (!validateData(data, `${type} Response`, `process${type}Data`))
+  //   return null;
+  const { message, data } = response.data;
+  console.log('message --------------->', message);
+  const token = data?.token;
+  console.log('token --------------->', token);
+  if (!token) return null;
+  const processedData = {
+    token: token,
+    authData: jwt_decode(token),
+    basicData: data?.userBasicData,
+    securityData: data?.userSecurityData,
+    data: data,
+    message: message,
+  };
+  console.log('processedData --------------->', processedData);
 
-  return null;
+  return processedData;
 };
diff --git a/src/context/CardContext/CardStore.js b/src/context/CardContext/CardStore.js
index 908912b..a18576b 100644
--- a/src/context/CardContext/CardStore.js
+++ b/src/context/CardContext/CardStore.js
@@ -8,7 +8,6 @@ import {
   useLayoutEffect,
 } from 'react';
 import { useCookies } from 'react-cookie';
-import { useCombinedContext } from '../CombinedContext/CombinedProvider';
 import { useCollectionStore } from '../CollectionContext/CollectionContext';
 import { useUserContext } from '../UserContext/UserContext';
 
@@ -17,10 +16,11 @@ const CardContext = createContext();
 
 export const CardProvider = ({ children }) => {
   const { user } = useUserContext();
-  const [cookies, setCookie] = useCookies(['cart'], ['deckData']);
+  const [cookies, setCookie] = useCookies(['deckData', 'searchHistory']);
   const initialStore = cookies.store || [];
   const [cardsArray, setCardsArray] = useState(initialStore);
   const { allCollections, setAllCollections } = useCollectionStore();
+  const [image, setImage] = useState(null);
   // const [searchParam, setSearchParam] = useState('');
   // const [searchParams, setSearchParams] = useState([]);
   // const [searchParams, setSearchParams] = useState({
@@ -42,18 +42,29 @@ export const CardProvider = ({ children }) => {
   const currentDeckData = cookies.deck || [];
   const [savedDeckData, setSavedDeckData] = useState(currentDeckData);
   const [deckSearchData, setDeckSearchData] = useState([]);
+  const [searchHistory, setSearchHistory] = useState([]);
 
   if (!currenCartArray || !savedDeckData) {
     return <div>Loading...</div>;
   }
 
-  const handleRequest = async (searchParamss) => {
+  const handleRequest = async (searchParams) => {
     try {
+      console.log('SEARCH PARAMS: ', searchParams);
       // setSearchParams([searchParams]);
+      // Adding a unique dummy parameter or timestamp to the request
+      const uniqueParam = { requestTimestamp: new Date().toISOString() };
+      const requestBody = {
+        ...searchParams,
+        ...uniqueParam, // Including the unique or dummy parameter
+      };
+      // update history array with new search params
+      setSearchHistory([...searchHistory, searchParams]);
+      setCookie('searchHistory', searchParams, { path: '/' });
 
       const response = await axios.post(
         `${process.env.REACT_APP_SERVER}/api/cards/ygopro`,
-        searchParamss
+        requestBody
       );
 
       if (response.data.data) {
@@ -94,6 +105,7 @@ export const CardProvider = ({ children }) => {
         setCookie('deckSearchData', uniqueCards, { path: '/' });
         setCookie('rawSearchData', uniqueCards, { path: '/' });
         // setCookie('organizedSearchData', limitedCardsToRender, { path: '/' });
+        return response?.data?.data;
       } else {
         setSearchData([]);
         setDeckSearchData([]);
@@ -104,52 +116,102 @@ export const CardProvider = ({ children }) => {
       console.error(err);
     }
   };
+  // Example client-side function to fetch an image
+  // Function to request the card's image
+  // const fetchCardImage = async (cardId) => {
+  //   try {
+  //     // Ensure there's a cardId to fetch
+  //     if (!cardId) {
+  //       console.error('No card ID provided for image fetch');
+  //       return;
+  //     }
 
-  const handlePatch = async () => {
-    let needsUpdate = false;
-
-    for (const collection of allCollections) {
-      for (const card of collection.cards) {
-        if (
-          !user.id ||
-          !card.card_images ||
-          !card.card_sets ||
-          !card.card_prices
-        ) {
-          needsUpdate = true;
-          const response = await axios.patch(
-            `${process.env.REACT_APP_SERVER}/api/cards/ygopro/${card.name}`,
-            { id: card.id, user: user.id },
-            { withCredentials: true }
-          );
-          if (response.data && response.data.data) {
-            const updatedCard = response.data.data;
-            const cardIndex = collection.cards.findIndex(
-              (c) => c.id === updatedCard.id
-            );
-            if (cardIndex !== -1) {
-              collection.cards[cardIndex] = updatedCard;
-            }
-          }
-        }
-      }
-    }
+  //     // Constructing the query URL
+  //     const url = `${process.env.REACT_APP_SERVER}/api/card/image/${cardId}`;
 
-    if (needsUpdate) {
-      setAllCollections([...allCollections]);
-    }
-  };
+  //     const response = await axios.get(url);
+  //     if (response.status === 200 && response.data) {
+  //       // Assuming response.data contains the URL of the image
+  //       const imageUrl = response.data.imageUrl;
+
+  //       // Update your state or perform actions with the image URL
+  //       setImage(imageUrl);
+  //     } else {
+  //       throw new Error('Failed to fetch image');
+  //     }
+  //   } catch (error) {
+  //     console.error('Error fetching the card image:', error);
+  //   }
+  // };
+  // Example client-side function to fetch a card's image through the server
+  // const fetchCardImage = async (cardData) => {
+  //   try {
+  //     const response = await axios.get(
+  //       `${process.env.REACT_APP_SERVER}/api/card/ygopro`,
+  //       {
+  //         params: { name: cardData.name },
+  //       }
+  //     );
+  //     if (response.data) {
+  //       // Assuming the server returns the image as a base64 string
+  //       const imageBase64 = response.data;
+  //       console.log('IMAGE BASE 64: ', imageBase64);
+  //       setImage(imageBase64);
+  //       return imageBase64;
+  //     }
+  //     throw new Error('Failed to fetch image.');
+  //   } catch (error) {
+  //     console.error('Error fetching the image:', error);
+  //     throw error;
+  //   }
+  // };
+
+  // const handlePatch = async () => {
+  //   let needsUpdate = false;
+
+  //   for (const collection of allCollections) {
+  //     for (const card of collection.cards) {
+  //       if (
+  //         !user.id ||
+  //         !card.card_images ||
+  //         !card.card_sets ||
+  //         !card.card_prices
+  //       ) {
+  //         needsUpdate = true;
+  //         console.log('PATCHING CARD: ', card);
+  //         const response = await axios.patch(
+  //           `${process.env.REACT_APP_SERVER}/api/cards/ygopro/${card.name}`,
+  //           { id: card.id, user: user.id },
+  //           { withCredentials: true }
+  //         );
+  //         if (response.data && response.data.data) {
+  //           const updatedCard = response.data.data;
+  //           const cardIndex = collection.cards.findIndex(
+  //             (c) => c.id === updatedCard.id
+  //           );
+  //           if (cardIndex !== -1) {
+  //             collection.cards[cardIndex] = updatedCard;
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   if (needsUpdate) {
+  //     setAllCollections([...allCollections]);
+  //   }
+  // };
 
   useLayoutEffect(() => {
     // Check if there's any collection that requires an update
     const hasMissingData = allCollections?.some((collection) =>
       collection.cards?.some(
-        (card) => !card.card_images || !card.card_sets || !card.card_prices
+        (card) => !card?.card_images || !card?.card_sets || !card?.card_prices
       )
     );
 
     if (hasMissingData) {
-      handlePatch();
+      // handlePatch();
     }
   }, [allCollections]); // Keep the dependency array, but now it only triggers when necessary
 
@@ -184,8 +246,11 @@ export const CardProvider = ({ children }) => {
       organizedSearchData,
       isCardDataValid,
       slicedAndMergedSearchData,
+      image,
+      // fetchCardImage,
+      setImage,
 
-      handlePatch,
+      // handlePatch,
       setSlicedAndMergedSearchData,
       setOrganizedSearchData,
       setRawSearchData,
diff --git a/src/context/CardImagesContext/CardImagesContext.jsx b/src/context/CardImagesContext/CardImagesContext.jsx
index aa1bd03..6277838 100644
--- a/src/context/CardImagesContext/CardImagesContext.jsx
+++ b/src/context/CardImagesContext/CardImagesContext.jsx
@@ -34,26 +34,29 @@ export const CardImagesProvider = ({ children }) => {
   const [cards, setCards] = useState([]);
   const [images, setImages] = useState([]); // [
   const [randomCardImage, setRandomCardImage] = useState(null);
+  const [imageSrc, setImageSrc] = 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`;
 
+  // Function to download card images
   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);
-        }
-      });
+      const fetchedCards = response.data;
+      const imageUrls = fetchedCards
+        .map((card) => {
+          if (card.card_images && card.card_images.length > 0) {
+            return card.card_images[0].image_url + '?dummy=' + Date.now();
+          }
+          return null; // or some placeholder image URL
+        })
+        .filter(Boolean); // Remove any nulls
+
+      setCards(fetchedCards);
+      setImages(imageUrls); // Set all image URLs at once
     } catch (error) {
       console.error('Error in downloadCardImages:', error);
       setError(error.message);
@@ -62,21 +65,24 @@ export const CardImagesProvider = ({ children }) => {
     }
   };
 
-  useEffect(() => {
-    downloadCardImages();
-  }, []);
+  // useEffect(() => {
+  //   downloadCardImages();
+  // }, []);
 
+  // Handle random card image selection
   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);
+      const randomCardIndex = Math.floor(Math.random() * cards.length);
+      const randomCard = cards[randomCardIndex];
+      if (
+        randomCard &&
+        randomCard.card_images &&
+        randomCard.card_images.length > 0
+      ) {
+        setRandomCardImage(randomCard.card_images[0].image_url);
       }
     }
-  }, [cards]);
+  }, [cards]); // Dependency on cards means this will rerun when cards are fetched/updated
 
   useEffect(() => {
     if (images && images.length > 0) {
@@ -95,6 +101,9 @@ export const CardImagesProvider = ({ children }) => {
         randomCardImage,
         isLoading,
         error,
+        imageSrc,
+
+        setImageSrc,
         downloadCardImages,
         setImages,
       }}
@@ -103,5 +112,3 @@ export const CardImagesProvider = ({ children }) => {
     </CardImagesContext.Provider>
   );
 };
-
-export default CardImagesProvider;
diff --git a/src/context/CardImagesContext/useCardManager.jsx b/src/context/CardImagesContext/useCardManager.jsx
new file mode 100644
index 0000000..131b9fe
--- /dev/null
+++ b/src/context/CardImagesContext/useCardManager.jsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+const useCardManager = (initialCards = []) => {
+  const [cards, setCards] = useState(initialCards);
+
+  // General function to update a card
+  const updateCard = (cardId, updatedData) => {
+    setCards((currentCards) =>
+      currentCards.map((card) =>
+        card.id === cardId ? { ...card, ...updatedData } : card
+      )
+    );
+  };
+
+  // Add a new card
+  const addCard = (newCardData) => {
+    setCards([...cards, newCardData]);
+  };
+
+  // General utility to update a specific field of a card
+  const updateField = (cardId, field, value) => {
+    updateCard(cardId, { [field]: value });
+  };
+
+  // Update a nested field like priceHistory or card_images
+  const updateNestedField = (cardId, field, newValue) => {
+    const card = cards.find((card) => card.id === cardId);
+    updateCard(cardId, { [field]: [...card[field], newValue] });
+  };
+
+  return {
+    cards,
+    addCard,
+    updateCard: updateField, // for updating single fields
+    updateNestedField, // for updating nested fields like arrays
+  };
+};
+
+export default useCardManager;
diff --git a/src/context/CardImagesContext/useCardVariantManager.jsx b/src/context/CardImagesContext/useCardVariantManager.jsx
new file mode 100644
index 0000000..b5762fb
--- /dev/null
+++ b/src/context/CardImagesContext/useCardVariantManager.jsx
@@ -0,0 +1,73 @@
+import { useState } from 'react';
+
+const useCardVariantManager = (initialCards = []) => {
+  const [cards, setCards] = useState(initialCards);
+
+  // Function to identify the variant index
+  const findVariantIndex = (cardId, setCode) =>
+    cards.findIndex(
+      (card) => card.id === cardId && card.card_set.set_code === setCode
+    );
+
+  // Function to determine overlay based on rarity
+  const getOverlayByRarity = (rarity) => {
+    // Define overlays for different rarities
+    const overlays = {
+      Common: 'commonOverlay',
+      Rare: 'rareOverlay',
+      'Ultra Rare': 'ultraRareOverlay',
+      // ... other rarities
+    };
+    return overlays[rarity] || 'defaultOverlay';
+  };
+
+  // Function to update a specific variant field
+  const updateVariantField = (cardId, setCode, field, value) => {
+    const index = findVariantIndex(cardId, setCode);
+    if (index < 0) return; // Variant not found
+
+    const updatedCards = [...cards];
+    updatedCards[index] = {
+      ...updatedCards[index],
+      [field]: value,
+      // Update overlay based on rarity
+      overlay: getOverlayByRarity(updatedCards[index].card_set.set_rarity),
+    };
+    setCards(updatedCards);
+  };
+
+  // Function to add a new variant
+  const addVariant = (cardId, newVariantData) => {
+    const updatedCards = [...cards];
+    updatedCards.push({
+      ...newVariantData,
+      id: cardId,
+      // Assign overlay based on rarity
+      overlay: getOverlayByRarity(newVariantData.card_set.set_rarity),
+    });
+    setCards(updatedCards);
+  };
+
+  // Function to update nested fields like priceHistory for a specific variant
+  const updateNestedField = (cardId, setCode, field, newValue) => {
+    const index = findVariantIndex(cardId, setCode);
+    if (index < 0) return; // Variant not found
+
+    const updatedCards = [...cards];
+    const variant = updatedCards[index];
+    updatedCards[index] = {
+      ...variant,
+      [field]: [...variant[field], newValue],
+    };
+    setCards(updatedCards);
+  };
+
+  return {
+    cards,
+    addVariant,
+    updateVariantField,
+    updateNestedField,
+  };
+};
+
+export default useCardVariantManager;
diff --git a/src/context/CartContext/CartContext.js b/src/context/CartContext/CartContext.js
index b610d8a..fd29785 100644
--- a/src/context/CartContext/CartContext.js
+++ b/src/context/CartContext/CartContext.js
@@ -10,8 +10,8 @@ import React, {
 } from 'react';
 import { useCookies } from 'react-cookie';
 import { useUserContext } from '../UserContext/UserContext';
-import { fetchWrapper } from '../Helpers';
 import { getCardQuantity } from './helpers';
+import useFetchWrapper from '../hooks/useFetchWrapper';
 
 export const CartContext = createContext({
   cartData: {
@@ -33,19 +33,20 @@ export const CartContext = createContext({
 export const CartProvider = ({ children }) => {
   // const { user, setUser } = useUserContext();
   // const userId = user?.id;
+  const fetchWrapper = useFetchWrapper();
   const [cartData, setCartData] = useState({
     _id: '',
     cart: [],
     quantity: 0, // Total quantity of items
     totalPrice: 0, // Total price of items
   });
-  const [cookies, setCookies] = useCookies(['user', 'cart']);
-  const userId = cookies?.user?.id;
+  const [cookies, setCookie] = useCookies(['authUser', 'cart', 'cartData']);
+  const userId = cookies?.authUser?.userId;
   const [totalQuantity, setTotalQuantity] = useState(0);
   const [totalPrice, setTotalPrice] = useState(0);
 
   const getTotalCost = () => {
-    return cartData.cart.reduce(
+    return cartData?.cart?.reduce(
       (acc, card) => acc + card.card_prices[0].tcgplayer_price * card.quantity,
       0
     );
@@ -53,7 +54,7 @@ export const CartProvider = ({ children }) => {
 
   const totalCost = useMemo(
     () =>
-      cartData.cart.reduce(
+      cartData?.cart?.reduce(
         (total, item) =>
           total + item.quantity * item.card_prices[0].tcgplayer_price,
         0
@@ -66,12 +67,13 @@ export const CartProvider = ({ children }) => {
       const newCartData = await fetchWrapper(
         // `${process.env.REACT_APP_SERVER}/api/carts/createEmptyCart`,
         `${process.env.REACT_APP_SERVER}/api/users/${userId}/cart/createCart`,
-
         'POST',
         JSON.stringify({ userId })
       );
-
-      setCartDataAndCookie(newCartData);
+      const { message, data } = newCartData;
+      console.log('CREATE CART: -----> response message', message);
+      console.log('CART DATA: -----> response data', data);
+      setCartDataAndCookie(data);
     } catch (error) {
       console.error('Error creating cart:', error);
 
@@ -92,6 +94,7 @@ export const CartProvider = ({ children }) => {
         `${process.env.REACT_APP_SERVER}${`/api/users/${userId}/cart`}`,
         'GET'
       );
+      console.log('FETCHED USER CART:', response);
       setCartDataAndCookie(response);
     } catch (error) {
       console.error('Error fetching user cart:', error);
@@ -99,21 +102,26 @@ export const CartProvider = ({ children }) => {
         await createUserCart();
       }
     }
-  }, [userId, setCookies]);
+  }, [userId]);
 
   // Set cart data and cookie
   const setCartDataAndCookie = useCallback(
     (newCartData) => {
-      if (newCartData && Array.isArray(newCartData.cart)) {
+      if (newCartData && Array.isArray(newCartData?.cart)) {
         setCartData(newCartData);
-        setCookies('cart', newCartData.cart, {
+        setCookie('cartData', newCartData, {
+          path: '/',
+          secure: true,
+          sameSite: 'none',
+        });
+        setCookie('cart', newCartData?.cart, {
           path: '/',
           secure: true,
           sameSite: 'none',
         });
       }
     },
-    [setCookies]
+    [setCookie]
   );
 
   // useEffect to fetch and set cart data
@@ -125,78 +133,145 @@ export const CartProvider = ({ children }) => {
     }
   }, [userId, fetchUserCart]);
   useEffect(() => {
-    const newTotalQuantity = cartData.cart.reduce(
-      (total, item) => total + item.quantity,
+    const newTotalQuantity = cartData?.cart?.reduce(
+      (total, item) => total + item?.quantity,
       0
     );
     setTotalQuantity(newTotalQuantity);
     setTotalPrice(totalCost);
   }, [cartData.cart, totalCost]);
+
   const updateCart = useCallback(
-    async (cartId, updatedCart) => {
-      if (!userId) return;
-      if (!cartId) return;
+    async (cartId, updatedCart, method) => {
+      if (!userId || !cartId) return;
+
       const formattedCartData = {
-        cartItems: updatedCart.map((item) => ({
-          ...item,
-          id: item.id,
-          quantity: item.quantity,
-        })),
         userId: userId,
+        cart: updatedCart.map((item) => ({
+          id: item.id, // assuming id is the unique identifier for each cart item
+          quantity: item.quantity, // ensure this is the current quantity to be updated in the cart
+          price: item.price, // ensure this is the current price of the item
+          // Include other necessary fields as per your cart item structure
+        })),
+        method: method, // 'POST' for adding items, 'DELETE' for removing items, 'PUT' for updating items
+        // Calculating total quantity and total price outside of the cart array
+        quantity: updatedCart.reduce((total, item) => total + item.quantity, 0),
+        totalPrice: updatedCart.reduce(
+          (total, item) => total + item.quantity * item.price,
+          0
+        ),
       };
-      // const response = await fetchWrapper(
-      //   `${process.env.REACT_APP_SERVER}${`/api/carts/userCart/${userId}`}`,
-      //   'GET'
-      // );
-      const data = await fetchWrapper(
-        `${process.env.REACT_APP_SERVER}/api/users/${userId}/cart/${cartId}/update`,
-        'PUT',
-        formattedCartData
-        // JSON.stringify(formattedCartData)
-      );
-      setCartDataAndCookie(data);
-      return data;
+
+      try {
+        const response = await fetch(
+          `${process.env.REACT_APP_SERVER}/api/users/${userId}/cart/${cartId}/update`,
+          {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formattedCartData),
+          }
+        );
+
+        const { message, data } = await response.json();
+        console.log('PUT: /cart -----> response message', message);
+        if (response.ok) {
+          console.log('PUT: /cart -----> response data', data);
+          setCartDataAndCookie(data); // Update your cart state and cookie here
+        } else {
+          console.error(
+            'Failed to update cart: ',
+            data?.error || 'Error occurred'
+          );
+          // Handle errors appropriately (e.g., show an error message to the user)
+        }
+      } catch (error) {
+        console.error('Error updating cart: ', error);
+        // Handle errors appropriately (e.g., show an error message to the user)
+      }
     },
-    [fetchWrapper, setCartDataAndCookie]
+    [userId, setCartDataAndCookie] // dependencies array
   );
   const addOneToCart = useCallback(
     async (cardInfo) => {
       if (!cartData._id) return;
-      console.log('Adding one to cart', cardInfo);
-      const { quantityOfSameId, totalItems } = getCardQuantity(
-        cartData,
-        cardInfo.id
-      );
-      if (quantityOfSameId >= 3) return;
-      let updatedCart = cartData.cart.map((item) =>
-        item.id === cardInfo.id
-          ? { ...item, quantity: item.quantity + 1 }
-          : item
+
+      const existingItem = cartData?.cart?.find(
+        (item) => item.id === cardInfo.id
       );
-      if (!cartData.cart.some((item) => item.id === cardInfo.id)) {
-        updatedCart = [...updatedCart, { ...cardInfo, quantity: 1 }];
+      const updatedExistingItem = {
+        ...cardInfo,
+        quantity: existingItem ? existingItem.quantity + 1 : 1,
+        totalPrice: existingItem
+          ? existingItem.totalPrice + existingItem.price
+          : 1,
+      };
+      const updatedCart = cartData?.cart?.map((item) => {
+        return item.id === cardInfo.id ? updatedExistingItem : item;
+      });
+
+      let newItem = {
+        ...cardInfo,
+        quantity: 1,
+        totalPrice: cardInfo.price,
+      };
+      if (!existingItem) {
+        updatedCart.push(newItem); // New item
       }
-      const updatedCartData = await updateCart(cartData._id, updatedCart);
-      console.log('UPDATED CART DATA:', updatedCartData);
+
+      const method = existingItem ? 'PUT' : 'POST'; // Decide method based on whether the item exists
+      const updatedCartData = await updateCart(
+        cartData._id,
+        updatedCart,
+        method
+        // updatedExistingItem ? updatedExistingItem : newItem
+      );
       if (updatedCartData) setCartData(updatedCartData);
     },
-    [cartData._id, cartData.cart, getCardQuantity, updateCart]
+    [cartData, updateCart, setCartData]
   );
   const removeOneFromCart = useCallback(
     async (cardInfo) => {
-      if (cartData.cart.some((item) => item.id === cardInfo.id)) {
-        const updatedCart = cartData.cart
-          .map((item) =>
-            item.id === cardInfo.id && item.quantity > 0
-              ? { ...item, quantity: item.quantity - 1 }
-              : item
-          )
-          .filter((item) => item.quantity > 0);
-        const updatedCartData = await updateCart(cartData._id, updatedCart);
-        if (updatedCartData) setCartData(updatedCartData);
+      const existingItemIndex = cartData.cart.findIndex(
+        (item) => item.id === cardInfo.id
+      );
+
+      if (existingItemIndex === -1) {
+        console.error('Item not found in cart');
+        return; // Item not found in cart
       }
+
+      const existingItem = cartData.cart[existingItemIndex];
+
+      // Decrement quantity or remove item from cart
+      let updatedCart;
+      let method;
+      if (existingItem.quantity > 1) {
+        // Decrement quantity by 1
+        updatedCart = cartData?.cart?.map((item, index) =>
+          index === existingItemIndex
+            ? { ...item, quantity: item.quantity - 1 }
+            : item
+        );
+        method = 'PUT'; // Update the item quantity
+      } else {
+        // Remove item from cart as its quantity will be 0
+        updatedCart = cartData.cart.filter(
+          (item, index) => index !== existingItemIndex
+        );
+        method = 'DELETE'; // Remove the item from the cart
+      }
+
+      // Update the cart with new data
+      const updatedCartData = await updateCart(
+        cartData._id,
+        updatedCart,
+        method
+      );
+      if (updatedCartData) setCartData(updatedCartData);
     },
-    [cartData._id, cartData.cart, updateCart]
+    [cartData, updateCart, setCartData] // dependencies array
   );
   const deleteFromCart = useCallback(
     async (cardInfo) => {
@@ -219,7 +294,7 @@ export const CartProvider = ({ children }) => {
         (acc, card) => acc + card.quantity,
         0
       ),
-      cartCardCount: cartData.cart?.length,
+      cartCardCount: cartData?.cart?.length,
       cartValue: cartData?.cart?.reduce(
         (acc, card) =>
           acc + card.card_prices[0].tcgplayer_price * card.quantity,
@@ -230,7 +305,7 @@ export const CartProvider = ({ children }) => {
       addOneToCart,
       removeOneFromCart,
       deleteFromCart,
-      fetchUserCart,
+      fetchCartForUser: fetchUserCart,
       createUserCart,
     }),
     [
diff --git a/src/context/ChartContext/ChartContext.jsx b/src/context/ChartContext/ChartContext.jsx
index 598219e..d50d3ac 100644
--- a/src/context/ChartContext/ChartContext.jsx
+++ b/src/context/ChartContext/ChartContext.jsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 import {
   groupAndAverageData,
   convertDataForNivo2,
@@ -34,6 +34,33 @@ export const ChartProvider = ({ children }) => {
   const handleChange = (e) => {
     setTimeRange(e.target.value); // Update timeRange based on selection
   };
+
+  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 hour';
+        break;
+      case '7 days':
+        format = '%b %d';
+        ticks = 'every day';
+        break;
+      case '1 month':
+        format = '%b %d';
+        ticks = 'every 3 days';
+        break;
+      default:
+        format = '%b %d';
+        ticks = 'every day';
+    }
+    return { tickValues: ticks, xFormat: `time:${format}` };
+  }, [timeRange]);
+
   return (
     <ChartContext.Provider
       value={{
@@ -41,6 +68,8 @@ export const ChartProvider = ({ children }) => {
         latestData,
         timeRange,
         timeRanges,
+        tickValues,
+        xFormat,
 
         groupAndAverageData,
         convertDataForNivo2,
diff --git a/src/context/ChartContext/helpers.jsx b/src/context/ChartContext/helpers.jsx
index 2850d27..c3097ce 100644
--- a/src/context/ChartContext/helpers.jsx
+++ b/src/context/ChartContext/helpers.jsx
@@ -1,4 +1,6 @@
+import { makeStyles } from '@mui/styles';
 import { roundToNearestTenth } from '../Helpers';
+import { Tooltip, Typography } from '@mui/material';
 
 export const groupAndAverageData = (data, threshold = 600000, timeRange) => {
   if (!data || data.length === 0) return [];
@@ -8,6 +10,7 @@ export const groupAndAverageData = (data, threshold = 600000, timeRange) => {
 
   // console.log('Initial cluster with first data point: ', currentCluster);
 
+  // loop for each data point
   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();
@@ -78,25 +81,72 @@ export const getTickValues = (timeRange) => {
   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: ', rawData2);
+//   // console.log('rawData2.data: ', rawData2[0]);
+//   // rawData is assumed to be an array of objects with 'label', 'x', and 'y' properties
+//   switch (rawData2) {
+//     case rawData2[0].x instanceof Date:
+//       return rawData2.map((dataPoint) => ({
+//         x: dataPoint[0]?.x, // x value is already an ISO date string
+//         y: dataPoint.y, // y value
+//       }));
+//     // equals array
+//     case typeof rawData2[0] === Array.isArray:
+//       return rawData2.map((dataPoint) => ({
+//         x: new Date(dataPoint.x).toISOString(), // x value is already an ISO date string
+//         y: dataPoint.y, // y value
+//       }));
+//     default:
+//       console.error(
+//         'Invalid rawData2 provided. Expected an array of objects with "x" and "y" properties',
+//         rawData2
+//       );
+//       return [];
+//   }
+//   const nivoData = rawData2?.map((dataPoint) => ({
+//     x: dataPoint[0]?.x, // x value is already an ISO date string
+//     y: dataPoint[0]?.y, // y value
+//   }));
+
+//   // Wrapping the data for a single series. You can add more series similarly
+//   return [
+//     {
+//       id: 'Averaged Data',
+//       color: '#4cceac',
+//       data: nivoData,
+//     },
+//   ];
+// };
 export const convertDataForNivo2 = (rawData2) => {
-  if (!Array.isArray(rawData2) || rawData2?.length === 0) {
+  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
-  }));
+  // Assuming rawData2 is an array of objects with 'x' and 'y' properties
+  const nivoData = rawData2?.map((dataPoint) => {
+    // Ensure the 'x' value is in ISO date string format
+    const xValue =
+      dataPoint[0]?.x instanceof Date
+        ? dataPoint[0]?.x?.toISOString()
+        : dataPoint[0]?.x;
+    const yValue = dataPoint[0]?.y; // Assuming y value is directly usable
+
+    return { x: xValue, y: yValue };
+  });
 
   // Wrapping the data for a single series. You can add more series similarly
   return [
     {
-      id: 'Averaged Data',
-      color: '#4cceac',
+      id: 'Your Data', // Replace with a meaningful id
+      color: 'hsl(252, 70%, 50%)', // Replace with color of your choice or logic for dynamic colors
       data: nivoData,
     },
   ];
@@ -128,3 +178,36 @@ export const formatDateToString = (date) => {
     .toString()
     .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
 };
+
+const useStyles = makeStyles((theme) => ({
+  tooltipTarget: {
+    cursor: 'pointer', // Change the cursor to indicate it's hoverable
+  },
+}));
+
+export const ChartTooltip = ({ point, lastData, hoveredData, latestData }) => {
+  const classes = useStyles();
+  if (!point) return null;
+  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>
+    </>
+  );
+};
diff --git a/src/context/CollectionContext/CollectionContext.jsx b/src/context/CollectionContext/CollectionContext.jsx
index 7d2f2dd..28e7c8c 100644
--- a/src/context/CollectionContext/CollectionContext.jsx
+++ b/src/context/CollectionContext/CollectionContext.jsx
@@ -10,7 +10,7 @@ import React, {
   useRef,
 } from 'react';
 import { useCookies } from 'react-cookie';
-import { fetchWrapper, createApiUrl } from '../Helpers.jsx';
+import { createApiUrl } from '../Helpers.jsx';
 import {
   handleError,
   removeDuplicatesFromCollection,
@@ -35,13 +35,16 @@ import {
   // convertToXYLabelData,
 } from './helpers.jsx';
 import { isEqual } from 'lodash';
+import useFetchWrapper from '../hooks/useFetchWrapper.jsx';
 
 export const CollectionContext = createContext(defaultContextValue);
 
 export const CollectionProvider = ({ children }) => {
-  const [cookies] = useCookies(['user']);
-  const user = cookies?.user;
-  const userId = user?.id;
+  const [cookies] = useCookies(['authUser']);
+  const fetchWrapper = useFetchWrapper();
+
+  const user = cookies?.authUser;
+  const userId = user?.userId;
   // state for the collection context
   const [allCollections, setAllCollections] = useState([]);
   const [collectionData, setCollectionData] = useState(initialCollectionState);
@@ -120,7 +123,23 @@ export const CollectionProvider = ({ children }) => {
       console.error(`Failed to fetch collections: ${error}`, error.message);
     }
   }, [userId]);
-
+  /**
+   * Handles the updating of a collection.
+   * @param {Object} collection - The collection to update.
+   * @param {Object} cardUpdate - The card update object.
+   * @param {String} operation - The operation to perform.
+   * @returns {Promise<Object>} The updated collection.
+   */
+  const updateCollectionDataEndpoint = async (
+    userId,
+    collectionId,
+    updatedCollection
+  ) => {
+    const collectionEndpoint = createApiUrl(
+      `${userId}/collections/${collectionId}`
+    );
+    return await fetchWrapper(collectionEndpoint, 'PUT', { updatedCollection });
+  };
   // compare collections
   const updateCollectionData = useCallback(
     (newData) => {
@@ -495,80 +514,80 @@ export const CollectionProvider = ({ children }) => {
       );
     }
   };
-  // update collection when card is changed
-  const updateCollectionWhenCardChanged = async (card, collection, userId) => {
-    try {
-      if (!card || !collection) {
-        throw new Error('Card or collection is undefined.');
-      }
-
-      // Assume the card object has a quantity and price property
-      const updatedQuantity = card?.quantity;
-      const updatedTotalPriceForCard = card?.price * updatedQuantity;
-
-      // Ensure the card values are valid before proceeding
-      if (
-        typeof updatedQuantity !== 'number' ||
-        typeof updatedTotalPriceForCard !== 'number'
-      ) {
-        throw new Error(
-          `Invalid card details for card: ${JSON.stringify(card)}`
-        );
-      }
-
-      const newCardValueWithUpdatedPrice = {
-        ...card,
-        quantity: updatedQuantity,
-        totalPrice: updatedTotalPriceForCard,
-      };
-
-      // Update collection locally, assuming the collection is a valid array of cards
-      const updatedCards =
-        collection?.cards?.map((c) =>
-          c?.card?.id === card.id ? newCardValueWithUpdatedPrice : c
-        ) || [];
-
-      console.log('UPDATED CARDS', updatedCards);
-
-      // Reflect the change in the local state and send update to server
-      handleCardOperation(
-        newCardValueWithUpdatedPrice,
-        'update',
-        collection,
-        userId
-      );
-    } catch (error) {
-      console.error(
-        `Error updating total price for card ID ${card?.id}: ${error.message}`,
-        error
-      );
-    }
-  };
-  // update collection of any of the cards in it have chanded price
-  const processCollections = useCallback(() => {
-    allCollections?.forEach((collection) => {
-      if (!collection?._id) {
-        console.error('No collectionId found in collection.');
-        return;
-      }
-      collection?.cards?.forEach((card) => {
-        if (!card) {
-          console.warn('Card in collection is undefined.');
-          return;
-        }
-        const originalTotalPrice = card.price * card.quantity;
-        if (card?.totalPrice !== originalTotalPrice) {
-          updateCollectionWhenCardChanged(card, collection, userId);
-        }
-      });
-    });
-  }, [allCollections, selectedCollection]);
+  // // update collection when card is changed
+  // const updateCollectionWhenCardChanged = async (card, collection, userId) => {
+  //   try {
+  //     if (!card || !collection) {
+  //       throw new Error('Card or collection is undefined.');
+  //     }
+
+  //     // Assume the card object has a quantity and price property
+  //     const updatedQuantity = card?.quantity;
+  //     const updatedTotalPriceForCard = card?.price * updatedQuantity;
+
+  //     // Ensure the card values are valid before proceeding
+  //     if (
+  //       typeof updatedQuantity !== 'number' ||
+  //       typeof updatedTotalPriceForCard !== 'number'
+  //     ) {
+  //       throw new Error(
+  //         `Invalid card details for card: ${JSON.stringify(card)}`
+  //       );
+  //     }
+
+  //     const newCardValueWithUpdatedPrice = {
+  //       ...card,
+  //       quantity: updatedQuantity,
+  //       totalPrice: updatedTotalPriceForCard,
+  //     };
+
+  //     // Update collection locally, assuming the collection is a valid array of cards
+  //     const updatedCards =
+  //       collection?.cards?.map((c) =>
+  //         c?.card?.id === card.id ? newCardValueWithUpdatedPrice : c
+  //       ) || [];
+
+  //     console.log('UPDATED CARDS', updatedCards);
+
+  //     // Reflect the change in the local state and send update to server
+  //     handleCardOperation(
+  //       newCardValueWithUpdatedPrice,
+  //       'update',
+  //       collection,
+  //       userId
+  //     );
+  //   } catch (error) {
+  //     console.error(
+  //       `Error updating total price for card ID ${card?.id}: ${error.message}`,
+  //       error
+  //     );
+  //   }
+  // };
+  // // update collection of any of the cards in it have chanded price
+  // const processCollections = useCallback(() => {
+  //   allCollections?.forEach((collection) => {
+  //     if (!collection?._id) {
+  //       console.error('No collectionId found in collection.');
+  //       return;
+  //     }
+  //     collection?.cards?.forEach((card) => {
+  //       if (!card) {
+  //         console.warn('Card in collection is undefined.');
+  //         return;
+  //       }
+  //       const originalTotalPrice = card.price * card.quantity;
+  //       if (card?.totalPrice !== originalTotalPrice) {
+  //         updateCollectionWhenCardChanged(card, collection, userId);
+  //       }
+  //     });
+  //   });
+  // }, [allCollections, selectedCollection]);
   // This useEffect is for processing collections when they are fetched
-  useEffect(() => {
-    if (collectionsFetched) {
-      processCollections();
-    }
-  }, [collectionsFetched, processCollections]);
+  // useEffect(() => {
+  //   if (collectionsFetched) {
+  //     processCollections();
+  //   }
+  // }, [collectionsFetched, processCollections]);
   // This useEffect is for updating allXYValues and currentChartDataSets2
   useEffect(() => {
     if (selectedCollection?.chartData?.allXYValues?.length) {
@@ -581,10 +600,10 @@ export const CollectionProvider = ({ children }) => {
   }, [selectedCollection?.chartData?.allXYValues]);
   // This useEffect is for fetching collections when the user ID changes
   useEffect(() => {
-    if (userId) {
+    if (userId && !allCollections?.length) {
       fetchAndSetCollections();
     }
-  }, [userId, fetchAndSetCollections]);
+  }, [userId, fetchAndSetCollections, allCollections]);
   const contextValue = useMemo(
     () => ({
       allCollections,
diff --git a/src/context/CollectionContext/helpers.jsx b/src/context/CollectionContext/helpers.jsx
index c740034..5c09506 100644
--- a/src/context/CollectionContext/helpers.jsx
+++ b/src/context/CollectionContext/helpers.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import moment from 'moment';
-import { createApiUrl, fetchWrapper, roundToNearestTenth } from '../Helpers';
+import { createApiUrl, roundToNearestTenth } from '../Helpers';
 
 export const initialCollectionState = {
   userId: '', // Assuming this is an ObjectId string
@@ -326,6 +326,10 @@ export const handleCardAddition = (currentCards, cardToAdd) => {
     const existingCard = currentCards[existingCardIndex];
     existingCard.quantity = (existingCard.quantity || 0) + 1;
     existingCard.totalPrice = existingCard.price * existingCard.quantity;
+    existingCard.chart_datasets = [
+      ...existingCard.chart_datasets,
+      createChartDataEntry(existingCard.totalPrice),
+    ];
 
     // Update the card in the currentCards array
     currentCards[existingCardIndex] = existingCard;
@@ -572,35 +576,17 @@ export const createCardsPayload = (operation, updatedCards, cardUpdate) => {
  * @param {String} operation - The operation to perform.
  * @returns {Promise<Object>} The updated collection.
  */
-export const updateChartData = async (
-  userId,
-  collectionId,
-  updatedChartData
-) => {
-  const chartDataPayload = { chartData: updatedChartData };
-  const chartDataEndpoint = createApiUrl(
-    `${userId}/collections/${collectionId}/updateChartData`
-  );
-  return await fetchWrapper(chartDataEndpoint, 'PUT', chartDataPayload);
-};
-
-/**
- * Handles the updating of a collection.
- * @param {Object} collection - The collection to update.
- * @param {Object} cardUpdate - The card update object.
- * @param {String} operation - The operation to perform.
- * @returns {Promise<Object>} The updated collection.
- */
-export const updateCollectionDataEndpoint = async (
-  userId,
-  collectionId,
-  updatedCollection
-) => {
-  const collectionEndpoint = createApiUrl(
-    `${userId}/collections/${collectionId}`
-  );
-  return await fetchWrapper(collectionEndpoint, 'PUT', { updatedCollection });
-};
+// export const updateChartData = async (
+//   userId,
+//   collectionId,
+//   updatedChartData
+// ) => {
+//   const chartDataPayload = { chartData: updatedChartData };
+//   const chartDataEndpoint = createApiUrl(
+//     `${userId}/collections/${collectionId}/updateChartData`
+//   );
+//   return await fetchWrapper(chartDataEndpoint, 'PUT', chartDataPayload);
+// };
 
 /**
  * Handles the updating of a collection.
diff --git a/src/context/CollectionContext/useCollectionManager.jsx b/src/context/CollectionContext/useCollectionManager.jsx
new file mode 100644
index 0000000..461f07e
--- /dev/null
+++ b/src/context/CollectionContext/useCollectionManager.jsx
@@ -0,0 +1,39 @@
+import { useState, useEffect, useCallback } from 'react';
+import axios from 'axios'; // Make sure to install axios for HTTP requests
+
+// Custom hook for managing the collection
+function useCollectionManager(userId) {
+  const [collection, setCollection] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Fetch collection by user ID
+  const fetchCollection = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`/api/collections/${userId}`);
+      setCollection(response.data); // Assume the data is the collection object
+      setLoading(false);
+    } catch (err) {
+      setError(err);
+      setLoading(false);
+    }
+  }, [userId]);
+
+  // Call fetchCollection when the component using this hook mounts
+  useEffect(() => {
+    fetchCollection();
+  }, [fetchCollection]);
+
+  // Define other CRUD operations similarly, e.g., addCard, removeCard, updateCollection, etc.
+
+  return {
+    collection,
+    loading,
+    error,
+    fetchCollection,
+    // add other methods here as you define them
+  };
+}
+
+export default useCollectionManager;
diff --git a/src/context/CombinedContext/CombinedProvider.jsx b/src/context/CombinedContext/CombinedProvider.jsx
index c162e19..ce0fac6 100644
--- a/src/context/CombinedContext/CombinedProvider.jsx
+++ b/src/context/CombinedContext/CombinedProvider.jsx
@@ -19,10 +19,10 @@ import { useUnsavedCardsEffect } from '../hooks/useUnsavedCardsEffect';
 export const CombinedContext = createContext();
 
 export const CombinedProvider = ({ children }) => {
-  const [cookies] = useCookies(['user']);
+  const [cookies] = useCookies(['authUser']);
   const [state, setState] = useState(initialState);
-  const user = cookies.user;
-  const userId = user?.id;
+  const user = cookies?.authUser;
+  const userId = user?.userId;
   const {
     selectedCollection,
     updateCollection,
diff --git a/src/context/DeckContext/DeckContext.js b/src/context/DeckContext/DeckContext.js
index 2630c2e..33075ef 100644
--- a/src/context/DeckContext/DeckContext.js
+++ b/src/context/DeckContext/DeckContext.js
@@ -7,7 +7,7 @@ import React, {
   useContext,
 } from 'react';
 import { useCookies } from 'react-cookie';
-import { createApiUrl, fetchWrapper } from '../Helpers.jsx';
+import { createApiUrl } from '../Helpers.jsx';
 import { BASE_API_URL } from '../Helpers.jsx';
 import {
   calculateAndUpdateTotalPrice,
@@ -17,16 +17,19 @@ import {
   handleCardAddition,
   handleCardUpdate,
 } from './helpers.jsx';
+import useFetchWrapper from '../hooks/useFetchWrapper.jsx';
 
 export const DeckContext = createContext(defaultContextValue);
 
 export const DeckProvider = ({ children }) => {
-  const [cookies] = useCookies(['user']);
+  const [cookies] = useCookies(['authUser']);
+  const userId = cookies?.authUser?.userId;
+  const fetchWrapper = useFetchWrapper();
+  const [prevUserId, setPrevUserId] = useState(null);
   const [deckData, setDeckData] = useState({});
   const [allDecks, setAllDecks] = useState([]);
   const [selectedDeck, setSelectedDeck] = useState({});
   const [selectedCards, setSelectedCards] = useState(selectedDeck?.cards || []);
-  const userId = cookies?.user?.id;
 
   const fetchDecksForUser = useCallback(async () => {
     if (!userId) {
@@ -43,15 +46,17 @@ export const DeckProvider = ({ children }) => {
   }, [userId]);
   const fetchAndSetDecks = useCallback(async () => {
     try {
-      const userDecks = await fetchDecksForUser();
+      const { message, data } = await fetchDecksForUser();
+      console.log('Response from server for fetch decks:', message, data);
 
-      if (userDecks.data && userDecks.data.length > 0) {
-        const uniqueDecks = removeDuplicateDecks(userDecks.data);
+      if (data && data?.length > 0) {
+        const uniqueDecks = removeDuplicateDecks(data);
         setAllDecks((prevDecks) =>
           removeDuplicateDecks([...prevDecks, ...uniqueDecks])
         );
         setDeckData(uniqueDecks[0] || {});
       } else {
+        console.log('No decks found for user.', data.data);
         // No decks found for user
         const shouldCreateDeck = window.confirm(
           'No decks found. Would you like to create a new one?'
@@ -127,7 +132,6 @@ export const DeckProvider = ({ children }) => {
       console.error(`Failed to update deck in backend: ${error.message}`);
     }
   };
-
   const createUserDeck = async (userId, newDeckInfo) => {
     try {
       const url = `${BASE_API_URL}/${userId}/decks/createDeck`;
@@ -138,10 +142,10 @@ export const DeckProvider = ({ children }) => {
       const data = await fetchWrapper(url, 'POST', {
         cards: [],
         totalPrice: 0,
-        description: newDeckInfo.updatedInfo.description || '',
-        name: newDeckInfo.updatedInfo.name || '',
-        tags: newDeckInfo.updatedInfo.tags || [],
-        color: newDeckInfo.updatedInfo.color || '',
+        description: newDeckInfo?.description || '',
+        name: newDeckInfo?.name || '',
+        tags: newDeckInfo?.tags || [],
+        color: newDeckInfo?.color || '',
       });
       console.log('NEW DECK DATA:', data);
       setDeckData(data.data);
@@ -182,7 +186,7 @@ export const DeckProvider = ({ children }) => {
     if (!deckId) {
       setSelectedDeck(allDecks[0]);
       console.warn('No deck ID provided. Adding card to first deck in list.');
-      deckId = allDecks[0]._id;
+      deckId = allDecks[0]?._id;
     }
     try {
       // Update deck data locally
@@ -224,7 +228,7 @@ export const DeckProvider = ({ children }) => {
         const updatedDeck = responseData.allDecks.find(
           (deck) => deck._id === deckId
         ).cards;
-        const updatedCards = updatedDeck.cards;
+        const updatedCards = updatedDeck?.cards;
         setSelectedDeck({ ...selectedDeck, cards: updatedCards });
       }
     } catch (error) {
@@ -243,7 +247,7 @@ export const DeckProvider = ({ children }) => {
         throw new Error('Deck not found locally');
       }
 
-      const originalCard = currentDeck.cards.find(
+      const originalCard = currentDeck?.cards?.find(
         (card) => card.id === updatedCard.id
       );
       if (originalCard && originalCard.quantity === updatedCard.quantity) {
@@ -269,8 +273,9 @@ export const DeckProvider = ({ children }) => {
       console.error(`Failed to update card in deck: ${error.message}`);
     }
   };
-  const updateDeckDetails = async (userId, deckId, updatedInfo) => {
+  const updateDeckDetails = async (deckId, updatedInfo) => {
     const { name, description, tags, color } = updatedInfo;
+    console.log('Updating deck details:', updatedInfo);
     if (!userId) {
       console.error('User ID is missing.');
       return;
@@ -308,9 +313,14 @@ export const DeckProvider = ({ children }) => {
     }
   };
   const getCardQuantity = (cardId) => {
-    const foundCard = selectedDeck?.cards?.find((item) => item.id === cardId);
+    const foundCard = selectedDeck?.cards.find((item) => item.id === cardId);
     return foundCard?.quantity || 0;
   };
+  const shouldFetchDecks = (prevUserId, currentUserId) => {
+    // Fetch decks if there was no previous user and now there is one
+    // or if the user has changed
+    return (!prevUserId && currentUserId) || prevUserId !== currentUserId;
+  };
 
   const contextValue = {
     deckData,
@@ -331,8 +341,8 @@ export const DeckProvider = ({ children }) => {
     removeOneFromDeck: (card, deckId) => removeCardFromDeck(card, deckId),
     updateOneInDeck: (card, deckId, userId) =>
       updateCardInDeck(card, deckId, userId),
-    updateDeckDetails: (userId, deckId, updatedInfo) =>
-      updateDeckDetails(userId, deckId, updatedInfo),
+    updateDeckDetails: (deckId, updatedInfo) =>
+      updateDeckDetails(deckId, updatedInfo),
     createUserDeck,
     deleteUserDeck,
 
@@ -345,8 +355,16 @@ export const DeckProvider = ({ children }) => {
 
   useEffect(() => {
     console.log('DECKCONTEXT:', contextValue);
-    if (userId && typeof userId === 'string') {
+  }, [
+    contextValue.deckData,
+    contextValue.allDecks,
+    contextValue.selectedDeck,
+    contextValue.selectedCards,
+  ]);
+  useEffect(() => {
+    if (shouldFetchDecks(prevUserId, userId)) {
       fetchAndSetDecks();
+      setPrevUserId(userId); // Update the previous userId
     }
   }, [userId, fetchAndSetDecks]);
 
diff --git a/src/context/ErrorBoundary.jsx b/src/context/ErrorBoundary.jsx
index 1dec4fc..f302c20 100644
--- a/src/context/ErrorBoundary.jsx
+++ b/src/context/ErrorBoundary.jsx
@@ -15,6 +15,8 @@ class ErrorBoundary extends React.Component {
       error: error,
       errorInfo: errorInfo,
     });
+    // Log the error to an error reporting service
+    // logErrorToService(error, errorInfo);
     console.error('Uncaught error:', error, errorInfo);
   }
 
@@ -28,16 +30,28 @@ class ErrorBoundary extends React.Component {
       return (
         <div style={{ textAlign: 'center', padding: '50px' }}>
           <h1>Oops! Something went wrong.</h1>
-          <p>
-            We&apos;re sorry for the inconvenience. Please try reloading the
-            page.
-          </p>
-          <button
-            onClick={this.handleReload}
-            style={{ padding: '10px 20px', cursor: 'pointer' }}
-          >
-            Reload
-          </button>
+          <p>Were sorry for the inconvenience. Here are a few options:</p>
+          <div>
+            <button
+              onClick={this.handleReload}
+              style={{
+                padding: '10px 20px',
+                cursor: 'pointer',
+                marginRight: '10px',
+              }}
+            >
+              Try Again
+            </button>
+            <button
+              onClick={() =>
+                this.props.onReport && this.props.onReport(this.state)
+              }
+              style={{ padding: '10px 20px', cursor: 'pointer' }}
+            >
+              Report Problem
+            </button>
+          </div>
+          {/* Additional navigation options can be added here */}
           <details
             style={{
               whiteSpace: 'pre-wrap',
@@ -45,7 +59,8 @@ class ErrorBoundary extends React.Component {
               textAlign: 'left',
             }}
           >
-            {this.state.error && this.state.error.toString()}
+            <summary>Details</summary>
+            {this.state.error && this.state.error?.toString()}
             <br />
             {this.state.errorInfo?.componentStack}
           </details>
diff --git a/src/context/FormContext/FormContext.jsx b/src/context/FormContext/FormContext.jsx
new file mode 100644
index 0000000..cd6399f
--- /dev/null
+++ b/src/context/FormContext/FormContext.jsx
@@ -0,0 +1,245 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { useAuthContext } from '../AuthContext/authContext';
+import { usePageContext } from '../PageContext/PageContext';
+import { useCardStore } from '../CardContext/CardStore';
+// import { params: initialState } from './search.json';
+// import as dif name from ./search.json
+import { initialState } from './search.json';
+import { defaultContextValue } from './helpers';
+
+// Define the context
+const FormContext = createContext(defaultContextValue);
+
+// Hook for consuming context
+export const useFormContext = () => useContext(FormContext);
+// Define form validations if needed
+const formValidations = {
+  loginForm: (values) => {
+    let errors = {};
+    if (!values.username) errors.username = 'Username is required';
+    if (!values.password) errors.password = 'Password is required';
+    return errors;
+  },
+  signupForm: (values) => {
+    let errors = {};
+    // Example: Add validations specific to signup form
+    if (!values.firstName) errors.firstName = 'First name is required';
+    if (!values.lastName) errors.lastName = 'Last name is required';
+    // ... more validations
+    return errors;
+  },
+  updateUserDataForm: (values) => {
+    let errors = {};
+    // Example: Add validations specific to user data update form
+    if (!values.firstName) errors.firstName = 'First name is required';
+    if (!values.lastName) errors.lastName = 'Last name is required';
+    // ... more validations
+    return errors;
+  },
+  updateCollectionForm: (values) => {
+    let errors = {};
+    // Example: Add validations specific to collection update form
+    if (!values.name) errors.name = 'Collection name is required';
+    if (!values.description) errors.description = 'Description is required';
+    // ... more validations
+    return errors;
+  },
+  // ...other form-specific validations
+};
+// Initial state for different forms
+const initialFormStates = {
+  loginForm: {
+    username: '',
+    password: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    role_data: {
+      name: 'admin',
+      capabilities: ['create', 'read', 'update', 'delete'],
+    },
+    signupMode: false, // Assuming it's a boolean toggle for whether it's signup or login
+  },
+  signupForm: {
+    username: '',
+    password: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    role_data: {
+      name: 'admin',
+      capabilities: ['create', 'read', 'update', 'delete'],
+    },
+    signupMode: true,
+  },
+  updateUserDataForm: {
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    role_data: {
+      name: 'admin',
+      capabilities: ['create', 'read', 'update', 'delete'],
+    },
+    dateOfBirth: '',
+    gender: '',
+    age: '',
+    status: '',
+    signupMode: false,
+  },
+  updateCollectionForm: {
+    name: '',
+    description: '',
+  },
+  addCollectionForm: {
+    // New form with same initial values as updateCollectionForm
+    name: '',
+    description: '',
+  },
+  searchForm: {
+    searchTerm: '',
+    searchParams: {
+      name: '',
+      type: '',
+      race: '',
+      archetype: '',
+      attribute: '',
+      level: '',
+    },
+  },
+  customerInfoFields: {
+    firstName: '',
+    lastName: '',
+    address: {
+      line1: { type: String },
+      line2: { type: String },
+      city: { type: String },
+      state: { type: String },
+      zip: { type: String },
+      country: { type: String },
+    },
+    timezone: { type: String },
+    phone: { type: String },
+    email: { type: String },
+  },
+  // ...other form types as needed
+};
+
+// Provider component
+export const FormProvider = ({ children }) => {
+  const { signup, login } = useAuthContext();
+  const {
+    loadingStatus,
+    setLoading, // Use setLoading instead of individual state setters
+    returnDisplay,
+  } = usePageContext();
+  // const { handleRequest } = useCardStore();
+  const [forms, setForms] = useState(initialFormStates);
+  const [currentForm, setCurrentForm] = useState({}); // For multiple forms
+  const [formErrors, setFormErrors] = useState(null); // For a single form
+
+  const resetForm = (formName) => {
+    setForms((prevForms) => ({
+      ...prevForms,
+      [formName]: initialFormStates[formName],
+    }));
+    setFormErrors((prevErrors) => ({ ...prevErrors, [formName]: {} }));
+  };
+
+  // Utility to set value at a given path in an object
+  // Example: setValueAtPath(obj, 'address.line1', '123 Main St')
+  const setValueAtPath = (obj, path, value) => {
+    const keys = path.split('.');
+    let current = obj;
+    for (let i = 0; i < keys.length - 1; i++) {
+      current[keys[i]] = current[keys[i]] || {};
+      current = current[keys[i]];
+    }
+    current[keys[keys.length - 1]] = value;
+  };
+
+  // Function to handle form field changes
+  // Example: handleChange('signupForm', 'firstName')
+  const handleChange = (formName, path) => (event) => {
+    const { value } = event.target;
+    setForms((prevForms) => {
+      const form = { ...prevForms[formName] };
+      setValueAtPath(form, path, value);
+      return { ...prevForms, [formName]: form };
+    });
+
+    if (formValidations[formName]) {
+      const newErrors = formValidations[formName](forms[formName]);
+      setFormErrors({ ...formErrors, [formName]: newErrors });
+    }
+  };
+
+  // Function to handle form submission
+  const handleSubmit = (formName) => async (event) => {
+    event.preventDefault();
+    setLoading('isFormDataLoading', true); // indicate form is being submitted
+    setCurrentForm(forms[formName]); // Set current form
+    const currentErrors = formValidations[formName]
+      ? formValidations[formName](currentForm)
+      : {};
+    const securityData = {
+      username: currentForm.username,
+      password: currentForm.password,
+      email: currentForm.email,
+      role_data: {
+        name: 'admin',
+        capabilities: ['create', 'read', 'update', 'delete'],
+      },
+    };
+    const basicData = {
+      firstName: currentForm.firstName,
+      lastName: currentForm.lastName,
+    };
+    if (Object.values(currentErrors).every((x) => x === '')) {
+      // Proceed based on form type
+      switch (formName) {
+        case 'signupForm':
+          console.log('Submitting signup form:', currentForm);
+          await signup(securityData, basicData); // Use the appropriate function from AuthContext
+          break;
+        case 'loginForm':
+          console.log('Submitting login form:', currentForm);
+          await login(currentForm?.username, currentForm?.password); // Adjust as necessary
+          break;
+        // Handle other cases
+      }
+      // Handle success logic here
+
+      // Reset the form
+      resetForm(formName);
+    } else {
+      setFormErrors(currentErrors); // Update error state
+    }
+    setLoading('isFormDataLoading', false); // indicate form submission is done
+  };
+
+  // useEffect(() => {
+  //   if (initialFormStates?.searchForm?.searchTerm) {
+  //     handleRequest(initialFormStates?.searchForm?.searchTerm);
+  //   }
+  // }, [returnDisplay]);
+
+  // Provide each form's data, handleChange, and handleSubmit through context
+  const contextValue = {
+    forms,
+    formErrors,
+    initialFormStates,
+    currentForm,
+    setFormErrors,
+    setCurrentForm,
+    handleChange,
+    handleSubmit,
+    resetForm,
+  };
+
+  return (
+    <FormContext.Provider value={contextValue}>{children}</FormContext.Provider>
+  );
+};
+
+export default FormProvider;
diff --git a/src/context/FormContext/helpers.jsx b/src/context/FormContext/helpers.jsx
new file mode 100644
index 0000000..e519164
--- /dev/null
+++ b/src/context/FormContext/helpers.jsx
@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const defaultContextValue = {
+  forms: {},
+  formErrors: {},
+  initialFormStates: {},
+  currentForm: {},
+  setFormErrors: () => {},
+  setCurrentForm: () => {},
+  handleChange: () => {},
+  handleSubmit: () => {},
+  resetForm: () => {},
+};
diff --git a/src/components/search/search.json b/src/context/FormContext/search.json
similarity index 100%
rename from src/components/search/search.json
rename to src/context/FormContext/search.json
diff --git a/src/context/Helpers.jsx b/src/context/Helpers.jsx
index c427421..b2fb415 100644
--- a/src/context/Helpers.jsx
+++ b/src/context/Helpers.jsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useCookies } from 'react-cookie';
 
+export const BASE_URL = `${process.env.REACT_APP_SERVER}/api`;
+
+export const createUrl = (path) => `${BASE_URL}/${path}`;
 /**
  * The base URL for all API calls.
  * @type {String}
@@ -30,34 +33,6 @@ const lastRequestTime = {
 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.
- */
-export 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
-  }
-};
 
 export const removeDuplicateCollections = (collections) => {
   const seen = new Set();
@@ -97,11 +72,11 @@ export const getCardQuantity = (collectionId, allCollections) => {
 
 // Custom Hook to get the userId from cookies
 export const useUserId = () => {
-  const [cookies] = useCookies(['user']);
+  const [cookies] = useCookies(['authUser']);
   const [userId, setUserId] = useState(null);
 
   useEffect(() => {
-    setUserId(cookies.user?.id);
+    setUserId(cookies?.authUser?.id);
   }, [cookies]);
 
   return userId;
diff --git a/src/context/PageContext/PageContext.jsx b/src/context/PageContext/PageContext.jsx
index 49ab08f..4b2b7a2 100644
--- a/src/context/PageContext/PageContext.jsx
+++ b/src/context/PageContext/PageContext.jsx
@@ -1,89 +1,124 @@
-import React, { createContext, useState, useContext } from 'react';
-import { SplashPage } from '../../pages';
+import React, { createContext, useState, useContext, useEffect } from 'react';
 import LoadingIndicator from '../../components/reusable/indicators/LoadingIndicator';
 import ErrorIndicator from '../../components/reusable/indicators/ErrorIndicator';
 import SplashPage2 from '../../pages/otherPages/SplashPage2';
+import useSnackBar from '../hooks/useSnackBar';
+import { isEmpty } from '../Helpers';
 
-// Creating the context
 const PageContext = createContext();
 
-// Hook for consuming the context
 export const usePageContext = () => useContext(PageContext);
 
-// Provider component
 export const PageProvider = ({ children }) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [isPageLoading, setIsPageLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [pageError, setPageError] = useState(null);
-  const [loadingTimeoutExpired, setLoadingTimeoutExpired] = useState(false);
-
-  const logPageData = (page, data) => {
-    console.log(`${page} DATA LOADED:`, data);
-  };
-
-  const handleError = (e) => {
-    setPageError(e);
-    setIsPageLoading(false); // Optionally stop loading if an error occurs
-  };
-
-  const clearError = () => {
-    setPageError(null);
-  };
-
-  const displayErrorIndicator = () => {
-    if (error) return <ErrorIndicator error={error} />;
+  const handleSnackBar = useSnackBar()[1];
+  const [activelyLoading, setActivelyLoading] = useState(false); // [false, setActivelyLoading
+  const [loadingStatus, setLoadingStatus] = useState({
+    isLoading: false,
+    isDataLoading: false,
+    isFormDataLoading: false,
+    isPageLoading: false,
+    error: null,
+    loadingTimeoutExpired: false,
+    loadingType: '',
+  });
+
+  // Example: setLoading('isLoading', true);
+  // Example: setLoading('isDataLoading', true);
+  const setLoading = (type, status) => {
+    if (status) setActivelyLoading(true);
+    setLoadingStatus((prevStatus) => ({
+      ...prevStatus,
+      [type]: status,
+      loadingType: status ? type : '',
+    }));
+    // console.log(`Loading ${type} set to:`, status);
   };
 
-  const handleLoadingTimeout = () => {
-    setLoadingTimeoutExpired(true);
-    setIsPageLoading(false);
+  const returnDisplay = () => {
+    switch (loadingStatus?.loadingType) {
+      case 'error':
+        return <ErrorIndicator error={loadingStatus.error} />;
+      case 'isLoading':
+      case 'isDataLoading':
+      case 'isFormDataLoading':
+        return <LoadingIndicator />;
+      case 'isPageLoading':
+        return <SplashPage2 />;
+      default:
+        return null;
+    }
   };
 
-  const clearLoadingTimeout = () => {
-    setLoadingTimeoutExpired(false);
-  };
-
-  const displayLoadingIndicator = () => {
-    if (isLoading) return <LoadingIndicator />;
-  };
-
-  const displaySplashPage = () => {
-    // if (isPageLoading) return <SplashPage />;
-    if (isPageLoading) return <SplashPage2 />;
-  };
-
-  // const setLoader = (isLoading) => {
-  //   if (typeof isLoading !== 'boolean') {
-  //     console.error('Invalid argument type for setLoader: Expected boolean');
-  //     return;
-  //   }
-  //   setState((prev) => ({ ...prev, isLoading }));
-  // };
+  useEffect(() => {
+    const completed = !Object.values(loadingStatus).some(
+      (status) => status === true || status instanceof Error
+    );
+    if (completed) {
+      handleSnackBar({
+        message: `Loading ${loadingStatus.loadingType} completed`,
+        severity: 'success',
+      });
+    }
+  }, [loadingStatus, handleSnackBar]);
 
   const value = {
-    isPageLoading,
-    pageError,
-    error,
-    isLoading,
-    loadingTimeoutExpired,
-    displayErrorIndicator,
-    displayLoadingIndicator,
-    displaySplashPage,
-    handleLoadingTimeout,
-    clearLoadingTimeout,
-
-    setIsPageLoading,
-    setIsLoading,
-    setLoadingTimeoutExpired,
-    setError,
-    setPageError,
-    handleError,
-    clearError,
-    logPageData,
+    loadingStatus,
+    activelyLoading,
+    setActivelyLoading,
+    returnDisplay,
+    setLoading,
+    setError: (error) => setLoadingStatus((prev) => ({ ...prev, error })),
+    setPageError: (error) =>
+      setLoadingStatus((prev) => ({ ...prev, error, isPageLoading: false })),
+    setIsLoading: (status) => setLoading('isLoading', status),
+    setIsDataLoading: (status) => setLoading('isDataLoading', status),
+    setIsFormDataLoading: (status) => setLoading('isFormDataLoading', status),
+    setIsPageLoading: (status) => setLoading('isPageLoading', status),
+    setLoadingTimeoutExpired: (status) =>
+      setLoadingStatus((prev) => ({ ...prev, loadingTimeoutExpired: status })),
+    handleLoadingTimeout: () =>
+      setLoadingStatus((prev) => ({
+        ...prev,
+        loadingTimeoutExpired: true,
+        isPageLoading: false,
+      })),
+    logPageData: (pageName, data) => {
+      console.log(
+        '----------------------------------------------------------------------------------------------------'
+      );
+      console.log(
+        `| [SUCCESS] Received data of type: ${typeof data} in ${pageName}] |`
+      );
+      console.log(
+        '----------------------------------------------------------------------------------------------------'
+      );
+      if (data === null || data === undefined) {
+        console.log(
+          '----------------------------------------------------------------------------------------------------'
+        );
+        console.warn(
+          `[Warning] Received null or undefined data in ${pageName}`
+        );
+        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 ${pageName}`
+        );
+        console.log(
+          '----------------------------------------------------------------------------------------------------'
+        );
+        return false;
+      }
+      return true;
+    },
   };
 
   return <PageContext.Provider value={value}>{children}</PageContext.Provider>;
 };
-
-export default PageProvider;
diff --git a/src/context/Providers.jsx b/src/context/Providers.jsx
new file mode 100644
index 0000000..1f84520
--- /dev/null
+++ b/src/context/Providers.jsx
@@ -0,0 +1,95 @@
+// Providers.jsx
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { ThemeProvider } from '@mui/styles';
+import GlobalStyles from '../assets/GlobalStyles';
+import {
+  AuthProvider,
+  CartProvider,
+  DeckProvider,
+  CardProvider,
+  CollectionProvider,
+  ModalProvider,
+  UserProvider,
+  CombinedProvider,
+  ColorModeProvider,
+  SocketProvider,
+  SidebarProvider,
+  ChartProvider,
+  AppContextProvider,
+  PopoverProvider,
+  CronJobProvider,
+  StatisticsProvider,
+  FormProvider,
+  useMode,
+  PageProvider,
+  ErrorBoundary,
+  CardImagesProvider,
+  // CardImagesProvider, // Uncomment if CardImagesProvider is used
+} from '.'; // Ensure this path is correctly pointing to where your context providers are defined
+
+const Providers = ({ children }) => {
+  const { theme } = useMode();
+  const stripePromise = loadStripe(
+    process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY
+  );
+
+  return (
+    <ErrorBoundary>
+      <Router>
+        <PageProvider>
+          <AuthProvider>
+            <FormProvider>
+              <ColorModeProvider>
+                <SocketProvider>
+                  <UserProvider>
+                    <ModalProvider>
+                      <PopoverProvider>
+                        <CollectionProvider>
+                          <CombinedProvider>
+                            <CardProvider>
+                              <CronJobProvider>
+                                <DeckProvider>
+                                  <CartProvider>
+                                    <CardImagesProvider>
+                                      <ThemeProvider theme={theme}>
+                                        <ChartProvider>
+                                          <StatisticsProvider>
+                                            <SidebarProvider>
+                                              <AppContextProvider>
+                                                {/* <PageProvider> */}
+                                                <GlobalStyles />
+                                                <Elements
+                                                  stripe={stripePromise}
+                                                >
+                                                  {children}{' '}
+                                                </Elements>
+                                                {/* </PageProvider> */}
+                                              </AppContextProvider>
+                                            </SidebarProvider>
+                                          </StatisticsProvider>
+                                        </ChartProvider>
+                                      </ThemeProvider>
+                                    </CardImagesProvider>
+                                  </CartProvider>
+                                </DeckProvider>
+                              </CronJobProvider>
+                            </CardProvider>
+                          </CombinedProvider>
+                        </CollectionProvider>
+                      </PopoverProvider>
+                    </ModalProvider>
+                  </UserProvider>
+                </SocketProvider>
+              </ColorModeProvider>
+            </FormProvider>
+          </AuthProvider>
+        </PageProvider>
+      </Router>
+    </ErrorBoundary>
+  );
+};
+
+export default Providers;
diff --git a/src/context/SideBarContext/SideBarProvider.jsx b/src/context/SideBarContext/SideBarProvider.jsx
index c12f22b..34fa916 100644
--- a/src/context/SideBarContext/SideBarProvider.jsx
+++ b/src/context/SideBarContext/SideBarProvider.jsx
@@ -1,10 +1,11 @@
 import React, { createContext, useContext, useState } from 'react';
+import { useAuthContext } from '../AuthContext/authContext';
 
 const SidebarContext = createContext();
 
 export const SidebarProvider = ({ children }) => {
+  const { login, logout, isLoggedIn } = useAuthContext();
   const [isOpen, setIsOpen] = useState(false);
-  const [isLoggedIn, setisLoggedIn] = useState(false);
   const [sidebarBackgroundColor, setSidebarBackgroundColor] =
     useState('#FFFFFF');
   const [sidebarImage, setSidebarImage] = useState(null);
@@ -13,14 +14,6 @@ export const SidebarProvider = ({ children }) => {
     setIsOpen(!isOpen);
   };
 
-  const login = () => {
-    setisLoggedIn(true);
-  };
-
-  const logout = () => {
-    setisLoggedIn(false);
-  };
-
   return (
     <SidebarContext.Provider
       value={{
diff --git a/src/context/StatisticsContext/StatisticsContext.jsx b/src/context/StatisticsContext/StatisticsContext.jsx
index 8b5ae72..b787e94 100644
--- a/src/context/StatisticsContext/StatisticsContext.jsx
+++ b/src/context/StatisticsContext/StatisticsContext.jsx
@@ -10,23 +10,76 @@ export const useStatisticsStore = () => useContext(StatisticsContext);
 export const StatisticsProvider = ({ children }) => {
   const { timeRange } = useChartContext();
   const { allCollections, allXYValues } = useCollectionStore();
+  const [selectedStat, setSelectedStat] = useState('');
 
+  // memoized status regarding the price history of a user's collection
   const stats = useMemo(
-    () => calculateStatistics({ data: allXYValues }, timeRange),
+    () => calculateStatistics({ data: allXYValues }, timeRange, allCollections),
     [allXYValues, timeRange]
   );
 
+  // memoized stats regarding the price history of all of a user's collections
   const statsByCollectionId = useMemo(() => {
-    return allCollections.reduce((acc, collection) => {
+    return allCollections?.reduce((acc, collection) => {
       // Assuming each collection has its own 'currentChartDataSets2'
       const data = collection?.chartData?.allXYValues;
       acc[collection._id] = calculateStatistics({ data }, timeRange);
       return acc;
     }, {});
   }, [allCollections, timeRange]);
+  // Prepare markers for high and low points
+  const markers = [
+    {
+      axis: 'y',
+      value: statsByCollectionId?.highPoint,
+      lineStyle: { stroke: '#b0413e', strokeWidth: 2 },
+      legend: 'High Point',
+      legendOrientation: 'vertical',
+    },
+    {
+      axis: 'y',
+      value: statsByCollectionId?.lowPoint,
+      lineStyle: { stroke: '#b0413e', strokeWidth: 2 },
+      legend: 'Low Point',
+      legendOrientation: 'vertical',
+    },
+    {
+      axis: 'y',
+      value: statsByCollectionId?.average,
+      lineStyle: { stroke: '#b0413e', strokeWidth: 2 },
+      legend: 'Average',
+      legendOrientation: 'vertical',
+    },
+  ];
+
+  // Calculate the total value of all collections
+  const totalValue = allCollections?.reduce(
+    (acc, collection) => acc + collection.totalPrice,
+    0
+  );
+  const topFiveCards = allCollections
+    .flatMap((collection) => collection.cards) // Flatten all cards into one array
+    .sort((a, b) => b.price - a.price) // Sort by price in descending order
+    .slice(0, 5);
+  const chartData = allCollections?.map((collection) => ({
+    id: collection.id,
+    value: collection.totalPrice,
+    label: collection.name,
+  }));
 
   return (
-    <StatisticsContext.Provider value={{ stats, statsByCollectionId }}>
+    <StatisticsContext.Provider
+      value={{
+        stats,
+        statsByCollectionId,
+        setSelectedStat,
+        selectedStat,
+        markers,
+        totalValue,
+        topFiveCards,
+        chartData,
+      }}
+    >
       {children}
     </StatisticsContext.Provider>
   );
diff --git a/src/context/StatisticsContext/helpers.jsx b/src/context/StatisticsContext/helpers.jsx
index ff40045..c628843 100644
--- a/src/context/StatisticsContext/helpers.jsx
+++ b/src/context/StatisticsContext/helpers.jsx
@@ -39,40 +39,52 @@ export const calculatePriceChanges = (data) => {
   return [];
 };
 
-export const calculateStatistics = (data, timeRange) => {
+const getTopCollection = (collections) => {
+  return collections?.reduce(
+    (max, collection) =>
+      max.totalPrice > collection.totalPrice ? max : collection,
+    collections[0]
+  );
+};
+
+const getTopCard = (cards) => {
+  return cards?.reduce(
+    (max, card) => (max.price > card.price ? max : card),
+    cards[0]
+  );
+};
+
+const calculateTotalPriceOfAllCollections = (collections) => {
+  return collections
+    ?.reduce((total, collection) => total + collection.totalPrice, 0)
+    .toFixed(2);
+};
+
+export const calculateStatistics = (data, timeRange, allCollections, cards) => {
   if (!data || !Array.isArray(data.data) || 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) {
-    // console.log('data', data);
-    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);
-  }
+
+  let highPoint = Math.max(...filteredData.map((item) => item.y));
+  let lowPoint = Math.min(...filteredData.map((item) => item.y));
+  let sum = filteredData.reduce((acc, curr) => acc + curr.y, 0);
+  let averageData = calculatePriceChanges(filteredData);
+  let average = sum / filteredData.length || 0;
+  let volume = filteredData.length;
+  let mean = sum / volume;
+  let squaredDiffs = filteredData.map((item) => {
+    const diff = item.y - mean;
+    return diff * diff;
+  });
+  let volatility = Math.sqrt(squaredDiffs.reduce((a, b) => a + b, 0) / volume);
+
+  const topCollection = getTopCollection(allCollections);
+  const topCard = getTopCard(cards);
+  const totalPriceAllCollections =
+    calculateTotalPriceOfAllCollections(allCollections);
 
   return {
     highPoint: highPoint.toFixed(2),
@@ -86,8 +98,13 @@ export const calculateStatistics = (data, timeRange) => {
       percentageChange: averageData[0]?.percentageChange,
       priceIncreased: averageData[0]?.priceIncreased,
     },
-    average: average?.toFixed(2),
+    average: average.toFixed(2),
     volume,
-    volatility: volatility?.toFixed(2),
+    volatility: volatility.toFixed(2),
+    general: {
+      totalPrice: totalPriceAllCollections,
+      topCard: topCard?.name, // or any other identifier for the card
+      topCollection: topCollection?.name, // or any other identifier for the collection
+    },
   };
 };
diff --git a/src/context/UserContext/UserContext.js b/src/context/UserContext/UserContext.js
index 61f767f..c8204e6 100644
--- a/src/context/UserContext/UserContext.js
+++ b/src/context/UserContext/UserContext.js
@@ -7,47 +7,70 @@ import React, {
 } from 'react';
 import { useCookies } from 'react-cookie';
 import { useAuthContext } from '../hooks/auth';
-import { useCollectionStore } from '../CollectionContext/CollectionContext';
-
+import { createUrl } from '../Helpers';
+import useFetchWrapper from '../hooks/useFetchWrapper';
 export const UserContext = createContext();
 
 export const UserProvider = ({ children }) => {
-  const [cookies, setCookie] = useCookies(['user']);
-  const [isCronJobTriggered, setIsCronJobTriggered] = useState(false);
-  const [allCollections, setAllCollections] = useState([]);
-  const { authUser, setUser } = useAuthContext(); // Use the useAuthContext hook
+  const { setUser, isLoggedIn } = useAuthContext(); // Use the useAuthContext hook
+  const [cookies, setCookie] = useCookies(['authUser', 'user']);
+  const fetchWrapper = useFetchWrapper();
+  const authUser = cookies?.authUser;
+  const user = cookies?.user;
+  const userId = cookies?.authUser?.userId;
+  const fetchUserData = useCallback(async () => {
+    // Get request to fetch user data
+    const endpoint = `/users/${userId}/userData`;
+    const url = createUrl(endpoint);
+    const response = await fetchWrapper(url, 'GET');
+    const { message, data } = response;
+    console.log('Response from server for fetch user:', message, data);
+    // setUser(data.userDoc);
+    // const response = await fetchWrapper.get(`/api/users/${userId}`);
+    // const userData = response.data;
+  }, []);
 
-  const triggerCronJob = async () => {
-    // Add your code here
+  const updateUser = async (updatedUser) => {
+    try {
+      console.log('User Data Sent to Server:', updatedUser);
+      const endpoint = `users/${userId}/userData/update`;
+      const url = createUrl(endpoint);
+      const response = await fetchWrapper(url, 'PUT', updatedUser);
+      const { message, data } = response;
+      console.log('Response from server for update user:', message, data);
+      setUser(data.updatedUserDoc);
+      console.log('User Data Sent to Server and Cookie Updated:', updatedUser);
+    } catch (error) {
+      console.error('Error updating user data:', error);
+    }
   };
 
   useEffect(() => {
-    const userId = authUser?.id;
-    const username = authUser?.username;
     if (userId) {
-      const updatedUser = { userId, username };
-      setUser(updatedUser);
+      console.log('User ID found, fetching user data...', cookies.user);
+      const updatedUser = {
+        ...user,
+        userSecurityData: {
+          ...user.userSecurityData,
+          userId: userId,
+        },
+        userBasicData: {
+          ...user.userBasicData,
+          userId: userId,
+        },
+      };
+      updateUser(updatedUser);
     }
-  }, [cookies]);
-
-  const updateUser = (userData) => {
-    setUser(userData);
-    setCookie('user', userData, { path: '/' });
-    console.log('User Data Sent to Server and Cookie Updated:', userData);
-  };
+  }, [userId]);
 
   return (
     <UserContext.Provider
       value={{
-        user: authUser,
-        userId: authUser.id,
+        user: user,
+        userId: authUser?.userId,
         setUser,
-        allCollections,
-        setCookie,
         updateUser,
-        triggerCronJob,
-        isCronJobTriggered,
-        setIsCronJobTriggered,
+        getUserData: fetchUserData,
       }}
     >
       {children}
diff --git a/src/context/WithPageProvider.jsx b/src/context/WithPageProvider.jsx
new file mode 100644
index 0000000..cece8d3
--- /dev/null
+++ b/src/context/WithPageProvider.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormProvider, PageProvider } from '.';
+
+// Higher Order Component for PageProvider
+const WithPageProvider = (WrappedComponent) => {
+  const WithPageProvider = (props) => {
+    return (
+      <FormProvider>
+        <PageProvider>
+          <WrappedComponent {...props} />
+        </PageProvider>
+      </FormProvider>
+    );
+  };
+  return WithPageProvider;
+};
+
+export default WithPageProvider;
diff --git a/src/context/hooks/useCardListStyles.jsx b/src/context/hooks/useCardListStyles.jsx
index 54cb43f..72fdc32 100644
--- a/src/context/hooks/useCardListStyles.jsx
+++ b/src/context/hooks/useCardListStyles.jsx
@@ -12,11 +12,12 @@ const useCardListStyles = () => {
   const StyledContainer = styled(Container)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    height: '100%',
+    height: '120%',
     width: '100%',
+    maxWidth: '100%',
     alignItems: 'center',
     // background: theme.palette.background.main,
-    background: theme.palette.background.dark,
+    background: theme.palette.backgroundA.dark,
     padding: theme.spacing(2),
     color: '#fff', // White text color
     // padding: 2,
@@ -34,11 +35,23 @@ const useCardListStyles = () => {
     boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
   }));
   const StyledTableHeader = styled(TableHead)(({ theme }) => ({
-    backgroundColor: '#555', // Darker shade for header
+    background: theme.palette.backgroundB.lightest,
     color: theme.palette.success.main,
   }));
   const StyledTableCell = styled(TableCell)(({ theme }) => ({
-    color: '#ddd', // Lighter text for better readability
+    // color: '#ddd', // Lighter text for better readability
+    border: '1px solid',
+    borderColor: theme.palette.backgroundB.lightest,
+    [theme.breakpoints.up('md')]: {
+      // Styles that apply to medium screens and larger
+      padding: theme.spacing(2), // example of increasing padding
+      fontSize: '1rem', // example of increasing font size
+    },
+    [theme.breakpoints.down('sm')]: {
+      // Styles that apply to small screens and smaller
+      padding: theme.spacing(1), // example of decreasing padding
+      fontSize: '0.8rem', // example of decreasing font size
+    },
   }));
 
   // Return all styled components
diff --git a/src/context/hooks/useCollectionPageView.jsx b/src/context/hooks/useCollectionPageView.jsx
new file mode 100644
index 0000000..4e800e3
--- /dev/null
+++ b/src/context/hooks/useCollectionPageView.jsx
@@ -0,0 +1,18 @@
+// useCollectionViews.js
+import { useState, useCallback } from 'react';
+
+const useCollectionViews = () => {
+  const [isCollectionView, setIsCollectionView] = useState(true);
+
+  const showCollectionView = useCallback(() => {
+    setIsCollectionView(true);
+  }, []);
+
+  const showCollectionContent = useCallback(() => {
+    setIsCollectionView(false);
+  }, []);
+
+  return { isCollectionView, showCollectionView, showCollectionContent };
+};
+
+export default useCollectionViews;
diff --git a/src/context/hooks/useDialog.jsx b/src/context/hooks/useDialog.jsx
index 5208849..a0a27c8 100644
--- a/src/context/hooks/useDialog.jsx
+++ b/src/context/hooks/useDialog.jsx
@@ -1,32 +1,197 @@
-// 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.');
+import { useState, useCallback, useEffect } from 'react';
+
+const useDialog = (handleSnackBar) => {
+  const [isLoginDialogOpen, setLoginDialogOpen] = useState(false);
+  const [dialogStatus, setDialogStatus] = useState({
+    isOpen: false,
+    event: '',
+  });
+  const [dialogs, setDialogs] = useState({});
+
+  // Function to open a dialog
+  const openDialog = useCallback(
+    (dialogName, action) => {
+      setDialogs((prevDialogs) => ({
+        ...prevDialogs,
+        [dialogName]: true,
+      }));
+      setLoginDialogOpen(true);
+      console.log(`${dialogName} Dialog attempting ${action}`);
+      handleSnackBar(`${dialogName} Dialog attempting ${action}`, 'info', 6000);
+      // console.log(`${dialogName} Dialog Status: Open`);
+    },
+    [handleSnackBar]
+  );
+
+  // Function to close a dialog
+  const closeDialog = useCallback(
+    (dialogName, action, reason) => {
+      if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
+        handleSnackBar(
+          'Operation cancelled, no changes were made.',
+          'warning',
+          6000
+        );
+      } else {
+        setLoginDialogOpen(false);
+        console.log(`${dialogName} Dialog attempting ${action}`);
+        handleSnackBar(
+          `${dialogName} Dialog attempting ${action}`,
+          'info',
+          6000
+        );
+        // console.log(`${dialogName} Dialog Status: Closed`);
       }
-      closeDialog();
+      setDialogs((prevDialogs) => ({
+        ...prevDialogs,
+        [dialogName]: false,
+      }));
     },
-    [closeDialog, handleSnackbar]
+    [handleSnackBar]
   );
 
-  return { isOpen, openDialog, handleCloseDialog, closeDialog };
+  // Track dialog status changes
+  useEffect(() => {
+    Object.entries(dialogs).forEach(([dialogName, isOpen]) => {
+      console.log(`${dialogName} Dialog Status: ${isOpen ? 'Open' : 'Closed'}`);
+    });
+  }, [dialogs]);
+
+  return {
+    isLoginDialogOpen,
+    openLoginDialog: () => openDialog('Login', 'Open'),
+    closeLoginDialog: (event, reason) => closeDialog('Login', 'Close', reason),
+  };
 };
 
 export default useDialog;
+// // console.log('isLoggedIn:', isLoggedIn);
+// console.log('isLoginDialogOpen:', isLoginDialogOpen);
+// // console.log('handleSnackBar:', handleSnackBar);
+// // useEffect(() => {
+// //   if (!isLoggedIn && isLoginDialogOpen) {
+// //     handleSnackBar('Please log in to continue', 'info');
+// //   }
+// // }, [isLoggedIn, isLoginDialogOpen, handleSnackBar]);
+
+// // const handleToggleLoginDialog = useCallback(
+// //   (event) => {
+// //     if (event === 'Open') {
+// //       setLoginDialogOpen(true);
+// //       handleSnackBar('Opening login dialog...', 'info');
+// //     } else if (event === 'Close') {
+// //       setLoginDialogOpen(false);
+// //       handleSnackBar('Closing login dialog...', 'info');
+// //     } else {
+// //       // Handle backdrop click or escape key down, or toggle dialog for other cases
+// //       if (event === 'backdropClick' || event === 'escapeKeyDown') {
+// //         handleSnackBar(
+// //           'Operation cancelled, no changes were made.',
+// //           'warning'
+// //         );
+// //       } else {
+// //         setLoginDialogOpen((prev) => {
+// //           const newStatus = !prev;
+// //           handleSnackBar(
+// //             newStatus ? 'Dialog opened' : 'Dialog closed',
+// //             'info'
+// //           );
+// //           return newStatus;
+// //         });
+// //       }
+// //     }
+// //   },
+// //   [handleSnackBar]
+// // );
+// const openLoginDialog = useCallback(() => {
+//   setLoginDialogOpen(true);
+//   handleSnackBar('Login Dialog opened', 'info', 6000); // Notify on dialog open
+// }, [handleSnackBar]);
+
+// const closeLoginDialog = useCallback(
+//   (event, reason) => {
+//     if (
+//       reason &&
+//       (reason === 'backdropClick' || reason === 'escapeKeyDown')
+//     ) {
+//       handleSnackBar(
+//         'Operation cancelled, no changes were made.',
+//         'warning',
+//         6000
+//       );
+//     } else {
+//       handleSnackBar('Login Dialog closed', 'info', 6000); // Notify on dialog close
+//     }
+//     setLoginDialogOpen(false);
+//   },
+//   [handleSnackBar]
+// );
+
+// useEffect(() => {
+//   if (isLoginDialogOpen) {
+//     setDialogStatus({ isOpen: true, event: 'Open' });
+//     console.log('Dialog Successfully Opened');
+//   }
+//   if (!isLoginDialogOpen) {
+//     setDialogStatus({ isOpen: false, event: 'Close' });
+//     console.log('Dialog Successfully Closed');
+//   }
+
+//   if (dialogStatus.event === 'Open') {
+//     handleSnackBar('Login Dialog opened', 'info', 6000); // Notify on dialog open
+//   }
+//   if (dialogStatus.event === 'Close') {
+//     handleSnackBar('Login Dialog closed', 'info', 6000); // Notify on dialog close
+//   }
+// });
+// const [isOpen, setIsOpen] = useState(false);
+
+// const openDialog = useCallback(() => {
+//   setIsOpen(true);
+// }, []);
+
+// const closeDialog = useCallback(() => {
+//   setIsOpen(false);
+//   onClose?.();
+// }, [onClose]);
+
+// const openLoginDialog = useCallback(() => {
+//   setLoginDialogOpen(true);
+// }, []);
+
+// const closeLoginDialog = useCallback(() => {
+//   setLoginDialogOpen(false);
+// }, []);
+
+// toggleLoginDialog combines openLoginDialog and closeLoginDialog
+// const handleCloseDialog = useCallback(
+//   (event, reason) => {
+//     if (
+//       reason &&
+//       (reason === 'backdropClick' || reason === 'escapeKeyDown')
+//     ) {
+//       handleSnackBar('Operation cancelled, no changes were made.');
+//     }
+//     closeDialog();
+//   },
+//   [closeDialog, handleSnackBar]
+// );
+
+// example usage of handleToggleLoginDialog:
+// <LoginDialog
+//   open={isLoginDialogOpen}
+//   onClose={handleToggleLoginDialog}
+//   onLogin={handleToggleLoginDialog}
+// />
+// const handleCloseLoginDialog = useCallback(
+//   (event, reason) => {
+//     if (
+//       reason &&
+//       (reason === 'backdropClick' || reason === 'escapeKeyDown')
+//     ) {
+//       handleSnackBar('Operation cancelled, no changes were made.');
+//     }
+//     toggleLoginDialog();
+//   },
+//   [toggleLoginDialog, handleSnackBar]
+// );
diff --git a/src/context/hooks/useFetchAndDisplayImage.jsx b/src/context/hooks/useFetchAndDisplayImage.jsx
new file mode 100644
index 0000000..7770f36
--- /dev/null
+++ b/src/context/hooks/useFetchAndDisplayImage.jsx
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useCardImages } from '../CardImagesContext/CardImagesContext';
+
+function useFetchAndDisplayImage(imageUrl) {
+  const { downloadCardImage } = useCardImages();
+  const [imageSrc, setImageSrc] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!imageUrl) return;
+
+    setLoading(true); // Indicate the start of an image download
+    downloadCardImage(imageUrl) // This function should handle the API request
+      .then((downloadedImgUrl) => {
+        setImageSrc(downloadedImgUrl); // Update state with the new image URL
+        setLoading(false); // Indicate that the image download is complete
+      })
+      .catch((error) => {
+        console.error('Error fetching image:', error);
+        setError(error);
+        setLoading(false); // Indicate that the image download is complete even if there was an error
+      });
+  }, [imageUrl, downloadCardImage]); // Dependency array includes downloadCardImage to handle updates to the function
+
+  return { imageSrc, error, loading };
+}
+
+export default useFetchAndDisplayImage;
diff --git a/src/context/hooks/useFetchWrapper.jsx b/src/context/hooks/useFetchWrapper.jsx
new file mode 100644
index 0000000..b2e086e
--- /dev/null
+++ b/src/context/hooks/useFetchWrapper.jsx
@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import useSnackBar from './useSnackBar';
+
+const useFetchWrapper = () => {
+  const handleSnackBar = useSnackBar()[1];
+
+  const fetchWrapper = useCallback(
+    async (url, method, body = null) => {
+      const options = {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        ...(body && { body: JSON.stringify(body) }),
+      };
+
+      try {
+        handleSnackBar('Loading data...', 'info'); // Notify user data is loading
+        const response = await fetch(url, options);
+        if (!response.ok) {
+          // Handle non-ok responses immediately
+          const errorMsg = `API request failed with status: ${response.status} ${response.statusText}`;
+          handleSnackBar(errorMsg, 'error'); // Notify user of the error
+          throw new Error(errorMsg);
+        }
+        const data = await response.json(); // Parse the JSON response
+        handleSnackBar('Data loaded successfully!', 'success'); // Notify user of success
+        return data;
+      } catch (error) {
+        console.error(`Fetch failed: ${error}`);
+        handleSnackBar(`Error: ${error.message}`, 'error'); // Notify user of the error
+        throw error; // Re-throwing the error for upstream catch blocks to handle
+      }
+    },
+    [handleSnackBar]
+  );
+
+  return fetchWrapper;
+};
+
+export default useFetchWrapper;
diff --git a/src/context/hooks/useLoginForm.jsx b/src/context/hooks/useLoginForm.jsx
index f18fe30..0ee3412 100644
--- a/src/context/hooks/useLoginForm.jsx
+++ b/src/context/hooks/useLoginForm.jsx
@@ -1,72 +1,72 @@
-import { useState } from 'react';
-import { useCookies } from 'react-cookie';
-import { useAuthContext } from '../../context/hooks/auth';
+// import { useState } from 'react';
+// import { useCookies } from 'react-cookie';
+// import { useAuthContext } from '../../context/hooks/auth';
 
-export const useLoginForm = (onLogin) => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [email, setEmail] = useState('');
-  const [name, setName] = useState('');
-  const [roleData, setRoleData] = useState('admin');
-  const [signupMode, setSignupMode] = useState(false);
+// export const useLoginForm = (onLogin) => {
+//   const [username, setUsername] = useState('');
+//   const [password, setPassword] = useState('');
+//   const [email, setEmail] = useState('');
+//   const [name, setName] = useState('');
+//   const [roleData, setRoleData] = useState('admin');
+//   const [signupMode, setSignupMode] = useState(false);
 
-  const { signup, login, logout, isLoggedIn, error, isLoading } =
-    useAuthContext();
-  const [cookies, setCookie, removeCookie] = useCookies([
-    'isLoggedIn',
-    'userId',
-  ]);
+//   const { signup, login, logout, isLoggedIn, error, isLoading } =
+//     useAuthContext();
+//   const [cookies, setCookie, removeCookie] = useCookies([
+//     'isLoggedIn',
+//     'userId',
+//   ]);
 
-  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 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;
+//   const handleSubmit = async (e) => {
+//     e.preventDefault();
+//     try {
+//       let response = null;
 
-      if (signupMode) {
-        response = await signup(username, password, email, name, roleData);
-      } else {
-        response = await login(username, password);
-      }
+//       if (signupMode) {
+//         response = await signup(username, password, email, name, roleData);
+//       } else {
+//         response = await login(username, password);
+//       }
 
-      if (response?.loggedIn) {
-        setLoginState(true, response.userId);
-      }
-    } catch (error) {
-      console.error('Login failed:', error);
-    }
-  };
+//       if (response?.loggedIn) {
+//         setLoginState(true, response.userId);
+//       }
+//     } catch (error) {
+//       console.error('Login failed:', error);
+//     }
+//   };
 
-  const handleLogout = () => {
-    removeCookie('userId', { path: '/' });
-    logout();
-  };
+//   const handleLogout = () => {
+//     removeCookie('userId', { path: '/' });
+//     logout();
+//   };
 
-  return {
-    username,
-    setUsername,
-    password,
-    setPassword,
-    email,
-    setEmail,
-    name,
-    setName,
-    roleData,
-    setRoleData,
-    signupMode,
-    setSignupMode,
-    handleSubmit,
-    handleLogout,
-    isLoggedIn,
-    error,
-    isLoading,
-    cookies,
-  };
-};
+//   return {
+//     username,
+//     setUsername,
+//     password,
+//     setPassword,
+//     email,
+//     setEmail,
+//     name,
+//     setName,
+//     roleData,
+//     setRoleData,
+//     signupMode,
+//     setSignupMode,
+//     handleSubmit,
+//     handleLogout,
+//     isLoggedIn,
+//     error,
+//     isLoading,
+//     cookies,
+//   };
+// };
diff --git a/src/context/hooks/usePortfolioStyles.jsx b/src/context/hooks/usePortfolioStyles.jsx
index e4bfacd..acf1da1 100644
--- a/src/context/hooks/usePortfolioStyles.jsx
+++ b/src/context/hooks/usePortfolioStyles.jsx
@@ -14,7 +14,33 @@ export const usePortfolioStyles = makeStyles((theme) => ({
   //   backgroundColor: theme.palette.background.paper,
   //   color: theme.palette.text.primary,
   // },
-
+  statisticPaper: {
+    padding: theme.spacing(2),
+    margin: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'center',
+    minHeight: '100%',
+    height: '100%',
+    width: '100%',
+    boxShadow: theme.shadows[3],
+  },
+  statisticHeader: {
+    marginBottom: theme.spacing(1),
+    fontWeight: 'bold',
+    color: theme.palette.secondary.main,
+  },
+  statisticsContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    height: '100%',
+    width: '100%',
+  },
   paper: {
     background: theme.palette.backgroundD.darkest,
     color: theme.palette.text.primary,
@@ -31,53 +57,25 @@ export const usePortfolioStyles = makeStyles((theme) => ({
     },
     borderRadius: theme.shape.borderRadius,
   },
-  // paper: {
-  //   background: theme.palette.background.main,
-  //   color: theme.palette.text.primary,
-  //   display: 'flex',
-  //   justifyContent: 'center',
-  //   flexDirection: 'column',
-  //   margin: 'auto',
-  //   width: '100%',
-  //   padding: theme.spacing(1, 2),
-  //   borderRadius: theme.shape.borderRadius,
-  // },
-  // portfolioBox: {
-  //   display: 'flex',
-  //   flexDirection: 'column',
-  //   justifyContent: 'center',
-  //   alignItems: 'center',
-  //   maxWidth: '100vw',
-  //   width: '100%',
-  //   height: '100%',
-  //   margin: { xs: 0, sm: 'auto', md: 'auto', lg: 'auto' },
-  //   padding: { xs: 1, sm: 2, md: 3, lg: 3 },
-  //   backgroundColor: theme.palette.background.paper,
-  //   color: theme.palette.text.primary,
-  // },
-  // paper: {
-  //   background: theme.palette.background.main,
-  //   color: theme.palette.text.primary,
-  //   display: 'flex',
-  //   justifyContent: 'center',
-  //   flexDirection: 'column',
-  //   margin: 'auto',
-  //   width: '100%',
-  //   padding: { xs: 1, sm: 1, md: 2, lg: 2 },
-  //   borderRadius: theme.shape.borderRadius,
-  // },
+
   gridContainer: {
     width: '100%',
     alignItems: 'center',
     justifyContent: 'space-between',
-    padding: theme.spacing(1),
-    // backgroundColor: theme.palette.background.quinternary,
-    background: theme.palette.backgroundB.lighter,
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.background.quaternary,
+    borderRadius: theme.shape.borderRadius,
+    border: '3px solid',
+    borderColor: theme.palette.backgroundB.lightest,
+
+    // color: theme.palette.text.primary,
+    // background: theme.palette.backgroundB.lighter,
   },
   gridItem: {
     display: 'flex',
     justifyContent: 'flex-end',
     background: theme.palette.success.main,
+    borderRadius: theme.shape.borderRadius,
   },
   portfolioBox: {
     display: 'flex',
@@ -105,9 +103,9 @@ export const usePortfolioStyles = makeStyles((theme) => ({
     // background: theme.palette.success.main,
     background: theme.palette.backgroundD.dark,
     padding: theme.spacing(4),
-    height: 'auto',
+    // height: 'auto',
     width: '100%',
-    // height: '100%',
+    height: '100%',
     boxShadow: theme.shadows[5],
     [theme.breakpoints.down('sm')]: {
       padding: theme.spacing(2),
@@ -123,18 +121,8 @@ export const usePortfolioStyles = makeStyles((theme) => ({
       fontSize: '1.25rem',
     },
   },
-  button: {
-    margin: theme.spacing(1),
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.getContrastText(theme.palette.primary.main),
-    transition: 'background-color 0.3s',
-    '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
-      // Elevate button on hover
-      boxShadow: theme.shadows[2],
-    },
-  },
+
+  // Add more custom styles as needed
   // gridContainer: {
   //   width: '100%',
   //   alignItems: 'center',
@@ -189,6 +177,129 @@ export const usePortfolioStyles = makeStyles((theme) => ({
     maxWidth: '100%',
     maxHeight: '100%',
   },
+
+  // OFFICIAL UPDATED STYLES
+  cardListContainerBox: {
+    maxWidth: '100%',
+    background: theme.palette.backgroundB.dark,
+    borderRadius: theme.shape.borderRadius,
+    width: {
+      xs: '100%', // Full width on mobile screens
+      md: '100%',
+    },
+    padding: theme.spacing(4),
+  },
+  cardListContainerGrid: {
+    // background: theme.palette.backgroundB.default,
+    maxHeight: '100%',
+    width: '100%',
+  },
+  tablePaper: {
+    maxWidth: 'lg',
+    margin: 'auto',
+    overflowX: 'auto', // Ensures table doesn't overflow the paper
+    background: theme.palette.backgroundB.default,
+    padding: theme.spacing(2),
+    [theme.breakpoints.up('xs')]: {
+      padding: theme.spacing(1), // Smaller padding for xs
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: theme.spacing(2), // Medium padding for sm
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2), // Larger padding for md
+    },
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(2), // Extra larger padding for lg
+    },
+    [theme.breakpoints.up('xl')]: {
+      padding: theme.spacing(2), // Maximum padding for xl
+    },
+  },
+  tableContainer: {
+    // maxHeight: '60vh',
+    maxWidth: 'lg',
+    overflowY: 'auto', // Allows table to scroll vertically
+    padding: theme.spacing(2),
+    margin: theme.spacing(1),
+    background: theme.palette.backgroundB.light,
+    borderRadius: theme.shape.borderRadius,
+  },
+  table: {
+    minWidth: 300,
+    width: '100%',
+    background: theme.palette.backgroundA.lightest,
+  },
+  tableRow: {
+    // '&:nth-of-type(odd)': {
+    //   background: theme.palette.backgroundA.light,
+    // },
+    // '&:nth-of-type(even)': {
+    //   background: theme.palette.backgroundA.lighter,
+    // },
+  },
+  tableCell: {
+    border: '2px solid',
+    borderColor: theme.palette.divider,
+    // background: theme.palette.backgroundA.light,
+
+    [theme.breakpoints.down('sm')]: {
+      padding: theme.spacing(1),
+      fontSize: '0.7rem',
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2),
+      fontSize: '1rem',
+    },
+  },
+  tableHeader: {
+    background: theme.palette.backgroundA.lighter,
+    color: theme.palette.primary.contrastText,
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1rem',
+    },
+  },
+  tableBody: {
+    background: theme.palette.backgroundA.lightest,
+    border: '2px solid',
+    borderColor: theme.palette.divider,
+  },
+  tableFooter: {
+    background: theme.palette.backgroundA.lighter,
+  },
+  tablePriceBox: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    width: '100%',
+    padding: theme.spacing(2),
+    background: theme.palette.backgroundB.lighter,
+  },
+  buttonGroup: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+  },
+  button: {
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '100%',
+    color: theme.palette.getContrastText(theme.palette.primary.main),
+    backgroundColor: theme.palette.primary.main,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.dark,
+    },
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '0.8rem',
+    },
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1rem',
+    },
+  },
   // Add any other styles from CardPortfolio, PortfolioContent, and SelectCollection components
 }));
 
diff --git a/src/context/hooks/useResponsiveStyles.jsx b/src/context/hooks/useResponsiveStyles.jsx
index 61111e8..6840597 100644
--- a/src/context/hooks/useResponsiveStyles.jsx
+++ b/src/context/hooks/useResponsiveStyles.jsx
@@ -9,6 +9,7 @@ const useResponsiveStyles = (theme) => {
   const isSmallMedium = useMediaQuery(theme.breakpoints.up('sm'));
   const isMedium = useMediaQuery(theme.breakpoints.down('md'));
   const isMediumLarge = useMediaQuery(theme.breakpoints.up('md'));
+  const isMediumExtraLarge = useMediaQuery(theme.breakpoints.up('md'));
   const isLarge = useMediaQuery(theme.breakpoints.up('lg'));
 
   const getTypographyVariant = () => {
@@ -44,7 +45,7 @@ const useResponsiveStyles = (theme) => {
     }
   };
 
-  const getProductGridContainerStyle = () => ({
+  const getProductGridContainerStyle = (theme) => ({
     maxWidth: 'lg',
     maxHeight: '100%',
     display: 'flex',
@@ -109,6 +110,7 @@ const useResponsiveStyles = (theme) => {
     isSmallMedium,
     isMedium,
     isMediumLarge,
+    isMediumExtraLarge,
     isLarge,
     getTypographyVariant,
     getButtonTypographyVariant,
diff --git a/src/context/hooks/useSelectCollectionListStyles.jsx b/src/context/hooks/useSelectCollectionListStyles.jsx
index 970504f..253796f 100644
--- a/src/context/hooks/useSelectCollectionListStyles.jsx
+++ b/src/context/hooks/useSelectCollectionListStyles.jsx
@@ -21,6 +21,35 @@ const useSelectCollectionListStyles = () => {
         backgroundColor: theme.palette.primary.dark,
       },
     },
+    collectionListItem: {
+      backgroundColor: theme.palette.background.paper,
+      transition: theme.transitions.create(['background-color', 'box-shadow']),
+      '&:hover': {
+        backgroundColor: theme.palette.grey[100],
+        boxShadow: theme.shadows[1],
+      },
+      padding: theme.spacing(2),
+    },
+    listItemSkeleton: {
+      margin: theme.spacing(1, 0),
+      borderRadius: theme.shape.borderRadius,
+    },
+    skeletonCard: {
+      width: '100%',
+      borderRadius: theme.shape.borderRadius,
+      // For shimmer effect
+      // eslint-disable-next-line max-len
+      background: `linear-gradient(to right, ${theme.palette.background.paper} 40%, ${theme.palette.grey[300]} 70%, ${theme.palette.background.paper} 100%)`,
+      animation: '$shimmer 2s infinite',
+    },
+    '@keyframes shimmer': {
+      '0%': {
+        backgroundPosition: '-200%',
+      },
+      '100%': {
+        backgroundPosition: '200%',
+      },
+    },
     listItem: {
       position: 'relative', // Added to position the menu button absolutely
       display: 'flex',
diff --git a/src/context/hooks/useSnackBar.jsx b/src/context/hooks/useSnackBar.jsx
index 6978e21..6ac88ce 100644
--- a/src/context/hooks/useSnackBar.jsx
+++ b/src/context/hooks/useSnackBar.jsx
@@ -1,16 +1,32 @@
-// useSnackbar.js
-import { useState, useCallback } from 'react';
+// useSnackBar.js
+import { useState, useCallback, useRef } from 'react';
 
-const useSnackbar = () => {
+const useSnackBar = () => {
   const [snackbar, setSnackbar] = useState({
     open: false,
     message: '',
-    severity: 'info', // default severity
+    severity: 'info',
+    duration: 6000, // default duration
   });
+  const queueRef = useRef([]); // Queue to hold the messages
 
-  const handleSnackbar = useCallback((message, severity = 'info') => {
-    setSnackbar({ open: true, message, severity });
-  }, []);
+  const showNextSnackbar = () => {
+    if (queueRef.current.length > 0) {
+      const nextSnackbar = queueRef.current.shift();
+      setSnackbar({ ...nextSnackbar, open: true });
+    }
+  };
+
+  const handleSnackBar = useCallback(
+    (message, severity = 'info', duration = 6000) => {
+      queueRef.current.push({ message, severity, duration });
+      if (!snackbar.open) {
+        // If no snackbar is currently being displayed, show it immediately.
+        showNextSnackbar();
+      }
+    },
+    [snackbar.open]
+  );
 
   const handleCloseSnackbar = useCallback(
     (event, reason) => {
@@ -18,11 +34,14 @@ const useSnackbar = () => {
         return;
       }
       setSnackbar({ ...snackbar, open: false });
+      showNextSnackbar(); // Show next snackbar if it's in the queue
     },
     [snackbar]
   );
 
-  return [snackbar, handleSnackbar, handleCloseSnackbar];
+  // Additional enhancements can be made to support actions, positioning, etc.
+
+  return [snackbar, handleSnackBar, handleCloseSnackbar];
 };
 
-export default useSnackbar;
+export default useSnackBar;
diff --git a/src/context/index.js b/src/context/index.js
index 21049e9..28f2546 100644
--- a/src/context/index.js
+++ b/src/context/index.js
@@ -17,6 +17,7 @@ export { useCardImages } from './CardImagesContext/CardImagesContext';
 export { useAuthContext } from './AuthContext/authContext';
 export { usePageContext } from './PageContext/PageContext';
 export { useMode } from './hooks/colormode';
+export { useFormContext } from './FormContext/FormContext';
 
 // Contexts
 export { default as ErrorBoundary } from './ErrorBoundary';
@@ -36,4 +37,6 @@ export { AppContextProvider } from './AppContext/AppContextProvider';
 export { PopoverProvider } from './PopoverContext/PopoverContext';
 export { CronJobProvider } from './CronJobContext/CronJobContext';
 export { StatisticsProvider } from './StatisticsContext/StatisticsContext';
+export { FormProvider } from './FormContext/FormContext';
 export { PageProvider } from './PageContext/PageContext';
+export { CardImagesProvider } from './CardImagesContext/CardImagesContext';
diff --git a/src/index.js b/src/index.js
index 2dc40c0..52cd28d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,90 +1,20 @@
+// Main.js or wherever your entry point is
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import GlobalStyles from './assets/GlobalStyles';
+import Providers from './context/Providers'; // Make sure to adjust the path as necessary
 import ErrorBoundary from './context/ErrorBoundary';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { Elements } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
-import { ThemeProvider } from '@mui/styles';
-import {
-  AuthProvider,
-  CartProvider,
-  DeckProvider,
-  CardProvider,
-  CollectionProvider,
-  ModalProvider,
-  UserProvider,
-  CombinedProvider,
-  ColorModeProvider,
-  SocketProvider,
-  SidebarProvider,
-  ChartProvider,
-  AppContextProvider,
-  PopoverProvider,
-  CronJobProvider,
-  StatisticsProvider,
-  useMode,
-  PageProvider,
-  // CardImagesProvider,
-} from './context';
 
 const root = document.getElementById('root');
 
-function Main() {
-  const { theme } = useMode();
-  const stripePromise = loadStripe(
-    process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY
-  );
-
+const AppWrapper = () => {
   return (
     <ErrorBoundary>
-      <Router>
-        <AuthProvider>
-          <ColorModeProvider>
-            <SocketProvider>
-              <UserProvider>
-                <ModalProvider>
-                  <PopoverProvider>
-                    <CollectionProvider>
-                      <CombinedProvider>
-                        <CardProvider>
-                          <CronJobProvider>
-                            <DeckProvider>
-                              <CartProvider>
-                                {/* <CardImagesProvider> */}
-                                <GlobalStyles />
-                                <ThemeProvider theme={theme}>
-                                  <ChartProvider>
-                                    <StatisticsProvider>
-                                      <SidebarProvider>
-                                        <AppContextProvider>
-                                          <PageProvider>
-                                            <Elements stripe={stripePromise}>
-                                              <App />
-                                            </Elements>
-                                          </PageProvider>
-                                        </AppContextProvider>
-                                      </SidebarProvider>
-                                    </StatisticsProvider>
-                                  </ChartProvider>
-                                </ThemeProvider>
-                                {/* </CardImagesProvider> */}
-                              </CartProvider>
-                            </DeckProvider>
-                          </CronJobProvider>
-                        </CardProvider>
-                      </CombinedProvider>
-                    </CollectionProvider>
-                  </PopoverProvider>
-                </ModalProvider>
-              </UserProvider>
-            </SocketProvider>
-          </ColorModeProvider>
-        </AuthProvider>
-      </Router>
+      <Providers>
+        <App />
+      </Providers>
     </ErrorBoundary>
   );
-}
+};
 
-ReactDOM.render(<Main />, root);
+ReactDOM.render(<AppWrapper />, root);
diff --git a/src/components/dialogs/cardDialog/CardDetailsContainer.jsx b/src/layout/CardDetailsContainer.jsx
similarity index 95%
rename from src/components/dialogs/cardDialog/CardDetailsContainer.jsx
rename to src/layout/CardDetailsContainer.jsx
index d476662..2587f16 100644
--- a/src/components/dialogs/cardDialog/CardDetailsContainer.jsx
+++ b/src/layout/CardDetailsContainer.jsx
@@ -8,9 +8,9 @@ import {
   FaVenusMars,
 } from 'react-icons/fa';
 import { GiAxeSword } from 'react-icons/gi';
-import CardDetail from './CardDetail';
+import CardDetail from '../components/cards/CardDetail';
 import { styled } from '@mui/system';
-import { useMode } from '../../../context';
+import { useMode } from '../context';
 
 const IconWrapper = styled('div')(({ theme }) => ({
   display: 'flex',
diff --git a/src/layout/DeckDisplay.js b/src/layout/DeckDisplay.js
deleted file mode 100644
index ed1dddc..0000000
--- a/src/layout/DeckDisplay.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import {
-  Paper,
-  Button,
-  Typography,
-  Box,
-  FormControlLabel,
-  Switch,
-} from '@mui/material';
-import AppsIcon from '@mui/icons-material/Apps';
-import SelectDeckList from '../components/grids/deckBuilderGrids/SelectDeckList';
-import CardsGrid from '../components/grids/deckBuilderGrids/CardsGrid';
-import DeckEditPanel from '../components/other/InputComponents/DeckEditPanel';
-import { useDeckStore } from '../context/DeckContext/DeckContext';
-import { useUserContext } from '../context';
-import useDeckStyles from '../context/hooks/useDeckStyles';
-
-const DeckDisplay = () => {
-  const {
-    setSelectedDeck,
-    selectedDeck,
-    allDecks,
-    createUserDeck,
-    updateDeckDetails,
-    deleteUserDeck,
-    selectedCards,
-    setSelectedCards,
-  } = useDeckStore();
-
-  const { userId } = useUserContext();
-  const [showAllDecks, setShowAllDecks] = useState(false);
-  const [isEditing, setIsEditing] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const {
-    mainBoxStyles,
-    paperStyles,
-    titleTypographyStyles,
-    buttonStyles,
-    switchControlStyles,
-    cardsContainerStyles,
-    noCardsTypographyStyles,
-  } = useDeckStyles();
-
-  useEffect(() => {
-    let isMounted = true;
-    setIsLoading(true);
-
-    const timeoutId = setTimeout(() => {
-      if (isMounted) {
-        setSelectedCards(selectedDeck?.cards?.slice(0, 30) || []);
-        setIsLoading(false);
-      }
-    }, 1000);
-
-    return () => {
-      isMounted = false;
-      clearTimeout(timeoutId);
-    };
-  }, [selectedDeck]);
-
-  const handleSelectDeck = (deckId) => {
-    const foundDeck = allDecks?.find((deck) => deck?._id === deckId);
-    if (foundDeck) {
-      setSelectedDeck(foundDeck);
-      setSelectedCards(foundDeck?.cards?.slice(0, 30) || []);
-      handleToggleEdit({ target: { checked: true } });
-    }
-  };
-
-  const handleToggleEdit = (event) => {
-    setIsEditing(event.target.checked);
-    if (!event.target.checked) {
-      setSelectedDeck(null);
-    }
-  };
-
-  return (
-    <Box sx={mainBoxStyles}>
-      <Paper sx={paperStyles}>
-        <Typography variant="h5" sx={titleTypographyStyles}>
-          Your Decks
-        </Typography>
-        <Button
-          onClick={() => setShowAllDecks(!showAllDecks)}
-          variant="contained"
-          color="primary"
-          sx={buttonStyles}
-        >
-          <AppsIcon sx={{ mr: 1 }} />
-          {showAllDecks ? 'Hide Decks' : 'Show All Decks'}
-        </Button>
-        {showAllDecks && (
-          <Box sx={cardsContainerStyles}>
-            <SelectDeckList handleSelectDeck={handleSelectDeck} />
-          </Box>
-        )}
-        <FormControlLabel
-          control={<Switch checked={isEditing} onChange={handleToggleEdit} />}
-          label={isEditing ? 'Edit Deck' : 'Create New Deck'}
-          sx={switchControlStyles}
-        />
-        {isEditing ? (
-          selectedDeck && (
-            <DeckEditPanel
-              selectedDeck={selectedDeck}
-              onSave={(updatedDeck) =>
-                updateDeckDetails(userId, selectedDeck?._id, updatedDeck)
-              }
-              onDelete={() => deleteUserDeck(selectedDeck?._id)}
-              isEditing={isEditing}
-              userId={userId}
-              deckId={selectedDeck?._id}
-            />
-          )
-        ) : (
-          <DeckEditPanel
-            onSave={(newDeck) => createUserDeck(userId, newDeck)}
-            isEditing={isEditing}
-          />
-        )}
-        <Box sx={cardsContainerStyles}>
-          {selectedDeck?.cards?.length > 0 ? (
-            <CardsGrid isLoading={isLoading} />
-          ) : (
-            <Typography sx={noCardsTypographyStyles}>
-              No cards to display
-            </Typography>
-          )}
-        </Box>
-      </Paper>
-    </Box>
-  );
-};
-
-export default DeckDisplay;
diff --git a/src/layout/PageLayout.jsx b/src/layout/PageLayout.jsx
index f479012..3bc5eaa 100644
--- a/src/layout/PageLayout.jsx
+++ b/src/layout/PageLayout.jsx
@@ -6,10 +6,10 @@ import { usePageContext } from '../context';
 
 const PageLayout = ({ children }) => {
   const classes = useCommonStyles();
-  const { isLoading } = usePageContext();
+  const { activelyLoading } = usePageContext();
   return (
     <React.Fragment>
-      <Skeleton loading={isLoading} variant="overlay">
+      <Skeleton loading={!activelyLoading} variant="overlay">
         <Paper className={classes.paperBackground} />
         <Box
           sx={{
diff --git a/src/components/other/dataDisplay/UserStats.jsx b/src/layout/UserStats.jsx
similarity index 76%
rename from src/components/other/dataDisplay/UserStats.jsx
rename to src/layout/UserStats.jsx
index 0cb073a..4943611 100644
--- a/src/components/other/dataDisplay/UserStats.jsx
+++ b/src/layout/UserStats.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
-import { useDeckStore } from '../../../context/DeckContext/DeckContext';
-import { useCartStore } from '../../../context/CartContext/CartContext';
-import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+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/layout/CartContainer.jsx b/src/layout/cart/CartContainer.jsx
similarity index 86%
rename from src/layout/CartContainer.jsx
rename to src/layout/cart/CartContainer.jsx
index 7545609..b12cbb2 100644
--- a/src/layout/CartContainer.jsx
+++ b/src/layout/cart/CartContainer.jsx
@@ -1,7 +1,7 @@
 // CartContainer.js
 import React from 'react';
 import { Box, Typography } from '@mui/material';
-import useCartStyles from '../context/hooks/useCartStyles';
+import useCartStyles from '../../context/hooks/useCartStyles';
 
 const CartContainer = ({ children }) => {
   const { cartContainerStyles, cartTitleStyles } = useCartStyles();
diff --git a/src/layout/CartContent.js b/src/layout/cart/CartContent.js
similarity index 77%
rename from src/layout/CartContent.js
rename to src/layout/cart/CartContent.js
index 1f45d6b..c4a97d7 100644
--- a/src/layout/CartContent.js
+++ b/src/layout/cart/CartContent.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import { Typography, Skeleton, Box, Grid, Container } from '@mui/material';
 import CartContainer from './CartContainer';
-import CartItem from '../components/grids/CartItem';
-import CartTotal from '../components/other/dataDisplay/CartTotal';
-import { useCartStore } from '../context/CartContext/CartContext';
-import Checkout from '../containers/cartPageContainers/Checkout';
-import useResponsiveStyles from '../context/hooks/useResponsiveStyles';
-import { useMode } from '../context';
+import CartItem from '../../components/grids/gridItems/CartItem';
+import CartTotal from '../../components/other/dataDisplay/CartTotal';
+import { useCartStore } from '../../context/CartContext/CartContext';
+import Checkout from '../../containers/cartPageContainers/Checkout';
+import useResponsiveStyles from '../../context/hooks/useResponsiveStyles';
+import { useMode } from '../../context';
 
 const CartContent = () => {
   const { theme } = useMode();
   const { getProductGridContainerStyle } = useResponsiveStyles(theme);
-  const containerStyles = getProductGridContainerStyle();
+  const containerStyles = getProductGridContainerStyle(theme);
   const { cartData, isLoading } = useCartStore();
 
   const renderCartItems = () => {
diff --git a/src/layout/collection/CollectionPortfolio.jsx b/src/layout/collection/CollectionPortfolio.jsx
new file mode 100644
index 0000000..c8b6b1f
--- /dev/null
+++ b/src/layout/collection/CollectionPortfolio.jsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useRef, useState } from 'react';
+import SelectCollection from './SelectCollection';
+import { Box } from '@mui/material';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import { useMode } from '../../context';
+import { usePortfolioStyles } from '../../context/hooks/usePortfolioStyles';
+import CollectionPortfolioContent from './CollectionPortfolioContent';
+
+const CollectionPortfolio = ({ allCollections, onCollectionSelect }) => {
+  const { theme } = useMode();
+  const classes = usePortfolioStyles(theme);
+  const [showCollections, setShowCollections] = useState(true);
+  const [selectedCards, setSelectedCards] = useState([]);
+  const { selectedCollection } = useCollectionStore();
+  useEffect(() => {
+    setSelectedCards(selectedCollection?.cards?.slice(0, 30));
+  }, [selectedCollection]);
+  useEffect(() => {
+    if (selectedCollection && !showCollections) {
+      onCollectionSelect(true);
+    }
+  }, [selectedCollection, showCollections, onCollectionSelect]);
+
+  const handleSelectCollection = (collectionId) => {
+    const foundCollection = allCollections?.find(
+      (collection) => collection?._id === collectionId
+    );
+    if (foundCollection) {
+      setShowCollections(false);
+    }
+  };
+
+  return (
+    <Box className={classes.portfolioBox}>
+      {showCollections ? (
+        <SelectCollection
+          handleSelectCollection={handleSelectCollection}
+          selectedCards={selectedCards}
+        />
+      ) : (
+        <CollectionPortfolioContent
+          selectedCollection={selectedCollection}
+          selectedCards={selectedCards}
+          onBack={() => setShowCollections(true)}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default CollectionPortfolio;
diff --git a/src/layout/collection/CollectionPortfolioContent.jsx b/src/layout/collection/CollectionPortfolioContent.jsx
new file mode 100644
index 0000000..87cdb7d
--- /dev/null
+++ b/src/layout/collection/CollectionPortfolioContent.jsx
@@ -0,0 +1,131 @@
+// PortfolioContent.jsx
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  Paper,
+  Typography,
+} from '@mui/material';
+// eslint-disable-next-line max-len
+import CollectionPortfolioChartContainer from '../../containers/collectionPageContainers/CollectionPortfolioChartContainer';
+// eslint-disable-next-line max-len
+import CollectionPortfolioListContainer from '../../containers/collectionPageContainers/CollectionPortfolioListContainer';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import usePortfolioStyles from '../../context/hooks/usePortfolioStyles';
+import { useMode } from '../../context';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'; // Import the icon for the back button
+
+const CollectionPortfolioContent = ({ selectedCards, removeCard, onBack }) => {
+  const { theme } = useMode();
+
+  const { selectedCollection } = useCollectionStore();
+  const [collectionName, setCollectionName] = useState('');
+  const classes = usePortfolioStyles(theme);
+
+  useEffect(() => {
+    if (selectedCollection?.name) {
+      setCollectionName(selectedCollection.name);
+    }
+  }, [selectedCollection]);
+
+  return (
+    <Box className={classes.portfolioBoxB}>
+      <Box
+        sx={{
+          maxWidth: '100%',
+          background: theme.palette.background.dark,
+          borderRadius: theme.shape.borderRadius,
+          display: 'flex',
+          flexDirection: 'row',
+          margin: 'auto',
+          width: {
+            xs: '100%', // Full width on mobile screens
+            md: '100%', // Full width on mobile screens
+          },
+          padding: theme.spacing(1), // Reduced padding for mobile screens
+        }}
+      >
+        <Typography
+          variant="h4"
+          gutterBottom
+          sx={{
+            fontWeight: 'bold',
+            paddingLeft: '1rem',
+            display: 'flex',
+            alignItems: 'center',
+            color: theme.palette.primary.main,
+            margin: '0',
+          }}
+        >
+          <IconButton
+            color={theme.palette.success.main}
+            background={theme.palette.primary.main}
+            sx={{
+              color: theme.palette.primary.main,
+              // background: theme.palette.primary.main,
+              marginRight: '4px',
+            }}
+          >
+            <AssessmentIcon />
+          </IconButton>
+          Cards in Portfolio
+        </Typography>
+        {/* <Button
+          startIcon={<ArrowBackIcon />}
+          onClick={onBack}
+          sx={{ marginRight: theme.spacing(2) }}
+        >
+          Back
+        </Button> */}
+        <IconButton
+          onClick={onBack}
+          aria-label="Back to Collections"
+          color={theme.palette.success.main}
+          background={theme.palette.primary.main}
+          sx={{
+            color: theme.palette.primary.main,
+
+            // background: theme.palette.primary.main,
+            marginRight: '4px',
+          }}
+        >
+          <ArrowBackIcon />
+          <Typography
+            variant="body1"
+            gutterBottom
+            sx={{
+              // fontWeight: 'bold',
+              paddingLeft: '0.5rem',
+              display: 'flex',
+              alignItems: 'center',
+              color: theme.palette.primary.main,
+              margin: '0',
+            }}
+          >
+            Back to Collections
+          </Typography>
+        </IconButton>
+      </Box>
+      {/* <HeaderTitle title={collectionName} size="large" location="center" /> */}
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <CollectionPortfolioChartContainer
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <CollectionPortfolioListContainer
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default CollectionPortfolioContent;
diff --git a/src/layout/collection/SelectCollection.jsx b/src/layout/collection/SelectCollection.jsx
new file mode 100644
index 0000000..65e6c67
--- /dev/null
+++ b/src/layout/collection/SelectCollection.jsx
@@ -0,0 +1,93 @@
+import React, { useState, useCallback } from 'react';
+import { Box, Grid } from '@mui/material';
+import SelectCollectionList from '../../components/grids/collectionGrids/SelectCollectionList';
+import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import usePortfolioStyles from '../../context/hooks/usePortfolioStyles';
+import { useMode, useStatisticsStore } from '../../context';
+import SelectCollectionHeader from '../../components/headings/collection/SelectCollectionHeader';
+import PieChartStats from '../../components/other/dataDisplay/chart/PieChartStats';
+import TotalValueOfCollectionsDisplay from '../../components/other/dataDisplay/TotalValueOfCollectionsDisplay';
+import TopFiveExpensiveCards from '../../components/other/dataDisplay/TopFiveExpensiveCards';
+import CollectionDialog from '../../components/dialogs/CollectionDialog';
+
+const SelectCollection = ({ handleSelectCollection }) => {
+  const { theme } = useMode();
+  const classes = usePortfolioStyles(theme);
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [isNew, setIsNew] = useState(false);
+  const { setSelectedCollection, selectedCollection, allCollections } =
+    useCollectionStore();
+  const [isLoadingNewCollection, setIsLoadingNewCollection] = useState(false);
+  const { topFiveCards, totalValue, chartData } = useStatisticsStore();
+
+  const handleDialogToggle = useCallback(() => {
+    setDialogOpen((prev) => !prev);
+  }, []);
+
+  const handleSave = useCallback(
+    (collection) => {
+      setSelectedCollection(collection);
+      setDialogOpen(false);
+      handleSelectCollection(collection);
+    },
+    [setSelectedCollection, handleSelectCollection]
+  );
+
+  const openNewDialog = () => {
+    setIsNew(true);
+    setDialogOpen(true);
+  };
+
+  // Function to render the header
+  const renderHeader = () => (
+    <SelectCollectionHeader classes={classes} openNewDialog={openNewDialog} />
+  );
+
+  // Function to render the statistics section
+  const renderStatistics = () => (
+    <Grid container spacing={2} sx={{ marginTop: theme.spacing(2) }}>
+      <PieChartStats classes={classes} chartData={chartData} />
+      <TotalValueOfCollectionsDisplay
+        classes={classes}
+        totalValue={totalValue}
+      />
+      <TopFiveExpensiveCards classes={classes} topFiveCards={topFiveCards} />
+    </Grid>
+  );
+
+  // Function to render the collection list
+  const renderCollectionList = () => (
+    <Box className={classes.listContainer}>
+      <SelectCollectionList
+        handleSelectCollection={handleSelectCollection}
+        onSave={handleSave}
+        openDialog={handleDialogToggle}
+        isLoadingNewCollection={isLoadingNewCollection}
+      />
+    </Box>
+  );
+
+  // Function to render the dialog for collection
+  const renderCollectionDialog = () => (
+    <CollectionDialog
+      handleSelectCollection={handleSelectCollection}
+      isDialogOpen={isDialogOpen}
+      closeDialog={handleDialogToggle}
+      onSave={handleSave}
+      isNew={isNew}
+      initialName={isNew ? '' : selectedCollection?.name}
+      initialDescription={isNew ? '' : selectedCollection?.description}
+    />
+  );
+
+  return (
+    <Box className={classes.portfolioBoxB} sx={{ padding: theme.spacing(3) }}>
+      {renderHeader()}
+      {renderStatistics()}
+      {renderCollectionList()}
+      {renderCollectionDialog()}
+    </Box>
+  );
+};
+
+export default SelectCollection;
diff --git a/src/layout/deck/CardsDisplay.jsx b/src/layout/deck/CardsDisplay.jsx
new file mode 100644
index 0000000..5ce6334
--- /dev/null
+++ b/src/layout/deck/CardsDisplay.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import CardsGrid from '../../components/grids/deckBuilderGrids/CardsGrid';
+import useDeckStyles from '../../context/hooks/useDeckStyles';
+
+const CardsDisplay = ({ selectedDeck, isLoading }) => {
+  const { cardsContainerStyles, noCardsTypographyStyles } = useDeckStyles();
+
+  return (
+    <Box sx={cardsContainerStyles}>
+      {selectedDeck?.cards?.length > 0 ? (
+        <CardsGrid isLoading={isLoading} />
+      ) : (
+        <Typography sx={noCardsTypographyStyles}>
+          No cards to display
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default CardsDisplay;
diff --git a/src/layout/deck/DeckDisplay.js b/src/layout/deck/DeckDisplay.js
new file mode 100644
index 0000000..07ad34c
--- /dev/null
+++ b/src/layout/deck/DeckDisplay.js
@@ -0,0 +1,298 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  Paper,
+  Button,
+  Typography,
+  Box,
+  FormControlLabel,
+  Switch,
+} from '@mui/material';
+import AppsIcon from '@mui/icons-material/Apps';
+import SelectDeckList from '../../components/grids/deckBuilderGrids/SelectDeckList';
+import CardsGrid from '../../components/grids/deckBuilderGrids/CardsGrid';
+// import DeckEditPanel from '../../components/other/InputComponents/DeckEditPanel';
+import { useDeckStore } from '../../context/DeckContext/DeckContext';
+import { useUserContext } from '../../context';
+import useDeckStyles from '../../context/hooks/useDeckStyles';
+import DeckListToggle from './DeckListToggle';
+import DeckEditor from './DeckEditor';
+import CardsDisplay from './CardsDisplay';
+
+const DeckDisplay = () => {
+  const {
+    setSelectedDeck,
+    selectedDeck,
+    allDecks,
+
+    setSelectedCards,
+  } = useDeckStore();
+
+  const { userId } = useUserContext();
+  const [showAllDecks, setShowAllDecks] = useState(false);
+  const [isEditing, setIsEditing] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { mainBoxStyles, paperStyles, titleTypographyStyles } = useDeckStyles();
+
+  useEffect(() => {
+    let isMounted = true;
+    setIsLoading(true);
+
+    const timeoutId = setTimeout(() => {
+      if (isMounted) {
+        setSelectedCards(selectedDeck?.cards?.slice(0, 30) || []);
+        setIsLoading(false);
+      }
+    }, 1000);
+
+    return () => {
+      isMounted = false;
+      clearTimeout(timeoutId);
+    };
+  }, [selectedDeck]);
+  const handleSelectDeck = (deckId) => {
+    const foundDeck = allDecks?.find((deck) => deck?._id === deckId);
+    if (foundDeck) {
+      setSelectedDeck(foundDeck);
+      setSelectedCards(foundDeck?.cards?.slice(0, 30) || []);
+      handleToggleEdit({ target: { checked: true } });
+    }
+  };
+  const handleToggleEdit = (event) => {
+    setIsEditing(event.target.checked);
+    if (!event.target.checked) {
+      setSelectedDeck(null);
+    }
+  };
+
+  // const { theme } = useMode();
+  // const [name, setName] = useState(selectedDeck?.name || '');
+  // const [description, setDescription] = useState(
+  //   selectedDeck?.description || ''
+  // );
+  // const [tags, setTags] = useState(selectedDeck?.tags || []);
+  // const [color, setColor] = useState(selectedDeck?.color || '');
+
+  // const handleSave = () => {
+  //   onSave({
+  //     ...selectedDeck,
+  //     userId: userId,
+  //     deckId: deckId,
+  //     updatedInfo: {
+  //       name: name || 'Unnamed',
+  //       description: description || '',
+  //       tags: tags || [],
+  //       color: color || 'red',
+  //     },
+  //   });
+  // };
+
+  // const handleDeleteDeck = () => {
+  //   // Placeholder for delete logic
+  //   onDelete(deckId);
+  // };
+
+  // const handleDeleteTag = (tagToDelete) => {
+  //   setTags((tags) => tags.filter((tag) => tag !== tagToDelete));
+  // };
+
+  // const handleAddTag = (event) => {
+  //   if (event.key === 'Enter' && event.target.value !== '') {
+  //     setTags([...tags, event.target.value]);
+  //     event.target.value = '';
+  //   }
+  // };
+
+  // useEffect(() => {
+  //   // Update form state when selectedDeck changes
+  //   setName(selectedDeck?.name || '');
+  //   setDescription(selectedDeck?.description || '');
+  //   setTags(selectedDeck?.tags || []);
+  //   setColor(selectedDeck?.color || '');
+  // }, [selectedDeck]);
+
+  return (
+    <Box sx={mainBoxStyles}>
+      <Paper sx={paperStyles}>
+        <Typography variant="h5" sx={titleTypographyStyles}>
+          Your Decks
+        </Typography>
+        <DeckListToggle
+          showAllDecks={showAllDecks}
+          setShowAllDecks={setShowAllDecks}
+          handleSelectDeck={handleSelectDeck}
+          allDecks={allDecks}
+        />
+        <DeckEditor
+          selectedDeck={selectedDeck}
+          setSelectedDeck={setSelectedDeck}
+          isEditing={isEditing}
+          handleToggleEdit={handleToggleEdit}
+        />
+        <CardsDisplay selectedDeck={selectedDeck} isLoading={isLoading} />
+      </Paper>
+    </Box>
+    // <Box sx={mainBoxStyles}>
+    //   <Paper sx={paperStyles}>
+    //     <Typography variant="h5" sx={titleTypographyStyles}>
+    //       Your Decks
+    //     </Typography>
+    //     <Button
+    //       onClick={() => setShowAllDecks(!showAllDecks)}
+    //       variant="contained"
+    //       color="primary"
+    //       sx={buttonStyles}
+    //     >
+    //       <AppsIcon sx={{ mr: 1 }} />
+    //       {showAllDecks ? 'Hide Decks' : 'Show All Decks'}
+    //     </Button>
+    //     {showAllDecks && (
+    //       <Box sx={cardsContainerStyles}>
+    //         <SelectDeckList handleSelectDeck={handleSelectDeck} />
+    //       </Box>
+    //     )}
+    //     <FormControlLabel
+    //       control={<Switch checked={isEditing} onChange={handleToggleEdit} />}
+    //       label={isEditing ? 'Edit Deck' : 'Create New Deck'}
+    //       sx={switchControlStyles}
+    //     />
+    //     {isEditing ? (
+    //       selectedDeck && (
+    //         <Paper
+    //           elevation={3}
+    //           sx={{
+    //             padding: theme.spacing(4),
+    //             margin: 'auto',
+    //             maxWidth: 600,
+    //             borderRadius: theme.shape.borderRadius,
+    //             boxShadow: theme.shadows[3],
+    //             backgroundColor: theme.palette.background.paper,
+    //             color: theme.palette.text.secondary,
+    //           }}
+    //         >
+    //           <Typography
+    //             variant="h6"
+    //             sx={{
+    //               marginBottom: theme.spacing(3),
+    //               fontWeight: theme.typography.fontWeightBold,
+    //               color: theme.palette.primary.main,
+    //             }}
+    //           >
+    //             {isEditing ? 'Edit Deck' : 'Create New Deck'}
+    //           </Typography>
+    //           <FormWrapper onSubmit={handleFormSubmit}>
+    //             {/* Deck Name Input */}
+    //             <TextField
+    //               label="Deck Name"
+    //               value={name}
+    //               variant="outlined"
+    //               fullWidth
+    //               onChange={(e) => setName(e.target.value)}
+    //               sx={{ marginBottom: theme.spacing(2) }}
+    //             />
+    //             {/* Deck Description Input */}
+    //             <TextField
+    //               label="Deck Description"
+    //               value={description}
+    //               variant="outlined"
+    //               fullWidth
+    //               multiline
+    //               rows={4}
+    //               onChange={(e) => setDescription(e.target.value)}
+    //               sx={{ marginBottom: theme.spacing(2) }}
+    //             />
+    //             {/* Tags Input */}
+    //             <TextField
+    //               label="Add Tag"
+    //               value={tags}
+    //               variant="outlined"
+    //               fullWidth
+    //               onChange={(e) => setTags(e.target.value)}
+    //               // onKeyPress={handleAddTag}
+    //               sx={{ marginBottom: theme.spacing(2) }}
+    //             />
+    //             <Stack
+    //               direction="row"
+    //               spacing={1}
+    //               sx={{ marginBottom: theme.spacing(2) }}
+    //             >
+    //               {tags.map((tag) => (
+    //                 <Chip
+    //                   key={tag}
+    //                   label={tag}
+    //                   onDelete={() => handleDeleteTag(tag)}
+    //                 />
+    //               ))}
+    //             </Stack>
+    //             {/* Color Selector */}
+    //             <FormControl fullWidth sx={{ marginBottom: theme.spacing(3) }}>
+    //               <InputLabel id="deck-color-label">Deck Color</InputLabel>
+    //               <Select
+    //                 labelId="deck-color-label"
+    //                 value={color}
+    //                 label="Deck Color"
+    //                 onChange={(e) => setColor(e.target.value)}
+    //               >
+    //                 <MenuItem value="red">Red</MenuItem>
+    //                 <MenuItem value="blue">Blue</MenuItem>
+    //                 <MenuItem value="green">Green</MenuItem>
+    //                 <MenuItem value="yellow">Yellow</MenuItem>
+    //               </Select>
+    //             </FormControl>
+    //             {/* Save Button */}
+    //             <Button
+    //               variant="contained"
+    //               onClick={handleSave}
+    //               sx={{
+    //                 textTransform: 'none',
+    //                 backgroundColor: theme.palette.success.main,
+    //                 color: theme.palette.success.contrastText,
+    //                 '&:hover': {
+    //                   backgroundColor: theme.palette.success.dark,
+    //                 },
+    //               }}
+    //             >
+    //               Save Changes
+    //             </Button>
+    //             {/* Delete Deck Button */}
+    //             {isEditing && (
+    //               <Button
+    //                 variant="contained"
+    //                 startIcon={<DeleteIcon />}
+    //                 onClick={handleDeleteDeck}
+    //                 sx={{
+    //                   textTransform: 'none',
+    //                   backgroundColor: theme.palette.error.main,
+    //                   color: theme.palette.error.contrastText,
+    //                   '&:hover': {
+    //                     backgroundColor: theme.palette.error.dark,
+    //                   },
+    //                 }}
+    //               >
+    //                 Delete Deck
+    //               </Button>
+    //             )}
+    //           </FormWrapper>
+    //         </Paper>
+    //       )
+    //     ) : (
+    //       <DeckEditPanel
+    //         onSave={(newDeck) => createUserDeck(userId, newDeck)}
+    //         isEditing={isEditing}
+    //       />
+    //     )}
+    //     <Box sx={cardsContainerStyles}>
+    //       {selectedDeck?.cards?.length > 0 ? (
+    //         <CardsGrid isLoading={isLoading} />
+    //       ) : (
+    //         <Typography sx={noCardsTypographyStyles}>
+    //           No cards to display
+    //         </Typography>
+    //       )}
+    //     </Box>
+    //   </Paper>
+    // </Box>
+  );
+};
+
+export default DeckDisplay;
diff --git a/src/layout/deck/DeckEditor.jsx b/src/layout/deck/DeckEditor.jsx
new file mode 100644
index 0000000..ac3ac3b
--- /dev/null
+++ b/src/layout/deck/DeckEditor.jsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Paper,
+  Typography,
+  FormControlLabel,
+  Switch,
+  Box,
+} from '@mui/material';
+import DeckEditPanel from '../../components/other/InputComponents/DeckEditPanel';
+import { useDeckStore } from '../../context/DeckContext/DeckContext';
+import useDeckStyles from '../../context/hooks/useDeckStyles';
+
+const DeckEditor = ({
+  selectedDeck,
+  setSelectedDeck,
+  isEditing,
+  handleToggleEdit,
+}) => {
+  // const { switchControlStyles } = useDeckStyles();
+  const [editorKey, setEditorKey] = useState(Math.random());
+
+  useEffect(() => {
+    setEditorKey(Math.random()); // Reset key to remount the editor component when the selected deck changes
+  }, [selectedDeck]);
+
+  return (
+    <>
+      <Box key={editorKey} elevation={3}>
+        {/* <FormControlLabel
+          control={<Switch checked={isEditing} onChange={handleToggleEdit} />}
+          label={isEditing ? 'Edit Deck' : 'Create New Deck'}
+          sx={switchControlStyles}
+        /> */}
+        {isEditing ? (
+          selectedDeck ? (
+            <DeckEditPanel
+              selectedDeck={selectedDeck}
+              handleToggleEdit={handleToggleEdit}
+              isEditing={isEditing}
+            />
+          ) : null
+        ) : (
+          <DeckEditPanel
+            handleToggleEdit={handleToggleEdit}
+            isEditing={isEditing}
+          />
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default DeckEditor;
diff --git a/src/layout/deck/DeckListToggle.jsx b/src/layout/deck/DeckListToggle.jsx
new file mode 100644
index 0000000..c04d4ad
--- /dev/null
+++ b/src/layout/deck/DeckListToggle.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, Box } from '@mui/material';
+import AppsIcon from '@mui/icons-material/Apps';
+import SelectDeckList from '../../components/grids/deckBuilderGrids/SelectDeckList';
+import useDeckStyles from '../../context/hooks/useDeckStyles';
+
+const DeckListToggle = ({
+  showAllDecks,
+  setShowAllDecks,
+  handleSelectDeck,
+  allDecks,
+}) => {
+  const { buttonStyles, cardsContainerStyles } = useDeckStyles();
+
+  return (
+    <>
+      <Button
+        onClick={() => setShowAllDecks(!showAllDecks)}
+        variant="contained"
+        color="primary"
+        sx={buttonStyles}
+      >
+        <AppsIcon sx={{ mr: 1 }} />
+        {showAllDecks ? 'Hide Decks' : 'Show All Decks'}
+      </Button>
+      {showAllDecks && (
+        <Box sx={cardsContainerStyles}>
+          <SelectDeckList
+            handleSelectDeck={handleSelectDeck}
+            allDecks={allDecks}
+          />
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default DeckListToggle;
diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
index 0d18863..10b36fe 100644
--- a/src/pages/CartPage.js
+++ b/src/pages/CartPage.js
@@ -4,71 +4,109 @@ import { Box, Card, CardContent, Grid, useTheme } from '@mui/material';
 import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
 import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
 import CustomerForm from '../components/forms/customerCheckoutForm/CustomerForm';
-import CartContent from '../layout/CartContent';
+import CartContent from '../layout/cart/CartContent';
 import { useCartStore, useMode, usePageContext } from '../context';
 import PageLayout from '../layout/PageLayout';
 import Checkout from '../containers/cartPageContainers/Checkout';
 import CartSummary from '../components/other/dataDisplay/CartSummary';
 
 const CartPage = () => {
-  const [cookies] = useCookies(['user']);
   const { theme } = useMode();
-  const { user } = cookies;
-  const userId = user?.id;
-
   const {
     cartData,
     addOneToCart,
     removeOneFromCart,
-    fetchUserCart,
+    fetchCartForUser,
     getTotalCost,
     cartCardQuantity,
     totalCost,
   } = useCartStore();
+  const { loadingStatus, returnDisplay, setLoading } = usePageContext();
+  const calculateTotalPrice = getTotalCost();
 
-  const {
-    isPageLoading,
-    setIsPageLoading,
-    pageError,
-    setPageError,
-    logPageData,
-  } = usePageContext();
-
-  // useEffect(() => {
-  //   if (!userId) return;
-
-  //   const initializeCart = () => {
-  //     setIsPageLoading(true);
-  //     try {
-  //       if (!cartData || Object.keys(cartData).length === 0) {
-  //         fetchUserCart();
-  //       }
-  //       logPageData('CartPage', cartData);
-  //     } catch (e) {
-  //       setPageError(e);
-  //     } finally {
-  //       setIsPageLoading(false);
-  //     }
-  //   };
-
-  //   initializeCart();
-  // }, [cartData?.cart]);
+  // useEffect hook to fetch cart data for user
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading('isPageLoading', true);
+      try {
+        await fetchCartForUser(); // Assuming fetchUserCart updates cartData
+      } catch (error) {
+        console.error('Error fetching cart data:', error);
+      } finally {
+        setLoading('isPageLoading', false);
+      }
+    };
 
+    // Fetch cart data if not already loaded
+    if (!cartData) {
+      fetchData();
+    }
+  }, [cartData, fetchCartForUser]);
+  // Modify this function based on how your cart store manages items
   const handleModifyItemInCart = async (cardId, operation) => {
     try {
       operation === 'add' ? addOneToCart(cardId) : removeOneFromCart(cardId);
     } catch (e) {
       console.error('Failed to adjust quantity in cart:', e);
-      setPageError(e);
     }
   };
+  // Function to render the cart content grid
+  const renderCartContent = () => (
+    <Grid item xs={12} lg={6}>
+      <CartContent
+        cartData={cartData}
+        calculateTotalPrice={calculateTotalPrice}
+        onQuantityChange={handleModifyItemInCart}
+      />
+    </Grid>
+  );
+  // Function to render the checkout and summary section
+  const renderCheckoutAndSummary = () => (
+    <Grid item xs={12} lg={6}>
+      <Checkout />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          margin: 'auto',
+          width: '100%',
+          height: '20%',
+          justifyContent: 'left',
+        }}
+      >
+        <CartSummary quantity={cartCardQuantity} totalCost={totalCost} />
+      </Box>
+    </Grid>
+  );
+  // Function to render the overall cart layout
+  const renderCartLayout = () => (
+    <Card
+      sx={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.palette.background.paper,
+      }}
+    >
+      <CardContent
+        sx={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: theme.palette.background.paper,
+        }}
+      >
+        <Grid container spacing={3}>
+          {renderCartContent()}
+          {renderCheckoutAndSummary()}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
 
-  if (isPageLoading) return <LoadingIndicator />;
-  if (pageError) return <ErrorIndicator error={pageError} />;
-
-  const calculateTotalPrice = getTotalCost();
   return (
     <PageLayout>
+      {loadingStatus?.isPageLoading && returnDisplay()}
+      {loadingStatus?.isLoading && returnDisplay()}
       <Box
         sx={{
           overflow: 'auto',
@@ -79,56 +117,9 @@ const CartPage = () => {
           backgroundColor: theme.palette.background.paper,
         }}
       >
-        <Card
-          sx={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: theme.palette.background.paper,
-          }}
-        >
-          <CardContent
-            sx={{
-              width: '100%',
-              height: '100%',
-              backgroundColor: theme.palette.background.paper,
-            }}
-            f
-          >
-            <Grid container spacing={3}>
-              <Grid item xs={6} lg={6}>
-                <CartContent
-                  cartData={cartData}
-                  calculateTotalPrice={calculateTotalPrice}
-                  onQuantityChange={handleModifyItemInCart}
-                />
-              </Grid>
-              <Grid item xs={6} lg={6}>
-                {/* <CustomerForm /> */}
-                <Checkout /> {/* Include Checkout component */}
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    margin: 'auto',
-                    width: '100%',
-                    height: '20%',
-                    justifyContent: 'left',
-                  }}
-                >
-                  <CartSummary
-                    quantity={cartCardQuantity}
-                    totalCost={totalCost}
-                  />
-                  {/* <OrderSubmitButton onClick={handleModalToggle} /> */}
-                </Box>
-              </Grid>
-            </Grid>
-          </CardContent>
-        </Card>
+        {renderCartLayout()}
       </Box>
     </PageLayout>
   );
 };
-
 export default CartPage;
diff --git a/src/pages/CollectionPage.js b/src/pages/CollectionPage.js
index 47a4ce9..5a5e086 100644
--- a/src/pages/CollectionPage.js
+++ b/src/pages/CollectionPage.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import CardPortfolio from '../components/collection/CardPortfolio';
+import CollectionPortfolio from '../layout/collection/CollectionPortfolio';
 import Subheader from '../components/reusable/Subheader';
 import { useCollectionStore } from '../context/CollectionContext/CollectionContext';
 import { ModalContext } from '../context/ModalContext/ModalContext';
@@ -8,62 +8,68 @@ import { usePageContext } from '../context/PageContext/PageContext';
 import HeroCenter from './pageStyles/HeroCenter';
 import PageLayout from '../layout/PageLayout';
 import GenericCardDialog from '../components/dialogs/cardDialog/GenericCardDialog';
+import useCollectionPageView from '../context/hooks/useCollectionPageView';
 
 const CollectionPage = () => {
+  const { selectedCollection, allCollections } = useCollectionStore();
+  const { closeModal, isModalOpen, modalContent } = useContext(ModalContext);
+  const { isCollectionView, showCollectionView, showCollectionContent } =
+    useCollectionPageView();
   const { theme } = useMode();
-  const [isCollectionSelected, setIsCollectionSelected] = useState(false);
-  const { allCollections, selectedCollection } = useCollectionStore();
-  const {
-    isPageLoading,
-    setIsPageLoading,
-    pageError,
-    setPageError,
-    logPageData,
-    displayLoadingIndicator,
-    displayErrorIndicator,
-  } = usePageContext();
-
-  const { openModalWithCard, closeModal, isModalOpen, modalContent } =
-    useContext(ModalContext);
+  const { loadingStatus, returnDisplay, setLoading, logPageData } =
+    usePageContext();
 
   useEffect(() => {
+    setLoading('isPageLoading', true);
     try {
       if (!selectedCollection || !selectedCollection?._id) return; // If no collection is selected, do nothing
       logPageData('CollectionPage', selectedCollection); // Log collection data
     } catch (e) {
-      setPageError(e); // Handle any errors
+      // setLoading(e, true);
+      console.error('Error loading collection page:', e);
     } finally {
-      setIsPageLoading(false); // End the loading state
+      // setIsPageLoading(false); // End the loading state
+      setLoading('isPageLoading', false);
+      // setLoading();
     }
   }, []);
 
-  if (isPageLoading) displayLoadingIndicator();
-  if (pageError) displayErrorIndicator();
-
-  const handleCollectionSelected = (selected) => {
-    setIsCollectionSelected(!!selected);
-  };
-  return (
-    <PageLayout>
+  // Function to render the hero center
+  const renderHeroCenter = () =>
+    !isCollectionView && (
       <HeroCenter
         title="Your Collection's Home"
         subtitle="Welcome to your collection! ..."
       />
-      {!isCollectionSelected && (
-        <Subheader text={selectedCollection?.name || 'Your Collection'} />
-      )}
-      <CardPortfolio
-        allCollections={allCollections}
-        onCollectionSelect={handleCollectionSelected}
+    );
+
+  // Function to render the collection portfolio
+  const renderCollectionPortfolio = () => (
+    <CollectionPortfolio
+      allCollections={allCollections}
+      onCollectionSelect={
+        selectedCollection ? showCollectionContent : showCollectionView
+      }
+    />
+  );
+
+  // Function to render the card dialog
+  const renderCardDialog = () =>
+    isModalOpen && (
+      <GenericCardDialog
+        open={isModalOpen}
+        context={'Collection'}
+        closeModal={closeModal}
+        card={modalContent}
       />
-      {isModalOpen && (
-        <GenericCardDialog
-          open={isModalOpen}
-          context={'Collection'}
-          closeModal={closeModal}
-          card={modalContent}
-        />
-      )}
+    );
+
+  return (
+    <PageLayout>
+      {loadingStatus?.isPageLoading && returnDisplay()}
+      {renderHeroCenter()}
+      {renderCollectionPortfolio()}
+      {renderCardDialog()}
     </PageLayout>
   );
 };
diff --git a/src/pages/DeckBuilderPage.js b/src/pages/DeckBuilderPage.js
index 744f3c0..072df15 100644
--- a/src/pages/DeckBuilderPage.js
+++ b/src/pages/DeckBuilderPage.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState, useContext } from 'react';
 import { 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 { Box, Grid, Typography } from '@mui/material';
 import { ModalContext } from '../context/ModalContext/ModalContext';
 import { useMode } from '../context/hooks/colormode';
@@ -15,25 +14,51 @@ import HeroCenter from './pageStyles/HeroCenter';
 import { Container } from 'react-bootstrap';
 import PageLayout from '../layout/PageLayout';
 import GenericCardDialog from '../components/dialogs/cardDialog/GenericCardDialog';
+import { styled } from '@mui/styles';
+import DeckSearch from '../components/other/search/DeckSearch';
+import DeckDisplay from '../layout/deck/DeckDisplay';
+const SearchGrid = styled(Grid)(({ theme }) => ({
+  padding: theme.spacing(2),
+  [theme.breakpoints.down('md')]: {
+    width: '50%', // Half width on small and medium screens
+  },
+}));
 
+const DisplayGrid = styled(Grid)(({ theme }) => ({
+  padding: theme.spacing(2),
+  [theme.breakpoints.down('md')]: {
+    width: '50%', // Half width on small and medium screens
+  },
+}));
+
+const RootGrid = styled(Grid)(({ theme }) => ({
+  overflow: 'auto',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap', // Ensure wrapping on smaller screens
+  backgroundColor: theme.palette.background.secondary,
+  padding: theme.spacing(3),
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[5],
+  width: '100%',
+}));
 const DeckBuilderPage = () => {
   const [userDecks, setUserDecks] = useState([]);
   const { theme } = useMode();
-  const { fetchAllDecksForUser, allDecks, loading } = useDeckStore();
-  const {
-    isPageLoading,
-    setIsPageLoading,
-    pageError,
-    setPageError,
-    logPageData,
-  } = usePageContext();
+  const { fetchAllDecksForUser, allDecks } = useDeckStore();
+  const { logPageData, loadingStatus, returnDisplay, setLoading } =
+    usePageContext();
   const { user } = useUserContext();
   const { isModalOpen, modalContent } = useContext(ModalContext);
   const userId = user?.id;
   useEffect(() => {
+    setLoading('isPageLoading', true);
+
     fetchAllDecksForUser().catch((err) =>
       console.error('Failed to get all decks:', err)
     );
+
+    setLoading('isPageLoading', false);
   }, [fetchAllDecksForUser]);
 
   useEffect(() => {
@@ -44,34 +69,64 @@ const DeckBuilderPage = () => {
     }
   }, [userId]);
 
-  if (isPageLoading) return <LoadingIndicator />;
-  if (pageError) return <ErrorIndicator error={pageError} />;
+  // Function to render the Hero banner
+  const renderHeroBanner = () => (
+    <DeckBuilderBanner>
+      <Container>
+        <HeroCenter
+          title="Welcome to Deck Builder"
+          subtitle="Craft, refine, and explore your deck strategies in one place."
+        />
+      </Container>
+    </DeckBuilderBanner>
+  );
+
+  // Function to render the deck search section
+  const renderDeckSearch = () => (
+    <SearchGrid item xs={12} md={6} lg={5}>
+      <DeckSearch />
+    </SearchGrid>
+  );
+
+  // Function to render the deck display section
+  const renderDeckDisplay = () => (
+    <DisplayGrid item xs={12} md={6} lg={7}>
+      <DeckDisplay />
+    </DisplayGrid>
+  );
+
+  // Function to render the deck builder's main content
+  const renderDeckBuilderContent = () => (
+    <Grid container>
+      <Grid item xs={12}>
+        <RootGrid container>
+          {renderDeckSearch()}
+          {renderDeckDisplay()}
+        </RootGrid>
+      </Grid>
+    </Grid>
+  );
+
+  // Function to render the card dialog
+  const renderCardDialog = () => {
+    return (
+      isModalOpen && (
+        <GenericCardDialog
+          open={isModalOpen}
+          context={'Deck'}
+          card={modalContent}
+        />
+      )
+    );
+  };
 
   return (
     <React.Fragment>
       <PageLayout>
-        <DeckBuilderBanner>
-          <Container>
-            <HeroCenter
-              title="Welcome to Deck Builder"
-              subtitle="Craft, refine, and explore your deck strategies in one place."
-            />
-          </Container>
-          <Grid container>
-            <Grid item xs={12}>
-              <DeckBuilderContainer />
-            </Grid>
-          </Grid>
-        </DeckBuilderBanner>
-        {pageError && <ErrorIndicator error={pageError} />}
-
-        {isModalOpen && (
-          <GenericCardDialog
-            open={isModalOpen}
-            context={'Deck'}
-            card={modalContent}
-          />
-        )}
+        {loadingStatus?.isPageLoading && returnDisplay()}
+        {renderHeroBanner()}
+        {renderDeckBuilderContent()}
+        {renderCardDialog()}
       </PageLayout>
     </React.Fragment>
   );
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 102bceb..512190c 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -8,6 +8,8 @@ import {
   Grid,
   Box,
   useMediaQuery,
+  Paper,
+  Stack,
 } from '@mui/material';
 import { useMode } from '../context/hooks/colormode';
 import {
@@ -32,10 +34,12 @@ import { useSpring, animated } from 'react-spring';
 import SplashPage2 from './otherPages/SplashPage2';
 import pages from '../assets/pages.json';
 import { useTheme } from '@emotion/react';
-import SplashPage3 from './otherPages/SplashPage3';
-import SingleCardRowAnimation from '../assets/animations/SingleCardRowAnimation';
 import SingleCardAnimation from '../assets/animations/SingleCardAnimation';
 import { useCollectionStore } from '../context';
+import CardChart from '../tests/CardChart';
+import useCardCronJob from '../tests/useCardCronJob';
+// import initialCardData from '../tests/initialCardData';
+import { styled } from '@mui/styles';
 
 const AnimatedBox = animated(Box);
 
@@ -43,6 +47,11 @@ const HomePage = () => {
   const { theme } = useMode();
   const theme2 = useTheme();
   const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
+  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
+  const isLgUp = useMediaQuery(theme.breakpoints.up('lg'));
+  const { allCollections } = useCollectionStore();
+  const initialCardData = allCollections[0]?.cards[0];
+  const { cardData } = useCardCronJob(initialCardData);
 
   const { isModalOpen, modalContent } = useContext(ModalContext);
   const { selectedCollection } = useCollectionStore();
@@ -61,145 +70,210 @@ const HomePage = () => {
   const splashRef = useRef(null);
   useEffect(() => {
     if (splashRef.current) {
-      splashRef.current.style.position = 'fixed';
-      splashRef.current.style.top = '0';
-      splashRef.current.style.left = '0';
-      splashRef.current.style.width = '100%';
-      splashRef.current.style.height = '100%';
-      splashRef.current.style.zIndex = '-1';
+      Object.assign(splashRef.current.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        zIndex: '-1',
+      });
     }
   }, []);
-  const titleStyles = {
-    padding: theme.spacing(2), // consistent padding with the theme
-    textAlign: 'center',
-    color: theme.palette.backgroundD.contrastText,
-    background: theme.palette.background.dark,
-    borderRadius: theme.shape.borderRadius,
-    margin: theme.spacing(2),
-    // Add more styles as per the theme or design requirements
-  };
 
-  return (
-    <React.Fragment>
-      <CssBaseline />
-      <div ref={splashRef}>
-        {/* <SplashPage2 /> */}
-        <SplashPage2 />
-      </div>
-      <TertiaryContentContainer theme={theme}>
-        <HomePageBox theme={theme}>
-          <Typography
-            component="h1"
-            variant={getTypographyVariant()}
-            align="center"
-            color="text.primary"
-            gutterBottom
-          >
-            {introText.mainTitle}
-          </Typography>
-          <Typography
-            variant="h6"
-            align="center"
-            color="text.secondary"
-            paragraph
-          >
-            {introText.description}
-          </Typography>
-        </HomePageBox>
-      </TertiaryContentContainer>
-      <SecondaryContentContainer theme={theme}>
+  // Function to render the splash page animation
+  const renderSplashPage = () => (
+    <div ref={splashRef}>
+      <SplashPage2 />
+    </div>
+  );
+  // Function to render tertiary content
+  const renderTertiaryContent = () => (
+    <TertiaryContentContainer theme={theme}>
+      <HomePageBox theme={theme}>
         <Typography
-          variant={isSmUp ? 'h4' : 'h5'} // Responsive font size
-          style={titleStyles}
+          component="h1"
+          variant={getTypographyVariant()}
+          align="center"
+          color="text.primary"
+          gutterBottom
         >
-          Top Performing Cards
+          {introText.mainTitle}
         </Typography>
-        <SingleCardAnimation card={selectedCollection?.cards[0]} />
-        {/* <SingleCardRowAnimation /> This is your animation component */}
-      </SecondaryContentContainer>
-      <MainContentContainer maxWidth="100%" theme={theme}>
-        <Grid container spacing={isSmUp ? 5 : 2}>
-          {tiers.map((tier, index) => {
-            const [tiltAnimation, setTiltAnimation] = useSpring(() => ({
+        <Typography
+          variant="h6"
+          align="center"
+          color="text.secondary"
+          paragraph
+        >
+          {introText.description}
+        </Typography>
+      </HomePageBox>
+    </TertiaryContentContainer>
+  );
+  // Function to render secondary content
+  const renderSecondaryContent = () => (
+    <SecondaryContentContainer theme={theme}>
+      <Paper
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          // width: '100%',
+          padding: theme.spacing(2),
+          background: theme.palette.backgroundC.dark,
+          maxWidth: isLgUp ? '100%' : '100%', // Adjust width based on screen size
+        }}
+      >
+        {isMdUp && (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              // width: '100%',
+              maxWidth: '100%',
+              maxHeight: '100%',
+              padding: theme.spacing(2),
+            }}
+          >
+            {/* <Typography variant={isSmUp ? 'h4' : 'h5'}>
+            Top Performing Cards
+          </Typography> */}
+            <SingleCardAnimation cardImage={cardData?.image} />
+          </Box>
+        )}
+
+        {/* Chart and Card Components */}
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            maxWidth: isMdUp ? '50%' : '100%', // Adjust width based on screen size
+            maxHeight: '100%',
+          }}
+        >
+          <CardChart cardData={allCollections[0]?.cards[0]} />
+        </Box>
+      </Paper>
+    </SecondaryContentContainer>
+  );
+  // Function to render main content
+  const renderMainContent = () => (
+    <MainContentContainer maxWidth="100%" theme={theme}>
+      <Grid container spacing={isSmUp ? 5 : 2}>
+        {tiers.map((tier, index) => {
+          const [tiltAnimation, setTiltAnimation] = useSpring(() => ({
+            transform:
+              'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)',
+          }));
+          const handleMouseEnter = () =>
+            setTiltAnimation({
               transform:
-                'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)',
-            }));
-            const handleMouseEnter = () =>
-              setTiltAnimation({
-                transform:
-                  'perspective(600px) rotateX(5deg) rotateY(5deg) scale(1.05)',
-              });
+                'perspective(600px) rotateX(5deg) rotateY(5deg) scale(1.05)',
+            });
 
-            const handleMouseLeave = () =>
-              setTiltAnimation({
-                transform:
-                  'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)',
-              });
-            return (
-              <Grid
-                item
-                key={index}
-                xs={12}
-                sm={12}
-                md={tier.title === 'Enterprise' ? 12 : 4}
-                style={{ display: 'flex' }} // Ensure flex display for grid item
+          const handleMouseLeave = () =>
+            setTiltAnimation({
+              transform:
+                'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)',
+            });
+          return (
+            <Grid
+              item
+              key={index}
+              xs={12}
+              sm={12}
+              md={tier.title === 'Enterprise' ? 12 : 4}
+              style={{ display: 'flex' }} // Ensure flex display for grid item
+            >
+              <AnimatedBox
+                style={{ ...tiltAnimation, width: '100%' }} // Stretch to fill grid item
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
               >
-                <AnimatedBox
-                  style={{ ...tiltAnimation, width: '100%' }} // Stretch to fill grid item
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
+                <FeatureCard
+                  theme={theme}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                  }}
                 >
-                  <FeatureCard
-                    theme={theme}
+                  <CardHeader
+                    title={tier.title}
+                    subheader={tier.subheader}
+                    titleTypographyProps={{ align: 'center' }}
+                    subheaderTypographyProps={{ align: 'center' }}
                     style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      height: '100%',
-                    }}
-                  >
-                    <CardHeader
-                      title={tier.title}
-                      subheader={tier.subheader}
-                      titleTypographyProps={{ align: 'center' }}
-                      subheaderTypographyProps={{ align: 'center' }}
-                      style={{
-                        backgroundColor: theme.palette.backgroundD.dark,
-                      }} // Apply the background color here
-                    />
-                    <CardContent style={{ flex: 1 }}>
-                      <CardUnorderedList>
-                        {tier.description.map((line, index) => (
-                          <CardListItem key={index} theme={theme}>
-                            {line}
-                          </CardListItem>
-                        ))}
-                      </CardUnorderedList>
-                    </CardContent>
-                    <CardActions style={{ alignSelf: 'end' }}>
-                      <ActionButton
-                        fullWidth
-                        variant="contained"
-                        theme={theme}
-                        onClick={() => handleOpenModal(tier.title)}
-                      >
-                        {tier.buttonText}
-                      </ActionButton>
-                    </CardActions>
-                  </FeatureCard>
-                </AnimatedBox>
-              </Grid>
-            );
-          })}
-        </Grid>
-      </MainContentContainer>
-      {isModalOpen && (
-        <GenericCardDialog
-          open={isModalOpen}
-          context={'Home'}
-          card={modalContent}
-        />
-      )}
-      {detailsModalShow && <DetailsModal />}
+                      backgroundColor: theme.palette.backgroundD.dark,
+                    }} // Apply the background color here
+                  />
+                  <CardContent style={{ flex: 1 }}>
+                    <CardUnorderedList>
+                      {tier.description.map((line, index) => (
+                        <CardListItem key={index} theme={theme}>
+                          {line}
+                        </CardListItem>
+                      ))}
+                    </CardUnorderedList>
+                  </CardContent>
+                  <CardActions style={{ alignSelf: 'end' }}>
+                    <ActionButton
+                      fullWidth
+                      variant="contained"
+                      theme={theme}
+                      onClick={() => handleOpenModal(tier.title)}
+                    >
+                      {tier.buttonText}
+                    </ActionButton>
+                  </CardActions>
+                </FeatureCard>
+              </AnimatedBox>
+            </Grid>
+          );
+        })}
+      </Grid>
+    </MainContentContainer>
+  );
+  // Function to render dialogs (GenericCardDialog and DetailsModal)
+  const renderDialogs = () => {
+    return (
+      <>
+        {isModalOpen && (
+          <GenericCardDialog
+            open={isModalOpen}
+            context={'Home'}
+            card={modalContent}
+          />
+        )}
+        {detailsModalShow && <DetailsModal />}
+      </>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      {/* Main Splash Page */}
+      {renderSplashPage()}
+
+      {/* Tertiary Content */}
+      {renderTertiaryContent()}
+
+      {/* Secondary Content */}
+      {renderSecondaryContent()}
+
+      {/* Main Content */}
+      {renderMainContent()}
+
+      {/* Dialogs */}
+      {renderDialogs()}
     </React.Fragment>
   );
 };
diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js
index 8c5729c..faf3727 100644
--- a/src/pages/StorePage.js
+++ b/src/pages/StorePage.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box, Container, Grid } from '@mui/material';
-import SearchBar from '../components/search/SearchBar';
-import ProductGrid from '../components/grids/storeSearchResultsGrid/ProductGrid';
+import SearchBar from '../components/other/search/SearchBar';
+import ProductGrid from '../components/grids/searchResultsGrids/ProductGrid';
 import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
 import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
 import HeroCenter from './pageStyles/HeroCenter';
@@ -12,105 +12,90 @@ import GenericCardDialog from '../components/dialogs/cardDialog/GenericCardDialo
 
 const StorePage = () => {
   const { theme } = useMode();
-  const { isPageLoading, pageError } = usePageContext();
+  const { setLoading, loadingStatus } = usePageContext();
   const [containerHeight, setContainerHeight] = useState(0);
   const [searchBarFocused, setSearchBarFocused] = useState(false);
-  const { openModalWithCard, isModalOpen, modalContent } = useModalContext();
-
-  if (isPageLoading) return <LoadingIndicator />;
-  if (pageError) return <ErrorIndicator error={pageError} />;
-
-  const updateContainerHeight = (height) => {
-    setContainerHeight(height);
-  };
-
-  return (
-    <React.Fragment>
-      {' '}
-      {/* <Box
+  const { isModalOpen, modalContent } = useModalContext();
+  // Function to render the Hero section
+  const renderHero = () => (
+    <HeroCenter
+      title="Welcome to Store"
+      subtitle="Search for cards and add them to your cart."
+      style={{
+        transform: searchBarFocused ? 'translateY(-10%)' : 'translateY(0)',
+        transition: 'transform 0.5s ease-in-out',
+        willChange: 'transform',
+        zIndex: 2,
+      }}
+    />
+  );
+  // Function to render the search bar and product grid
+  const renderSearchAndProducts = () => (
+    <Container
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: theme.spacing(3),
+        minHeight: '100%',
+        backgroundColor: theme.palette.background.secondary,
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.text.primary,
+      }}
+    >
+      <Grid
+        item
+        xs={12}
         sx={{
-          flexGrow: 1,
-          zIndex: -1,
-          height: '100%',
-          width: '100%',
-          margin: '50px',
-          minHeight: '100%',
+          ...gridItemStyles,
           background: theme.palette.background.dark,
-          // position: 'absolute',
+          padding: theme.spacing(3),
+          margin: theme.spacing(3),
+          borderRadius: theme.shape.borderRadius,
         }}
-      /> */}
-      <PageLayout>
-        <Box
-          sx={{
-            flexGrow: 1,
-            zIndex: -1,
-            height: '100%',
-            width: '100%',
-            margin: '10%',
-            // minHeight: '100%',
-            background: theme.palette.background.dark,
-            // position: 'absolute',
-          }}
-        />
-        <HeroCenter
-          title="Welcome to Store"
-          subtitle="Search for cards and add them to your cart."
-          style={{
-            transform: searchBarFocused ? 'translateY(-10%)' : 'translateY(0)',
-            transition: 'transform 0.5s ease-in-out',
-            willChange: 'transform',
-            zIndex: 2,
-          }}
+      >
+        <SearchBar
+          onSearchFocus={() => setSearchBarFocused(true)}
+          onSearchBlur={() => setSearchBarFocused(false)}
         />
-        <Container
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: theme.spacing(3),
-            minHeight: '100%',
-            backgroundColor: theme.palette.background.secondary,
-            borderRadius: theme.shape.borderRadius,
-            color: theme.palette.text.primary,
-          }}
-        >
-          <Grid
-            item
-            xs={12}
-            sx={{
-              ...gridItemStyles,
-              background: theme.palette.background.dark,
-              padding: theme.spacing(3),
-              margin: theme.spacing(3),
-              borderRadius: theme.shape.borderRadius,
-            }}
-          >
-            <SearchBar
-              onSearchFocus={() => setSearchBarFocused(true)}
-              onSearchBlur={() => setSearchBarFocused(false)}
-            />
-            <ProductGrid updateHeight={updateContainerHeight} />
-          </Grid>
-        </Container>
+        <ProductGrid updateHeight={setContainerHeight} />
+      </Grid>
+    </Container>
+  );
+  // Function to render the bottom background box (for UI effects)
+  const renderBackgroundBox = () => (
+    <Box
+      sx={{
+        flexGrow: 1,
+        zIndex: -700,
+        height: `${containerHeight * 2.35}px`,
+        width: '100%',
+        minHeight: '100%',
+        background: theme.palette.background.dark,
+        position: 'absolute',
+      }}
+    />
+  );
+
+  return (
+    <React.Fragment>
+      <PageLayout>
+        {/* Main content rendering */}
+        {renderHero()}
+        {renderSearchAndProducts()}
+
+        {/* Modal for card details */}
+        {isModalOpen && (
+          <GenericCardDialog
+            open={isModalOpen}
+            context={'Cart'}
+            card={modalContent}
+          />
+        )}
+
+        {/* Background box for additional UI */}
+        {renderBackgroundBox()}
       </PageLayout>
-      {isModalOpen && (
-        <GenericCardDialog
-          open={isModalOpen}
-          context={'Cart'}
-          card={modalContent}
-        />
-      )}
-      <Box
-        sx={{
-          flexGrow: 1,
-          zIndex: -700,
-          height: `${containerHeight * 2.35}px`,
-          width: '100%',
-          minHeight: '100%',
-          background: theme.palette.background.dark,
-          position: 'absolute',
-        }}
-      />
     </React.Fragment>
   );
 };
diff --git a/src/pages/otherPages/LoginPage.jsx b/src/pages/otherPages/LoginPage.jsx
index 0100fcc..40a4dde 100644
--- a/src/pages/otherPages/LoginPage.jsx
+++ b/src/pages/otherPages/LoginPage.jsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
 import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
 import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
@@ -12,6 +8,9 @@ import Grid from '@mui/material/Grid';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Typography from '@mui/material/Typography';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import LoginForm from '../../components/forms/LoginForm';
+import { useAuthContext, useMode } from '../../context';
+import { Navigate } from 'react-router-dom';
 
 function Copyright(props) {
   return (
@@ -22,8 +21,8 @@ function Copyright(props) {
       {...props}
     >
       {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
+      <Link color="inherit" href="www.reedvogt.com">
+        Enhanced Card Store
       </Link>{' '}
       {new Date().getFullYear()}
       {'.'}
@@ -31,20 +30,14 @@ function Copyright(props) {
   );
 }
 
-// TODO remove, this demo shouldn't need to reset the theme.
-
 const defaultTheme = createTheme();
 
 export default function LoginPage() {
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get('email'),
-      password: data.get('password'),
-    });
-  };
+  const { theme } = useMode();
+  const [cookie, setCookie] = React.useState('isLoggedIn');
+  // const { isLoggedIn } = useAuthContext();
 
+  if (cookie.isLoggedIn) return <Navigate to="/" />;
   return (
     <ThemeProvider theme={defaultTheme}>
       <Grid container component="main" sx={{ height: '100vh' }}>
@@ -76,64 +69,26 @@ export default function LoginPage() {
               alignItems: 'center',
             }}
           >
-            <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            <Avatar sx={{ m: 1, background: theme.palette.backgroundA.dark }}>
               <LockOutlinedIcon />
             </Avatar>
             <Typography component="h1" variant="h5">
               Sign in
             </Typography>
-            <Box
-              component="form"
-              noValidate
-              onSubmit={handleSubmit}
-              sx={{ mt: 1 }}
-            >
-              <TextField
-                margin="normal"
-                required
-                fullWidth
-                id="email"
-                label="Email Address"
-                name="email"
-                autoComplete="email"
-                autoFocus
-              />
-              <TextField
-                margin="normal"
-                required
-                fullWidth
-                name="password"
-                label="Password"
-                type="password"
-                id="password"
-                autoComplete="current-password"
-              />
-              <FormControlLabel
-                control={<Checkbox value="remember" color="primary" />}
-                label="Remember me"
-              />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                sx={{ mt: 3, mb: 2 }}
-              >
-                Sign In
-              </Button>
-              <Grid container>
-                <Grid item xs>
-                  <Link href="#" variant="body2">
-                    Forgot password?
-                  </Link>
-                </Grid>
-                <Grid item>
-                  <Link href="#" variant="body2">
-                    {"Don't have an account? Sign Up"}
-                  </Link>
-                </Grid>
+            <LoginForm />
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
               </Grid>
-              <Copyright sx={{ mt: 5 }} />
-            </Box>
+            </Grid>
+            <Copyright sx={{ mt: 5 }} />
           </Box>
         </Grid>
       </Grid>
diff --git a/src/pages/otherPages/ProfilePage.js b/src/pages/otherPages/ProfilePage.js
index 6545070..343b31e 100644
--- a/src/pages/otherPages/ProfilePage.js
+++ b/src/pages/otherPages/ProfilePage.js
@@ -1,5 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 import {
   Box,
   Button,
@@ -8,151 +7,79 @@ import {
   IconButton,
   Container,
   Snackbar,
-  styled,
-  TextField,
+  Grid,
+  Paper,
 } from '@mui/material';
 import { Edit as EditIcon } from '@mui/icons-material';
 import placeholder from '../../assets/images/placeholder.jpeg';
-import UserStats from '../../components/other/dataDisplay/UserStats';
+import UserStats from '../../layout/UserStats';
 import { useUserContext } from '../../context/UserContext/UserContext';
 import { useCookies } from 'react-cookie';
 import ThemeToggleButton from '../../components/buttons/other/ThemeToggleButton';
-import { useCombinedContext } from '../../context/CombinedContext/CombinedProvider';
-import {
-  AvatarStyled,
-  TypographyStyled,
-  IconButtonStyled,
-  ButtonStyled,
-  ButtonsContainer,
-  CustomButton,
-  ProfileFormContainer,
-} from '../pageStyles/StyledComponents';
 import ProfileForm from '../../components/forms/ProfileForm';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+import useResponsiveStyles from '../../context/hooks/useResponsiveStyles';
+import { useMode } from '../../context';
 
 const ProfilePage = () => {
-  const { selectedCollection } = useCollectionStore();
-  const { user, updateUser } = useUserContext();
+  const { updateUser } = useUserContext();
+  const { theme } = useMode();
+  const { isLarge } = useResponsiveStyles(theme);
+  // const isLarge = useMediaQuery(theme.breakpoints.up('lg'));
   const [cookies] = useCookies(['user']);
+  const user = cookies?.user;
   const [snackbarData, setSnackbarData] = useState({
     open: false,
     message: '',
   });
 
-  const {
-    handleSend,
-    handleRequestChartData,
-    handleRequestCollectionData,
-    handleRequestCronStop,
-  } = useCombinedContext();
-
   const openSnackbar = (message) => {
     setSnackbarData({ open: true, message });
   };
-  // const userId = user?.id;
-  const userId = cookies.user?.id;
-  console.log('USER ID:', userId);
-  // console.log('USER:', user);
-  const handleSaveChanges = useCallback(
-    (data) => {
-      updateUser(data);
-      openSnackbar('Saved changes.');
-    },
-    [updateUser]
-  );
-
-  const handleSendMessage = () => {
-    handleSend('Hello, Server!');
-    openSnackbar('Sent message to the server.');
-  };
-
-  const handleRequestCollectionDataFunction = () => {
-    if ((userId, selectedCollection)) {
-      handleRequestCollectionData(userId, selectedCollection);
-      console.log('REQUESTING COLLECTION DATA');
-      openSnackbar('Requested collection data.');
-    }
-  };
 
-  const handleRequestChartDataFunction = () => {
-    if (userId && selectedCollection) {
-      handleRequestChartData(userId, selectedCollection);
-      openSnackbar('Requested chart data.');
-    }
+  const openEdit = () => {
+    openSnackbar('Edit mode enabled');
   };
 
-  const handleStopCronJob = () => {
-    if (userId && typeof userId === 'string') {
-      handleRequestCronStop(userId);
-      console.log('STOPPING CRON JOB');
-    }
-
-    openSnackbar('Cron job stopped.');
+  const handleSaveChanges = (data) => {
+    updateUser(data);
+    openSnackbar('Saved changes.');
   };
 
   return (
-    <Container maxWidth="sm">
-      <Box mt={5} display="flex" flexDirection="column" alignItems="center">
-        <AvatarStyled src={placeholder} alt="User Avatar" />
-        <TypographyStyled variant="h4" gutterBottom>
-          Profile
-        </TypographyStyled>
-        <IconButtonStyled>
+    <Container maxWidth={isLarge ? 'lg' : 'md'}>
+      <Box my={5} display="flex" flexDirection="column" alignItems="center">
+        <Avatar
+          sx={{ width: 120, height: 120 }}
+          src={placeholder}
+          alt="User Avatar"
+        />
+        <Typography variant="h4" gutterBottom>
+          {user?.userBasicData?.firstName || 'User Profile'}
+        </Typography>
+        <IconButton color="primary" onClick={() => openEdit()}>
           <EditIcon />
-        </IconButtonStyled>
+        </IconButton>
       </Box>
 
-      <ButtonsContainer>
-        <CustomButton
-          variant="contained"
-          color="primary"
-          onClick={handleSendMessage}
-        >
-          Send Message to Server
-        </CustomButton>
-
-        <CustomButton
-          variant="contained"
-          color="primary"
-          onClick={handleRequestCollectionDataFunction}
-        >
-          Request Collection Data
-        </CustomButton>
-
-        <CustomButton
-          variant="contained"
-          color="primary"
-          onClick={handleRequestChartDataFunction}
-        >
-          Request Chart Data
-        </CustomButton>
-
-        {/* <CustomButton
-          variant="contained"
-          color="primary"
-          onClick={handleTriggerCronJob}
-        >
-          Trigger Cron Job
-        </CustomButton> */}
-        <CustomButton
-          variant="contained"
-          color="secondary"
-          onClick={handleStopCronJob}
-        >
-          Stop Cron Job
-        </CustomButton>
-      </ButtonsContainer>
-
-      <ProfileFormContainer>
-        <ProfileForm
-          {...user}
-          userName={cookies?.user?.username}
-          onSave={handleSaveChanges}
-        />
-      </ProfileFormContainer>
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={6}>
+          <Paper elevation={3} sx={{ p: 3 }}>
+            <Typography variant="h6" gutterBottom>
+              Personal Information
+            </Typography>
+            <ProfileForm {...user} onSave={handleSaveChanges} />
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Paper elevation={3} sx={{ p: 3 }}>
+            <Typography variant="h6" gutterBottom>
+              Statistics
+            </Typography>
+            <UserStats />
+          </Paper>
+        </Grid>
+      </Grid>
 
-      <UserStats />
-      <ThemeToggleButton />
       <Snackbar
         open={snackbarData.open}
         autoHideDuration={6000}
diff --git a/src/pages/pageStyles/StyledComponents.jsx b/src/pages/pageStyles/StyledComponents.jsx
index c0d630f..9a2e441 100644
--- a/src/pages/pageStyles/StyledComponents.jsx
+++ b/src/pages/pageStyles/StyledComponents.jsx
@@ -18,33 +18,33 @@ export const AppContainer = styled('div')(({ theme }) => ({
   height: '100vh',
   // background: '#222',
 }));
-const StyledContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  // alignSelf: 'start',
-  alignItems: 'center',
-  justifyContent: 'center',
-  // marginLeft: theme.spacing(2),
-  borderRadius: theme.shape.borderRadiusLarge,
-  // marginRight: theme.spacing(2),
-  // minHeight: '250vh',
-  flexGrow: 1,
-  // minHeight: '100%',
-  background: '#333',
-  // backgroundColor: '#f1f1f1',
-  padding: {
-    xs: 0,
-    sm: theme.spacing(1),
-    md: theme.spacing(2.5),
-    lg: theme.spacing(2.5),
-  },
-  height: '100%',
-  width: '100%',
-}));
+// const StyledContainer = styled(Box)(({ theme }) => ({
+//   display: 'flex',
+//   flexDirection: 'column',
+//   // alignSelf: 'start',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+//   // marginLeft: theme.spacing(2),
+//   borderRadius: theme.shape.borderRadiusLarge,
+//   // marginRight: theme.spacing(2),
+//   // minHeight: '250vh',
+//   flexGrow: 1,
+//   // minHeight: '100%',
+//   background: '#333',
+//   // backgroundColor: '#f1f1f1',
+//   padding: {
+//     xs: 0,
+//     sm: theme.spacing(1),
+//     md: theme.spacing(2.5),
+//     lg: theme.spacing(2.5),
+//   },
+//   height: '100%',
+//   width: '100%',
+// }));
 
-export const CollectionContainer = ({ children }) => {
-  return <StyledContainer>{children}</StyledContainer>;
-};
+// export const AppContainer = ({ children }) => {
+//   return <ContainerForApp>{children}</ContainerForApp>;
+// };
 const StyledContainer2 = styled('div')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -448,29 +448,48 @@ export const ActionButton = styled(Button)(({ theme }) => ({
 
 export const MainContentContainer = styled(Container)(({ theme }) => ({
   padding: theme.spacing(2, 4, 6),
+  // minHeight: '100%',
+  // minHeight: '35vh',
   borderRadius: theme.shape.borderRadius,
   backgroundColor: theme.palette.backgroundD.dark,
   boxShadow: theme.shadows[10],
-  margin: theme.spacing(2, 0), // added vertical spacing
+  marginTop: theme.spacing(2),
+  margin: theme.spacing(4, 0), // added vertical spacing
 }));
 
-export const SecondaryContentContainer = styled('div')(({ theme }) => ({
-  background: theme.palette.backgroundD.dark,
-  marginBottom: theme.spacing(2),
+export const SecondaryContentContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
   width: '100%',
-  flexDirection: 'column',
-  boxShadow: theme.shadows[3],
+  padding: theme.spacing(2),
+  background: theme.palette.backgroundD.dark,
   borderRadius: theme.shape.borderRadius,
+  // justifyContent: 'center',
+  // // marginBottom: theme.spacing(2),
+  // width: '100%',
+  // height: '100%',
+  // flexDirection: 'row',
+  // boxShadow: theme.shadows[3],
+  // borderRadius: theme.shape.borderRadius,
   transition: 'background-color 0.3s',
-  position: 'relative',
-  paddingTop: '0', // Remove top padding to align the animation at the top
-  paddingBottom: '0', // Remove bottom padding
-  minHeight: '70vh', // Adjust the height as needed to fit the animation
-  display: 'flex',
-  justifyContent: 'center', // Center the animation horizontally
-  alignItems: 'center', // Center the animation vertically
-  overflow: 'hidden', // Prevent overflow
+  // position: 'relative',
+  // paddingTop: theme.spacing(10), // Add top padding
+  // paddingBottom: theme.spacing(20), // Add bottom padding
+  // // marginBottom: theme.spacing(20),
+  // // paddingLeft: theme.spacing(10), // Add left padding
+  // // paddingRight: theme.spacing(10), // Add right padding
+  // minHeight: '70vh', // Adjust the height as needed to fit the animation
+  // maxHeight: '80vh',
+  // // alignItems: 'flex-start', // Center the animation vertically
+  // alignContent: 'center', // Center the animation vertically
+  // overflow: 'hidden', // Prevent overflow
+  // display: 'flex',
+  // alignItems: 'center', // Align children to the center horizontally
+  // justifyContent: 'space-between', // Distribute space between children
 }));
+
 export const TertiaryContentContainer = styled('div')(({ theme }) => ({
   padding: theme.spacing(3),
   borderRadius: theme.shape.borderRadius,
diff --git a/src/tests/CardChart.jsx b/src/tests/CardChart.jsx
new file mode 100644
index 0000000..818d850
--- /dev/null
+++ b/src/tests/CardChart.jsx
@@ -0,0 +1,435 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Container,
+  Grid,
+  List,
+  ListItem,
+  Paper,
+  Typography,
+  styled,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import CardLinearChart from './CardLinearChart';
+import {
+  ErrorBoundary,
+  useCollectionStore,
+  useMode,
+  usePageContext,
+} from '../context';
+import useCardCronJob from './useCardCronJob';
+import initialCardData from './initialCardData';
+import { format } from 'date-fns';
+import SingleCardAnimation from '../assets/animations/SingleCardAnimation';
+import LoadingCardAnimation from '../assets/animations/LoadingCardAnimation';
+import ImageDisplayFromHook from '../components/other/dataDisplay/ImageDisplayFromHook';
+
+// Adjust the padding, margin, and other styles as needed
+const ChartArea = styled(Box)(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+  padding: theme.spacing(2),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: '1px solid #000',
+  borderRadius: '5px',
+}));
+// A square, responsive container for the chart
+const SquareChartContainer = styled(Box)(({ theme }) => ({
+  position: 'relative',
+  width: '100%', // 100% of the parent width
+  paddingTop: '100%', // Maintain aspect ratio (1:1)
+  overflow: 'hidden',
+  '& > *': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+}));
+
+const CardChart = ({ cardData = initialCardData }) => {
+  // STYLING AND MEDIA QUERY HOOKS
+  const { theme } = useMode();
+  const theme2 = useTheme();
+  const isLgUp = useMediaQuery(theme.breakpoints.up('lg'));
+  const { selectedCollection, allCollections } = useCollectionStore();
+  const [imageUrl, setImageUrl] = useState(null);
+  const [error, setError] = useState(null);
+
+  const { startUpdates, pauseUpdates, resetData } =
+    useCardCronJob(initialCardData);
+  const formatTimestamp = (timestamp) =>
+    format(new Date(timestamp), "MMM do, yyyy 'at' HH:mm");
+
+  const [chartDimensions, setChartDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const { setLoading, loadingStatus, returnDisplay } = usePageContext();
+  if (!cardData || !cardData?.dailyPriceHistory) {
+    setLoading('isLoading', true);
+  }
+  const safeCardData = cardData || { dailyPriceHistory: [] };
+  const dailyPriceHistory = safeCardData?.dailyPriceHistory;
+
+  useEffect(() => {
+    const shouldLoad =
+      !cardData ||
+      !cardData?.dailyPriceHistory ||
+      !cardData.dailyPriceHistory.length;
+    if (shouldLoad !== loadingStatus.isLoading) {
+      setLoading('isLoading', shouldLoad);
+    }
+  }, [cardData, loadingStatus.isLoading, setLoading]); // Add loadingStatus.isLoading to dependencies
+
+  // useEffect to set image state when cardData changes
+  useEffect(() => {
+    if (cardData?.imageUrl) {
+      setImageUrl(cardData?.image);
+    }
+  }, [cardData?.imageUrl]);
+
+  const chartData = useMemo(
+    () =>
+      dailyPriceHistory?.map((priceEntry) => ({
+        x: priceEntry?.timestamp,
+        y: priceEntry?.num,
+      })),
+    [dailyPriceHistory] // dependency array
+  );
+  // const chartData = useMemo(
+  //   () =>
+  //     cardData?.dailyPriceHistory?.map((entry) => ({
+  //       x: format(new Date(entry.timestamp), "MMM do, yyyy 'at' HH:mm"),
+  //       y: entry.num,
+  //     })) || [],
+  //   [cardData?.dailyPriceHistory]
+  // );
+  const nivoReadyData = useMemo(
+    () => [
+      {
+        id: cardData?.name || 'default', // Fallback ID if cardData.name is not available
+        data: chartData,
+      },
+    ],
+    [chartData, cardData?.name]
+  );
+  // Ensure this effect doesn't set loading when not necessary
+  useEffect(() => {
+    if (nivoReadyData && nivoReadyData.length > 0 && loadingStatus.isLoading) {
+      setLoading('isLoading', false);
+    }
+  }, [nivoReadyData, setLoading, loadingStatus.isLoading]);
+  // Add responsive chart dimension handling
+  useEffect(() => {
+    // Example of setting dynamic chart dimensions (could be more complex based on container size)
+    const updateDimensions = () => {
+      const width = window.innerWidth < 500 ? window.innerWidth : 500; // or some other logic
+      const height = 300; // Fixed height or based on aspect ratio
+      setChartDimensions({ width, height });
+    };
+
+    window.addEventListener('resize', updateDimensions);
+    updateDimensions(); // Initial call
+
+    return () => {
+      window.removeEventListener('resize', updateDimensions); // Cleanup listener
+    };
+  }, []); // Empty array ensures this effect runs only once after initial render
+  // Simplified for demonstration
+  const renderLoadingAnimation = () => {
+    return (
+      <LoadingCardAnimation
+        // ... your props for LoadingCardAnimation
+        selected={true}
+      />
+    );
+  };
+  const renderHeaderWithAnimation = () => {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center', // Align items vertically
+        }}
+      >
+        <CardHeader
+          title="Card Cron Job Simulator"
+          sx={{
+            padding: theme.spacing(1),
+            margin: theme.spacing(1),
+          }}
+        />
+        {/* Conditionally render animation based on size or other conditions */}
+        {isLgUp && renderLoadingAnimation()}
+      </Box>
+    );
+  };
+  // const renderImageLoadTestWithErrorHandling = () => {
+  //   const handleImageLoad = () => {
+  //     console.log('Image loaded');
+  //   };
+  //   const handleImageError = () => {
+  //     console.log('Image error');
+  //   };
+  //   return (
+  //     <ErrorBoundary>
+  //       <ImageDisplayFromHook
+  //         imageUrl={imageUrl}
+  //         handleImageLoad={handleImageLoad}
+  //         handleImageError={handleImageError}
+  //       />
+  //     </ErrorBoundary>
+  //   );
+  // };
+  // const renderImageLoadTest = () => {
+  //   if (!imageUrl && allCollections?.length > 0) return null;
+  //   // if (!imageUrl && allCollections?.length > 0) {
+  //   //   setImageUrl(allCollections[0]?.cards[0]?.image);
+  //   // }
+  //   const handleImageLoad = () => {
+  //     console.log('Image loaded');
+  //   };
+  //   const handleImageError = () => {
+  //     console.log('Image error');
+  //   };
+  //   return (
+  //     <ImageDisplayFromHook
+  //       imageUrl={imageUrl}
+  //       handleImageLoad={handleImageLoad}
+  //       handleImageError={handleImageError}
+  //     />
+  //   );
+  // };
+  // const renderLoadingAnimation = () => {
+  //   if (isLgUp) {
+  //     console.log('Loading animation');
+  //     return (
+  //       <Container
+  //         sx={{
+  //           display: 'flex',
+  //           flexDirection: 'column',
+  //           height: '50%',
+  //           width: '50%',
+  //         }}
+  //       >
+  //         {/* Use LoadingCardAnimation with the correct props */}
+  //         <LoadingCardAnimation
+  //           cards={[]}
+  //           isLoading={true}
+  //           error={null}
+  //           cardData={cardData}
+  //         />
+  //       </Container>
+  //     );
+  //   }
+  //   return null;
+  // };
+
+  return (
+    <React.Fragment>
+      <Card
+        variant="outlined"
+        sx={{
+          background: theme.palette.backgroundA.lightest,
+          // width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: '1px solid #000',
+          borderRadius: '5px',
+          elevation: 2,
+          boxShadow: 2,
+          marginTop: 2,
+        }}
+      >
+        <CardContent
+          sx={{
+            // background: theme.palette.backgroundA.lightest,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: theme.spacing(1),
+            margin: theme.spacing(1),
+            elevation: 2,
+            boxShadow: 2,
+            marginTop: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              // width: '100%',
+              maxWidth: '100%',
+              maxHeight: '100%',
+              padding: theme.spacing(2),
+            }}
+          >
+            {renderHeaderWithAnimation()}
+          </Box>
+          {/* <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              // width: '100%',
+              maxWidth: '100%',
+              maxHeight: '100%',
+              padding: theme.spacing(2),
+            }}
+          >
+            {renderImageLoadTest()}
+          </Box> */}
+          <SquareChartContainer>
+            <ChartArea theme={theme}>
+              {loadingStatus?.isLoading ? (
+                returnDisplay()
+              ) : (
+                <ErrorBoundary>
+                  <CardLinearChart
+                    nivoReadyData={nivoReadyData}
+                    dimensions={chartDimensions}
+                  />
+                </ErrorBoundary>
+              )}
+            </ChartArea>
+          </SquareChartContainer>
+        </CardContent>
+
+        <Card
+          sx={{
+            // background: theme.palette.backgroundA.lightest,
+            elevation: 2,
+            boxShadow: 2,
+            // marginTop: 2,
+            // py: 1,
+          }}
+        >
+          {/* Card displaying data with responsive typography */}
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-around',
+              background: theme.palette.backgroundA.lightest,
+              // py: 1,
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            <CardActions
+              sx={{
+                justifyContent: 'space-between',
+                width: '100%',
+                margin: 0,
+                padding: 0,
+              }}
+            >
+              {/* Responsive Button Styling */}
+              {/* Iterate through buttons to reduce redundancy */}
+              {['Start Updates', 'Pause Updates', 'Reset Data'].map(
+                (text, index) => (
+                  <Button
+                    key={index}
+                    variant={text === 'Reset Data' ? 'outlined' : 'contained'}
+                    onClick={() => {
+                      if (text === 'Start Updates') {
+                        startUpdates();
+                      } else if (text === 'Pause Updates') {
+                        pauseUpdates();
+                      } else if (text === 'Reset Data') {
+                        resetData();
+                      }
+                    }}
+                    sx={{
+                      // padding: theme.spacing(1), // Reduced padding
+                      fontSize: '0.7rem', // Reduced font size
+                      width: '30%', // Adjusted width
+                      height: '75%',
+                      mx: '0.5rem',
+                      my: '0.5rem',
+                      // margin: '0 5px', // Adjust margin for spacing
+                      color: theme.palette.text.primary,
+                      background: theme.palette.backgroundA.darker,
+                      '&:hover': {
+                        background: theme.palette.backgroundA.darkest,
+                      },
+                    }}
+                  >
+                    {text}
+                  </Button>
+                )
+              )}
+            </CardActions>
+          </Box>
+          <CardContent
+            sx={{ padding: 0, '&:last-child': { paddingBottom: 0 } }}
+          >
+            <Paper
+              sx={{
+                background: theme.palette.backgroundA.lighter,
+                border: `1px solid${theme.palette.backgroundA.darker}`,
+                borderRadius: '5px',
+                elevation: 2,
+                boxShadow: 2,
+                padding: theme.spacing(1),
+                margin: theme.spacing(1),
+              }}
+            >
+              <List
+                dense
+                sx={{
+                  maxHeight: { xs: '120px', sm: '150px', md: '200px' }, // Responsive max height
+                  overflowY: 'auto',
+                }}
+              >
+                {cardData?.dailyPriceHistory?.map((entry, index) => (
+                  <ListItem
+                    key={index}
+                    divider
+                    sx={{ justifyContent: 'space-between' }}
+                  >
+                    <Typography variant="caption">
+                      Quantity: {cardData?.quantity}
+                    </Typography>
+                    <Typography variant="caption">
+                      Price: ${entry?.num}
+                    </Typography>
+                    <Typography variant="caption" color="textSecondary">
+                      {formatTimestamp(entry?.timestamp)}
+                    </Typography>
+                  </ListItem>
+                ))}
+              </List>
+            </Paper>
+          </CardContent>
+        </Card>
+      </Card>
+    </React.Fragment>
+  );
+};
+
+export default CardChart;
diff --git a/src/tests/CardLinearChart.jsx b/src/tests/CardLinearChart.jsx
new file mode 100644
index 0000000..4e5ba41
--- /dev/null
+++ b/src/tests/CardLinearChart.jsx
@@ -0,0 +1,220 @@
+import { Box, Tooltip, Typography, useMediaQuery } from '@mui/material';
+import { makeStyles, useTheme } from '@mui/styles';
+import { ResponsiveLine } from '@nivo/line';
+import { useCallback, useMemo, useState } from 'react';
+import { useMode } from '../context';
+const useStyles = makeStyles((theme) => ({
+  axisLabel: {
+    position: 'absolute',
+    textAlign: 'center',
+    margin: theme.spacing(2),
+    fontSize: '1rem',
+    fontWeight: 'bold',
+    color: theme.palette.text.primary,
+  },
+  chartContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: 'auto',
+    '@media (max-width: 600px)': {
+      width: '150%', // Adjust width for mobile screens
+      height: '300px', // Adjust height for mobile screens
+      transform: 'translateX(10%)', // Shift the chart to the right by 50%
+    },
+  },
+}));
+
+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>
+  );
+};
+const parseDate = (dateString) => {
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) {
+    console.error(`Invalid date: ${dateString}`);
+    return null; // or a sensible default, or throw an error, depending on your needs
+  }
+  return date;
+};
+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 CardLinearChart = ({ nivoReadyData, dimensions }) => {
+  const { theme } = useMode();
+  const classes = useStyles(theme);
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  // Ensure all data points have valid dates
+  const processedData = useMemo(() => {
+    return nivoReadyData?.map((series) => ({
+      ...series,
+      data: series?.data?.map((point) => ({
+        ...point,
+        x: parseDate(point?.x) || point?.x, // Use the parsed date or fallback to the original value
+      })),
+    }));
+  }, [nivoReadyData]);
+  // const { theme } = useMode();
+  // const classes = useStyles(theme);
+  // const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  // const [isZoomed, setIsZoomed] = useState(false);
+  // const { handleMouseMove, handleMouseLeave } = useEventHandlers();
+
+  // if (
+  //   !nivoReadyData ||
+  //   nivoReadyData.length === 0 ||
+  //   !Array.isArray(nivoReadyData)
+  // ) {
+  //   return <Typography>No data available</Typography>;
+  // }
+
+  // // Correct the date parsing logic
+  // const processedData = nivoReadyData.map((series) => ({
+  //   ...series,
+  //   data: series.data.map((point) => ({
+  //     ...point,
+  //     x: parseDate(point.x) || point.x, // Use the parsed date or fallback to the original value
+  //   })),
+  // }));
+
+  // // Ensure all data points have valid dates
+  // nivoReadyData?.forEach((series) => {
+  //   series?.data?.forEach((point) => {
+  //     const date = parseDate(point?.x);
+  //     if (!(date instanceof Date)) {
+  //       // Convert to date or handle error
+  //       console.warn('Invalid date found in chart data', date);
+
+  //       // Example of converting to date
+  //       const date = new Date(date);
+  //       if (date instanceof Date && !isNaN(date)) {
+  //         point.x = date;
+  //       }
+  //     }
+  //   });
+  // });
+
+  // Calculate chart properties based on nivoReadyData and dimensions
+  // Minimal chart properties for testing
+  const chartProps = useMemo(
+    () => ({
+      data: processedData,
+      margin: { top: 20, right: 20, bottom: 20, left: 35 },
+      xScale: {
+        type: 'time',
+        format: 'time:%Y-%m-%dT%H:%M:%S.%LZ',
+        useUTC: false,
+        precision: 'second',
+      },
+      axisBottom: {
+        tickRotation: 0,
+        legend: 'Time',
+        legendOffset: 36,
+        legendPosition: 'middle',
+        tickSize: 5,
+        tickPadding: 5,
+        tickValues: 'every 2 days',
+        format: '%b %d',
+      },
+      //     animate: true,
+      //     motionStiffness: 90,
+      //     motionDamping: 15,
+      //     axisLeft: {
+      //       orient: 'left',
+      //       legend: 'Price',
+      //       legendOffset: -40,
+      //       legendPosition: 'middle',
+      //       tickSize: 5,
+      //       tickPadding: 5,
+      //     },
+      //     pointSize: 10,
+      //     pointColor: { theme: 'background' },
+      //     pointBorderWidth: 2,
+      //     pointBorderColor: { from: 'serieColor' },
+      //     useMesh: true,
+      enableSlices: 'x',
+      yScale: { type: 'linear', min: 'auto', max: 'auto' },
+    }),
+    [nivoReadyData, processedData]
+  );
+  // const chartProps = useMemo(
+  //   () => ({
+  //     data: processedData,
+  //     margin: { top: 50, right: 110, bottom: 50, left: 60 },
+  //     xScale: {
+  //       type: 'time',
+  //       format: 'time:%Y-%m-%dT%H:%M:%S.%LZ',
+  //       useUTC: false,
+  //       precision: 'second',
+  //     },
+  //     xFormat: 'time:%Y-%m-%d %H:%M:%S',
+  //     yScale: { type: 'linear', min: 'auto', max: 'auto' },
+  //     animate: true,
+  //     motionStiffness: 90,
+  //     motionDamping: 15,
+  //     axisLeft: {
+  //       orient: 'left',
+  //       legend: 'Price',
+  //       legendOffset: -40,
+  //       legendPosition: 'middle',
+  //       tickSize: 5,
+  //       tickPadding: 5,
+  //     },
+  //     pointSize: 10,
+  //     pointColor: { theme: 'background' },
+  //     pointBorderWidth: 2,
+  //     pointBorderColor: { from: 'serieColor' },
+  //     useMesh: true,
+  //     enableSlices: 'x',
+  //   }),
+  //   [processedData, theme, isMobile] // Add other dependencies as needed
+  // ); // Add other dependencies as needed
+
+  // console.log('Nivo Ready Data:', nivoReadyData);
+  // console.log('Processed Data:', processedData);
+  // console.log('Chart Dimensions:', dimensions);
+
+  if (!processedData || !processedData?.length) {
+    return <Typography>No data available</Typography>;
+  }
+  return (
+    <Box
+      className={classes.chartContainer}
+      style={{ height: dimensions.height, width: dimensions.width }}
+    >
+      <ResponsiveLine {...chartProps} />
+    </Box>
+  );
+};
+
+export default CardLinearChart;
diff --git a/src/tests/initialCardData.jsx b/src/tests/initialCardData.jsx
new file mode 100644
index 0000000..338d229
--- /dev/null
+++ b/src/tests/initialCardData.jsx
@@ -0,0 +1,113 @@
+const initialCardData = {
+  archetype: [],
+  atk: 3000,
+  attribute: 'DARK',
+  card_images: [
+    /* array of card image objects */
+  ],
+  card_prices: [
+    /* array of card price objects */
+  ],
+  card_set: {
+    set_name: 'Ghosts From the Past: The 2nd Haunting',
+    set_code: 'GFP2-EN125',
+    set_rarity: 'Ultra Rare',
+    set_rarity_code: '(UR)',
+    set_price: {
+      /* set price details */
+    },
+  },
+  card_sets: [
+    /* array of card set objects */
+  ],
+  chart_datasets: [
+    /* array of chart data set objects */
+  ],
+  collectionId: '658cf52f32298ed0e5a25e5a',
+  // dailyPriceHistory tracks a card's price history by saving one price and timestamp every 24 hours
+  dailyPriceHistory: [
+    {
+      num: 1.03,
+      timestamp: '2023-12-20T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.21,
+      timestamp: '2023-12-21T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.17,
+      timestamp: '2023-12-22T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.18,
+      timestamp: '2023-12-23T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.27,
+      timestamp: '2023-12-24T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.4,
+      timestamp: '2023-12-25T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.49,
+      timestamp: '2023-12-26T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.7,
+      timestamp: '2023-12-27T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+    {
+      num: 1.73,
+      timestamp: '2023-12-28T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec315a',
+    },
+  ],
+  dataOfLastPriceUpdate: '2023-12-28T05:10:42.524Z',
+  def: 2500,
+  // eslint-disable-next-line max-len
+  desc: '"Dark Magician" + 1 Dragon monster\nThis card\'s name becomes "Dark Magician" while on the field or in the GY. Your opponent cannot target Spells/Traps you control with card effects, also they cannot be destroyed by your opponent\'s card effects.',
+  frameType: 'fusion',
+  id: '41721210',
+  image: 'https://images.ygoprodeck.com/images/cards/41721210.jpg',
+  lastSavedPrice: {
+    num: 1.03,
+    timestamp: '2023-12-28T05:10:42.524Z',
+    _id: '658d0676dc5934dc44ec3158',
+  },
+  latestPrice: {
+    num: 1.03,
+    timestamp: '2023-12-28T05:10:42.524Z',
+    _id: '658d0676dc5934dc44ec3157',
+  },
+  level: 8,
+  name: 'Dark Magician the Dragon Knight',
+  price: 1.03,
+  priceHistory: [
+    {
+      num: 1.03,
+      timestamp: '2023-12-28T05:10:42.524Z',
+      _id: '658d0676dc5934dc44ec3159',
+    },
+  ],
+  quantity: 1,
+  race: 'Dragon',
+  rarity: 'Ultra Rare',
+  tag: '',
+  totalPrice: 1.03,
+  type: 'Fusion Monster',
+  watchList: false,
+  __v: 0,
+  _id: '658d0676dc5934dc44ec3156',
+};
+
+export default initialCardData;
diff --git a/src/tests/useCardCronJob.jsx b/src/tests/useCardCronJob.jsx
new file mode 100644
index 0000000..eae3f04
--- /dev/null
+++ b/src/tests/useCardCronJob.jsx
@@ -0,0 +1,104 @@
+import { useState, useEffect, useCallback } from 'react';
+function generateNewPrice(lastPrice) {
+  const fluctuation = (Math.random() - 0.5) * 0.1; // Random fluctuation between -0.05 and +0.05
+  const newPrice = lastPrice + lastPrice * fluctuation; // Slightly increase or decrease the last price
+  return parseFloat(newPrice.toFixed(2)); // Ensure the new price is formatted to 2 decimal places
+}
+const useCardCronJob = (initialCardData) => {
+  const [cardData, setCardData] = useState(initialCardData);
+  const [intervalId, setIntervalId] = useState(null);
+
+  // Function to update the card's daily price history
+  const updatePriceHistory = useCallback(() => {
+    setCardData((currentCardData) => {
+      if (!currentCardData) return null;
+      const lastPrice =
+        currentCardData?.dailyPriceHistory.slice(-1)[0]?.num ||
+        currentCardData?.price; // Get last price or default to initial price
+      const newDailyPriceHistory = [...currentCardData.dailyPriceHistory];
+
+      // Generate 10 new daily prices
+      for (let i = 0; i < 10; i++) {
+        const newPrice = generateNewPrice(lastPrice);
+        newDailyPriceHistory.push({
+          num: newPrice,
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      // Ensure the dailyPriceHistory doesn't exceed 10 entries
+      const slicedHistory = newDailyPriceHistory.slice(-10);
+
+      return {
+        ...currentCardData,
+        dailyPriceHistory: slicedHistory,
+      };
+    });
+  }, []);
+
+  // const updateCardData = useCallback(() => {
+  //   setCardData((currentCard) => {
+  //     console.log('Updating card data:', cardData);
+  //     console.log('Current card data:', currentCard);
+  //     const newPriceHistory = {
+  //       num: (Math.random() * 10).toFixed(2), // or however you calculate new price
+  //       timestamp: new Date().toISOString(),
+  //     };
+
+  //     return {
+  //       ...currentCard,
+  //       quantity: currentCard.quantity + 1, // Increment quantity or however you update
+  //       dailyPriceHistory: [...currentCard.dailyPriceHistory, newPriceHistory],
+  //     };
+  //   });
+  // }, []);
+
+  // Simulate a cron job with useEffect and setInterval
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      updatePriceHistory(); // Update price history every interval
+    }, 120000); // Update every 5 seconds for example, adjust as needed
+
+    // Cleanup function to clear interval when component unmounts or updates
+    return () => clearInterval(intervalId);
+  }, [updatePriceHistory]);
+
+  const startUpdates = useCallback(() => {
+    console.log('Starting updates');
+    if (!intervalId) {
+      const id = setInterval(updatePriceHistory, 120000); // Update every 2 minutes, adjust as needed
+      setIntervalId(id);
+    }
+  }, [updatePriceHistory, intervalId]);
+
+  const pauseUpdates = useCallback(() => {
+    console.log('Pausing updates');
+    if (intervalId) {
+      clearInterval(intervalId);
+      setIntervalId(null);
+    }
+  }, [intervalId]);
+
+  const resetData = useCallback(() => {
+    console.log('Resetting data to initial state');
+    setCardData(initialCardData);
+    pauseUpdates();
+  }, [initialCardData, pauseUpdates]);
+
+  // useEffect(() => {
+  //   return () => {
+  //     // Cleanup interval on component unmount
+  //     if (intervalId) clearInterval(intervalId);
+  //   };
+  // }, [intervalId]);
+
+  return {
+    cardData,
+    updatePriceHistory,
+    startUpdates,
+    pauseUpdates,
+    resetData,
+  };
+};
+
+export default useCardCronJob;