From 317a493656e4aa61d065e5298d559d2dbe8338ef Mon Sep 17 00:00:00 2001
From: Reed Vogt <readvogt@gmail.com>
Date: Fri, 24 Nov 2023 14:55:38 -0800
Subject: [PATCH] add

---
 .github/workflows/main.yml                    |  37 ++++
 src/App.js                                    |  24 ++-
 src/assets/themeSettings.jsx                  |   2 +
 .../topButton/TopButton.css                   |   0
 .../buttons => assets}/topButton/TopButton.js |   0
 .../actionButtons/CardActionButtons.jsx       | 181 +++++++++++-------
 .../actionButtons/GenericActionButtons.jsx    |  56 +++++-
 src/components/buttons/other/SearchButton.js  |   9 +-
 src/components/cards/GenericCard.jsx          |  40 +++-
 src/components/chart/LinearChart.js           |   2 +-
 src/components/chart/PortfolioChart.jsx       |   2 +-
 src/components/cleanUp/AppWrapper.jsx         |  13 --
 .../cleanUp/CalculateCollectionStatistics.jsx |  57 ------
 src/components/cleanUp/CardModal.js           | 123 ------------
 src/components/cleanUp/CartActionButtons.js   |  36 ----
 .../cleanUp/CollectionActionButtons.jsx       |  73 -------
 src/components/cleanUp/CollectionDialog.jsx   |  61 ------
 .../cleanUp/CollectionEditPanel.jsx           |  89 ---------
 src/components/cleanUp/CollectionForm.jsx     |  63 ------
 src/components/cleanUp/CustomPopover.jsx      |  69 -------
 src/components/cleanUp/DeckActionButtons.js   |  65 -------
 src/components/cleanUp/DeckCard.js            | 118 ------------
 src/components/cleanUp/DeckCardDialog.jsx     |  16 --
 src/components/cleanUp/DeckCardDialogue.js    |  96 ----------
 src/components/cleanUp/DeckCardModal.js       |  55 ------
 src/components/cleanUp/DeckCountDisplay.jsx   |  12 --
 src/components/cleanUp/DeckDialog.jsx         |  57 ------
 src/components/cleanUp/Hero.jsx               |  49 -----
 src/components/cleanUp/PortfolioCard.jsx      | 118 ------------
 src/components/cleanUp/PracticeScraperPage.js |  48 -----
 src/components/cleanUp/ProductCard.js         |  98 ----------
 src/components/cleanUp/ScrapeDisplay.js       |  26 ---
 src/components/cleanUp/ScrapeSearch.js        |  44 -----
 src/components/cleanUp/ScraperContainer.js    |  36 ----
 .../cleanUp/SelectCollectionDialog.jsx        | 133 -------------
 src/components/cleanUp/UpdateChartData.jsx    |  72 -------
 src/components/cleanUp/button/Button.css      |  43 -----
 src/components/cleanUp/button/Button.js       |  35 ----
 src/components/cleanUp/theme.jsx              |   0
 src/components/collection/example-data.json   |  64 -------
 src/components/forms/AddCardForm.jsx          |  74 +++----
 src/components/forms/SearchForm.jsx           | 123 ++++++------
 .../customerCheckoutForm/CartActions.jsx      |   2 +-
 .../customerCheckoutForm/CustomerForm.js      |  40 ++--
 src/components/grids/DeckDisplay.js           |  88 ++++-----
 src/components/grids/StoreItem.jsx            |  11 ++
 .../grids/deckBuilderGrids/DeckButtonList.js  |   2 +
 .../searchResultGrids/DeckSearchCardGrid.jsx  |  35 ++--
 .../storeSearchResultsGrid/ProductGrid.js     |  58 ++++--
 src/components/headings/PortfolioHeader.jsx   |  24 ---
 src/components/icons/DeckOfCardsIcon.jsx      |   8 -
 .../{ => cardModal}/GenericCardModal.jsx      |  21 +-
 .../modals/stripeModal/StripeCheckoutModal.js |  87 ++++-----
 src/components/other/DeckEditPanel.js         |  99 ----------
 .../other/InputComponents/CardNameInput.js    |  21 +-
 .../CollectionStatisticsSelector.jsx          |   2 +-
 .../other/InputComponents/CustomSelector.js   |  49 +++--
 .../other/InputComponents/DeckEditPanel.js    | 109 +++++++++++
 .../other/{ => dataDisplay}/CartSummary.js    |   0
 .../other/{ => dataDisplay}/CartTotal.jsx     |   0
 .../CollectionValueTracker.jsx                |   2 +-
 .../{ => dataDisplay}/ProgressCircle.jsx      |   0
 .../other/{ => dataDisplay}/StatBox.jsx       |   0
 .../{ => dataDisplay}/StatisticsArea.jsx      |   0
 .../{ => dataDisplay}/TopCardsDisplay.jsx     |  42 ++--
 .../other/{ => dataDisplay}/UserStats.jsx     |   6 +-
 .../ChartErrorBoundary.jsx                    |   0
 src/components/reusable/HeaderTitle.jsx       |  55 +++---
 .../{chart => reusable}/chartUtils.jsx        | 124 ------------
 .../{ => reusable}/icons/CartIcon.jsx         |   0
 .../{ => reusable}/icons/CollectionIcon.jsx   |   0
 .../reusable/icons/DeckOfCardsIcon.jsx        |  29 +++
 .../{ => reusable}/icons/TestingIcon.jsx      |   0
 .../reusable/indicators/LoadingIndicator2.js  |  22 +--
 src/components/search/DeckSearch.js           |  14 +-
 src/components/search/PortfolioCardSearch.jsx |  27 ---
 src/components/search/SearchBar.js            | 132 ++++++++-----
 .../cartPageContainers}/AddressForm.jsx       |   0
 .../cartPageContainers/CartContent.js         |   2 +-
 .../cartPageContainers}/Checkout.jsx          |   0
 .../cartPageContainers}/PaymentForm.jsx       |   0
 .../cartPageContainers}/Review.jsx            |   0
 .../PortfolioChartContainer.jsx               |   2 +-
 .../PortfolioContent.jsx                      | 107 +++++------
 .../CardImagesContext/CardImagesContext.jsx   |   3 +-
 src/context/CartContext/CartContext.js        | 135 +++++++------
 .../CollectionContext/CollectionContext.jsx   |  52 +----
 .../CollectionContext/collectionUtility.jsx   |  52 +++++
 src/context/DeckContext/DeckContext.js        |  45 +++--
 src/index.js                                  |  55 +++---
 src/pages/CartPage.js                         |   1 -
 src/pages/CollectionPage.js                   |  10 +-
 src/pages/DeckBuilderPage.js                  |  10 +-
 src/pages/HomePage.js                         |  50 ++---
 src/pages/ProfilePage.js                      |   2 +-
 src/pages/StorePage.js                        |  97 +++++++++-
 src/pages/pages.json                          |  33 ++--
 src/setupProxy.js                             |  18 --
 98 files changed, 1263 insertions(+), 2839 deletions(-)
 create mode 100644 .github/workflows/main.yml
 rename src/{components/buttons => assets}/topButton/TopButton.css (100%)
 rename src/{components/buttons => assets}/topButton/TopButton.js (100%)
 delete mode 100644 src/components/cleanUp/AppWrapper.jsx
 delete mode 100644 src/components/cleanUp/CalculateCollectionStatistics.jsx
 delete mode 100644 src/components/cleanUp/CardModal.js
 delete mode 100644 src/components/cleanUp/CartActionButtons.js
 delete mode 100644 src/components/cleanUp/CollectionActionButtons.jsx
 delete mode 100644 src/components/cleanUp/CollectionDialog.jsx
 delete mode 100644 src/components/cleanUp/CollectionEditPanel.jsx
 delete mode 100644 src/components/cleanUp/CollectionForm.jsx
 delete mode 100644 src/components/cleanUp/CustomPopover.jsx
 delete mode 100644 src/components/cleanUp/DeckActionButtons.js
 delete mode 100644 src/components/cleanUp/DeckCard.js
 delete mode 100644 src/components/cleanUp/DeckCardDialog.jsx
 delete mode 100644 src/components/cleanUp/DeckCardDialogue.js
 delete mode 100644 src/components/cleanUp/DeckCardModal.js
 delete mode 100644 src/components/cleanUp/DeckCountDisplay.jsx
 delete mode 100644 src/components/cleanUp/DeckDialog.jsx
 delete mode 100644 src/components/cleanUp/Hero.jsx
 delete mode 100644 src/components/cleanUp/PortfolioCard.jsx
 delete mode 100644 src/components/cleanUp/PracticeScraperPage.js
 delete mode 100644 src/components/cleanUp/ProductCard.js
 delete mode 100644 src/components/cleanUp/ScrapeDisplay.js
 delete mode 100644 src/components/cleanUp/ScrapeSearch.js
 delete mode 100644 src/components/cleanUp/ScraperContainer.js
 delete mode 100644 src/components/cleanUp/SelectCollectionDialog.jsx
 delete mode 100644 src/components/cleanUp/UpdateChartData.jsx
 delete mode 100644 src/components/cleanUp/button/Button.css
 delete mode 100644 src/components/cleanUp/button/Button.js
 delete mode 100644 src/components/cleanUp/theme.jsx
 delete mode 100644 src/components/collection/example-data.json
 create mode 100644 src/components/grids/StoreItem.jsx
 delete mode 100644 src/components/headings/PortfolioHeader.jsx
 delete mode 100644 src/components/icons/DeckOfCardsIcon.jsx
 rename src/components/modals/{ => cardModal}/GenericCardModal.jsx (79%)
 delete mode 100644 src/components/other/DeckEditPanel.js
 create mode 100644 src/components/other/InputComponents/DeckEditPanel.js
 rename src/components/other/{ => dataDisplay}/CartSummary.js (100%)
 rename src/components/other/{ => dataDisplay}/CartTotal.jsx (100%)
 rename src/components/other/{ => dataDisplay}/CollectionValueTracker.jsx (98%)
 rename src/components/other/{ => dataDisplay}/ProgressCircle.jsx (100%)
 rename src/components/other/{ => dataDisplay}/StatBox.jsx (100%)
 rename src/components/other/{ => dataDisplay}/StatisticsArea.jsx (100%)
 rename src/components/other/{ => dataDisplay}/TopCardsDisplay.jsx (80%)
 rename src/components/other/{ => dataDisplay}/UserStats.jsx (76%)
 rename src/components/{chart => reusable}/ChartErrorBoundary.jsx (100%)
 rename src/components/{chart => reusable}/chartUtils.jsx (55%)
 rename src/components/{ => reusable}/icons/CartIcon.jsx (100%)
 rename src/components/{ => reusable}/icons/CollectionIcon.jsx (100%)
 create mode 100644 src/components/reusable/icons/DeckOfCardsIcon.jsx
 rename src/components/{ => reusable}/icons/TestingIcon.jsx (100%)
 delete mode 100644 src/components/search/PortfolioCardSearch.jsx
 rename src/{components/other => containers/cartPageContainers}/AddressForm.jsx (100%)
 rename src/{components/other => containers/cartPageContainers}/Checkout.jsx (100%)
 rename src/{components/other => containers/cartPageContainers}/PaymentForm.jsx (100%)
 rename src/{components/other => containers/cartPageContainers}/Review.jsx (100%)
 delete mode 100644 src/setupProxy.js

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..6a3095a
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,37 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.16.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build
+
+      - name: Install Netlify CLI
+        run: npm install netlify-cli -g
+
+      - name: Deploy to Netlify
+        run: npx netlify deploy --dir=src --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
diff --git a/src/App.js b/src/App.js
index e56bc47..2f136d0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,6 +26,8 @@ import { useUtilityContext } from './context/UtilityContext/UtilityContext';
 import { AppContainer } from './pages/pageStyles/StyledComponents';
 import { useCardImages } from './context/CardImagesContext/CardImagesContext';
 import { useCookies } from 'react-cookie';
+import { useDeckStore } from './context/DeckContext/DeckContext';
+import { useCartStore } from './context/CartContext/CartContext';
 const App = () => {
   const [cookies] = useCookies(['user']);
 
@@ -34,6 +36,8 @@ const App = () => {
   // const { setContext } = useAppContext(); // Assuming useAppContext provides setContext
   const { fetchAllCollectionsForUser, selectedCollection } =
     useCollectionStore();
+  const { allDecks, fetchAllDecksForUser, selectedDeck } = useDeckStore();
+  const { fetchUserCart, cartData } = useCartStore();
   const { isLoading, setIsLoading } = useUtilityContext();
 
   // const { getRandomCardImages } = useCardImages(); // Add this line
@@ -44,7 +48,7 @@ const App = () => {
 
   useEffect(() => {
     if (user) {
-      fetchAllCollectionsForUser(user.id)
+      fetchAllCollectionsForUser()
         .then(() => {
           setIsLoading(false);
         })
@@ -54,6 +58,20 @@ const App = () => {
         });
     }
   }, [user, fetchAllCollectionsForUser, setIsLoading, selectedCollection]);
+  // useEffect(() => {
+  //   if (user) {
+  //     fetchAllDecksForUser(user?.id).catch((err) =>
+  //       console.error('Failed to get all decks:', err)
+  //     );
+  //   }
+  // }, [fetchAllDecksForUser]);
+  // useEffect(() => {
+  //   if (user) {
+  //     fetchUserCart(user?.id).catch((err) =>
+  //       console.error('Failed to get cart:', err)
+  //     );
+  //   }
+  // }, [fetchUserCart]);
 
   // Handle initial loading state
   useEffect(() => {
@@ -79,7 +97,7 @@ const App = () => {
       {isLoading ? (
         <SplashPage />
       ) : (
-        <Router>
+        <React.Fragment>
           <AppContainer>
             <Header />
             <Routes>
@@ -127,7 +145,7 @@ const App = () => {
             </Routes>
             <Footer />
           </AppContainer>
-        </Router>
+        </React.Fragment>
       )}
     </>
   );
diff --git a/src/assets/themeSettings.jsx b/src/assets/themeSettings.jsx
index 23cf87f..e3c7751 100644
--- a/src/assets/themeSettings.jsx
+++ b/src/assets/themeSettings.jsx
@@ -62,6 +62,7 @@ export const themeSettings = (mode) => {
       error: {
         main: colors.redAccent[500],
         dark: colors.redAccent[700],
+        contrastText: '#fff',
       },
       warning: {
         main: colors.redAccent[500],
@@ -70,6 +71,7 @@ export const themeSettings = (mode) => {
         light: colors.greenAccent[100],
         main: colors.greenAccent[500],
         dark: colors.greenAccent[200],
+        contrastText: '#fff',
       },
       info: {
         main: colors.blueAccent[500],
diff --git a/src/components/buttons/topButton/TopButton.css b/src/assets/topButton/TopButton.css
similarity index 100%
rename from src/components/buttons/topButton/TopButton.css
rename to src/assets/topButton/TopButton.css
diff --git a/src/components/buttons/topButton/TopButton.js b/src/assets/topButton/TopButton.js
similarity index 100%
rename from src/components/buttons/topButton/TopButton.js
rename to src/assets/topButton/TopButton.js
diff --git a/src/components/buttons/actionButtons/CardActionButtons.jsx b/src/components/buttons/actionButtons/CardActionButtons.jsx
index ea451a0..1e1314f 100644
--- a/src/components/buttons/actionButtons/CardActionButtons.jsx
+++ b/src/components/buttons/actionButtons/CardActionButtons.jsx
@@ -1,5 +1,13 @@
 import React, { useCallback } from 'react';
-import { Box, Button, Grid } from '@mui/material';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  IconButton,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
 import { useStyles } from '../buttonStyles';
 import useAppContext from '../../../context/hooks/useAppContext';
 import { useMode } from '../../../context/hooks/colormode';
@@ -7,41 +15,68 @@ import { useCollectionStore } from '../../../context/CollectionContext/Collectio
 import Logger from '../../grids/collectionGrids/Logger';
 import { useDeckStore } from '../../../context/DeckContext/DeckContext';
 import { useCartStore } from '../../../context/CartContext/CartContext';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
+import DeleteIcon from '@material-ui/icons/Delete';
 const cardOtherLogger = new Logger([
   'Action',
   'Card Name',
   'Quantity',
   'Total Price',
 ]);
-const CardActionButtons = ({ card, context, closeModal }) => {
+const CardActionButtons = ({
+  card,
+  context,
+  closeModal,
+  modifiedContextProps,
+}) => {
   const { theme } = useMode(); // Using the theme hook
 
   const classes = useStyles();
-  const { contextProps, isContextAvailable } = useAppContext(context); // Changed to object destructuring
-  const { addOneToCollection, removeOneFromCollection } = useCollectionStore();
-  const { addToDeck, removeFromDeck } = useDeckStore();
-  const { addToCart, removeFromCart } = useCartStore();
-  // const { totalQuantity } = context[contextProps?.totalQuantity];
-  // const { totalQuantity } = useCollectionStore();
-  // if (!isContextAvailable || !contextProps) {
-  //   console.error(`The component isn't wrapped with the ${context}Provider`);
-  //   return <Box sx={{ color: 'error.main' }}>Context not available</Box>;
-  // }
+  // const { contextProps, isContextAvailable } = useAppContext(context);
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
 
+  const { addOneToCollection, removeOneFromCollection } = useCollectionStore();
+  const { addOneToDeck, removeOneFromDeck } = useDeckStore();
+  const { addOneToCart, removeOneFromCart } = useCartStore();
   const styles = {
     box: {
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
+      flexGrow: 1,
+      width: '100%', // Using theme spacing
       padding: theme.spacing(2), // Using theme spacing
       backgroundColor: theme.palette.background.paper, // Using theme background color
     },
+    grid: {
+      // display: 'flex',
+      flexGrow: 1,
+      // flexDirection: 'column',
+      width: '100%', // Using theme spacing
+    },
+    grid2: {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'row',
+      width: '100%', // Using theme spacing
+      justifyContent: 'space-between',
+    },
     button: {
       margin: theme.spacing(1), // Using theme spacing
       color: theme.palette.background.primary, // Using theme text color
       backgroundColor: theme.palette.success.main, // Using theme background color
     },
+    removeButton: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.error.contrastText, // Using theme text color
+      backgroundColor: theme.palette.error.main, // Using theme background color
+    },
+    addButton: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.success.contrastText, // Using theme text color
+      backgroundColor: theme.palette.success.main, // Using theme background color
+    },
     gridItem: {
       textAlign: 'center',
     },
@@ -49,35 +84,6 @@ const CardActionButtons = ({ card, context, closeModal }) => {
   const ADD = 'add';
   const REMOVE_ONE = 'removeOne';
   const REMOVE_ALL = 'removeAll';
-  // const performAction = useCallback(
-  //   (action, card) => {
-  //     console.log(
-  //       `action --> ${action}`,
-  //       `payload --> ${card}`,
-  //       `context --> ${context}`
-  //     );
-  //     try {
-  //       if (context === 'Collection') {
-  //         if (action === ADD) {
-  //           addOneToCollection(card, card.id);
-  //           cardOtherLogger.logCardAction('Add Card', card);
-  //         } else if (action === REMOVE_ONE) {
-  //           removeOneFromCollection(card, card.id);
-  //           cardOtherLogger.logCardAction('Remove Card', card);
-  //         }
-  //       }
-  //       // Additional context handling can be implemented here
-  //     } catch (error) {
-  //       console.error(
-  //         `Error performing action '${action}' with payload`,
-  //         card,
-  //         error
-  //       );
-  //     }
-  //   },
-  //   [context, addOneToCollection, removeOneFromCollection, cardOtherLogger]
-  // );
-
   const performAction = useCallback(
     (action, card) => {
       try {
@@ -91,16 +97,16 @@ const CardActionButtons = ({ card, context, closeModal }) => {
             break;
           case 'Deck':
             if (action === 'add') {
-              addToDeck(card, card.id);
+              addOneToDeck(card);
             } else if (action === 'removeOne') {
-              removeFromDeck(card, card.id);
+              removeOneFromDeck(card);
             }
             break;
           case 'Cart':
             if (action === 'add') {
-              addToCart(card, card.id);
+              addOneToCart(card);
             } else if (action === 'removeOne') {
-              removeFromCart(card, card.id);
+              removeOneFromCart(card);
             }
             break;
           default:
@@ -118,16 +124,16 @@ const CardActionButtons = ({ card, context, closeModal }) => {
     [
       addOneToCollection,
       removeOneFromCollection,
-      addToDeck,
-      removeFromDeck,
-      addToCart,
-      removeFromCart,
+      addOneToDeck,
+      removeOneFromDeck,
+      addOneToCart,
+      removeOneFromCart,
       context,
     ]
   );
 
   const handleAddClick = () => {
-    console.log('handleAddClick', card);
+    console.log('handleAddClick', card, context);
     performAction(ADD, card);
     closeModal?.();
   };
@@ -144,24 +150,69 @@ const CardActionButtons = ({ card, context, closeModal }) => {
 
   return (
     <Box sx={styles.box} onClick={closeModal}>
-      <Grid container spacing={2}>
-        <Grid item xs={6} sx={styles.gridItem}>
-          {`In ${context}: `} {card.quantity}
-        </Grid>
-        <Grid item xs={6} sx={styles.gridItem}>
-          <Button sx={styles.button} onClick={handleAddClick}>
-            +
-          </Button>
-          <Button sx={styles.button} onClick={handleRemoveOne}>
-            -
-          </Button>
-        </Grid>
-      </Grid>
+      {!isLargeScreen && (
+        <>
+          <Grid container spacing={2} sx={styles.grid}>
+            <Grid
+              item
+              xs={6}
+              sx={{ textAlign: 'center', justifyContent: 'center' }}
+            >
+              <Typography variant="h8" component="span">
+                {`In ${context}: `}
+              </Typography>
+              <Typography variant="h6" component="span">
+                {card.quantity}
+              </Typography>
+            </Grid>
+
+            <Grid item xs={6} sx={styles.gridItem}>
+              <Button sx={styles.addButton} onClick={handleAddClick}>
+                +
+              </Button>
+              <Button sx={styles.removeButton} onClick={handleRemoveOne}>
+                -
+              </Button>
+            </Grid>
+          </Grid>
+          <Divider />
+          <Grid container spacing={2} sx={styles.grid2}>
+            <Grid item xs={6} sx={styles.gridItem}>
+              <IconButton
+                aria-label="delete"
+                size="medium"
+                sx={styles.addButton}
+                onClick={handleAddClick}
+              >
+                <AddCircleOutlineIcon fontSize="inherit" />
+              </IconButton>
+            </Grid>
+            <Grid item xs={6} sx={styles.gridItem}>
+              <IconButton
+                aria-label="delete"
+                size="medium"
+                sx={styles.removeButton}
+                onClick={handleRemoveOne}
+              >
+                <DeleteIcon fontSize="inherit" />
+              </IconButton>
+            </Grid>
+          </Grid>
+        </>
+      )}
+      <Button
+        variant="contained"
+        color="secondary"
+        sx={{ ...styles.addButton, width: '100%' }}
+        onClick={handleAddClick}
+      >
+        {`Add to ${context}`}
+      </Button>
       <Button
         variant="contained"
         color="secondary"
-        sx={{ ...styles.button, width: '100%' }}
-        onClick={handleRemoveAll}
+        sx={{ ...styles.removeButton, width: '100%' }}
+        onClick={handleRemoveOne}
       >
         {`Remove from ${context}`}
       </Button>
diff --git a/src/components/buttons/actionButtons/GenericActionButtons.jsx b/src/components/buttons/actionButtons/GenericActionButtons.jsx
index 820ecc4..cf898e9 100644
--- a/src/components/buttons/actionButtons/GenericActionButtons.jsx
+++ b/src/components/buttons/actionButtons/GenericActionButtons.jsx
@@ -28,9 +28,11 @@ const GenericActionButtons = ({ card, context }) => {
     <Box
       sx={{
         display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-evenly',
-        height: '100%',
+        flexDirection: { xs: 'column', sm: 'row' }, // Vertical layout on small screens, horizontal on larger
+        justifyContent: 'space-between', // Spread buttons evenly
+        alignItems: 'center', // Center align the buttons
+        gap: 1, // Add a small gap between buttons
+        flexGrow: 1,
       }}
     >
       <CardActionButtons
@@ -46,6 +48,54 @@ const GenericActionButtons = ({ card, context }) => {
 
 export default GenericActionButtons;
 
+// import React, { useContext } from 'react';
+// import CardActionButtons from './CardActionButtons';
+// import useAppContext from '../../../context/hooks/useAppContext';
+// import { ModalContext } from '../../../context/ModalContext/ModalContext';
+// import { Box } from '@mui/material';
+
+// const GenericActionButtons = ({ card, context }) => {
+//   const contextProps = useAppContext(); // Assuming useAppContext returns the context object
+//   const { closeModal, isModalOpen, setModalOpen } = useContext(ModalContext);
+
+//   if (!contextProps) {
+//     return (
+//       <Box sx={{ color: 'error.main' }}>Provider not found for {context}</Box>
+//     );
+//   }
+
+//   let modifiedContextProps = contextProps[context];
+
+//   if (!modifiedContextProps) {
+//     return (
+//       <Box sx={{ color: 'error.main' }}>
+//         Invalid context provided: {context}
+//       </Box>
+//     );
+//   }
+
+//   return (
+//     <Box
+//       sx={{
+//         display: 'flex',
+//         flexDirection: 'column',
+//         justifyContent: 'space-evenly',
+//         height: '100%',
+//       }}
+//     >
+//       <CardActionButtons
+//         card={card}
+//         context={context}
+//         contextProps={modifiedContextProps}
+//         closeModal={() => setModalOpen(false)}
+//         open={isModalOpen}
+//       />
+//     </Box>
+//   );
+// };
+
+// export default GenericActionButtons;
+
 // import React, { useContext, useEffect } from 'react';
 // import { makeStyles } from '@mui/styles';
 // import GenericCardModal from '../../modals/GenericCardModal';
diff --git a/src/components/buttons/other/SearchButton.js b/src/components/buttons/other/SearchButton.js
index a82ec7c..f32054d 100644
--- a/src/components/buttons/other/SearchButton.js
+++ b/src/components/buttons/other/SearchButton.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button, Grid } from '@mui/material';
 import { useCardStore } from '../../../context/CardContext/CardStore';
+import { useMode } from '../../../context/hooks/colormode';
 
-const SearchButton = ({ searchParams }) => {
-  const { handleRequest } = useCardStore();
+const SearchButton = ({ searchParams, handleSubmit }) => {
+  // const { handleRequest } = useCardStore();
+  const { theme } = useMode();
 
   return (
     <Grid item xs={12}>
@@ -11,7 +13,8 @@ const SearchButton = ({ searchParams }) => {
         fullWidth
         variant="contained"
         color="primary"
-        onClick={() => handleRequest(searchParams)}
+        sx={{ mt: 1, mb: 1, background: theme.palette.primary.main }}
+        onClick={() => handleSubmit()} // Corrected onClick
       >
         Search
       </Button>
diff --git a/src/components/cards/GenericCard.jsx b/src/components/cards/GenericCard.jsx
index 18b2292..8c6ceea 100644
--- a/src/components/cards/GenericCard.jsx
+++ b/src/components/cards/GenericCard.jsx
@@ -5,6 +5,8 @@ import {
   CardActions,
   Typography,
   styled,
+  useMediaQuery,
+  Container,
 } from '@mui/material';
 import CardMediaSection from '../media/CardMediaSection';
 import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
@@ -12,6 +14,7 @@ import placeholderImage from '../../assets/images/placeholder.jpeg';
 import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
 import { ModalContext } from '../../context/ModalContext/ModalContext';
 import { PopoverContext } from '../../context/PopoverContext/PopoverContext';
+import { useMode } from '../../context/hooks/colormode';
 
 const AspectRatioBox = styled('div')(({ theme }) => ({
   width: '100%', // Full width of the parent container
@@ -35,7 +38,10 @@ const StyledCard = styled(Card)(({ theme }) => ({
 }));
 
 const GenericCard = React.forwardRef((props, ref) => {
+  const { theme } = useMode();
   const { card, context, setClickedCard } = props;
+  // const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+
   const { selectedCollection } = useCollectionStore();
   const { openModalWithCard, setModalOpen } = useContext(ModalContext);
   const { setHoveredCard, setIsPopoverOpen, hoveredCard } =
@@ -58,9 +64,34 @@ const GenericCard = React.forwardRef((props, ref) => {
     setIsPopoverOpen(hoveredCard === card);
   }, [hoveredCard, card, setIsPopoverOpen]);
 
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+
   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
   const price = `Price: ${card?.card_prices?.[0]?.tcgplayer_price || 'N/A'}`;
 
+  const renderCardContent = () => {
+    // Adjust content based on the screen size
+    let variant = 'body2';
+    if (isSmallScreen) {
+      // variant = 'caption';
+      variant = 'h6';
+    } else if (isMediumScreen) {
+      variant = 'body2';
+    } else if (isLargeScreen) {
+      variant = 'body2';
+    }
+
+    return (
+      <CardContent>
+        <Typography variant={variant}>{card?.name}</Typography>
+        <Typography variant={variant} color="text.secondary" noWrap>
+          {price}
+        </Typography>
+      </CardContent>
+    );
+  };
   return (
     <StyledCard ref={ref}>
       <AspectRatioBox>
@@ -75,13 +106,8 @@ const GenericCard = React.forwardRef((props, ref) => {
         />
       </AspectRatioBox>
 
-      <CardContent sx={{ flexGrow: 1 }}>
-        <Typography variant="h6">{card?.name}</Typography>
-        <Typography variant="body2" color="text.secondary" noWrap>
-          {price}
-        </Typography>
-      </CardContent>
-      <CardActions>
+      {renderCardContent()}
+      <CardActions container>
         <GenericActionButtons card={card} context={context} />
       </CardActions>
     </StyledCard>
diff --git a/src/components/chart/LinearChart.js b/src/components/chart/LinearChart.js
index d4c4be3..3e6ab33 100644
--- a/src/components/chart/LinearChart.js
+++ b/src/components/chart/LinearChart.js
@@ -2,7 +2,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { ResponsiveLine } from '@nivo/line';
 import { Typography, Box, Tooltip, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import ChartErrorBoundary from './ChartErrorBoundary';
+import ChartErrorBoundary from '../reusable/ChartErrorBoundary';
 import { tokens } from '../../assets/tokens';
 import { useMode } from '../../context/hooks/colormode';
 
diff --git a/src/components/chart/PortfolioChart.jsx b/src/components/chart/PortfolioChart.jsx
index ccaa994..8c25bd6 100644
--- a/src/components/chart/PortfolioChart.jsx
+++ b/src/components/chart/PortfolioChart.jsx
@@ -10,7 +10,7 @@ import {
   convertDataForNivo2,
   getUniqueValidData,
   groupAndAverageData,
-} from './chartUtils';
+} from '../reusable/chartUtils';
 
 const ChartPaper = styled(Paper)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
diff --git a/src/components/cleanUp/AppWrapper.jsx b/src/components/cleanUp/AppWrapper.jsx
deleted file mode 100644
index e017a16..0000000
--- a/src/components/cleanUp/AppWrapper.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// import React from 'react';
-// import { BrowserRouter as Router } from 'react-router-dom';
-// import App from './App';
-
-// const AppWrapper = () => {
-//   return (
-//     <Router>
-//       <App />
-//     </Router>
-//   );
-// };
-
-// export default AppWrapper;
diff --git a/src/components/cleanUp/CalculateCollectionStatistics.jsx b/src/components/cleanUp/CalculateCollectionStatistics.jsx
deleted file mode 100644
index fe3693a..0000000
--- a/src/components/cleanUp/CalculateCollectionStatistics.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// import React, { useMemo } from 'react';
-// import { MenuItem, Select, Typography } from '@mui/material';
-
-// // Helper function to calculate statistics
-// const calculateStatistics = (data, timeRange) => {
-//   // Filter the data according to the timeRange
-//   const filteredData = data.filter(
-//     (item) => new Date(item.x).getTime() >= Date.now() - timeRange
-//   );
-
-//   const prices = filteredData.map((d) => d.y);
-//   const high = Math.max(...prices);
-//   const low = Math.min(...prices);
-//   const percentChange =
-//     ((prices[prices.length - 1] - prices[0]) / prices[0]) * 100;
-//   const average = prices.reduce((a, b) => a + b, 0) / prices.length;
-
-//   return { high, low, percentChange, average };
-// };
-
-// const StatisticsSelector = ({ data, timeRange }) => {
-//   const [selectedStat, setSelectedStat] = React.useState('');
-
-//   // Compute the statistics when the data or timeRange changes
-//   const stats = useMemo(
-//     () => calculateStatistics(data, timeRange),
-//     [data, timeRange]
-//   );
-
-//   // Handle selection change
-//   const handleChange = (event) => {
-//     setSelectedStat(event.target.value);
-//   };
-
-//   return (
-//     <>
-//       <Select value={selectedStat} onChange={handleChange} displayEmpty>
-//         <MenuItem value="" disabled>
-//           Select Statistic
-//         </MenuItem>
-//         <MenuItem value="high">High Point</MenuItem>
-//         <MenuItem value="low">Low Point</MenuItem>
-//         <MenuItem value="percentChange">Percent Change</MenuItem>
-//         <MenuItem value="average">24 Hour Average</MenuItem>
-//       </Select>
-//       <Typography variant="subtitle1" component="div">
-//         {selectedStat === 'high' && `High: $${stats.high}`}
-//         {selectedStat === 'low' && `Low: $${stats.low}`}
-//         {selectedStat === 'percentChange' &&
-//           `Change: ${stats.percentChange.toFixed(2)}%`}
-//         {selectedStat === 'average' && `24hr Avg: $${stats.average.toFixed(2)}`}
-//       </Typography>
-//     </>
-//   );
-// };
-
-// export default StatisticsSelector;
diff --git a/src/components/cleanUp/CardModal.js b/src/components/cleanUp/CardModal.js
deleted file mode 100644
index 68fc78e..0000000
--- a/src/components/cleanUp/CardModal.js
+++ /dev/null
@@ -1,123 +0,0 @@
-// import React, { useContext } from 'react';
-// import {
-//   Box,
-//   Button,
-//   CardMedia,
-//   Dialog,
-//   DialogContent,
-//   DialogTitle,
-//   Grid,
-//   Typography,
-// } from '@mui/material';
-// import {
-//   FaDragon,
-//   FaLevelUpAlt,
-//   FaRegCopy,
-//   FaRegLightbulb,
-//   FaShieldAlt,
-//   FaVenusMars,
-// } from 'react-icons/fa';
-// import { makeStyles } from '@mui/styles';
-// import placeholderImage from '../../../assets/placeholder.jpeg';
-// import {
-//   CartContext,
-//   useCartStore,
-// } from '../../../context/CartContext/CartContext';
-// import CardDetailsContainer from './CardDetailsContainer';
-// import CollectionActionButtons from '../../buttons/CollectionActionButtons';
-// import GenericActionButtons from '../../buttons/GenericActionButtons';
-// import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
-// import CollectionDialog from '../../dialogs/CollectionDialog';
-
-// const useStyles = (context) =>
-//   makeStyles((theme) => ({
-//     actionButtons: {
-//       display: 'flex',
-//       justifyContent: 'center',
-//       alignItems: 'center',
-//       gap: '1.5rem',
-//     },
-//     media: {
-//       objectFit: 'cover',
-//       borderRadius: '4px',
-//       boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-//     },
-//     details: {
-//       display: 'flex',
-//       alignItems: 'center',
-//       gap: '1.5rem',
-//       marginBottom: '1.5rem',
-//     },
-//     dialogTitle: {
-//       fontSize: '1.5rem',
-//       fontWeight: 600,
-//       color: theme.palette.primary.dark,
-//     },
-//     dialogContent: {
-//       padding: '2rem',
-//     },
-//   }));
-
-// const CardModal = ({ isOpen, onClose, card, context }) => {
-//   const classes = useStyles();
-//   const { getCardQuantity } = useContext(CartContext);
-//   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
-//   const productQuantity = getCardQuantity(card?.id);
-
-//   return (
-//     <Dialog open={isOpen} onClose={onClose} fullWidth maxWidth="md">
-//       <DialogTitle className={classes.dialogTitle}>{card?.name}</DialogTitle>
-//       <DialogContent className={classes.dialogContent}>
-//         <Grid container spacing={4}>
-//           <Grid
-//             item
-//             xs={12}
-//             sm={6}
-//             container
-//             direction="column"
-//             justifyContent="space-between"
-//             alignItems="center"
-//           >
-//             <CardMedia
-//               component="img"
-//               alt={card?.name}
-//               className={classes.media}
-//               image={imgUrl}
-//               height="300"
-//             />
-//             <GenericActionButtons
-//               card={card}
-//               // storeHook={useCartStore}
-//               context={context}
-//               label="In Cart"
-//               className="some-cart-class"
-//             />
-//             <GenericActionButtons
-//               card={card}
-//               // storeHook={useCollectionStore}
-//               dialogComponent={CollectionDialog}
-//               context={context}
-//               label="In Collection"
-//               className="some-collection-class"
-//             />
-//             {/* <CartActionButtons
-//               card={card}
-//               productQuantity={productQuantity}
-//               className={classes.actionButtons}
-//             />
-//             <CollectionActionButtons
-//               card={card}
-//               productQuantity={productQuantity}
-//               className={classes.actionButtons}
-//             /> */}
-//           </Grid>
-//           <Grid item xs={12} sm={6} container direction="column">
-//             <CardDetailsContainer card={card} className={classes.details} />
-//           </Grid>
-//         </Grid>
-//       </DialogContent>
-//     </Dialog>
-//   );
-// };
-
-// export default CardModal;
diff --git a/src/components/cleanUp/CartActionButtons.js b/src/components/cleanUp/CartActionButtons.js
deleted file mode 100644
index 44e7f1d..0000000
--- a/src/components/cleanUp/CartActionButtons.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// // src/components/CartActionButtons.js
-// import React from 'react';
-// import { useCartStore } from '../../context/CartContext/CartContext';
-// import { makeStyles } from '@mui/styles';
-// import CardActionButtons from './CardActionButtons'; // Import the reusable component
-// import CardCountDisplay from './CardCountDisplay';
-
-// const useStyles = makeStyles({
-//   root: {},
-// });
-
-// const CartActionButtons = ({ card, productQuantity }) => {
-//   const classes = useStyles();
-//   const { addOneToCart, deleteFromCart, removeOneFromCart } = useCartStore();
-
-//   return (
-//     <div className={classes.root}>
-//       <CardCountDisplay
-//         label="In Cart"
-//         quantity={productQuantity}
-//         className="some-cart-class"
-//       />
-
-//       <CardActionButtons
-//         card={card}
-//         quantity={productQuantity}
-//         addOne={addOneToCart}
-//         removeOne={removeOneFromCart}
-//         removeAll={deleteFromCart}
-//         context="Cart"
-//       />
-//     </div>
-//   );
-// };
-
-// export default CartActionButtons;
diff --git a/src/components/cleanUp/CollectionActionButtons.jsx b/src/components/cleanUp/CollectionActionButtons.jsx
deleted file mode 100644
index a5ddde6..0000000
--- a/src/components/cleanUp/CollectionActionButtons.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@mui/styles';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext'; // Assuming you have a separate context for Collections
-import CardActionButtons from './CardActionButtons';
-import CollectionDialog from './CollectionDialog'; // Assuming you have a separate dialog for Collections
-import CardCountDisplay from '../other/dataDisplay/CardCountDisplay';
-import { useCartStore } from '../../context/CartContext/CartContext';
-
-const useStyles = makeStyles({
-  root: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  button: {
-    flex: 1,
-    height: '100%',
-    padding: '4px',
-  },
-  fullWidthButton: {
-    width: '100%',
-    padding: '4px',
-  },
-});
-
-const CollectionActionButtons = ({ card }) => {
-  const classes = useStyles();
-  const {
-    addOneToCollection,
-    removeOneFromCollection,
-    removeAllFromCollection,
-    createUserCollection,
-    collectionCardQuantity,
-  } = useCollectionStore();
-
-  const { getCardQuantity } = useCartStore();
-  const [openDialog, setOpenDialog] = useState(false);
-
-  const handleDialogClose = (newCollectionInfo) => {
-    createUserCollection(newCollectionInfo);
-    addOneToCollection(card);
-    setOpenDialog(false);
-  };
-
-  // let collectionCardQuantity = getCardQuantity(card?.id);
-  console.log('CARD', card);
-  console.log('getCardQuantity', getCardQuantity(card?.id));
-  return (
-    <div className={classes.root}>
-      <CardCountDisplay
-        label="In Cart"
-        quantity={getCardQuantity(card?.id)}
-        className="some-cart-class"
-      />
-
-      <CardActionButtons
-        card={card}
-        quantity={getCardQuantity(card?.id)}
-        addOne={addOneToCollection}
-        removeOne={removeOneFromCollection}
-        removeAll={removeAllFromCollection}
-        context="Collection"
-        buttonClassName={classes.button}
-        fullWidthButtonClassName={classes.fullWidthButton}
-      />
-      <CollectionDialog open={openDialog} onClose={handleDialogClose} />
-    </div>
-  );
-};
-
-export default CollectionActionButtons;
-
-// will having collectionActionButtons and cartActionButtons in the same component cause errors:
diff --git a/src/components/cleanUp/CollectionDialog.jsx b/src/components/cleanUp/CollectionDialog.jsx
deleted file mode 100644
index 107d6ba..0000000
--- a/src/components/cleanUp/CollectionDialog.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  TextField,
-  Button,
-} from '@mui/material';
-
-const CollectionDialog = ({ open, onClose }) => {
-  const [newCollectionInfo, setNewCollectionInfo] = useState({
-    name: '',
-    description: '',
-  });
-
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setNewCollectionInfo((prev) => ({ ...prev, [name]: value }));
-  };
-
-  return (
-    <Dialog open={open} onClose={() => onClose(null)}>
-      <DialogTitle>Create a New Collection</DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          You don&apos;t have an existing collection. Would you like to create
-          one?
-        </DialogContentText>
-        <TextField
-          autoFocus
-          margin="dense"
-          name="name"
-          label="Collection Name"
-          type="text"
-          fullWidth
-          onChange={handleInputChange}
-        />
-        <TextField
-          margin="dense"
-          name="description"
-          label="Collection Description"
-          type="text"
-          fullWidth
-          onChange={handleInputChange}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => onClose(null)} color="primary">
-          Cancel
-        </Button>
-        <Button onClick={() => onClose(newCollectionInfo)} color="primary">
-          Create
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default CollectionDialog;
diff --git a/src/components/cleanUp/CollectionEditPanel.jsx b/src/components/cleanUp/CollectionEditPanel.jsx
deleted file mode 100644
index 01df715..0000000
--- a/src/components/cleanUp/CollectionEditPanel.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@mui/styles';
-import { Button, TextField, Paper, Typography } from '@mui/material';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(4),
-    borderRadius: '12px',
-    backgroundColor: theme.palette.grey[100],
-    boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
-  },
-  header: {
-    paddingBottom: theme.spacing(2),
-    borderBottom: `2px solid ${theme.palette.secondary.main}`,
-  },
-  textField: {
-    marginTop: theme.spacing(3),
-    '& .MuiOutlinedInput-root': {
-      '&:hover fieldset': {
-        borderColor: theme.palette.secondary.main,
-      },
-      '&.Mui-focused fieldset': {
-        borderColor: theme.palette.secondary.dark,
-      },
-    },
-  },
-  saveButton: {
-    marginTop: theme.spacing(3),
-    borderRadius: '24px',
-    textTransform: 'none',
-    fontSize: 18,
-    padding: theme.spacing(1, 4),
-  },
-}));
-
-const CollectionEditPanel = ({
-  collection,
-  onSave,
-  isNew,
-  name,
-  setName,
-  setDescription,
-  description,
-}) => {
-  const classes = useStyles();
-
-  const handleSave = () => {
-    onSave({
-      ...collection,
-      name,
-      description,
-    });
-  };
-
-  return (
-    <Paper elevation={6} className={classes.root}>
-      <Typography variant="h5" className={classes.header}>
-        {isNew ? 'Create Collection' : 'Edit Collection'}
-      </Typography>
-      <TextField
-        className={classes.textField}
-        label="Collection Name"
-        value={name}
-        variant="outlined"
-        fullWidth
-        onChange={(e) => setName(e.target.value)}
-      />
-      <TextField
-        className={classes.textField}
-        label="Collection Description"
-        value={description}
-        variant="outlined"
-        fullWidth
-        multiline
-        rows={5}
-        onChange={(e) => setDescription(e.target.value)}
-      />
-      <Button
-        variant="contained"
-        className={classes.saveButton}
-        onClick={handleSave}
-      >
-        {isNew ? 'Create Collection' : 'Save Changes'}
-      </Button>
-    </Paper>
-  );
-};
-
-export default CollectionEditPanel;
diff --git a/src/components/cleanUp/CollectionForm.jsx b/src/components/cleanUp/CollectionForm.jsx
deleted file mode 100644
index 8f9f420..0000000
--- a/src/components/cleanUp/CollectionForm.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// CollectionForm.js
-
-import React, { useState } from 'react';
-import { Dialog, DialogContent, Button, TextField } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) => ({
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-  },
-  buttonContainer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    marginTop: theme.spacing(2),
-  },
-}));
-
-const CollectionForm = ({ isDialogOpen, closeDialog, onSave, userId }) => {
-  const classes = useStyles();
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-
-  const handleSave = () => {
-    const newCollectionInfo = {
-      name,
-      description,
-    };
-    onSave(userId, newCollectionInfo);
-    closeDialog();
-  };
-
-  return (
-    <Dialog open={isDialogOpen} onClose={closeDialog}>
-      <DialogContent>
-        <form className={classes.form}>
-          <TextField
-            label="Collection Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            variant="outlined"
-          />
-          <TextField
-            label="Collection Description"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            variant="outlined"
-            multiline
-            rows={4}
-          />
-          <div className={classes.buttonContainer}>
-            <Button variant="contained" onClick={handleSave} color="primary">
-              Save
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default CollectionForm;
diff --git a/src/components/cleanUp/CustomPopover.jsx b/src/components/cleanUp/CustomPopover.jsx
deleted file mode 100644
index 01f888d..0000000
--- a/src/components/cleanUp/CustomPopover.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import Popover from '@mui/material/Popover';
-import CardToolTip from '../cards/CardToolTip';
-import { makeStyles } from '@mui/styles';
-import GenericCard from '../cards/GenericCard';
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    padding: theme.spacing(1),
-  },
-}));
-
-const CustomPopover = ({
-  card,
-  children,
-  isHovering,
-  cardRef,
-  anchorEl,
-  open,
-  setAnchorEl,
-  // handleMouseEnter,
-  // handleMouseLeave,
-  handlePopoverClose,
-}) => {
-  const classes = useStyles();
-
-  const id = open ? 'mouse-over-popover' : undefined;
-  // console.log('card:', card);
-  // console.log('cardRef:', cardRef);
-  // console.log('anchorEl:', anchorEl);
-  // console.log('open:', open);
-  // console.log('handlePopoverClose:', handlePopoverClose);
-  return (
-    <div>
-      {children}
-      {/* <Popover
-        id={id}
-        sx={{
-          pointerEvents: 'none',
-        }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-      >
-        <CardToolTip card={card} />
-      </Popover> */}
-      {/* <div style={{ position: 'absolute', top: '-9999px' }} ref={cardRef}>
-        <GenericCard card={card} />
-      </div> */}
-    </div>
-  );
-};
-
-CustomPopover.propTypes = {
-  card: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-export default CustomPopover;
diff --git a/src/components/cleanUp/DeckActionButtons.js b/src/components/cleanUp/DeckActionButtons.js
deleted file mode 100644
index 8a66b54..0000000
--- a/src/components/cleanUp/DeckActionButtons.js
+++ /dev/null
@@ -1,65 +0,0 @@
-// import React, { useState } from 'react';
-// import { makeStyles } from '@mui/styles';
-// import { useDeckStore } from '../../context/DeckContext/DeckContext';
-// import CardActionButtons from './CardActionButtons';
-// import DeckDialog from '../cleanUp/DeckDialog';
-// import DeckCountDisplay from './DeckCountDisplay';
-// import CardCountDisplay from './CardCountDisplay';
-
-// const useStyles = makeStyles({
-//   root: {
-//     height: '100%',
-//     display: 'flex',
-//     flexDirection: 'column',
-//   },
-//   button: {
-//     flex: 1,
-//     height: '100%',
-//     padding: '4px',
-//   },
-//   fullWidthButton: {
-//     width: '100%',
-//     padding: '4px',
-//   },
-// });
-
-// const DeckActionButtons = ({ card }) => {
-//   const classes = useStyles();
-//   const {
-//     addOneToDeck,
-//     removeOneFromDeck,
-//     removeAllFromDeck,
-//     createUserDeck,
-//     deckCardQuantity,
-//   } = useDeckStore();
-//   const [openDialog, setOpenDialog] = useState(false);
-
-//   const handleDialogClose = (newDeckInfo) => {
-//     createUserDeck(newDeckInfo);
-//     addOneToDeck(card);
-//     setOpenDialog(false);
-//   };
-
-//   return (
-//     <div className={classes.root}>
-//       <CardCountDisplay
-//         label="In Deck"
-//         quantity={deckCardQuantity}
-//         className="some-deck-class"
-//       />
-//       <CardActionButtons
-//         card={card}
-//         quantity={deckCardQuantity}
-//         addOne={addOneToDeck}
-//         removeOne={removeOneFromDeck}
-//         removeAll={removeAllFromDeck}
-//         context="Deck"
-//         buttonClassName={classes.button}
-//         fullWidthButtonClassName={classes.fullWidthButton}
-//       />
-//       <DeckDialog open={openDialog} onClose={handleDialogClose} />
-//     </div>
-//   );
-// };
-
-// export default DeckActionButtons;
diff --git a/src/components/cleanUp/DeckCard.js b/src/components/cleanUp/DeckCard.js
deleted file mode 100644
index 071b888..0000000
--- a/src/components/cleanUp/DeckCard.js
+++ /dev/null
@@ -1,118 +0,0 @@
-// import React, { useState, useEffect, useRef } from 'react';
-// import DeckCardMedia from '../media/DeckCardMedia';
-// import CardToolTip from './CardToolTip';
-// import DeckCardDialog from '../dialogs/DeckCardDialog';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-// import './deckcard.css'; // Assuming you have styles here
-// import { makeStyles } from '@mui/styles';
-// import CardMediaSection from '../media/CardMediaSection';
-
-// const useStyles = makeStyles((theme) => ({
-//   card: {
-//     position: 'relative', // Add this
-//     display: 'flex',
-//     flexDirection: 'column',
-//     height: '100%',
-//     width: '100%',
-//     flexGrow: 1,
-//   },
-//   media: {
-//     width: '100%',
-//     objectFit: 'contain',
-//   },
-//   content: {
-//     flex: '1 1 auto',
-//     overflow: 'hidden',
-//     // padding: theme.spacing(1),
-//   },
-//   text: {
-//     textOverflow: 'ellipsis',
-//     overflow: 'hidden',
-//     whiteSpace: 'nowrap',
-//   },
-//   actionButtons: {
-//     backgroundColor: '#f5f5f5',
-//     // padding: theme.spacing(1),
-//     margin: theme.spacing(1, 0),
-//     borderRadius: '4px',
-//     overflow: 'auto',
-//   },
-//   dialog: {
-//     position: 'absolute', // Add this
-//     top: 0,
-//     right: 0,
-//     zIndex: 1000, // High z-index value
-//   },
-// }));
-
-// const DeckCard = ({ card, cardInfo }) => {
-//   const [isDeckModalOpen, setDeckModalOpen] = useState(false);
-//   const [isHovering, setHovering] = useState(false);
-//   const [hasLoggedCard, setHasLoggedCard] = useState(false);
-//   const [imgLoadError, setImgLoadError] = useState(false); // For error handling
-
-//   const tooltipRef = useRef(null);
-//   const cardRef = useRef(null);
-//   const classes = useStyles();
-
-//   const imgUrl =
-//     !imgLoadError && (card?.card_images?.[0]?.image_url || placeholderImage);
-
-//   const openDeckModal = () => setDeckModalOpen(true);
-//   const closeDeckModal = () => setDeckModalOpen(false);
-
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       // Log only in development mode
-//       if (!hasLoggedCard) {
-//         console.log('CARD:', card);
-//         setHasLoggedCard(true);
-//       }
-//     }
-
-//     if (isHovering && tooltipRef.current && cardRef.current) {
-//       const cardRect = cardRef.current.getBoundingClientRect();
-//       tooltipRef.current.style.top = `${cardRect.top}px`;
-//       tooltipRef.current.style.left = `${cardRect.right}px`;
-//     }
-//   }, [isHovering, card, hasLoggedCard]);
-
-//   // This useEffect is for debugging, remove in production
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       console.log('isHovering:', isHovering);
-//       console.log('isDeckModalOpen:', isDeckModalOpen);
-//     }
-//   }, [isHovering, isDeckModalOpen]);
-
-//   return (
-//     <>
-//       <CardMediaSection
-//         imgUrl={imgUrl}
-//         card={card}
-//         cardInfo={cardInfo}
-//         classes={classes}
-//         openDeckModal={openDeckModal}
-//         setHovering={setHovering}
-//         cardRef={cardRef}
-//       />
-//       <CardToolTip
-//         cardInfo={cardInfo}
-//         classes={classes}
-//         isHovering={isHovering}
-//         isDeckModalOpen={isDeckModalOpen}
-//         tooltipRef={tooltipRef}
-//       />
-//       <DeckCardDialog
-//         isOpen={isDeckModalOpen}
-//         classes={classes}
-//         onClose={closeDeckModal}
-//         card={card}
-//         cardInfo={cardInfo}
-//         cardRef={cardRef}
-//       />
-//     </>
-//   );
-// };
-
-// export default DeckCard;
diff --git a/src/components/cleanUp/DeckCardDialog.jsx b/src/components/cleanUp/DeckCardDialog.jsx
deleted file mode 100644
index 8f8cdfa..0000000
--- a/src/components/cleanUp/DeckCardDialog.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// import React from 'react';
-// import GenericCardModal from '../modals/GenericCardModal';
-
-// const DeckCardDialog = ({ isOpen, onClose, card, cardInfo, context }) => {
-//   return (
-//     <GenericCardModal
-//       isOpen={isOpen}
-//       onClose={onClose}
-//       context={context}
-//       card={card}
-//       cardInfo={cardInfo}
-//     />
-//   );
-// };
-
-// export default DeckCardDialog;
diff --git a/src/components/cleanUp/DeckCardDialogue.js b/src/components/cleanUp/DeckCardDialogue.js
deleted file mode 100644
index d0cb703..0000000
--- a/src/components/cleanUp/DeckCardDialogue.js
+++ /dev/null
@@ -1,96 +0,0 @@
-// import React from 'react';
-// import Button from '@mui/material/Button';
-// import { Box } from '@mui/system';
-// import { Popover, Typography } from '@mui/material';
-// import { makeStyles } from '@mui/styles';
-// import DeckCardModal from '../modals/DeckCardModal';
-
-// const useStyles = makeStyles((theme) => ({
-//   card: {
-//     display: 'flex',
-//     flexDirection: 'column',
-//     flexGrow: 1,
-//     overflow: 'hidden',
-//   },
-//   media: {
-//     objectFit: 'contain',
-//   },
-//   content: {
-//     flexGrow: 1,
-//     display: 'flex',
-//     flexDirection: 'row',
-//     // padding: theme.spacing(0.5), // reduce padding
-//   },
-//   reducedBox: {
-//     flexGrow: 1,
-//     display: 'flex',
-//     flexDirection: 'row',
-//     padding: theme.spacing(0.5), // reduce padding
-//   },
-//   button: {
-//     flexGrow: 1,
-//     fontSize: '0.7rem', // reduce font size
-//     padding: theme.spacing(0.5), // reduce padding
-//   },
-//   text: {
-//     fontSize: '0.8rem', // reduce font size
-//     whiteSpace: 'nowrap',
-//     overflow: 'hidden',
-//     textOverflow: 'ellipsis',
-//   },
-//   popover: {
-//     pointerEvents: 'none',
-//   },
-//   paper: {
-//     padding: theme.spacing(1),
-//   },
-// }));
-
-// const DeckCardDialogue = ({
-//   anchorEl,
-//   isOpen,
-//   onClose,
-//   card,
-//   openCardModal,
-//   closeCardModal,
-//   isCardModalOpen,
-// }) => {
-//   const classes = useStyles();
-
-//   return (
-//     <Popover
-//       id="mouse-over-popover"
-//       className={classes.popover}
-//       classes={{
-//         paper: classes.paper,
-//       }}
-//       anchorEl={anchorEl}
-//       anchorOrigin={{
-//         vertical: 'bottom',
-//         horizontal: 'left',
-//       }}
-//       open={isOpen}
-//       onClose={onClose}
-//       disableRestoreFocus
-//     >
-//       <Typography>{card?.name}</Typography>
-//       <Box className={classes.reducedBox} container>
-//         <Button
-//           // size="xs"
-//           color="primary"
-//           onClick={openCardModal}
-//           className={classes.button}
-//         >
-//           View Details
-//         </Button>
-//         <DeckCardModal
-//           isOpen={isCardModalOpen}
-//           onClose={closeCardModal}
-//           card={card}
-//         />
-//       </Box>
-//     </Popover>
-//   );
-// };
-
-// export default DeckCardDialogue;
diff --git a/src/components/cleanUp/DeckCardModal.js b/src/components/cleanUp/DeckCardModal.js
deleted file mode 100644
index 17db76a..0000000
--- a/src/components/cleanUp/DeckCardModal.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// import React, { useContext } from 'react';
-// import { Dialog, DialogContent, DialogTitle, Grid } from '@mui/material';
-// import { DeckContext } from '../../context/DeckContext/DeckContext';
-// import CardMediaSection from '../media/CardMediaSection';
-// import CardDetailsContainer from './cardModal/CardDetailsContainer';
-// import DeckActionButtons from '../cleanUp/DeckActionButtons';
-// import { makeStyles } from '@mui/styles';
-// import GenericActionButtons from '../buttons/GenericActionButtons';
-
-// const useStyles = (context) =>
-//   makeStyles({
-//     dialogTitle: {
-//       backgroundColor: '#0066cc',
-//       color: 'white',
-//       padding: '16px',
-//       fontWeight: 'bold',
-//     },
-//   });
-
-// const DeckCardModal = ({ isOpen, onClose, card, userDecks, context }) => {
-//   const classes = useStyles();
-//   if (!card) return null; // or some other placeholder
-
-//   const { getCardQuantity } = useContext(DeckContext);
-//   const productQuantity = getCardQuantity(card?.id);
-
-//   const handleClose = (event, reason) => {
-//     if (reason === 'backdropClick') {
-//       onClose();
-//     }
-//   };
-
-//   return (
-//     <Dialog open={isOpen} onClose={handleClose} fullWidth maxWidth="md">
-//       <DialogTitle className={classes.dialogTitle}>{card?.name}</DialogTitle>
-//       <DialogContent>
-//         <Grid container spacing={2}>
-//           <Grid item xs={12} sm={6}>
-//             <CardMediaSection card={card} />
-//           </Grid>
-//           <Grid item xs={12} sm={6}>
-//             <CardDetailsContainer
-//               card={card}
-//               className={classes.someClassForDeckCardDetail}
-//             />
-//           </Grid>
-//         </Grid>
-//         {/* <DeckActionButtons card={card} deckCardQuantity={productQuantity} /> */}
-//         <GenericActionButtons card={card} deckCardQuantity={productQuantity} />
-//       </DialogContent>
-//     </Dialog>
-//   );
-// };
-
-// export default DeckCardModal;
diff --git a/src/components/cleanUp/DeckCountDisplay.jsx b/src/components/cleanUp/DeckCountDisplay.jsx
deleted file mode 100644
index f1224b8..0000000
--- a/src/components/cleanUp/DeckCountDisplay.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// import React from 'react';
-// import { Grid } from '@mui/material';
-
-// const DeckCountDisplay = ({ quantity }) => (
-//   <Grid container>
-//     <Grid item xs={6}>
-//       In Deck: {quantity}
-//     </Grid>
-//   </Grid>
-// );
-
-// export default DeckCountDisplay;
diff --git a/src/components/cleanUp/DeckDialog.jsx b/src/components/cleanUp/DeckDialog.jsx
deleted file mode 100644
index a9dcfbe..0000000
--- a/src/components/cleanUp/DeckDialog.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// import React, { useState } from 'react';
-// import {
-//   Dialog,
-//   DialogActions,
-//   DialogContent,
-//   DialogContentText,
-//   DialogTitle,
-//   TextField,
-//   Button,
-// } from '@mui/material';
-
-// const DeckDialog = ({ open, onClose }) => {
-//   const [newDeckInfo, setNewDeckInfo] = useState({ name: '', description: '' });
-
-//   const handleInputChange = (e) => {
-//     const { name, value } = e.target;
-//     setNewDeckInfo((prev) => ({ ...prev, [name]: value }));
-//   };
-
-//   return (
-//     <Dialog open={open} onClose={() => onClose(null)}>
-//       <DialogTitle>Create a New Deck</DialogTitle>
-//       <DialogContent>
-//         <DialogContentText>
-//           You don&apos;t have an existing deck. Would you like to create one?
-//         </DialogContentText>
-//         <TextField
-//           autoFocus
-//           margin="dense"
-//           name="name"
-//           label="Deck Name"
-//           type="text"
-//           fullWidth
-//           onChange={handleInputChange}
-//         />
-//         <TextField
-//           margin="dense"
-//           name="description"
-//           label="Deck Description"
-//           type="text"
-//           fullWidth
-//           onChange={handleInputChange}
-//         />
-//       </DialogContent>
-//       <DialogActions>
-//         <Button onClick={() => onClose(null)} color="primary">
-//           Cancel
-//         </Button>
-//         <Button onClick={() => onClose(newDeckInfo)} color="primary">
-//           Create
-//         </Button>
-//       </DialogActions>
-//     </Dialog>
-//   );
-// };
-
-// export default DeckDialog;
diff --git a/src/components/cleanUp/Hero.jsx b/src/components/cleanUp/Hero.jsx
deleted file mode 100644
index 7bc8866..0000000
--- a/src/components/cleanUp/Hero.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// import React from 'react';
-// import { Box, Container, Typography } from '@mui/material';
-// import { makeStyles } from '@mui/styles';
-// import { Canvas } from '@react-three/fiber';
-// import Cube from '../../assets/animations/Cube';
-
-// const useStyles = makeStyles((theme) => ({
-//   bannerBox: {
-//     backgroundImage: `linear-gradient(to right, ${theme.palette.primary.light}, ${theme.palette.primary.main})`,
-//     minHeight: '100vh',
-//     padding: theme.spacing(4),
-//     display: 'flex',
-//     alignItems: 'center',
-//     justifyContent: 'center',
-//   },
-// }));
-
-// const Hero = () => {
-//   const classes = useStyles();
-//   return (
-//     <Box className={classes.bannerBox}>
-//       <Canvas
-//         style={{ position: 'absolute', top: 0, left: 0, zIndex: 0 }}
-//         camera={{ position: [0, 0, 5] }}
-//       >
-//         <ambientLight />
-//         {/* eslint-disable-next-line react/no-unknown-property */}
-//         <pointLight position={[10, 10, 10]} />
-//         <Cube />
-//       </Canvas>
-//       <Container
-//         style={{
-//           position: 'absolute',
-//           top: '50%',
-//           left: '50%',
-//           transform: 'translate(-50%, -50%)',
-//           zIndex: 1,
-//           textAlign: 'center',
-//         }}
-//       >
-//         <Typography variant="h2" gutterBottom>
-//           Buy Amazing Cards
-//         </Typography>
-//       </Container>
-//     </Box>
-//   );
-// };
-
-// export default Hero;
diff --git a/src/components/cleanUp/PortfolioCard.jsx b/src/components/cleanUp/PortfolioCard.jsx
deleted file mode 100644
index ce16ac2..0000000
--- a/src/components/cleanUp/PortfolioCard.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-// import React, { useState, useEffect, useRef } from 'react';
-// import DeckCardMedia from '../media/DeckCardMedia';
-// import CardToolTip from './CardToolTip';
-// import DeckCardDialog from './DeckCardDialog';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-// import './deckcard.css'; // Assuming you have styles here
-// import { makeStyles } from '@mui/styles';
-
-// const useStyles = makeStyles((theme) => ({
-//   card: {
-//     position: 'relative', // Add this
-//     display: 'flex',
-//     flexDirection: 'column',
-//     height: '100%',
-//     width: '100%',
-//     flexGrow: 1,
-//   },
-//   media: {
-//     width: '100%',
-//     objectFit: 'contain',
-//   },
-//   content: {
-//     flex: '1 1 auto',
-//     overflow: 'hidden',
-//     // padding: theme.spacing(1),
-//   },
-//   text: {
-//     textOverflow: 'ellipsis',
-//     overflow: 'hidden',
-//     whiteSpace: 'nowrap',
-//   },
-//   actionButtons: {
-//     backgroundColor: '#f5f5f5',
-//     // padding: theme.spacing(1),
-//     margin: theme.spacing(1, 0),
-//     borderRadius: '4px',
-//     overflow: 'auto',
-//   },
-//   dialog: {
-//     position: 'absolute', // Add this
-//     top: 0,
-//     right: 0,
-//     zIndex: 1000, // High z-index value
-//   },
-// }));
-
-// const PortfolioCard = ({ card, cardInfo }) => {
-//   const [isDeckModalOpen, setDeckModalOpen] = useState(false);
-//   const [isHovering, setHovering] = useState(false);
-//   const [hasLoggedCard, setHasLoggedCard] = useState(false);
-//   const [imgLoadError, setImgLoadError] = useState(false); // For error handling
-
-//   const tooltipRef = useRef(null);
-//   const cardRef = useRef(null);
-
-//   const imgUrl =
-//     !imgLoadError && (card?.card_images?.[0]?.image_url || placeholderImage);
-
-//   const openDeckModal = () => setDeckModalOpen(true);
-//   const closeDeckModal = () => setDeckModalOpen(false);
-
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       // Log only in development mode
-//       if (!hasLoggedCard) {
-//         console.log('CARD:', card);
-//         setHasLoggedCard(true);
-//       }
-//     }
-
-//     if (isHovering && tooltipRef.current && cardRef.current) {
-//       const cardRect = cardRef.current.getBoundingClientRect();
-//       tooltipRef.current.style.top = `${cardRect.top}px`;
-//       tooltipRef.current.style.left = `${cardRect.right}px`;
-//     }
-//   }, [isHovering, card, hasLoggedCard]);
-
-//   // This useEffect is for debugging, remove in production
-//   useEffect(() => {
-//     if (process.env.NODE_ENV !== 'production') {
-//       console.log('isHovering:', isHovering);
-//       console.log('isDeckModalOpen:', isDeckModalOpen);
-//     }
-//   }, [isHovering, isDeckModalOpen]);
-
-//   const handleImgError = () => {
-//     setImgLoadError(true);
-//   };
-
-//   return (
-//     <>
-//       <DeckCardMedia
-//         imgUrl={imgUrl}
-//         openDeckModal={openDeckModal}
-//         setHovering={setHovering}
-//         cardRef={cardRef}
-//         card={card}
-//         cardInfo={cardInfo}
-//         onError={handleImgError} // To handle image errors
-//       />
-//       <CardToolTip
-//         cardInfo={cardInfo}
-//         isHovering={isHovering}
-//         isDeckModalOpen={isDeckModalOpen}
-//         tooltipRef={tooltipRef}
-//       />
-//       <DeckCardDialog
-//         isOpen={isDeckModalOpen}
-//         onClose={closeDeckModal}
-//         card={card}
-//         cardInfo={cardInfo}
-//         cardRef={cardRef}
-//       />
-//     </>
-//   );
-// };
-
-// export default PortfolioCard;
diff --git a/src/components/cleanUp/PracticeScraperPage.js b/src/components/cleanUp/PracticeScraperPage.js
deleted file mode 100644
index 06ad132..0000000
--- a/src/components/cleanUp/PracticeScraperPage.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import ScraperContainer from './ScraperContainer';
-import { BeatLoader } from 'react-spinners';
-import { useCookies } from 'react-cookie';
-import { ScraperContext } from '../../context/ScraperContext/ScraperContext';
-
-const ErrorIndicator = ({ error }) => {
-  return <div>Error: {error}</div>;
-};
-
-const PracticeScraperPage = () => {
-  const [cookies] = useCookies(['userCookie']);
-  const { fetchExistingScrapeData, loading, error } =
-    useContext(ScraperContext);
-
-  // const cardName = cookies.cardName;
-  // console.log('cardName:', cardName);
-
-  useEffect(() => {
-    fetchExistingScrapeData()
-      .then((data) => {
-        console.log('Successfully fetched scrape data:', data);
-        // Optionally, display a success message to the user.
-        // This would require you to manage a 'message' state.
-        // setMessage('Successfully fetched scrape data.');
-      })
-      .catch((err) => {
-        console.error('Failed to get card scrape data', err);
-      });
-  }, [fetchExistingScrapeData]);
-
-  if (loading) {
-    return <LoadingIndicator loading={loading} />;
-  }
-
-  if (error) {
-    return <ErrorIndicator error={error} />;
-  }
-
-  return (
-    <div>
-      <h1>Web Scraper Page</h1>
-      <ScraperContainer />
-    </div>
-  );
-};
-
-export default PracticeScraperPage;
diff --git a/src/components/cleanUp/ProductCard.js b/src/components/cleanUp/ProductCard.js
deleted file mode 100644
index b23a052..0000000
--- a/src/components/cleanUp/ProductCard.js
+++ /dev/null
@@ -1,98 +0,0 @@
-// import { Card, Button, CardContent, CardActions } from '@mui/material';
-// import { makeStyles } from '@mui/styles';
-// import { useContext, useState } from 'react';
-// import CardMedia from '@mui/material/CardMedia';
-// import Typography from '@mui/material/Typography';
-// import placeholderImage from '../../assets/placeholder.jpeg';
-// import CardModal from '../modals/cardModal/CardModal';
-// import CartActionButtons from '../buttons/CartActionButtons';
-// import { useCartStore } from '../../context/CartContext/CartContext';
-
-// const useStyles = makeStyles({
-//   card: {
-//     display: 'flex',
-//     flexDirection: 'column',
-//     maxWidth: '100%',
-//     minHeight: 200,
-//     margin: '16px',
-//     padding: '16px',
-//   },
-//   media: {
-//     flex: 0.75, // 3/4 of the card
-//   },
-//   content: {
-//     flex: 0.25, // 1/4 of the card
-//   },
-//   button: {
-//     margin: '0 8px',
-//   },
-//   largerButton: {
-//     margin: '0 8px',
-//     padding: '10px',
-//     fontSize: '20px',
-//   },
-//   actionButtons: {
-//     // Custom styles for CartActionButtons in ProductCard go here
-//     backgroundColor: '#f5f5f5',
-//     padding: '10px',
-//     margin: '10px 0',
-//     borderRadius: '4px',
-//   },
-// });
-
-// const ProductCard = ({ card, page }) => {
-//   const { cartData, getCardQuantity } = useCartStore();
-//   const classes = useStyles();
-
-//   const { id, name } = card;
-//   const [isCardModalOpen, setCardModalOpen] = useState(false);
-//   const openCardModal = () => setCardModalOpen(true);
-//   const closeCardModal = () => setCardModalOpen(false);
-//   const productQuantity = getCardQuantity(card?.id);
-//   console.log('productQuantity', productQuantity);
-//   const imgUrl = card?.card_images?.[0]?.image_url || placeholderImage;
-
-//   return (
-//     <Card key={id} className={classes.card}>
-//       <CardMedia
-//         className={classes.media}
-//         component="img"
-//         alt={name}
-//         image={imgUrl}
-//       />
-//       <div className={classes.content}>
-//         <CardContent>
-//           <Typography gutterBottom variant="h5" component="div">
-//             {name}
-//           </Typography>
-//           <Typography variant="body2" color="text.secondary">
-//             Price: {card?.card_prices?.[0]?.tcgplayer_price}
-//           </Typography>
-//           <Typography variant="body2" color="text.secondary">
-//             Quantity:{' '}
-//             {productQuantity.quantityOfSameId > 0
-//               ? productQuantity.quantityOfSameId
-//               : 'Not in cart'}
-//           </Typography>
-//         </CardContent>
-//         <CardActions>
-//           <Button size="small" color="primary" onClick={openCardModal}>
-//             Product Details
-//           </Button>
-//           <CardModal
-//             isOpen={isCardModalOpen}
-//             onClose={closeCardModal}
-//             card={card}
-//           />
-//           <CartActionButtons
-//             card={card}
-//             productQuantity={productQuantity}
-//             className={classes.actionButtons}
-//           />
-//         </CardActions>
-//       </div>
-//     </Card>
-//   );
-// };
-
-// export default ProductCard;
diff --git a/src/components/cleanUp/ScrapeDisplay.js b/src/components/cleanUp/ScrapeDisplay.js
deleted file mode 100644
index caadcaa..0000000
--- a/src/components/cleanUp/ScrapeDisplay.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// src/components/other/ScrapeDisplay.js
-import React, { useState, useEffect } from 'react';
-
-const ScrapeDisplay = () => {
-  const [results, setResults] = useState([]); // You'd probably be fetching this from an API or context.
-
-  // Simulating getting some results for demonstration.
-  useEffect(() => {
-    // Fetch results from an API or context here.
-    const dummyResults = ['Result 1', 'Result 2', 'Result 3']; // Placeholder data
-    setResults(dummyResults);
-  }, []);
-
-  return (
-    <div>
-      <h3>Scraping Results:</h3>
-      <ul>
-        {results.map((result, index) => (
-          <li key={index}>{result}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default ScrapeDisplay;
diff --git a/src/components/cleanUp/ScrapeSearch.js b/src/components/cleanUp/ScrapeSearch.js
deleted file mode 100644
index f654f2c..0000000
--- a/src/components/cleanUp/ScrapeSearch.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { Button, TextField } from '@mui/material';
-import axios from 'axios';
-
-const ScrapeSearch = ({ onCardNameChange }) => {
-  const [cardName, setCardName] = useState('');
-
-  const handleScrape = async () => {
-    const finalCardName = cardName || 'Dark Magician';
-    try {
-      onCardNameChange(finalCardName);
-
-      const response = await axios.get(
-        `${
-          process.env.REACT_APP_SERVER
-        }/api/scrape?cardName=${encodeURIComponent(finalCardName)}`,
-        {
-          withCredentials: true,
-        }
-      );
-
-      alert(response.data);
-    } catch (error) {
-      alert('Error while scraping: ' + error.message);
-    }
-  };
-
-  return (
-    <div>
-      <h3>Initiate Scraping</h3>
-      <TextField
-        label="Card Name"
-        variant="outlined"
-        value={cardName || 'Dark Magician'} // Set default value here
-        onChange={(e) => setCardName(e.target.value)}
-      />
-      <Button variant="contained" color="primary" onClick={handleScrape}>
-        Scrape TCGPLAYER
-      </Button>
-    </div>
-  );
-};
-
-export default ScrapeSearch;
diff --git a/src/components/cleanUp/ScraperContainer.js b/src/components/cleanUp/ScraperContainer.js
deleted file mode 100644
index 5d3fd3b..0000000
--- a/src/components/cleanUp/ScraperContainer.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@mui/styles';
-import { Grid } from '@mui/material';
-import ScrapeDisplay from './ScrapeDisplay';
-import ScrapeSearch from './ScrapeSearch';
-import { useCookies } from 'react-cookie';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-    padding: theme.spacing(2),
-  },
-}));
-
-const ScraperContainer = () => {
-  const classes = useStyles();
-  const [cookies, setCookie] = useCookies(['userCookie']);
-  console.log('cookies:', cookies);
-  const handleCardNameChange = (newCardName) => {
-    // Set the new card name as a cookie
-    setCookie('cardName', newCardName, { path: '/' });
-  };
-
-  return (
-    <Grid container spacing={3} className={classes.root}>
-      <Grid item xs={12} sm={6} md={4}>
-        <ScrapeSearch onCardNameChange={handleCardNameChange} />
-      </Grid>
-      <Grid item xs={12} sm={6} md={8}>
-        <ScrapeDisplay />
-      </Grid>
-    </Grid>
-  );
-};
-
-export default ScraperContainer;
diff --git a/src/components/cleanUp/SelectCollectionDialog.jsx b/src/components/cleanUp/SelectCollectionDialog.jsx
deleted file mode 100644
index ed5732f..0000000
--- a/src/components/cleanUp/SelectCollectionDialog.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-// import React from 'react';
-// import PropTypes from 'prop-types';
-// import {
-//   Dialog,
-//   DialogContent,
-//   Button,
-//   TextField,
-//   Typography,
-// } from '@mui/material';
-// import { useCookies } from 'react-cookie';
-// import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-
-// const SelectCollectionDialog = ({
-//   isDialogOpen,
-//   closeDialog,
-//   onSave,
-//   isNew,
-//   // userId,
-//   editedName,
-//   setEditedName,
-//   editedDescription,
-//   setEditedDescription,
-// }) => {
-//   const {
-//     createUserCollection,
-//     addOneToCollection,
-//     removeCollection,
-//     selectedCollection,
-//   } = useCollectionStore();
-//   const [cookies] = useCookies(['user']);
-//   const userId = cookies.user?.id;
-
-//   const handleSave = () => {
-//     const newCollectionInfo = {
-//       name: editedName,
-//       description: editedDescription,
-//       userId: userId,
-//     };
-
-//     if (isNew) {
-//       createUserCollection(
-//         userId,
-//         newCollectionInfo,
-//         editedName,
-//         editedDescription,
-//         userId
-//       );
-//     } else if (editedName && editedDescription) {
-//       addOneToCollection(newCollectionInfo);
-//     } else {
-//       console.error('No card to add to the collection');
-//     }
-
-//     onSave(newCollectionInfo);
-//     closeDialog();
-//   };
-
-//   const handleRemove = (e) => {
-//     e.preventDefault();
-
-//     removeCollection(selectedCollection);
-//     closeDialog();
-//   };
-
-//   return (
-//     <Dialog open={isDialogOpen} onClose={closeDialog}>
-//       <DialogContent>
-//         <Typography variant="h6">
-//           {isNew
-//             ? 'Fill in the data below to create a new collection'
-//             : 'Edit your collection'}
-//         </Typography>
-//         <div>
-//           <TextField
-//             label="Collection Name"
-//             value={editedName}
-//             onChange={(e) => setEditedName(e.target.value)}
-//             variant="outlined"
-//             fullWidth
-//             margin="normal"
-//           />
-//         </div>
-//         <div>
-//           <TextField
-//             label="Collection Description"
-//             value={editedDescription}
-//             onChange={(e) => setEditedDescription(e.target.value)}
-//             variant="outlined"
-//             multiline
-//             rows={4}
-//             fullWidth
-//             margin="normal"
-//           />
-//         </div>
-//         <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>
-//   );
-// };
-
-// SelectCollectionDialog.propTypes = {
-//   isDialogOpen: PropTypes.bool.isRequired,
-//   closeDialog: PropTypes.func.isRequired,
-//   onSave: PropTypes.func.isRequired,
-//   isNew: PropTypes.bool,
-//   userId: PropTypes.string,
-//   editedName: PropTypes.string,
-//   setEditedName: PropTypes.func.isRequired,
-//   editedDescription: PropTypes.string,
-//   setEditedDescription: PropTypes.func.isRequired,
-// };
-
-// export default SelectCollectionDialog;
diff --git a/src/components/cleanUp/UpdateChartData.jsx b/src/components/cleanUp/UpdateChartData.jsx
deleted file mode 100644
index 9744a17..0000000
--- a/src/components/cleanUp/UpdateChartData.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// import { useCallback, useEffect } from 'react';
-// import moment from 'moment';
-// import { useCollectionStore } from '../../context/hooks/collection';
-// import { useCombinedContext } from '../../context/CombinedProvider';
-
-// const transformChartData = (chartData) => {
-//   let pointsArray = [];
-
-//   if (Array.isArray(chartData)) {
-//     chartData?.forEach((item) => {
-//       item.datasets.forEach((dataset) => {
-//         dataset.data.forEach((data) => {
-//           pointsArray.push(...data.points);
-//         });
-//       });
-//     });
-//   } else {
-//     console.error('Expected chartData to be an array, but got:', chartData);
-//   }
-
-//   return pointsArray;
-// };
-
-// const useUpdateChartData = () => {
-//   const { totalCost } = useCollectionStore() || {};
-//   const {
-//     updateServerData,
-//     isCronJobTriggered,
-//     setIsCronJobTriggered,
-//     chartData,
-//   } = useCombinedContext() || {};
-
-//   const transformedData = transformChartData(chartData);
-
-//   const createDataset = (label, priceData) => ({
-//     name: label,
-//     color: 'blue',
-//     data: priceData?.map(({ x, y }) => ({ x, y })),
-//   });
-
-//   const newDataPoint = useCallback(() => {
-//     return {
-//       x: moment().format('YYYY-MM-DD HH:mm'),
-//       y: totalCost ? parseFloat(totalCost).toFixed(2) : null,
-//     };
-//   }, [totalCost]);
-
-//   const updateChart = useCallback(() => {
-//     let updatedDatasets = [];
-
-//     if (transformedData.length && totalCost != null) {
-//       updatedDatasets.push(
-//         createDataset('totalPrice', [...transformedData, newDataPoint()])
-//       );
-//     }
-
-//     if (updatedDatasets.length) {
-//       updateServerData(updatedDatasets);
-//     }
-//   }, [transformedData, newDataPoint, updateServerData, totalCost]);
-
-//   useEffect(() => {
-//     if (isCronJobTriggered) {
-//       updateChart();
-//       setIsCronJobTriggered(false);
-//     }
-//   }, [isCronJobTriggered, updateChart, setIsCronJobTriggered]);
-
-//   return { datasets: transformedData };
-// };
-
-// export default useUpdateChartData;
diff --git a/src/components/cleanUp/button/Button.css b/src/components/cleanUp/button/Button.css
deleted file mode 100644
index 2245749..0000000
--- a/src/components/cleanUp/button/Button.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.main-button {
-  background-color: #55198b;
-  border: solid 1px #55198b;
-  color: white;
-  font-weight: 500;
-  line-height: 1.1;
-  width: max-content;
-  padding: 13px 22px;
-  margin-right: 0px;
-  /* text-transform: uppercase; */
-  border-radius: 6px;
-  text-align: center;
-  text-decoration: none;
-  font-family: 'Google Sans Regular';
-  display: block;
-  margin-top: 20px;
-  font-size: 18px;
-  cursor: pointer;
-  letter-spacing: 2px;
-}
-.main-button:hover {
-  /* background-color: #ffffff; */
-  /* color: black; */
-  transition: ease-in 0.3s;
-}
-.project-button {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-/* Media Query */
-@media (max-width: 768px) {
-  .main-button {
-    font-size: 15px;
-    padding: 12px 18px;
-    margin-right: 0px;
-  }
-}
-@media (max-width: 320px) {
-  .main-button {
-    font-size: 12px;
-  }
-}
diff --git a/src/components/cleanUp/button/Button.js b/src/components/cleanUp/button/Button.js
deleted file mode 100644
index da3b188..0000000
--- a/src/components/cleanUp/button/Button.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// import React from 'react';
-// import './Button.css';
-
-// const onMouseEnter = (event, color, bgColor) => {
-//   const el = event.target;
-//   el.style.color = color;
-//   el.style.backgroundColor = bgColor;
-// };
-
-// const onMouseOut = (event, color, bgColor) => {
-//   const el = event.target;
-//   el.style.color = color;
-//   el.style.backgroundColor = bgColor;
-// };
-
-// export default function Button({ text, className, href, newTab, theme }) {
-//   return (
-//     <div className={className}>
-//       <a
-//         className="main-button"
-//         href={href}
-//         target={newTab && '_blank'}
-//         style={{
-//           color: theme.body,
-//           backgroundColor: theme.text,
-//           border: `solid 1px ${theme.text}`,
-//         }}
-//         onMouseEnter={(event) => onMouseEnter(event, theme.text, theme.body)}
-//         onMouseOut={(event) => onMouseOut(event, theme.body, theme.text)}
-//       >
-//         {text}
-//       </a>
-//     </div>
-//   );
-// }
diff --git a/src/components/cleanUp/theme.jsx b/src/components/cleanUp/theme.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/collection/example-data.json b/src/components/collection/example-data.json
deleted file mode 100644
index 601be24..0000000
--- a/src/components/collection/example-data.json
+++ /dev/null
@@ -1,64 +0,0 @@
-[
-  {
-    "id": "totalPrice",
-    "color": "hsl(351, 70%, 50%)",
-    "data": [
-      {
-        "x": "1:00",
-        "y": 2170
-      },
-      {
-        "x": "1:30",
-        "y": 2176
-      },
-      {
-        "x": "2:00",
-        "y": 2200
-      },
-      {
-        "x": "2:30",
-        "y": 2150
-      },
-      {
-        "x": "3:00",
-        "y": 2250
-      },
-      {
-        "x": "3:30",
-        "y": 2300
-      },
-      {
-        "x": "4:00",
-        "y": 2400
-      },
-      {
-        "x": "4:30",
-        "y": 2450
-      },
-      {
-        "x": "5:00",
-        "y": 2500
-      },
-      {
-        "x": "5:30",
-        "y": 2550
-      },
-      {
-        "x": "6:00",
-        "y": 2600
-      },
-      {
-        "x": "6:30",
-        "y": 2650
-      },
-      {
-        "x": "7:00",
-        "y": 2700
-      },
-      {
-        "x": "7:30",
-        "y": 2750
-      }
-    ]
-  }
-]
\ No newline at end of file
diff --git a/src/components/forms/AddCardForm.jsx b/src/components/forms/AddCardForm.jsx
index b52ecf7..0f47efb 100644
--- a/src/components/forms/AddCardForm.jsx
+++ b/src/components/forms/AddCardForm.jsx
@@ -1,39 +1,39 @@
-import React from 'react';
-import { Box, Input, Button } from '@mui/material';
+// import React from 'react';
+// import { Box, Input, Button } from '@mui/material';
 
-const AddCardForm = ({
-  newCard,
-  setNewCard,
-  newCardPrice,
-  setNewCardPrice,
-  newCardCondition,
-  setNewCardCondition, // New prop for card condition
-  addCard,
-}) => {
-  return (
-    <Box mb={4}>
-      <Input
-        placeholder="Enter card name"
-        value={newCard}
-        onChange={(e) => setNewCard(e.target.value)}
-      />
-      <Input
-        placeholder="Enter card price"
-        value={newCardPrice}
-        onChange={(e) => setNewCardPrice(e.target.value)}
-        mt={2}
-      />
-      <Input
-        placeholder="Enter card condition"
-        value={newCardCondition} // New state variable
-        onChange={(e) => setNewCardCondition(e.target.value)} // New state setter function
-        mt={2}
-      />
-      <Button onClick={addCard} mt={2}>
-        Add Card
-      </Button>
-    </Box>
-  );
-};
+// const AddCardForm = ({
+//   newCard,
+//   setNewCard,
+//   newCardPrice,
+//   setNewCardPrice,
+//   newCardCondition,
+//   setNewCardCondition, // New prop for card condition
+//   addCard,
+// }) => {
+//   return (
+//     <Box mb={4}>
+//       <Input
+//         placeholder="Enter card name"
+//         value={newCard}
+//         onChange={(e) => setNewCard(e.target.value)}
+//       />
+//       <Input
+//         placeholder="Enter card price"
+//         value={newCardPrice}
+//         onChange={(e) => setNewCardPrice(e.target.value)}
+//         mt={2}
+//       />
+//       <Input
+//         placeholder="Enter card condition"
+//         value={newCardCondition} // New state variable
+//         onChange={(e) => setNewCardCondition(e.target.value)} // New state setter function
+//         mt={2}
+//       />
+//       <Button onClick={addCard} mt={2}>
+//         Add Card
+//       </Button>
+//     </Box>
+//   );
+// };
 
-export default AddCardForm;
+// export default AddCardForm;
diff --git a/src/components/forms/SearchForm.jsx b/src/components/forms/SearchForm.jsx
index 358bc91..c992696 100644
--- a/src/components/forms/SearchForm.jsx
+++ b/src/components/forms/SearchForm.jsx
@@ -3,68 +3,77 @@ import { TextField, Button, Paper } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useMode } from '../../context/hooks/colormode';
 
-const useStyles = makeStyles((theme) => ({
-  formContainer: {
-    width: '100%',
-    padding: theme.spacing(3),
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.default,
-    boxShadow: theme.shadows[3], // Use the theme's predefined shadows
-    maxWidth: 400,
-    margin: 'auto',
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    padding: theme.spacing(2),
-  },
-  textField: {
-    '& label.Mui-focused': {
-      color: theme.palette.primary.main,
-    },
-    '& .MuiOutlinedInput-root': {
-      '&:hover fieldset': {
-        borderColor: theme.palette.primary.light,
-      },
-      '&.Mui-focused fieldset': {
-        borderColor: theme.palette.primary.main,
-      },
-    },
-  },
-  submitButton: {
-    backgroundColor: theme.palette.success.main,
-    color: theme.palette.getContrastText(theme.palette.success.main),
-    '&:hover': {
-      backgroundColor: theme.palette.success.dark,
-    },
-  },
-}));
-
 const SearchForm = ({ searchTerm, handleChange, handleSubmit }) => {
   const { theme } = useMode();
-  const classes = useStyles(theme);
 
   return (
-    <Paper className={classes.formContainer}>
-      <form onSubmit={handleSubmit} className={classes.form}>
-        <TextField
-          value={searchTerm}
-          onChange={handleChange}
-          label="Search for cards"
-          variant="outlined"
-          fullWidth
-          className={classes.textField}
-        />
-        <Button
-          type="submit"
-          variant="contained"
-          className={classes.submitButton}
-          fullWidth
+    <Paper
+      sx={{
+        width: '100%',
+        padding: theme.spacing(3),
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.default,
+        boxShadow: theme.shadows[3], // Use the theme's predefined shadows
+        maxWidth: 400,
+        margin: 'auto',
+      }}
+    >
+      <Paper
+        sx={{
+          width: '100%',
+          padding: theme.spacing(3),
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.secondary.light,
+          boxShadow: theme.shadows[3], // Use the theme's predefined shadows
+          maxWidth: 400,
+          margin: 'auto',
+        }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing(2),
+            padding: theme.spacing(2),
+          }}
         >
-          Search
-        </Button>
-      </form>
+          <TextField
+            value={searchTerm}
+            onChange={handleChange}
+            label="Search for cards"
+            variant="outlined"
+            fullWidth
+            sx={{
+              '& label.Mui-focused': {
+                color: theme.palette.primary.main,
+              },
+              '& .MuiOutlinedInput-root': {
+                '&:hover fieldset': {
+                  borderColor: theme.palette.primary.light,
+                },
+                '&.Mui-focused fieldset': {
+                  borderColor: theme.palette.primary.main,
+                },
+              },
+            }}
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            sx={{
+              backgroundColor: theme.palette.success.main,
+              color: theme.palette.getContrastText(theme.palette.success.main),
+              '&:hover': {
+                backgroundColor: theme.palette.success.dark,
+              },
+            }}
+            fullWidth
+          >
+            Search
+          </Button>
+        </form>
+      </Paper>
     </Paper>
   );
 };
diff --git a/src/components/forms/customerCheckoutForm/CartActions.jsx b/src/components/forms/customerCheckoutForm/CartActions.jsx
index 3fab6cb..65ba644 100644
--- a/src/components/forms/customerCheckoutForm/CartActions.jsx
+++ b/src/components/forms/customerCheckoutForm/CartActions.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import CartSummary from '../../other/CartSummary';
+import CartSummary from '../../other/dataDisplay/CartSummary';
 import OrderSubmitButton from '../../buttons/other/OrderSubmitButton';
 
 const CartActions = ({ quantity, getTotalCost, handleModalOpen }) => {
diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js
index 854c76e..7be8582 100644
--- a/src/components/forms/customerCheckoutForm/CustomerForm.js
+++ b/src/components/forms/customerCheckoutForm/CustomerForm.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useContext } from 'react';
-import { Box, Container, Typography } from '@mui/material';
+import { Box, Container, Typography, Grid } from '@mui/material';
 import { useCartStore } from '../../../context/CartContext/CartContext';
 import CustomerInfoFields from './CustomerInfoFields';
 import CartActions from './CartActions';
@@ -8,7 +8,6 @@ import { ModalContext } from '../../../context/ModalContext/ModalContext';
 
 const CustomerForm = () => {
   const { getTotalCost, cartData } = useCartStore();
-  // const [isModalOpen, setIsModalOpen] = useState(false);
   const {
     openModalWithCard,
     closeModal,
@@ -16,10 +15,13 @@ const CustomerForm = () => {
     setModalOpen,
     modalContent,
   } = useContext(ModalContext);
-  // const handleModalOpen = useCallback(() => setIsModalOpen(true), []);
-  // const handleModalClose = useCallback(() => setIsModalOpen(false), []);
-  const handleModalOpen = useCallback(() => setModalOpen(true), []);
-  const handleModalClose = useCallback(() => setModalOpen(false), []);
+  const { cartCardQuantity } = useCartStore();
+
+  const handleModalOpen = useCallback(() => setModalOpen(true), [setModalOpen]);
+  const handleModalClose = useCallback(
+    () => setModalOpen(false),
+    [setModalOpen]
+  );
   const onToken = useCallback(
     (token) => {
       console.log(token);
@@ -28,7 +30,8 @@ const CustomerForm = () => {
     [handleModalClose]
   );
 
-  console.log('CUSTOMER FORM QUANTITY FROM CARTDATA', cartData.quantity);
+  console.log('CUSTOMER FORM QUANTITY FROM CARTDATA', cartCardQuantity);
+
   return (
     <Container maxWidth={false}>
       <Box sx={{ width: '100%', padding: '2rem' }}>
@@ -39,14 +42,21 @@ const CustomerForm = () => {
           Customer Info
         </Typography>
         <form>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-            <CustomerInfoFields />
-            <CartActions
-              quantity={cartData.quantity}
-              getTotalCost={getTotalCost}
-              handleModalOpen={handleModalOpen}
-            />
-          </Box>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={8}>
+              <CustomerInfoFields />
+            </Grid>
+            <Grid item xs={12} md={4}>
+              {/* This space can be used for additional components if needed */}
+            </Grid>
+            <Grid item xs={12}>
+              <CartActions
+                quantity={cartCardQuantity}
+                getTotalCost={getTotalCost}
+                handleModalOpen={handleModalOpen}
+              />
+            </Grid>
+          </Grid>
         </form>
       </Box>
       <StripeCheckoutModal
diff --git a/src/components/grids/DeckDisplay.js b/src/components/grids/DeckDisplay.js
index c5e9be0..ebafdd4 100644
--- a/src/components/grids/DeckDisplay.js
+++ b/src/components/grids/DeckDisplay.js
@@ -3,47 +3,11 @@ import { Paper, Button, Typography, Box } from '@mui/material';
 import { DeckContext } from '../../context/DeckContext/DeckContext';
 import DeckButtonList from './deckBuilderGrids/DeckButtonList';
 import CardsGrid from './deckBuilderGrids/CardsGrid';
-import DeckEditPanel from '../other/DeckEditPanel';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(3),
-    backgroundColor: theme.palette.background.default,
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    margin: 'auto', // Centering the form
-  },
-  paper: {
-    padding: theme.spacing(2),
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[4],
-    backgroundColor: theme.palette.background.paper,
-  },
-  button: {
-    margin: theme.spacing(1),
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
-    },
-  },
-  noCardsText: {
-    marginTop: theme.spacing(2),
-    textAlign: 'center',
-    color: theme.palette.text.secondary,
-    fontStyle: 'italic',
-  },
-  title: {
-    fontWeight: 'bold',
-    color: theme.palette.text.primary,
-    marginBottom: theme.spacing(2),
-  },
-  // Other styles...
-}));
+import DeckEditPanel from '../other/InputComponents/DeckEditPanel';
+import { useMode } from '../../context/hooks/colormode';
 
 const DeckDisplay = ({ userDecks = [] }) => {
-  const classes = useStyles();
+  const { theme } = useMode();
   const { setSelectedDeck, selectedDeck, updateAndSyncDeck } =
     useContext(DeckContext);
   const [selectedCards, setSelectedCards] = useState([]);
@@ -61,14 +25,43 @@ const DeckDisplay = ({ userDecks = [] }) => {
   };
 
   return (
-    <Box className={classes.root}>
-      <Paper className={classes.paper}>
-        <Typography variant="h5" className={classes.title}>
+    <Box
+      sx={{
+        padding: theme.spacing(3),
+        backgroundColor: theme.palette.background.default,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        margin: 'auto', // Centering the form
+      }}
+    >
+      <Paper
+        sx={{
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius,
+          boxShadow: theme.shadows[4],
+          backgroundColor: theme.palette.background.paper,
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{
+            fontWeight: 'bold',
+            color: theme.palette.text.primary,
+            marginBottom: theme.spacing(2),
+          }}
+        >
           Your Decks
         </Typography>
         <Button
           onClick={() => setShowAllDecks(!showAllDecks)}
-          className={classes.button}
+          sx={{
+            margin: theme.spacing(1),
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+            '&:hover': {
+              backgroundColor: theme.palette.primary.dark,
+            },
+          }}
         >
           {showAllDecks ? 'Hide Decks' : 'Show All Decks'}
         </Button>
@@ -87,7 +80,14 @@ const DeckDisplay = ({ userDecks = [] }) => {
         {selectedCards.length > 0 ? (
           <CardsGrid selectedCards={selectedCards} />
         ) : (
-          <Typography className={classes.noCardsText}>
+          <Typography
+            sx={{
+              marginTop: theme.spacing(2),
+              textAlign: 'center',
+              color: theme.palette.text.secondary,
+              fontStyle: 'italic',
+            }}
+          >
             No cards to display
           </Typography>
         )}
diff --git a/src/components/grids/StoreItem.jsx b/src/components/grids/StoreItem.jsx
new file mode 100644
index 0000000..862668e
--- /dev/null
+++ b/src/components/grids/StoreItem.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import GenericCard from '../cards/GenericCard';
+
+const StoreItem = ({ card, page, index, context }) => (
+  <Box sx={{ marginBottom: '1rem', flexGrow: '1' }}>
+    <GenericCard card={card} page={page} index={index} context={context} />
+  </Box>
+);
+
+export default StoreItem;
diff --git a/src/components/grids/deckBuilderGrids/DeckButtonList.js b/src/components/grids/deckBuilderGrids/DeckButtonList.js
index 2aeea2f..02a29c1 100644
--- a/src/components/grids/deckBuilderGrids/DeckButtonList.js
+++ b/src/components/grids/deckBuilderGrids/DeckButtonList.js
@@ -9,6 +9,8 @@ const DeckButtonList = ({ userDecks, handleSelectDeck }) => {
   const { selectedDeck } = useContext(DeckContext);
   // console.log('SELECTED DECK:', selectedDeck.name);
   // console.log('userDecks', userDecks);
+  console.log('userDecks', userDecks);
+  console.log('selectedDeck', selectedDeck);
   return (
     <Grid container spacing={1} className={classes.grid}>
       {userDecks?.map((deck) => (
diff --git a/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx b/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
index 08cfcfa..4cf85d7 100644
--- a/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
+++ b/src/components/grids/searchResultGrids/DeckSearchCardGrid.jsx
@@ -1,22 +1,33 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Box, Grid, useMediaQuery } from '@mui/material';
-// import LoadingIndicator from '../../reusable/indicators/LoadingIndicator';
+import { Box, Container, Grid, useMediaQuery } from '@mui/material';
 import GenericCard from '../../cards/GenericCard';
 import { useMode } from '../../../context/hooks/colormode';
 import { styled } from '@mui/system';
-// import LoadingCardAnimation from '../../../assets/animations/LoadingCardAnimation';
-import LoadingIndicator2 from '../../reusable/indicators/LoadingIndicator2';
+import LoadingIndicator from '../../reusable/indicators/LoadingIndicator';
+
 const StyledGrid = styled(Grid)(({ theme }) => ({
-  margin: theme.spacing(1),
+  // margin: theme.spacing(1),
   [theme.breakpoints.down('sm')]: {
     margin: theme.spacing(0.5),
   },
+  [theme.breakpoints.up('md')]: {
+    margin: theme.spacing(1.5),
+  },
+  [theme.breakpoints.up('lg')]: {
+    margin: theme.spacing(2),
+  },
 }));
 
 const StyledGridItem = styled(Grid)(({ theme }) => ({
-  padding: theme.spacing(2),
+  // padding: theme.spacing(2),
   [theme.breakpoints.down('sm')]: {
-    padding: theme.spacing(1),
+    // padding: theme.spacing(1),
+  },
+  [theme.breakpoints.up('md')]: {
+    // padding: theme.spacing(2),
+  },
+  [theme.breakpoints.up('lg')]: {
+    // padding: theme.spacing(2),
   },
 }));
 
@@ -35,19 +46,15 @@ const DeckSearchCardGrid = ({ cards, userDecks }) => {
     [cards]
   );
 
-  // if (isLoading) {
-  //   return <LoadingIndicator />;
-  // }
-
   if (isLoading) {
-    return <LoadingIndicator2 />;
+    return <LoadingIndicator />;
   }
 
   return (
     <StyledGrid container spacing={isSmallScreen ? 1 : 2}>
       {Array.from(uniqueCards).map((card) => (
-        <StyledGridItem item xs={isSmallScreen ? 6 : 3} key={card.id}>
-          <GenericCard card={card} userDecks={userDecks} />
+        <StyledGridItem item xs={12} sm={6} md={4} lg={4} key={card.id}>
+          <GenericCard card={card} userDecks={userDecks} context={'Deck'} />
         </StyledGridItem>
       ))}
     </StyledGrid>
diff --git a/src/components/grids/storeSearchResultsGrid/ProductGrid.js b/src/components/grids/storeSearchResultsGrid/ProductGrid.js
index a88701f..2e2ab0d 100644
--- a/src/components/grids/storeSearchResultsGrid/ProductGrid.js
+++ b/src/components/grids/storeSearchResultsGrid/ProductGrid.js
@@ -1,26 +1,13 @@
 import React, { useMemo } from 'react';
 import { Grid } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import GenericCard from '../../cards/GenericCard';
 import { useCardStore } from '../../../context/CardContext/CardStore';
-
-const useStyles = makeStyles((theme) => ({
-  productGrid: {
-    maxWidth: '90%',
-    justifyContent: 'center',
-    margin: '0 auto',
-  },
-  productGridItem: {
-    padding: theme.spacing(2),
-    height: 'auto', // Set a specific value if required
-    width: '100%',
-  },
-}));
+import StoreItem from '../StoreItem';
+import { useCartStore } from '../../../context/CartContext/CartContext';
 
 const ProductGrid = () => {
   const { searchData } = useCardStore();
-
-  const classes = useStyles();
+  const { addOneToCart, removeOneFromCart } = useCartStore();
 
   const isCardDataValid = searchData && Array.isArray(searchData);
 
@@ -29,8 +16,28 @@ const ProductGrid = () => {
     [searchData]
   );
 
+  const handleModifyItemInCart = async (cardId, operation) => {
+    try {
+      if (operation === 'add') {
+        addOneToCart(cardId);
+      } else if (operation === 'remove') {
+        removeOneFromCart(cardId);
+      }
+    } catch (error) {
+      console.error('Failed to adjust quantity in cart: ', error);
+    }
+  };
+
   return (
-    <Grid container spacing={3} className={classes.productGrid}>
+    <Grid
+      container
+      spacing={3}
+      sx={{
+        maxWidth: '90%',
+        justifyContent: 'center',
+        margin: '0 auto',
+      }}
+    >
       {isCardDataValid &&
         limitedCardsToRender.map((card, index) => (
           <Grid
@@ -40,9 +47,22 @@ const ProductGrid = () => {
             md={4}
             lg={3}
             key={`${card.id}-${index}`}
-            className={classes.productGridItem}
+            sx={{
+              padding: (theme) => theme.spacing(2),
+              height: 'auto', // Set a specific value if required
+              width: '100%',
+            }}
           >
-            <GenericCard card={card} context="Cart" page="storepage" />
+            {/* <GenericCard card={card} context="Cart" page="storepage" /> */}
+            <StoreItem
+              card={card}
+              context={'Cart'}
+              page={'storepage'}
+              // onAddToCart={(cardId) => handleAddToCart(cardId)}
+              onQuantityChange={(cardId, operation) =>
+                handleModifyItemInCart(cardId, operation)
+              }
+            />
           </Grid>
         ))}
     </Grid>
diff --git a/src/components/headings/PortfolioHeader.jsx b/src/components/headings/PortfolioHeader.jsx
deleted file mode 100644
index e68f267..0000000
--- a/src/components/headings/PortfolioHeader.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// components/PortfolioHeader.js
-
-import React from 'react';
-import { AlertTitle, Box, Typography } from '@mui/material';
-import Alert from '@mui/material/Alert';
-import HeaderTitle from '../reusable/HeaderTitle';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-
-export const PortfolioHeader = ({ error }) => {
-  const { allCollections, selectedCollection } = useCollectionStore();
-  return (
-    <Box flexGrow={0}>
-      {/* <HeaderTitle title="Collection Portfolio" /> */}
-      {error && (
-        <Alert severity="error" sx={{ mt: 2 }}>
-          <AlertTitle>Error</AlertTitle>
-          This is an error alert — <strong> {error}</strong>
-        </Alert>
-      )}
-    </Box>
-  );
-};
-
-export default PortfolioHeader;
diff --git a/src/components/icons/DeckOfCardsIcon.jsx b/src/components/icons/DeckOfCardsIcon.jsx
deleted file mode 100644
index f9fab42..0000000
--- a/src/components/icons/DeckOfCardsIcon.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import DeckIcon from '@mui/icons-material/Deck'; // Import the deck icon
-
-const DeckOfCardsIcon = () => {
-  return <DeckIcon />;
-};
-
-export default DeckOfCardsIcon;
diff --git a/src/components/modals/GenericCardModal.jsx b/src/components/modals/cardModal/GenericCardModal.jsx
similarity index 79%
rename from src/components/modals/GenericCardModal.jsx
rename to src/components/modals/cardModal/GenericCardModal.jsx
index 5aecff4..4161d78 100644
--- a/src/components/modals/GenericCardModal.jsx
+++ b/src/components/modals/cardModal/GenericCardModal.jsx
@@ -6,12 +6,12 @@ import {
   Snackbar,
   Alert,
 } from '@mui/material';
-import { useStyles } from './modalStyles';
-import useAppContext from '../../context/hooks/useAppContext';
-import useSnackbar from '../../context/hooks/useSnackBar';
-import CardMediaAndDetails from '../media/CardMediaAndDetails';
-import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
-import { ModalContext } from '../../context/ModalContext/ModalContext';
+import { useStyles } from '../modalStyles';
+import useAppContext from '../../../context/hooks/useAppContext';
+import useSnackbar from '../../../context/hooks/useSnackBar';
+import CardMediaAndDetails from '../../media/CardMediaAndDetails';
+import GenericActionButtons from '../../buttons/actionButtons/GenericActionButtons';
+import { ModalContext } from '../../../context/ModalContext/ModalContext';
 
 const GenericCardModal = ({ open, card, context }) => {
   const classes = useStyles();
@@ -22,15 +22,6 @@ const GenericCardModal = ({ open, card, context }) => {
   const { openModalWithCard, closeModal, isModalOpen, modalContent } =
     useContext(ModalContext);
 
-  // if (!isContextAvailable) {
-  //   handleSnackbar(
-  //     `The component isn't wrapped with the ${context}Provider`,
-  //     'error'
-  //   );
-  //   console.error(`The component isn't wrapped with the ${context}Provider`);
-  //   return null; // Consider rendering an error boundary or user-friendly error message instead.
-  // }
-
   const requiresDoubleButtons = context === 'Deck' || context === 'Collection';
 
   useEffect(() => {
diff --git a/src/components/modals/stripeModal/StripeCheckoutModal.js b/src/components/modals/stripeModal/StripeCheckoutModal.js
index 12cba06..8189dc6 100644
--- a/src/components/modals/stripeModal/StripeCheckoutModal.js
+++ b/src/components/modals/stripeModal/StripeCheckoutModal.js
@@ -1,72 +1,69 @@
 import React from 'react';
-import { Modal, Backdrop, Fade, Box, Typography } from '@mui/material';
+import { Modal, Fade, Box, Typography, Backdrop } from '@mui/material';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
 import StripeForm from '../../forms/customerCheckoutForm/StripeForm';
 
-// Make sure to call `loadStripe` outside of a component’s render to avoid recreating the `Stripe` object on every render.
-// console.log('Stripe key: ', process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
 const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
 
 const StripeCheckoutModal = ({ open, onClose, onToken, purchases, total }) => {
-  // Rest of your component code...
   return (
     <Modal
       open={open}
       onClose={onClose}
       closeAfterTransition
-      BackdropComponent={Backdrop}
-      BackdropProps={{
-        timeout: 500,
-      }}
       sx={{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <Fade in={open}>
-        <Box
-          sx={{
-            zIndex: 2000, // add this line
-            width: 400,
-            backgroundColor: '#fff',
-            boxShadow: 24,
-            borderRadius: '8px',
-            p: 4,
-            maxHeight: '80vh',
-            overflow: 'auto',
-          }}
-        >
-          <Typography variant="h6" gutterBottom>
-            Your Purchases
-          </Typography>
-          {purchases.map((purchase, index) => (
-            <Box
-              key={index}
-              sx={{ display: 'flex', justifyContent: 'space-between' }}
-            >
-              <Typography>{purchase.name}</Typography>
-              <Typography>
-                ${purchase.card_prices[0].tcgplayer_price}
-              </Typography>
-            </Box>
-          ))}
+      <Backdrop
+        open={open}
+        onClose={onClose}
+        timeout={500}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} // Ensures the backdrop is above other elements but below the modal
+      >
+        <Fade in={open}>
           <Box
             sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              marginTop: '1rem',
+              position: 'absolute', // Needed for proper positioning within the backdrop
+              zIndex: 2000, // Ensure this is above the backdrop
+              width: 400,
+              bgcolor: 'background.paper',
+              boxShadow: 24,
+              borderRadius: 2,
+              p: 4,
+              maxHeight: '80vh',
+              overflow: 'auto',
             }}
           >
-            <Typography variant="subtitle1">Total:</Typography>
-            <Typography variant="subtitle1">${total}</Typography>
+            <Typography variant="h6" gutterBottom>
+              Your Purchases
+            </Typography>
+            {purchases.map((purchase, index) => (
+              <Box
+                key={index}
+                sx={{ display: 'flex', justifyContent: 'space-between' }}
+              >
+                <Typography>{purchase.name}</Typography>
+                <Typography>
+                  ${purchase.card_prices[0].tcgplayer_price}
+                </Typography>
+              </Box>
+            ))}
+            <Box
+              sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}
+            >
+              <Typography variant="subtitle1">Total:</Typography>
+              <Typography variant="subtitle1">${total}</Typography>
+            </Box>
+            <Elements stripe={stripePromise}>
+              <StripeForm total={total} onToken={onToken} />
+            </Elements>
           </Box>
-          <Elements stripe={stripePromise}>
-            <StripeForm total={total} onToken={onToken} />
-          </Elements>
-        </Box>
-      </Fade>
+        </Fade>
+      </Backdrop>
     </Modal>
   );
 };
diff --git a/src/components/other/DeckEditPanel.js b/src/components/other/DeckEditPanel.js
deleted file mode 100644
index dd79ce3..0000000
--- a/src/components/other/DeckEditPanel.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@mui/styles';
-import { Button, TextField, Paper, Typography } from '@mui/material';
-import { useMode } from '../../context/hooks/colormode';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(4),
-    margin: theme.spacing(2),
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3], // Utilize theme's predefined shadows
-    backgroundColor: theme.palette.background.paper, // Use theme's paper background color
-  },
-  title: {
-    marginBottom: theme.spacing(3),
-    fontWeight: theme.typography.fontWeightBold, // Use theme's font weight for bold text
-    fontSize: theme.typography.h6.fontSize, // Align font size with h6 variant
-    color: theme.palette.text.primary, // Use theme's primary text color
-  },
-  textField: {
-    marginBottom: theme.spacing(3),
-    '& .MuiOutlinedInput-root': {
-      '&:hover fieldset': {
-        borderColor: theme.palette.secondary.light, // Use secondary color for hover state
-      },
-      '&.Mui-focused fieldset': {
-        borderColor: theme.palette.secondary.main, // Use secondary main color for focus
-      },
-    },
-    '& .MuiInputBase-input': {
-      fontSize: theme.typography.subtitle1.fontSize, // Align with subtitle1 font size
-    },
-  },
-  saveButton: {
-    boxShadow: theme.shadows[1], // Use a softer shadow from theme
-    textTransform: 'none',
-    fontSize: theme.typography.button.fontSize, // Align with button font size
-    padding: theme.spacing(1, 4),
-    lineHeight: theme.typography.button.lineHeight, // Align with button line height
-    backgroundColor: theme.palette.secondary.main, // Use secondary color for button
-    color: theme.palette.secondary.contrastText, // Contrast text for readability
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.dark, // Darken on hover
-      boxShadow: theme.shadows[2], // Slightly elevate shadow on hover
-    },
-  },
-}));
-
-const DeckEditPanel = ({ selectedDeck, onSave }) => {
-  const { theme } = useMode();
-  const classes = useStyles(theme);
-  const [name, setName] = useState(selectedDeck?.name || '');
-  const [description, setDescription] = useState(
-    selectedDeck?.description || ''
-  );
-
-  const handleSave = () => {
-    onSave({
-      ...selectedDeck,
-      name,
-      description,
-    });
-  };
-
-  return (
-    <Paper elevation={3} className={classes.root}>
-      <Typography variant="h6" className={classes.title}>
-        Edit Deck
-      </Typography>
-      <TextField
-        className={classes.textField}
-        label="Deck Name"
-        value={name}
-        variant="outlined"
-        fullWidth
-        onChange={(e) => setName(e.target.value)}
-      />
-      <TextField
-        className={classes.textField}
-        label="Deck Description"
-        value={description}
-        variant="outlined"
-        fullWidth
-        multiline
-        rows={4}
-        onChange={(e) => setDescription(e.target.value)}
-      />
-      <Button
-        variant="contained"
-        className={classes.saveButton}
-        onClick={handleSave}
-      >
-        Save Changes
-      </Button>
-    </Paper>
-  );
-};
-
-export default DeckEditPanel;
diff --git a/src/components/other/InputComponents/CardNameInput.js b/src/components/other/InputComponents/CardNameInput.js
index 3be6fd7..d8b8365 100644
--- a/src/components/other/InputComponents/CardNameInput.js
+++ b/src/components/other/InputComponents/CardNameInput.js
@@ -2,24 +2,23 @@ import React from 'react';
 import { Input } from '@mui/material';
 import { useCardStore } from '../../../context/CardContext/CardStore';
 
-const CardNameInput = ({ value, setValue }) => {
+const CardNameInput = ({ value, setValue, handleChange }) => {
   const { handleRequest } = useCardStore();
 
-  const handleKeyDown = (event) => {
-    if (event.key === 'Enter') {
-      handleRequest(); // Use handleRequest from context
-    }
-  };
-
-  const handleChange = (event) => {
-    setValue(event.target.value);
-  };
+  // const handleChange = (event) => {
+  //   setValue(event.target.value);
+  // };
   return (
     <Input
       fullWidth
       placeholder="Type card name"
       onChange={handleChange}
-      onKeyDown={handleKeyDown}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          handleRequest(value);
+        }
+      }}
+      value={value}
     />
   );
 };
diff --git a/src/components/other/InputComponents/CollectionStatisticsSelector.jsx b/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
index 549730d..c55a545 100644
--- a/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
+++ b/src/components/other/InputComponents/CollectionStatisticsSelector.jsx
@@ -8,7 +8,7 @@ import {
   CardContent,
   Card,
 } from '@mui/material';
-import { getFilteredData2 } from '../../chart/chartUtils';
+import { getFilteredData2 } from '../../reusable/chartUtils';
 import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
 
 function calculatePriceChanges(data) {
diff --git a/src/components/other/InputComponents/CustomSelector.js b/src/components/other/InputComponents/CustomSelector.js
index d3978e5..2724fa2 100644
--- a/src/components/other/InputComponents/CustomSelector.js
+++ b/src/components/other/InputComponents/CustomSelector.js
@@ -1,26 +1,39 @@
 import React from 'react';
 import { Grid, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { useMode } from '../../../context/hooks/colormode';
 
-const CustomSelector = ({ label, name, value, setValue, values }) => {
-  const handleChange = (event) => {
-    setValue(
-      event.target.value.toLowerCase() === 'unset' ? '' : event.target.value
-    );
-  };
+const CustomSelector = ({ label, name, value, handleChange, values }) => {
+  // const handleChange = (event) => {
+  //   setValue(
+  //     event.target.value.toLowerCase() === 'unset' ? '' : event.target.value
+  //   );
+  // };
+  const defaultValue = value || 'Unset';
+
+  if (!values) {
+    return <div>Values not provided</div>;
+  }
+
+  if (!handleChange) {
+    return <div>handleChange not provided</div>;
+  }
+
+  if (!defaultValue) {
+    return <div>Value not provided</div>;
+  }
+  const { theme } = useMode();
 
   return (
-    <Grid item xs={12} sm={6} md={3}>
-      <FormControl fullWidth variant="filled">
-        <InputLabel id={name}>{label}</InputLabel>
-        <Select labelId={name} value={value} onChange={handleChange}>
-          {values.map((value) => (
-            <MenuItem key={value} value={value}>
-              {value}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </Grid>
+    <FormControl fullWidth variant="filled" sx={{ mt: 1, mb: 1 }}>
+      <InputLabel id={name}>{label}</InputLabel>
+      <Select labelId={name} value={defaultValue} onChange={handleChange}>
+        {values.map((val) => (
+          <MenuItem key={val} value={val}>
+            {val}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   );
 };
 
diff --git a/src/components/other/InputComponents/DeckEditPanel.js b/src/components/other/InputComponents/DeckEditPanel.js
new file mode 100644
index 0000000..cf5f991
--- /dev/null
+++ b/src/components/other/InputComponents/DeckEditPanel.js
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Button, TextField, Paper, Typography } from '@mui/material';
+import { useMode } from '../../../context/hooks/colormode';
+
+const DeckEditPanel = ({ selectedDeck, onSave }) => {
+  const { theme } = useMode();
+  const [name, setName] = useState(selectedDeck?.name || '');
+  const [description, setDescription] = useState(
+    selectedDeck?.description || ''
+  );
+
+  const handleSave = () => {
+    onSave({
+      ...selectedDeck,
+      name,
+      description,
+    });
+  };
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{
+        padding: theme.spacing(4),
+        margin: theme.spacing(2),
+        borderRadius: theme.shape.borderRadius,
+        boxShadow: theme.shadows[3],
+        backgroundColor: theme.palette.primary.light,
+      }}
+    >
+      <Typography
+        variant="h6"
+        sx={{
+          marginBottom: theme.spacing(3),
+          fontWeight: theme.typography.fontWeightBold,
+          fontSize: theme.typography.h6.fontSize,
+          color: theme.palette.text.primary,
+        }}
+      >
+        Edit Deck
+      </Typography>
+      <TextField
+        sx={{
+          marginBottom: theme.spacing(3),
+          '& .MuiOutlinedInput-root': {
+            '&:hover fieldset': {
+              borderColor: theme.palette.secondary.light,
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: theme.palette.secondary.main,
+            },
+          },
+          '& .MuiInputBase-input': {
+            fontSize: theme.typography.subtitle1.fontSize,
+          },
+        }}
+        label="Deck Name"
+        value={name}
+        variant="outlined"
+        fullWidth
+        onChange={(e) => setName(e.target.value)}
+      />
+      <TextField
+        sx={{
+          marginBottom: theme.spacing(3),
+          '& .MuiOutlinedInput-root': {
+            '&:hover fieldset': {
+              borderColor: theme.palette.secondary.light,
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: theme.palette.secondary.main,
+            },
+          },
+          '& .MuiInputBase-input': {
+            fontSize: theme.typography.subtitle1.fontSize,
+          },
+        }}
+        label="Deck Description"
+        value={description}
+        variant="outlined"
+        fullWidth
+        multiline
+        rows={4}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+      <Button
+        variant="contained"
+        sx={{
+          boxShadow: theme.shadows[1],
+          textTransform: 'none',
+          fontSize: theme.typography.button.fontSize,
+          padding: theme.spacing(1, 4),
+          lineHeight: theme.typography.button.lineHeight,
+          backgroundColor: theme.palette.secondary.main,
+          color: theme.palette.secondary.contrastText,
+          '&:hover': {
+            backgroundColor: theme.palette.secondary.dark,
+            boxShadow: theme.shadows[2],
+          },
+        }}
+        onClick={handleSave}
+      >
+        Save Changes
+      </Button>
+    </Paper>
+  );
+};
+
+export default DeckEditPanel;
diff --git a/src/components/other/CartSummary.js b/src/components/other/dataDisplay/CartSummary.js
similarity index 100%
rename from src/components/other/CartSummary.js
rename to src/components/other/dataDisplay/CartSummary.js
diff --git a/src/components/other/CartTotal.jsx b/src/components/other/dataDisplay/CartTotal.jsx
similarity index 100%
rename from src/components/other/CartTotal.jsx
rename to src/components/other/dataDisplay/CartTotal.jsx
diff --git a/src/components/other/CollectionValueTracker.jsx b/src/components/other/dataDisplay/CollectionValueTracker.jsx
similarity index 98%
rename from src/components/other/CollectionValueTracker.jsx
rename to src/components/other/dataDisplay/CollectionValueTracker.jsx
index 73ddfcd..54a534f 100644
--- a/src/components/other/CollectionValueTracker.jsx
+++ b/src/components/other/dataDisplay/CollectionValueTracker.jsx
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
+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';
diff --git a/src/components/other/ProgressCircle.jsx b/src/components/other/dataDisplay/ProgressCircle.jsx
similarity index 100%
rename from src/components/other/ProgressCircle.jsx
rename to src/components/other/dataDisplay/ProgressCircle.jsx
diff --git a/src/components/other/StatBox.jsx b/src/components/other/dataDisplay/StatBox.jsx
similarity index 100%
rename from src/components/other/StatBox.jsx
rename to src/components/other/dataDisplay/StatBox.jsx
diff --git a/src/components/other/StatisticsArea.jsx b/src/components/other/dataDisplay/StatisticsArea.jsx
similarity index 100%
rename from src/components/other/StatisticsArea.jsx
rename to src/components/other/dataDisplay/StatisticsArea.jsx
diff --git a/src/components/other/TopCardsDisplay.jsx b/src/components/other/dataDisplay/TopCardsDisplay.jsx
similarity index 80%
rename from src/components/other/TopCardsDisplay.jsx
rename to src/components/other/dataDisplay/TopCardsDisplay.jsx
index 1642159..be8a8da 100644
--- a/src/components/other/TopCardsDisplay.jsx
+++ b/src/components/other/dataDisplay/TopCardsDisplay.jsx
@@ -13,36 +13,22 @@ import {
   useTheme,
 } from '@mui/material';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-import { useMode } from '../../context/hooks/colormode';
+import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
+import { useMode } from '../../../context/hooks/colormode';
 import { makeStyles } from '@mui/styles';
-import { ModalContext } from '../../context/ModalContext/ModalContext';
-import GenericCard from '../cards/GenericCard';
-
+import { ModalContext } from '../../../context/ModalContext/ModalContext';
+import GenericCard from '../../cards/GenericCard';
+import {
+  MainContainer2,
+  MainContainer,
+} from '../../../pages/pageStyles/StyledComponents';
 const useStyles = makeStyles((theme) => ({
-  cardContainer: {
-    display: 'flex',
-    justifyContent: 'center', // Center the card horizontally
-    alignItems: 'center', // Center the card vertically
-    padding: theme.spacing(2),
-    width: '100%', // Use full width of the container
-  },
   stepper: {
     // backgroundColor: theme.palette.success.main,
-    backgroundColor: theme.palette.primary.light,
+    background: theme.palette.primary.light,
     color: 'white',
     marginTop: 'auto',
   },
-  paperContainer: {
-    padding: '10px',
-    backgroundColor: '#555',
-    width: '100%', // Use full width of the container
-    // height: '40vh', // Set the container height to 25vh
-    color: theme.palette.text.primary,
-    // padding: theme.spacing(2),
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3],
-  },
 }));
 
 const CarouselCard = ({ card }) => {
@@ -58,7 +44,7 @@ const CarouselCard = ({ card }) => {
     openModalWithCard(card);
   };
   return (
-    <Paper className={classes.paperContainer}>
+    <MainContainer2>
       <Grid container>
         <Grid item xs={4} md={4}>
           <GenericCard
@@ -75,13 +61,13 @@ const CarouselCard = ({ card }) => {
           <Typography variant="body2" color="text.secondary">
             {card.description}
           </Typography>
-          <Typography variant="subtitle2">
+          <Typography variant="subtitle2" color={'white'}>
             Price: ${card?.latestPrice?.num ?? 'N/A'}
           </Typography>
           {/* Additional statistics */}
         </Grid>
       </Grid>
-    </Paper>
+    </MainContainer2>
   );
 };
 
@@ -139,9 +125,9 @@ const TopCardsDisplay = () => {
         }}
       >
         {top5Cards.map((card, index) => (
-          <Box key={index} className={classes.cardContainer}>
+          <MainContainer key={index}>
             <CarouselCard card={card} />
-          </Box>
+          </MainContainer>
         ))}
       </SwipeableViews>
       <MobileStepper
diff --git a/src/components/other/UserStats.jsx b/src/components/other/dataDisplay/UserStats.jsx
similarity index 76%
rename from src/components/other/UserStats.jsx
rename to src/components/other/dataDisplay/UserStats.jsx
index 65c3b8c..0cb073a 100644
--- a/src/components/other/UserStats.jsx
+++ b/src/components/other/dataDisplay/UserStats.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
-import { useDeckStore } from '../../context/DeckContext/DeckContext';
-import { 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/components/chart/ChartErrorBoundary.jsx b/src/components/reusable/ChartErrorBoundary.jsx
similarity index 100%
rename from src/components/chart/ChartErrorBoundary.jsx
rename to src/components/reusable/ChartErrorBoundary.jsx
diff --git a/src/components/reusable/HeaderTitle.jsx b/src/components/reusable/HeaderTitle.jsx
index 9d0559a..b70c0da 100644
--- a/src/components/reusable/HeaderTitle.jsx
+++ b/src/components/reusable/HeaderTitle.jsx
@@ -4,12 +4,12 @@ import React from 'react';
 
 const HeaderTitle = ({ title, size = 'extraSmall', location = 'left' }) => {
   const sizes = {
-    huge: '2.5rem',
-    large: '1.75rem',
-    medium: '1.5rem',
-    small: '1.25rem',
-    tiny: '1rem',
-    extraSmall: '0.75rem',
+    huge: { fontSize: '2.5rem', lineHeight: '3rem' },
+    large: { fontSize: '1.75rem', lineHeight: '2.25rem' },
+    medium: { fontSize: '1.5rem', lineHeight: '2rem' },
+    small: { fontSize: '1.25rem', lineHeight: '1.75rem' },
+    tiny: { fontSize: '1rem', lineHeight: '1.5rem' },
+    extraSmall: { fontSize: '0.75rem', lineHeight: '1.25rem' },
   };
 
   const textAlign = {
@@ -18,24 +18,33 @@ const HeaderTitle = ({ title, size = 'extraSmall', location = 'left' }) => {
     right: 'right',
   };
 
+  const containerStyles = {
+    backgroundColor: (theme) => theme.palette.background.default,
+    padding: 2,
+    transition: 'background-color 0.3s ease',
+    '&:hover': {
+      backgroundColor: (theme) => theme.palette.background.paper,
+    },
+  };
+
+  const typographyStyles = {
+    fontSize: sizes[size].fontSize,
+    lineHeight: sizes[size].lineHeight,
+    textAlign: textAlign[location],
+    fontWeight: 700,
+    letterSpacing: '0.05em',
+    margin: '0 auto',
+    color: (theme) => theme.palette.text.primary,
+    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',
+    transition: 'color 0.3s ease',
+    '&:hover': {
+      color: (theme) => theme.palette.secondary.main,
+    },
+  };
+
   return (
-    <Container
-      sx={{
-        backgroundColor: (theme) => theme.palette.background.default,
-        padding: 2,
-      }}
-    >
-      <Typography
-        variant="h4"
-        sx={{
-          fontSize: sizes[size],
-          textAlign: textAlign[location],
-          fontWeight: 700,
-          letterSpacing: '0.05em',
-          margin: '0 auto',
-          color: (theme) => theme.palette.text.primary,
-        }}
-      >
+    <Container sx={containerStyles}>
+      <Typography variant="h4" sx={typographyStyles}>
         {title}
       </Typography>
     </Container>
diff --git a/src/components/chart/chartUtils.jsx b/src/components/reusable/chartUtils.jsx
similarity index 55%
rename from src/components/chart/chartUtils.jsx
rename to src/components/reusable/chartUtils.jsx
index a9ee8b2..474420f 100644
--- a/src/components/chart/chartUtils.jsx
+++ b/src/components/reusable/chartUtils.jsx
@@ -1,14 +1,3 @@
-// export const getUniqueValidData = (allXYValues) => {
-//   if (!Array.isArray(allXYValues)) {
-//     console.error('Invalid input: allXYValues should be an array');
-//     return [];
-//   }
-
-import { Box, Typography } from '@mui/material';
-import { useTheme } from '@mui/styles';
-// import { useCallback, useMemo, useState } from 'react';
-import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
-
 export const getUniqueValidData = (currentChartData) => {
   if (!Array.isArray(currentChartData)) {
     console.error('Invalid input: currentChartData should be an array');
@@ -50,62 +39,6 @@ export const getUniqueValidData = (currentChartData) => {
     }));
 };
 
-// export const groupAndAverageData = (data, threshold = 600000) => {
-//   // 10 minutes in milliseconds
-//   if (!data || data.length === 0) return { dates: [], times: [], values: [] };
-
-//   const clusters = [];
-//   let currentCluster = [data[0]];
-
-//   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();
-//     if (currentTime - prevTime <= threshold) {
-//       currentCluster.push(data[i]);
-//     } else {
-//       console.log('Current Cluster:', currentCluster); // Log the current cluster
-//       clusters.push(currentCluster);
-//       currentCluster = [data[i]];
-//     }
-//   }
-//   clusters.push(currentCluster); // Push the last cluster
-//   console.log('All Clusters:', clusters); // Log all clusters
-
-//   // For each cluster, find the middlemost x-value and average y-values
-//   let dates = [];
-//   let times = [];
-//   let values = [];
-
-//   clusters.forEach((cluster) => {
-//     const middleIndex = Math.floor(cluster.length / 2);
-//     const middleDatum = cluster[middleIndex];
-//     const date = new Date(middleDatum.x);
-//     const avgY =
-//       cluster.reduce((sum, point) => sum + point.y, 0) / cluster.length;
-
-//     const hours = date.getHours();
-//     const minutes = date.getMinutes();
-//     const AMPM = hours >= 12 ? 'PM' : 'AM';
-//     const adjustedHours = hours % 12 || 12; // Converts "0" to "12"
-
-//     dates.push(
-//       `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
-//         2,
-//         '0'
-//       )}-${String(date.getDate()).padStart(2, '0')}`
-//     );
-//     times.push(
-//       `${String(adjustedHours).padStart(2, '0')}:${String(minutes).padStart(
-//         2,
-//         '0'
-//       )} ${AMPM}`
-//     );
-//     values.push(avgY);
-//   });
-
-//   return { dates, times, values };
-// };
-
 export const groupAndAverageData = (data, threshold = 600000) => {
   if (!data || data.length === 0) return [];
 
@@ -150,7 +83,6 @@ export const groupAndAverageData = (data, threshold = 600000) => {
     };
   });
 
-  // console.log('Processed clusters: ', clusters);
   return clusters;
 };
 
@@ -185,62 +117,6 @@ export const getTickValues = (timeRange) => {
   return mapping[timeRange] || 'every day'; // Default to 'every week' if no match
 };
 
-// export const useMovingAverage = (data, numberOfPricePoints) => {
-//   return useMemo(() => {
-//     if (!Array.isArray(data)) {
-//       return [];
-//     }
-//     console.log('[1][Data]----------> [', data + ']');
-//     console.log(
-//       '[2][NUMBER OF POINTS]----------> [',
-//       numberOfPricePoints + ']'
-//     );
-
-//     return data.map((row, index, total) => {
-//       const start = Math.max(0, index - numberOfPricePoints);
-//       const end = index;
-//       const subset = total.slice(start, end + 1);
-//       const sum = subset.reduce((a, b) => a + b.y, 0);
-//       return {
-//         // x: String(row.x),
-//         x: row.x,
-//         y: sum / subset.length || 0,
-//       };
-//     });
-//   }, [data, numberOfPricePoints]);
-// };
-
-// export const convertDataForNivo = ({ dates, times, values }) => {
-//   if (
-//     !dates ||
-//     !times ||
-//     !values ||
-//     dates.length !== times.length ||
-//     dates.length !== values.length
-//   ) {
-//     console.error('Invalid or mismatched data arrays provided');
-//     return [];
-//   }
-
-//   // Assuming that dates, times, and values arrays are of equal length
-//   const nivoData = dates.map((date, index) => {
-//     const dateTime = new Date(`${date} ${times[index]}`);
-//     // Nivo chart requires the date to be either a Date object or an ISO date string
-//     return {
-//       x: dateTime.toISOString(),
-//       y: values[index],
-//     };
-//   });
-
-// Wrapping the data for a single series, you can add more series similarly
-//   return [
-//     {
-//       id: 'Averaged Data',
-//       data: nivoData,
-//     },
-//   ];
-// };
-
 export const convertDataForNivo2 = (rawData2) => {
   if (!Array.isArray(rawData2) || rawData2?.length === 0) {
     console.error('Invalid or empty rawData provided', rawData2);
diff --git a/src/components/icons/CartIcon.jsx b/src/components/reusable/icons/CartIcon.jsx
similarity index 100%
rename from src/components/icons/CartIcon.jsx
rename to src/components/reusable/icons/CartIcon.jsx
diff --git a/src/components/icons/CollectionIcon.jsx b/src/components/reusable/icons/CollectionIcon.jsx
similarity index 100%
rename from src/components/icons/CollectionIcon.jsx
rename to src/components/reusable/icons/CollectionIcon.jsx
diff --git a/src/components/reusable/icons/DeckOfCardsIcon.jsx b/src/components/reusable/icons/DeckOfCardsIcon.jsx
new file mode 100644
index 0000000..32afe04
--- /dev/null
+++ b/src/components/reusable/icons/DeckOfCardsIcon.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconButton } from '@mui/material';
+import deckIcon1 from '../../../assets/deckIcon2.png';
+
+const DeckOfCardsIcon = () => {
+  return (
+    <IconButton
+      aria-label="deck"
+      sx={{
+        width: 48, // Standard navbar icon size, adjust as needed
+        height: 48, // Standard navbar icon size, adjust as needed
+        padding: '8px', // Padding to provide some space around the icon
+        margin: '0', // Adjust margin as needed based on navbar layout
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.04)', // Slight effect on hover
+        },
+        // Ensure the img tag inside the button fits well
+        '& img': {
+          maxWidth: '100%',
+          maxHeight: '100%',
+        },
+      }}
+    >
+      <img src={deckIcon1} alt="deck icon" />
+    </IconButton>
+  );
+};
+
+export default DeckOfCardsIcon;
diff --git a/src/components/icons/TestingIcon.jsx b/src/components/reusable/icons/TestingIcon.jsx
similarity index 100%
rename from src/components/icons/TestingIcon.jsx
rename to src/components/reusable/icons/TestingIcon.jsx
diff --git a/src/components/reusable/indicators/LoadingIndicator2.js b/src/components/reusable/indicators/LoadingIndicator2.js
index b1e75b1..150584d 100644
--- a/src/components/reusable/indicators/LoadingIndicator2.js
+++ b/src/components/reusable/indicators/LoadingIndicator2.js
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import LoadingCardAnimation from '../../../assets/animations/LoadingCardAnimation';
+// import * as React from 'react';
+// import Box from '@mui/material/Box';
+// import LoadingCardAnimation from '../../../assets/animations/LoadingCardAnimation';
 
-const LoadingIndicator2 = () => {
-  return (
-    <Box sx={{ display: 'flex' }}>
-      <LoadingCardAnimation />
-    </Box>
-  );
-};
+// const LoadingIndicator2 = () => {
+//   return (
+//     <Box sx={{ display: 'flex' }}>
+//       <LoadingCardAnimation />
+//     </Box>
+//   );
+// };
 
-export default LoadingIndicator2;
+// export default LoadingIndicator2;
diff --git a/src/components/search/DeckSearch.js b/src/components/search/DeckSearch.js
index 6f58b6b..b024742 100644
--- a/src/components/search/DeckSearch.js
+++ b/src/components/search/DeckSearch.js
@@ -28,11 +28,21 @@ const DeckSearch = ({ userDecks }) => {
   const itemsPerPage = 36;
   const start = (page - 1) * itemsPerPage;
   const end = start + itemsPerPage;
-  const currentDeckSearchData = deckSearchData.slice(start, end);
+  const currentDeckSearchData = deckSearchData?.slice(start, end);
 
   return (
     <Fade in={true} timeout={500}>
-      <Box p={1}>
+      <Box
+        p={1}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
         <SearchForm
           searchTerm={searchTerm}
           handleChange={handleChange}
diff --git a/src/components/search/PortfolioCardSearch.jsx b/src/components/search/PortfolioCardSearch.jsx
deleted file mode 100644
index c674d04..0000000
--- a/src/components/search/PortfolioCardSearch.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Importações
-import React from 'react';
-import { Grid } from '@mui/material';
-import SearchButton from '../buttons/other/SearchButton';
-import CardNameInput from '../other/CardNameInput';
-
-const PortfolioCardSearch = ({
-  searchParams,
-  setSearchParams,
-  handleRequest,
-}) => (
-  <Grid item xs={12}>
-    <CardNameInput
-      value={searchParams}
-      setValue={(newValue) =>
-        setSearchParams((prevState) => ({
-          ...prevState,
-          name: newValue,
-        }))
-      }
-      handleRequest={() => handleRequest(searchParams)}
-    />
-    <SearchButton searchParams={searchParams || []} />
-  </Grid>
-);
-
-export default PortfolioCardSearch;
diff --git a/src/components/search/SearchBar.js b/src/components/search/SearchBar.js
index 2de0086..072669a 100644
--- a/src/components/search/SearchBar.js
+++ b/src/components/search/SearchBar.js
@@ -1,81 +1,109 @@
-import React from 'react';
+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 { useCombinedContext } from '../../context/CombinedProvider';
-import { makeStyles } from '@mui/styles';
 import search from './search.json';
-const useStyles = makeStyles((theme) => ({
-  searchContainer: {
-    padding: theme.spacing(3),
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
-    margin: theme.spacing(2, 'auto'),
-    width: '100%',
-    maxWidth: 'md',
-  },
-  title: {
-    marginBottom: theme.spacing(3),
-    fontWeight: 600,
-    color: theme.palette.primary.main,
-  },
-  searchGrid: {
-    gap: theme.spacing(2),
-  },
-  searchButtonContainer: {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'center',
-    marginTop: theme.spacing(2),
-  },
-}));
+import { useMode } from '../../context/hooks/colormode';
 
 const SearchBar = () => {
-  const { searchParams, setSearchParams } = useCombinedContext();
-  const { handleRequest } = useCardStore();
-  const classes = useStyles();
-  const { initialState, filters } = search; // Destructure the data from JSON
+  const { theme } = useMode();
+  const { initialState, filters } = search;
 
+  const [searchParams, setSearchParams] = useState({
+    name: '',
+    type: '',
+    attribute: '',
+    race: '',
+  });
+  const { handleRequest } = useCardStore();
+  // const handleChange = (name, newValue) => {
+  //   setSearchParams((prev) => ({ ...prev, [name]: newValue }));
+  // };
+  const handleChange = (name, newValue) => {
+    setSearchParams((prev) => ({ ...prev, [name]: newValue }));
+  };
+  // Correct handleSubmit to use handleRequest with searchParams
+  // const handleSubmit = (event) => {
+  //   event.preventDefault();
+  //   handleRequest(searchParams);
+  // };
+  const handleSubmit = () => {
+    handleRequest(searchParams);
+  };
   return (
-    <Paper className={classes.searchContainer}>
+    <Paper
+      sx={{
+        padding: 3,
+        borderRadius: 2,
+        backgroundColor: 'background.paper',
+        boxShadow: 3,
+        margin: 'auto',
+        width: '100%',
+        maxWidth: 'md',
+        '&:hover': {
+          boxShadow: 6,
+        },
+      }}
+    >
       <Container>
-        <Typography variant="h4" align="center" className={classes.title}>
+        <Typography
+          variant="h4"
+          align="center"
+          sx={{
+            mb: 3,
+            fontWeight: 'bold',
+            color: theme.palette.primary.main,
+            textTransform: 'uppercase',
+          }}
+        >
           Search Cards
         </Typography>
-        <Grid container spacing={2} className={classes.searchGrid}>
+        <Grid container spacing={2}>
           <Grid item xs={12}>
             <CardNameInput
-              value={searchParams?.name}
-              setValue={(newValue) =>
-                setSearchParams((prevState) => ({
-                  ...prevState,
-                  name: newValue,
-                }))
-              }
-              handleRequest={() => handleRequest(searchParams)}
+              value={searchParams.name}
+              handleChange={(event) => handleChange('name', event.target.value)}
             />
           </Grid>
           {filters?.map((filter) => (
-            <Grid item xs={12} sm={6} md={3} key={filter?.name}>
+            <Grid item xs={12} sm={6} md={3} key={filter?.label}>
               <CustomSelector
                 label={filter?.label}
                 name={filter?.name}
-                value={searchParams?.[filter?.name]}
-                setValue={(newValue) =>
-                  setSearchParams((prevState) => ({
-                    ...prevState,
-                    [filter?.name]: newValue,
-                  }))
+                value={searchParams?.[filter?.label]}
+                handleChange={(event) =>
+                  handleChange(filter.label, event.target.value)
                 }
+                // handleChange={(event) =>
+                //   handleChange(filter.name, event.target.value)
+                // }
+                // setValue={(newValue) =>
+                //   handleChange({ target: { value: newValue } })
+                // }
+                // handleChange={handleChange}
+                // setValue={(newValue) =>
+                //   setSearchParams((prevState) => ({
+                //     ...prevState,
+                //     [filter?.name]: newValue,
+                //   }))
+                // }
+                setSearchParams={setSearchParams}
                 values={filter?.values}
               />
             </Grid>
           ))}
-          <Grid item xs={12} className={classes.searchButtonContainer}>
-            <SearchButton searchParams={searchParams} />
+          <Grid
+            item
+            xs={12}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              mt: 2,
+            }}
+          >
+            <SearchButton handleSubmit={handleSubmit} />
           </Grid>
         </Grid>
       </Container>
diff --git a/src/components/other/AddressForm.jsx b/src/containers/cartPageContainers/AddressForm.jsx
similarity index 100%
rename from src/components/other/AddressForm.jsx
rename to src/containers/cartPageContainers/AddressForm.jsx
diff --git a/src/containers/cartPageContainers/CartContent.js b/src/containers/cartPageContainers/CartContent.js
index 533bf48..c95db93 100644
--- a/src/containers/cartPageContainers/CartContent.js
+++ b/src/containers/cartPageContainers/CartContent.js
@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { useCartStore } from '../../context/CartContext/CartContext';
 import CartContainer from './CartContainer';
 import CartItem from '../../components/grids/CartItem';
-import CartTotal from '../../components/other/CartTotal';
+import CartTotal from '../../components/other/dataDisplay/CartTotal';
 
 const CartContent = () => {
   const { cartData, getTotalCost } = useCartStore();
diff --git a/src/components/other/Checkout.jsx b/src/containers/cartPageContainers/Checkout.jsx
similarity index 100%
rename from src/components/other/Checkout.jsx
rename to src/containers/cartPageContainers/Checkout.jsx
diff --git a/src/components/other/PaymentForm.jsx b/src/containers/cartPageContainers/PaymentForm.jsx
similarity index 100%
rename from src/components/other/PaymentForm.jsx
rename to src/containers/cartPageContainers/PaymentForm.jsx
diff --git a/src/components/other/Review.jsx b/src/containers/cartPageContainers/Review.jsx
similarity index 100%
rename from src/components/other/Review.jsx
rename to src/containers/cartPageContainers/Review.jsx
diff --git a/src/containers/collectionPageContainers/PortfolioChartContainer.jsx b/src/containers/collectionPageContainers/PortfolioChartContainer.jsx
index f5f3fe1..f3cf490 100644
--- a/src/containers/collectionPageContainers/PortfolioChartContainer.jsx
+++ b/src/containers/collectionPageContainers/PortfolioChartContainer.jsx
@@ -6,7 +6,7 @@ import CollectionStatisticsSelector, {
   calculateStatistics,
 } from '../../components/other/InputComponents/CollectionStatisticsSelector';
 import UpdateStatusBox2 from '../../components/other/InputComponents/UpdateStatusBox2';
-import TopCardsDisplay from '../../components/other/TopCardsDisplay';
+import TopCardsDisplay from '../../components/other/dataDisplay/TopCardsDisplay';
 import { useChartContext } from '../../context/ChartContext/ChartContext';
 import { useCollectionStore } from '../../context/CollectionContext/CollectionContext';
 import { useCombinedContext } from '../../context/CombinedProvider';
diff --git a/src/containers/collectionPageContainers/PortfolioContent.jsx b/src/containers/collectionPageContainers/PortfolioContent.jsx
index 692a4aa..2a7d5d2 100644
--- a/src/containers/collectionPageContainers/PortfolioContent.jsx
+++ b/src/containers/collectionPageContainers/PortfolioContent.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Box, Container, Grid, Paper, useTheme } from '@mui/material';
-import PortfolioHeader from '../../components/headings/PortfolioHeader';
 import PortfolioListContainer from './PortfolioListContainer';
 import PortfolioChartContainer from './PortfolioChartContainer';
 import HeaderTitle from '../../components/reusable/HeaderTitle';
@@ -12,78 +11,68 @@ const PortfolioContent = ({ error, selectedCards, removeCard }) => {
   const { selectedCollection } = useCollectionStore();
 
   return (
-    <Container
-      maxWidth="100vw"
+    <Box
       sx={{
-        p: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        maxWidth: '100vw',
         width: '100%',
-        backgroundColor: theme.palette.background.default,
-        overflow: 'hidden',
+        margin: 'auto',
+        padding: theme.spacing(3),
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
       }}
     >
-      <Box
+      <Paper
+        elevation={4}
         sx={{
+          background: theme.palette.background.main,
+          color: theme.palette.text.primary,
           display: 'flex',
-          flexDirection: 'column',
           justifyContent: 'center',
-          alignItems: 'center',
-          maxWidth: '100vw',
+          flexDirection: 'column',
+          margin: 'auto',
+          width: '100%',
+          borderRadius: theme.shape.borderRadius,
+        }}
+      >
+        <HeaderTitle
+          title={selectedCollection?.name}
+          size="large"
+          location="center"
+        />
+      </Paper>
+      <Grid
+        container
+        spacing={3}
+        sx={{
           width: '100%',
+          maxWidth: '100vw',
+          justifyContent: 'center',
           margin: 'auto',
-          backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
         }}
       >
-        <PortfolioHeader error={error} />
-        <Paper
-          elevation={4}
-          sx={{
-            background: theme.palette.background.main,
-            color: theme.palette.text.primary,
-            display: 'flex',
-            justifyContent: 'center',
-            flexDirection: 'column',
-            margin: 'auto',
-            width: '100%',
-            borderRadius: theme.shape.borderRadius,
-          }}
-        >
-          <HeaderTitle
-            title={selectedCollection?.name}
-            size="large"
-            location="center"
-          />
-        </Paper>
         <Grid
-          container
-          spacing={3}
-          sx={{
-            width: '100%',
-            maxWidth: '100vw',
-            justifyContent: 'center',
-            margin: 'auto',
-          }}
+          item
+          xs={12}
+          md={6}
+          sx={{ justifyContent: 'center', margin: 'auto' }}
         >
-          <Grid
-            item
-            xs={12}
-            md={6}
-            sx={{ justifyContent: 'center', margin: 'auto' }}
-          >
-            <PortfolioChartContainer
-              selectedCards={selectedCards}
-              removeCard={removeCard}
-            />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <PortfolioListContainer
-              selectedCards={selectedCards}
-              removeCard={removeCard}
-            />
-          </Grid>
+          <PortfolioChartContainer
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <PortfolioListContainer
+            selectedCards={selectedCards}
+            removeCard={removeCard}
+          />
         </Grid>
-      </Box>
-    </Container>
+      </Grid>
+    </Box>
   );
 };
 
diff --git a/src/context/CardImagesContext/CardImagesContext.jsx b/src/context/CardImagesContext/CardImagesContext.jsx
index d6cad47..2f67d6f 100644
--- a/src/context/CardImagesContext/CardImagesContext.jsx
+++ b/src/context/CardImagesContext/CardImagesContext.jsx
@@ -36,7 +36,8 @@ export const CardImagesProvider = ({ children }) => {
   const [randomCardImage, setRandomCardImage] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const BASE_API_URL = 'http://localhost:3001/api/card-image';
+  // const BASE_API_URL = 'http://localhost:3001/api/card-image';
+  const BASE_API_URL = `${process.env.REACT_APP_SERVER}/api/card-image`;
 
   const downloadCardImages = async () => {
     setIsLoading(true);
diff --git a/src/context/CartContext/CartContext.js b/src/context/CartContext/CartContext.js
index 7653cc8..23b3748 100644
--- a/src/context/CartContext/CartContext.js
+++ b/src/context/CartContext/CartContext.js
@@ -34,8 +34,8 @@ export const CartProvider = ({ children }) => {
     quantity: 0, // Total quantity of items
     totalPrice: 0, // Total price of items
   });
-  const [cookies, setCookie] = useCookies(['userCookie', 'cart']);
-  const userId = cookies.userCookie?.id;
+  const [cookies, setCookie] = useCookies(['user', 'cart']);
+  const userId = cookies?.user?.id;
   const { getCardData } = useCardStore();
   const isMounted = useRef(true);
 
@@ -45,7 +45,6 @@ export const CartProvider = ({ children }) => {
     };
   }, []);
 
-  //Utility functions
   const fetchFromServer = async (url, options = {}) => {
     const response = await fetch(
       `${process.env.REACT_APP_SERVER}${url}`,
@@ -56,36 +55,49 @@ export const CartProvider = ({ children }) => {
     }
     return await response.json();
   };
-
   const updateCart = async (cartId, updatedCart) => {
-    const formattedCartData = updatedCart.map((item) => ({
-      ...item,
-      quantity: item.quantity,
-    }));
+    if (!cartId) return;
+    const formattedCartData = {
+      cartItems: updatedCart.map((item) => ({
+        ...item,
+        id: item.id, // Make sure 'id' is a number
+        quantity: item.quantity,
+      })),
+      userId: userId,
+    };
     const data = await fetchFromServer(`/api/carts/${cartId}/update`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(formattedCartData),
     });
+    // if (data && data.cart) {
+    //   setCartDataAndCookie(data.cart);
+    // }
     setCartDataAndCookie(data);
+    return data;
   };
-
   const createUserCart = useCallback(
     async (userId) => {
-      const newCartData = await fetchFromServer(
-        `/api/carts/${userId}/newCart`,
-        { method: 'POST' }
-      );
-      const newCartItems = Array.isArray(newCartData.cart)
-        ? newCartData.cart
-        : [];
-      setCookie('cart', newCartItems, {
-        // Changed this line
-        path: '/',
-        secure: true,
-        sameSite: 'none',
-      });
-      return newCartItems;
+      try {
+        const newCartData = await fetchFromServer(
+          '/api/carts/createEmptyCart',
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ userId }),
+          }
+        );
+        // setCookie('cart', newCartData, {
+        //   // Changed this line
+        //   path: '/',
+        //   secure: true,
+        //   sameSite: 'none',
+        // });
+        setCartDataAndCookie(newCartData);
+        return newCartData;
+      } catch (error) {
+        console.error('Error creating cart:', error);
+      }
     },
     [setCookie]
   );
@@ -94,46 +106,24 @@ export const CartProvider = ({ children }) => {
     async (userId) => {
       try {
         const data = await fetchFromServer(`/api/carts/userCart/${userId}`);
-        setCookie('cart', data.cart || [], {
-          path: '/',
-          secure: true,
-          sameSite: 'none',
-        });
+        // setCookie('cart', data.cart || [], {
+        //   path: '/',
+        //   secure: true,
+        //   sameSite: 'none',
+        // });
+        setCartDataAndCookie(data);
         return data;
       } catch (error) {
         if (error.message === 'HTTP error! status: 404') {
-          return createUserCart(userId);
+          await createUserCart(userId);
         } else {
-          console.error(error.message);
+          console.error('Error fetching user cart:', error);
         }
       }
     },
-    [createUserCart, setCookie]
+    [createUserCart]
   );
 
-  useEffect(() => {
-    if (userId && typeof userId === 'string') {
-      // console.log('Fetching user cart');
-      fetchUserCart(userId)
-        .then((data) => {
-          if (data && data.cart) {
-            setCartDataAndCookie(data);
-          }
-        })
-        .catch((error) => console.log('Error fetching user cart:', error));
-    }
-  }, [userId, fetchUserCart]);
-
-  const setCartDataAndCookie = (newCartData) => {
-    setCartData(newCartData);
-    setCookie('cart', newCartData.cart, {
-      // Changed this line
-      path: '/',
-      secure: true,
-      sameSite: 'none',
-    });
-  };
-
   const getCardQuantity = (cardId) => {
     let totalItems = 0;
     let quantityOfSameId = 0;
@@ -148,7 +138,8 @@ export const CartProvider = ({ children }) => {
 
   const addOneToCart = async (cardInfo) => {
     if (!cartData._id) return;
-    const { quantityOfSameId } = getCardQuantity(cardInfo.id);
+    console.log('Adding one to cart', cardInfo);
+    const { quantityOfSameId, totalItems } = getCardQuantity(cardInfo.id);
     if (quantityOfSameId >= 3) return;
     let updatedCart = cartData.cart.map((item) =>
       item.id === cardInfo.id ? { ...item, quantity: item.quantity + 1 } : item
@@ -157,6 +148,7 @@ export const CartProvider = ({ children }) => {
       updatedCart = [...updatedCart, { ...cardInfo, quantity: 1 }];
     }
     const updatedCartData = await updateCart(cartData._id, updatedCart);
+    console.log('UPDATED CART DATA:', updatedCartData);
     if (updatedCartData) setCartData(updatedCartData);
   };
 
@@ -180,6 +172,17 @@ export const CartProvider = ({ children }) => {
     if (updatedCartData) setCartData(updatedCartData);
   };
 
+  const setCartDataAndCookie = (newCartData) => {
+    if (newCartData && Array.isArray(newCartData.cart)) {
+      setCartData(newCartData);
+      setCookie('cart', newCartData.cart, {
+        path: '/',
+        secure: true,
+        sameSite: 'none',
+      });
+    }
+  };
+
   useEffect(() => {
     if (userId && typeof userId === 'string' && isMounted.current) {
       fetchUserCart(userId)
@@ -190,7 +193,22 @@ export const CartProvider = ({ children }) => {
         })
         .catch((error) => console.log('Error fetching user cart:', error));
     }
+    return () => {
+      isMounted.current = false;
+    };
   }, [userId, fetchUserCart]);
+  // useEffect(() => {
+  //   if (userId && typeof userId === 'string') {
+  //     // console.log('Fetching user cart');
+  //     fetchUserCart(userId)
+  //       .then((data) => {
+  //         if (data && data.cart) {
+  //           setCartDataAndCookie(data);
+  //         }
+  //       })
+  //       .catch((error) => console.log('Error fetching user cart:', error));
+  //   }
+  // }, [userId, fetchUserCart]);
 
   const getTotalCost = useMemo(
     () =>
@@ -210,6 +228,7 @@ export const CartProvider = ({ children }) => {
       0
     );
 
+    console.log('TOTAL QUANTITY:', totalQuantity);
     if (
       cartData.quantity !== totalQuantity ||
       cartData.totalPrice !== getTotalCost
@@ -242,8 +261,8 @@ export const CartProvider = ({ children }) => {
       (acc, card) => acc + card.card_prices[0].tcgplayer_price * card.quantity,
       0
     ),
-    addOneToCart,
-    removeOneFromCart,
+    addOneToCart: addOneToCart,
+    removeOneFromCart: removeOneFromCart,
     deleteFromCart,
     getTotalCost,
     fetchUserCart,
@@ -254,7 +273,7 @@ export const CartProvider = ({ children }) => {
     console.log('CART CONTEXT: ', {
       cartData,
       // getTotalCost,
-      // // getCardQuantity,
+      // getCardQuantity,
       // fetchUserCart,
       // addOneToCart,
       // removeOneFromCart,
diff --git a/src/context/CollectionContext/CollectionContext.jsx b/src/context/CollectionContext/CollectionContext.jsx
index f964a05..d4bf44b 100644
--- a/src/context/CollectionContext/CollectionContext.jsx
+++ b/src/context/CollectionContext/CollectionContext.jsx
@@ -54,42 +54,6 @@ function filterUniqueDataPoints(dataArray) {
   return Array.from(uniqueRecords.values());
 }
 
-function filterCollectionData(collection) {
-  if (!collection) return null;
-
-  if (!collection?.chartData) {
-    console.warn('Collection data is missing chart data.');
-    return collection;
-  }
-  collection.chartData.allXYValues = filterUniqueDataPoints(
-    collection?.chartData?.allXYValues
-  );
-  collection.currentChartDataSets = filterUniqueDataPoints(
-    collection?.currentChartDataSets
-  );
-  collection.currentChartDataSets2 = filterUniqueDataPoints(
-    collection?.currentChartDataSets2
-  );
-
-  collection?.chartData?.datasets.forEach((dataset) => {
-    dataset?.data?.forEach((dataEntry) => {
-      dataEntry.xys = filterUniqueDataPoints(dataEntry?.xys);
-    });
-  });
-
-  // Apply the filter function to 'xys' in 'chartData'
-  collection.chartData.xys = filterUniqueDataPoints(collection.chartData.xys);
-
-  // If the 'cards' array contains structures with 'label', 'x', and 'y' properties
-  collection.cards.forEach((card) => {
-    if (card.chart_datasets) {
-      card.chart_datasets = filterUniqueDataPoints(card.chart_datasets);
-    }
-  });
-
-  return collection;
-}
-
 export const CollectionProvider = ({ children }) => {
   const [cookies] = useCookies(['user']);
   const [selectedCollection, setSelectedCollection] = useState(
@@ -104,11 +68,10 @@ export const CollectionProvider = ({ children }) => {
     setUpdatedPricesFromCombinedContext,
   ] = useState([]);
   const [xyData, setXyData] = useState([]);
-  const [currentChartDataSets, setCurrentChartDataSets] = useState([]);
   const [currentChartDataSets2, setCurrentChartDataSets2] = useState([]);
   const [openChooseCollectionDialog, setOpenChooseCollectionDialog] =
     useState(false);
-  const userId = cookies.user?.id;
+  const userId = cookies?.user?.id;
   const lastFetchedTime = useRef(null);
 
   const fetchAndSetCollections = useCallback(async () => {
@@ -653,7 +616,6 @@ export const CollectionProvider = ({ children }) => {
         // Optionally handle the response here, e.g., update the state with the response data if necessary
       } catch (error) {
         console.error('Error updating collection details:', error);
-        // Handle error, e.g., revert state changes or display error message to the user
       }
     } else {
       console.error('Selected collection or collection ID is missing.');
@@ -766,22 +728,10 @@ export const CollectionProvider = ({ children }) => {
     });
   }, [allCollections, selectedCollection, totalCost, totalPrice, xyData]);
 
-  // useEffect(() => {
-  //   console.log('UPDATED COLLECTION DATA POST SERVER:', collectionData);
-  // }, [collectionData]);
-
   useEffect(() => {
     if (userId) fetchAndSetCollections();
   }, [userId]);
 
-  // useEffect(() => {
-  //   if (selectedCollection?.chartData)
-  //     // setCurrentChartDataSets(
-  //     //   getCurrentChartDataSets(selectedCollection?.chartData)
-  //     // );
-  //   console.log('CURRENT CHART DATASETS:', currentChartDataSets);
-  // }, [selectedCollection]);
-
   useEffect(() => {
     if (selectedCollection?.cards) {
       setTotalPrice(calculateCollectionValue(selectedCollection));
diff --git a/src/context/CollectionContext/collectionUtility.jsx b/src/context/CollectionContext/collectionUtility.jsx
index 93ee1af..75ff649 100644
--- a/src/context/CollectionContext/collectionUtility.jsx
+++ b/src/context/CollectionContext/collectionUtility.jsx
@@ -654,6 +654,58 @@ const constructPayloadWithDifferences = (
 //   return currentChartDataSets;
 // }
 
+const getAllCardPrices = (cards) =>
+  cards.flatMap((card) => Array(card.quantity).fill(card.price));
+
+function filterUniqueDataPoints(dataArray) {
+  const uniqueRecords = new Map();
+
+  dataArray?.forEach((item) => {
+    const key = `${item?.label}-${item?.x}-${item?.y}`;
+    if (!uniqueRecords.has(key)) {
+      uniqueRecords.set(key, item);
+    }
+  });
+
+  return Array.from(uniqueRecords.values());
+}
+
+function filterCollectionData(collection) {
+  if (!collection) return null;
+
+  if (!collection?.chartData) {
+    console.warn('Collection data is missing chart data.');
+    return collection;
+  }
+  collection.chartData.allXYValues = filterUniqueDataPoints(
+    collection?.chartData?.allXYValues
+  );
+  collection.currentChartDataSets = filterUniqueDataPoints(
+    collection?.currentChartDataSets
+  );
+  collection.currentChartDataSets2 = filterUniqueDataPoints(
+    collection?.currentChartDataSets2
+  );
+
+  collection?.chartData?.datasets.forEach((dataset) => {
+    dataset?.data?.forEach((dataEntry) => {
+      dataEntry.xys = filterUniqueDataPoints(dataEntry?.xys);
+    });
+  });
+
+  // Apply the filter function to 'xys' in 'chartData'
+  collection.chartData.xys = filterUniqueDataPoints(collection.chartData.xys);
+
+  // If the 'cards' array contains structures with 'label', 'x', and 'y' properties
+  collection.cards.forEach((card) => {
+    if (card.chart_datasets) {
+      card.chart_datasets = filterUniqueDataPoints(card.chart_datasets);
+    }
+  });
+
+  return collection;
+}
+
 const calculateCollectionValue = (cards) => {
   if (
     !cards?.cards &&
diff --git a/src/context/DeckContext/DeckContext.js b/src/context/DeckContext/DeckContext.js
index 13822bf..deac22f 100644
--- a/src/context/DeckContext/DeckContext.js
+++ b/src/context/DeckContext/DeckContext.js
@@ -41,11 +41,11 @@ const removeDuplicateDecks = (decks) => {
 };
 export const DeckProvider = ({ children }) => {
   const { getCardData } = useCardStore();
-  const [cookies, setCookie] = useCookies(['user']);
+  const [cookies] = useCookies(['user']);
   const [deckData, setDeckData] = useState({});
   const [allDecks, setAllDecks] = useState([]);
   const [selectedDeck, setSelectedDeck] = useState({});
-  const userId = cookies.user?.id;
+  const userId = cookies?.user?.id;
 
   const calculateAndUpdateTotalPrice = (deck) => {
     let totalPrice = 0;
@@ -58,6 +58,10 @@ export const DeckProvider = ({ children }) => {
   };
 
   const fetchDecksForUser = useCallback(async () => {
+    if (!userId) {
+      console.error('No user ID found.');
+      return null;
+    }
     try {
       const url = `${apiBase}/${userId}/decks`;
       return await fetchWrapper(url, 'GET');
@@ -71,8 +75,9 @@ export const DeckProvider = ({ children }) => {
     try {
       const userDecks = await fetchDecksForUser();
 
-      if (userDecks && userDecks.length > 0) {
-        const uniqueDecks = removeDuplicateDecks(userDecks);
+      if (userDecks.data && userDecks.data.length > 0) {
+        const uniqueDecks = removeDuplicateDecks(userDecks.data);
+        console.log('UNIQUE DECKS:', uniqueDecks);
         setAllDecks((prevDecks) =>
           removeDuplicateDecks([...prevDecks, ...uniqueDecks])
         );
@@ -132,6 +137,11 @@ export const DeckProvider = ({ children }) => {
         : [...newAllDecks, newDeckData];
     });
 
+    if (!userId) {
+      console.error('No user ID found.');
+      return;
+    }
+
     try {
       const url = `${apiBase}/${userId}/decks/${selectedDeck._id}`; // Removed deckId from the URL
       const bodyData = {
@@ -147,19 +157,20 @@ export const DeckProvider = ({ children }) => {
   const createUserDeck = async (userId, newDeckInfo) => {
     try {
       const url = `${apiBase}/${userId}/decks`;
-      const cards = newDeckInfo.cards
-        ? [formatCardData(newDeckInfo.cards)]
+      const cards = Array.isArray(newDeckInfo.cards)
+        ? newDeckInfo.cards.map(formatCardData)
         : [];
       const data = await fetchWrapper(url, 'POST', {
-        // ...newDeckInfo,
-        cards: cards,
+        cards,
         userId,
         totalPrice: 0,
         description: newDeckInfo.description || '',
         name: newDeckInfo.name || '',
       });
       console.log('NEW DECK DATA:', data);
-      setDeckData(data);
+      setDeckData(data.data);
+      setSelectedDeck(data.data);
+      setAllDecks((prevDecks) => [...prevDecks, data.data]);
     } catch (error) {
       console.error(`Failed to create a new deck: ${error.message}`);
     }
@@ -181,7 +192,9 @@ export const DeckProvider = ({ children }) => {
     }
 
     // Create a copy of the current state
-    const currentCards = [...(selectedDeck?.cards || [])];
+    const currentCards = Array.isArray(selectedDeck?.cards)
+      ? [...selectedDeck.cards]
+      : [];
     let currentTotalPrice = selectedDeck.totalPrice || 0;
 
     // Find the card index in the current state
@@ -213,17 +226,18 @@ export const DeckProvider = ({ children }) => {
     });
 
     try {
-      const url = `${apiBase}/users/${userId}/decks/${selectedDeck._id}`;
+      const url = `${apiBase}/${userId}/decks/${selectedDeck._id}`;
       const updatedDeck = await fetchWrapper(url, 'PUT', {
         cards: currentCards,
         totalPrice: currentTotalPrice,
       });
 
       setSelectedDeck({
-        ...updatedDeck,
+        ...updatedDeck.data,
+        cards: currentCards,
         totalPrice: currentTotalPrice,
       });
-      updateAndSyncDeck({ ...updatedDeck, totalPrice: currentTotalPrice });
+      updateAndSyncDeck({ ...updatedDeck.data, totalPrice: currentTotalPrice });
     } catch (error) {
       console.error(`Failed to update the deck: ${error.message}`);
     }
@@ -242,6 +256,7 @@ export const DeckProvider = ({ children }) => {
     deckData,
     allDecks,
     selectedDeck,
+    userDecks: allDecks,
     totalQuantity: getQuantity,
     setSelectedDeck,
     addOneToDeck: (card) => addOrRemoveCard(card, true, false),
@@ -256,11 +271,11 @@ export const DeckProvider = ({ children }) => {
 
   useEffect(() => {
     console.log('DECKCONTEXT:', contextValue);
-    const userId = cookies.userCookie?.id;
+    const userId = cookies?.user?.id;
     if (userId) {
       fetchAndSetDecks();
     }
-  }, [cookies.userCookie?.id, fetchAndSetDecks]);
+  }, [cookies?.user?.id, fetchAndSetDecks]);
 
   return (
     <DeckContext.Provider value={contextValue}>{children}</DeckContext.Provider>
diff --git a/src/index.js b/src/index.js
index e6a9146..74c02c2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,6 +22,7 @@ import { useMode } from './context/hooks/colormode';
 import { PopoverProvider } from './context/PopoverContext/PopoverContext';
 import { CronJobProvider } from './context/CronJobContext/CronJobContext';
 import { CardImagesProvider } from './context/CardImagesContext/CardImagesContext';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 const root = document.getElementById('root');
 
@@ -31,19 +32,20 @@ function Main() {
   return (
     <ErrorBoundary>
       <UtilityProvider>
-        <AuthProvider>
-          <ColorModeProvider>
-            <SocketProvider>
-              <UserProvider>
-                <ModalProvider>
-                  <PopoverProvider>
-                    <CollectionProvider>
-                      <CombinedProvider>
-                        <CardProvider>
-                          <CronJobProvider>
-                            <DeckProvider>
-                              <CartProvider>
-                                <CardImagesProvider>
+        <Router>
+          <AuthProvider>
+            <ColorModeProvider>
+              <SocketProvider>
+                <UserProvider>
+                  <ModalProvider>
+                    <PopoverProvider>
+                      <CollectionProvider>
+                        <CombinedProvider>
+                          <CardProvider>
+                            <CronJobProvider>
+                              <DeckProvider>
+                                <CartProvider>
+                                  {/* <CardImagesProvider> */}
                                   <GlobalStyles />
                                   <ThemeProvider theme={theme}>
                                     <ChartProvider>
@@ -54,19 +56,20 @@ function Main() {
                                       </SidebarProvider>
                                     </ChartProvider>
                                   </ThemeProvider>
-                                </CardImagesProvider>
-                              </CartProvider>
-                            </DeckProvider>
-                          </CronJobProvider>
-                        </CardProvider>
-                      </CombinedProvider>
-                    </CollectionProvider>
-                  </PopoverProvider>
-                </ModalProvider>
-              </UserProvider>
-            </SocketProvider>
-          </ColorModeProvider>
-        </AuthProvider>
+                                  {/* </CardImagesProvider> */}
+                                </CartProvider>
+                              </DeckProvider>
+                            </CronJobProvider>
+                          </CardProvider>
+                        </CombinedProvider>
+                      </CollectionProvider>
+                    </PopoverProvider>
+                  </ModalProvider>
+                </UserProvider>
+              </SocketProvider>
+            </ColorModeProvider>
+          </AuthProvider>
+        </Router>
       </UtilityProvider>
     </ErrorBoundary>
   );
diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
index 85a85ec..a7f113c 100644
--- a/src/pages/CartPage.js
+++ b/src/pages/CartPage.js
@@ -17,7 +17,6 @@ const CartPage = () => {
   const [cookies] = useCookies(['user']);
   const user = cookies.user;
   const userId = user?.id;
-  // useUpdateAppContext(); // This will set the context to 'Deck' when this page is rendered
 
   const {
     cartData,
diff --git a/src/pages/CollectionPage.js b/src/pages/CollectionPage.js
index cc4aac6..2f611df 100644
--- a/src/pages/CollectionPage.js
+++ b/src/pages/CollectionPage.js
@@ -8,17 +8,14 @@ import CardPortfolio from '../components/collection/CardPortfolio';
 import Subheader from '../components/reusable/Subheader';
 import { useCollectionStore } from '../context/CollectionContext/CollectionContext';
 import { ModalContext } from '../context/ModalContext/ModalContext';
-import GenericCardModal from '../components/modals/GenericCardModal';
+import GenericCardModal from '../components/modals/cardModal/GenericCardModal';
 import { CollectionBanner } from './pageStyles/StyledComponents';
-import useUpdateAppContext from '../context/hooks/useUpdateContext';
 
-// Hero section with customizable props
 const HeroCenter = ({ decorative, title, subtitle }) => (
   <Box
     sx={{
       flex: 1,
       height: '50vh',
-      // maxWidth: '90%',
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'column',
@@ -71,16 +68,13 @@ HeroCenter.defaultProps = {
 
 // Main collection page component
 const CollectionPage = () => {
-  // Destructuring the first element directly from the useCookies hook for cleaner code
   const [{ user }] = useCookies(['user']);
   const { allCollections, selectedCollection, loading, error } =
     useCollectionStore();
   const { openModalWithCard, closeModal, isModalOpen, modalContent } =
     useContext(ModalContext);
   const userId = user?.id;
-  // useUpdateAppContext(); // This will set the context to 'Deck' when this page is rendered
 
-  // Handling loading and error states upfront for better user experience
   if (loading) return <LoadingIndicator />;
   if (error) return <ErrorIndicator error={error} />;
 
@@ -94,9 +88,7 @@ const CollectionPage = () => {
       </CollectionBanner>
       <Box
         sx={{
-          // maxWidth: '100vw',
           maxHeight: '200vh',
-          // overflow: 'hidden',
         }}
       >
         <CardPortfolio allCollections={allCollections} />
diff --git a/src/pages/DeckBuilderPage.js b/src/pages/DeckBuilderPage.js
index 4b9cdb1..f8f1e46 100644
--- a/src/pages/DeckBuilderPage.js
+++ b/src/pages/DeckBuilderPage.js
@@ -1,12 +1,12 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { useCookies } from 'react-cookie';
-import { DeckContext } from '../context/DeckContext/DeckContext';
+import { DeckContext, useDeckStore } from '../context/DeckContext/DeckContext';
 import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
 import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
 import DeckBuilderContainer from '../containers/deckBuilderPageContainers/DeckBuilderContainer';
 import { Box, Grid, Typography } from '@mui/material';
 import { ModalContext } from '../context/ModalContext/ModalContext';
-import GenericCardModal from '../components/modals/GenericCardModal';
+import GenericCardModal from '../components/modals/cardModal/GenericCardModal';
 import HeaderTitle from '../components/reusable/HeaderTitle';
 import { useMode } from '../context/hooks/colormode';
 import { DeckBuilderBanner } from './pageStyles/StyledComponents';
@@ -54,8 +54,7 @@ const DeckBuilderPage = () => {
   const [userDecks, setUserDecks] = useState([]);
   const { user } = useCookies(['user'])[0];
   const { theme } = useMode();
-  const { fetchAllDecksForUser, allDecks, loading, error } =
-    useContext(DeckContext);
+  const { fetchAllDecksForUser, allDecks, loading, error } = useDeckStore();
   const { openModalWithCard, closeModal, isModalOpen, modalContent } =
     useContext(ModalContext);
   const userId = user?.id;
@@ -70,7 +69,8 @@ const DeckBuilderPage = () => {
 
   useEffect(() => {
     if (allDecks && userId) {
-      const filteredDecks = allDecks.filter((deck) => deck.userId === userId);
+      const filteredDecks = allDecks?.filter((deck) => deck?.userId === userId);
+      console.log('filteredDecks', filteredDecks);
       setUserDecks(filteredDecks);
     }
   }, [allDecks, userId]);
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 6fcc033..d690580 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -17,15 +17,15 @@ import {
 } from '@mui/material';
 import { useMode } from '../context/hooks/colormode';
 import useStyles from './pageStyles/styles';
-import DeckOfCardsIcon from '../components/icons/DeckOfCardsIcon';
+import DeckOfCardsIcon from '../components/reusable/icons/DeckOfCardsIcon';
 import { ModalContext } from '../context/ModalContext/ModalContext';
-import GenericCardModal from '../components/modals/GenericCardModal';
+import GenericCardModal from '../components/modals/cardModal/GenericCardModal';
 import {
   TertiaryContainer,
   SecondaryContainer,
 } from './pageStyles/StyledComponents';
-import LoadingIndicator2 from '../components/reusable/indicators/LoadingIndicator2';
-import LoadingCardAnimation from '../assets/animations/LoadingCardAnimation';
+// import LoadingIndicator2 from '../components/reusable/indicators/LoadingIndicator2';
+// import LoadingCardAnimation from '../assets/animations/LoadingCardAnimation';
 import pages from './pages.json';
 const CarouselImage = ({ image, caption }) => {
   return (
@@ -86,7 +86,7 @@ const HomePage = () => {
             color="text.primary"
             gutterBottom
           >
-            Album layout
+            Enhanced Cardstore
           </Typography>
           <Typography
             variant="h5"
@@ -94,29 +94,18 @@ const HomePage = () => {
             color="text.secondary"
             paragraph
           >
-            Something short and leading about the collection below—its contents,
-            the creator, etc. Make it short and sweet, but not too short so
-            folks don&apos;t simply skip over it entirely.
+            The purpose of this site is to provide an enhanced user experience
+            for competitive and novice card collectors alike. We provide an
+            advanced collection tracker and deck builder which allows users to
+            build decks and track the prices of the cards they need so they can
+            make the best financial decisions when buying and selling cards.
           </Typography>
           <Stack
             sx={{ pt: 4 }}
             direction="row"
             spacing={2}
             justifyContent="center"
-          >
-            <Button
-              variant="contained"
-              sx={{ background: theme.palette.success.main }}
-            >
-              Main call to action
-            </Button>
-            <Button
-              variant="contained"
-              sx={{ background: theme.palette.success.main, color: 'white' }}
-            >
-              Secondary action
-            </Button>
-          </Stack>
+          ></Stack>
           {/* </Container> */}
         </Box>
         <SecondaryContainer>
@@ -175,7 +164,9 @@ const HomePage = () => {
                   title={tier.title}
                   subheader={tier.subheader}
                   titleTypographyProps={{ align: 'center' }}
-                  action={tier.title === 'Pro' ? <DeckOfCardsIcon /> : null}
+                  action={
+                    tier.title === 'Deck Builder' ? <DeckOfCardsIcon /> : null
+                  }
                   subheaderTypographyProps={{
                     align: 'center',
                   }}
@@ -195,18 +186,7 @@ const HomePage = () => {
                       alignItems: 'baseline',
                       mb: 2,
                     }}
-                  >
-                    <Typography
-                      component="h2"
-                      variant="h3"
-                      color="text.primary"
-                    >
-                      ${tier.price}
-                    </Typography>
-                    <Typography variant="h6" color="text.secondary">
-                      /mo
-                    </Typography>
-                  </Box>
+                  ></Box>
                   <ul>
                     {tier.description.map((line) => (
                       <Typography
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index a2e8ee0..cb276a6 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -13,7 +13,7 @@ import {
 } from '@mui/material';
 import { Edit as EditIcon } from '@mui/icons-material';
 import placeholder from '../assets/images/placeholder.jpeg';
-import UserStats from '../components/other/UserStats';
+import UserStats from '../components/other/dataDisplay/UserStats';
 import { useUserContext } from '../context/UserContext/UserContext';
 import { useCookies } from 'react-cookie';
 import ThemeToggleButton from '../components/buttons/other/ThemeToggleButton';
diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js
index f4b27e4..549f7b9 100644
--- a/src/pages/StorePage.js
+++ b/src/pages/StorePage.js
@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Grid } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import { useCookies } from 'react-cookie';
 import SearchBar from '../components/search/SearchBar';
 import ProductGrid from '../components/grids/storeSearchResultsGrid/ProductGrid';
@@ -8,6 +8,8 @@ import { useCartStore } from '../context/CartContext/CartContext';
 import LoadingIndicator from '../components/reusable/indicators/LoadingIndicator';
 import ErrorIndicator from '../components/reusable/indicators/ErrorIndicator';
 import { StoreBanner, StoreTitle } from './pageStyles/StyledComponents';
+import { themeSettings } from '../assets/themeSettings';
+import { useMode } from '../context/hooks/colormode';
 
 const SearchContainer = () => {
   return (
@@ -18,19 +20,81 @@ const SearchContainer = () => {
 };
 
 const CardContainer = () => {
+  const { theme } = useMode();
+
   return (
-    <Grid item xs={12}>
+    <Grid
+      item
+      xs={12}
+      sx={{
+        backgroundColor: theme.palette.background.paper,
+        height: '100%',
+      }}
+    >
       <ProductGrid />
     </Grid>
   );
 };
 
+const HeroCenter3 = ({ decorative, title, subtitle, theme }) => (
+  <Box
+    sx={{
+      flex: 1,
+      height: '50vh',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: 2,
+      my: 6,
+      textAlign: 'center',
+    }}
+  >
+    <Typography
+      component="span"
+      sx={{
+        color: theme.palette.primary.main,
+        fontWeight: 600,
+        fontSize: 'sm',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+      }}
+    >
+      {decorative}
+    </Typography>
+    <Typography
+      variant="h1"
+      sx={{
+        fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
+        fontWeight: 800,
+      }}
+    >
+      {title}
+    </Typography>
+    <Typography
+      sx={{
+        fontSize: 'lg',
+        color: 'text.secondary',
+        maxWidth: '54ch',
+      }}
+    >
+      {subtitle}
+    </Typography>
+  </Box>
+);
+
+HeroCenter3.defaultProps = {
+  title: 'Welcome to Store',
+  subtitle: 'Search for cards and add them to your cart.',
+};
+
 const StorePage = () => {
-  const [cookies] = useCookies(['userCookie']);
+  const [cookies] = useCookies(['user']);
+
+  const { theme } = useMode();
   const { fetchUserCart, loading, error } = useCartStore();
   const { searchData } = useCardStore();
 
-  const userId = cookies.userCookie?.id;
+  const userId = cookies?.user?.id;
 
   useEffect(() => {
     if (userId) {
@@ -50,13 +114,28 @@ const StorePage = () => {
   }
 
   return (
-    <StoreBanner>
-      <StoreTitle>Store</StoreTitle>
-      <Grid container>
+    <React.Fragment>
+      <HeroCenter3 theme={theme} />
+      <Grid
+        container
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          // maxWidth: '100vw',
+          padding: theme.spacing(3),
+          width: '100%',
+          // margin: 'auto',
+          // padding: theme.spacing(3),
+          backgroundColor: theme.palette.background.paper,
+          color: theme.palette.text.primary,
+        }}
+      >
         <SearchContainer />
-        <CardContainer />
+        <CardContainer theme={theme} />
       </Grid>
-    </StoreBanner>
+    </React.Fragment>
   );
 };
 
diff --git a/src/pages/pages.json b/src/pages/pages.json
index eedc150..ed27827 100644
--- a/src/pages/pages.json
+++ b/src/pages/pages.json
@@ -10,39 +10,36 @@
   "tiers": [
     {
       "title": "Deck Builder",
-      "price": "0",
       "description": [
-        "10 users included",
-        "2 GB of storage",
-        "Help center access",
-        "Email support"
+        "Build and test decks digitally",
+        "Access to a wide library of cards",
+        "Deck performance analytics",
+        "Community deck sharing and rating"
       ],
-      "buttonText": "Sign up for free",
+      "buttonText": "Get Started",
       "buttonVariant": "outlined"
     },
     {
       "title": "Store",
       "subheader": "Most popular",
-      "price": "15",
       "description": [
-        "20 users included",
-        "10 GB of storage",
-        "Help center access",
-        "Priority email support"
+        "Sell and buy cards with ease",
+        "Secure transaction platform",
+        "Real-time market price tracking",
+        "Exclusive member discounts"
       ],
-      "buttonText": "Get started",
+      "buttonText": "Shop now",
       "buttonVariant": "contained"
     },
     {
       "title": "Collection Tracker",
-      "price": "30",
       "description": [
-        "50 users included",
-        "30 GB of storage",
-        "Help center access",
-        "Phone & email support"
+        "Track and manage your card collection",
+        "Value estimation based on market trends",
+        "Automatic collection organization",
+        "Trade and wishlist creation tools"
       ],
-      "buttonText": "Contact us",
+      "buttonText": "Track Collection",
       "buttonVariant": "outlined"
     }
   ]
diff --git a/src/setupProxy.js b/src/setupProxy.js
deleted file mode 100644
index 9f0c65b..0000000
--- a/src/setupProxy.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// // eslint-disable-next-line @typescript-eslint/no-var-requires
-// const { createProxyMiddleware } = require('http-proxy-middleware');
-
-// module.exports = function (app) {
-//   app.use(
-//     '/api',
-//     createProxyMiddleware({
-//       target: 'https://images.ygoprodeck.com',
-//       headers: {
-//         // 'Access-Control-Allow-Origin': '*',
-//         crossorigin: 'anonymous',
-//         // 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
-//       },
-//       changeOrigin: true,
-//       pathRewrite: { '^/api': '' },
-//     })
-//   );
-// };