diff --git a/.github/workflows/remove-old-artifacts.yml b/.github/workflows/remove-old-artifacts.yml
index ec85ff2..3b517ac 100644
--- a/.github/workflows/remove-old-artifacts.yml
+++ b/.github/workflows/remove-old-artifacts.yml
@@ -11,10 +11,18 @@ jobs:
     timeout-minutes: 10
 
     steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up GitHub CLI
+        run: |
+          echo ${GITHUB_PAT} | gh auth login --with-token
+        env:
+          GITHUB_PAT: ${{ secrets.PAT_TOKEN }}
+
       - name: Remove old artifacts
         uses: c-hive/gha-remove-artifacts@v1.4.0
         with:
           age: "5 days" # '<number> <unit>', e.g. 5 days, 2 years, 90 seconds, parsed by Moment.js
-          # Optional inputs
-          # skip-tags: true
-          # skip-recent: 5
+        env:
+          GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }}
diff --git a/backend/routes/basketRoutes.ts b/backend/routes/basketRoutes.ts
index 5573499..cd662e5 100644
--- a/backend/routes/basketRoutes.ts
+++ b/backend/routes/basketRoutes.ts
@@ -8,11 +8,11 @@ const router = express.Router();
 router.get("/", async (req: Request, res: Response) => {
   connectDB();
   try {
-    const users = await Basket.find({});
-    if (users.length === 0) {
-      res.status(404).send("No baskets found"); // Return a 404 status code if no users are found
+    const baskets = await Basket.find({});
+    if (baskets.length === 0) {
+      res.status(404).send("No baskets found"); // Return a 404 status code if no baskets are found
     } else {
-      res.send(users); // Return the found users
+      res.send(baskets); // Return the found baskets
     }
   } catch (error) {
     res.status(500).send("Internal Server Error"); // Handle any unexpected errors
@@ -29,30 +29,25 @@ router.get("/:basketid", async (req: Request, res: Response) => {
 
     // Check if basket is null or undefined
     if (!basketById) {
-      return res.status(404).send("No basket found"); // Use return to exit the function after sending the response
-    }
-
-    // Send the found user
-    res.send(basketById);
-    console.log("Sent Basket:", basketById);
-  } catch (error) {
-    console.log("Now trying to find by BasketName");
-    try {
+      // If not found by ObjectId, try to find by basketName
       const basketsByName = await Basket.find({
         basketName: req.params.basketid,
       });
-      console.log(basketsByName);
-      if (!basketsByName) {
+
+      if (!basketsByName.length) {
         return res.status(404).send("No baskets found"); // Use return to exit the function after sending the response
       }
 
-      // Send the found user
-      res.send(basketsByName);
-      console.log("Sent Baskets", basketsByName);
-    } catch (error) {
-      console.error("Error fetching basket:", error); // Log the error for debugging
-      res.status(500).send("Internal Server Error");
+      // Send the found baskets
+      return res.send(basketsByName);
     }
+
+    // Send the found basket by ObjectId
+    res.send(basketById);
+    console.log("Sent Basket:", basketById);
+  } catch (error) {
+    console.error("Error fetching basket:", error); // Log the error for debugging
+    res.status(500).send("Internal Server Error");
   }
 });
 
@@ -84,9 +79,9 @@ router.post("/", async (req: Request, res: Response) => {
 });
 
 router.patch("/:id", async (req: Request, res: Response) => {
-  // Get user ID from URL
+  // Get basket ID from URL
   const { id } = req.params;
-  const updatedData: Partial<IBasket> = req.body; //Not a full update only partial
+  const updatedData: Partial<IBasket> = req.body; // Not a full update, only partial
 
   try {
     connectDB();
@@ -113,7 +108,7 @@ router.delete("/:id", async (req: Request, res: Response) => {
     const basket = await Basket.findByIdAndDelete(id);
 
     if (!basket) {
-      return res.status(404).send({ message: "basket not found" });
+      return res.status(404).send({ message: "Basket not found" });
     }
 
     res.status(200).send({ message: "Basket Deleted Successfully", basket });
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c05e269..fadd4e1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -15,6 +15,7 @@ import EditItem from "./components/EditItem";
 import EditGroup from "./components/EditGroup";
 import EditBasket from "./components/EditBasket";
 import { IUser } from "../../backend/models/userSchema";
+import theme from "./theme";
 
 // TODO: When we integrate the frontend to use the backend, we need to use this API server: gather-app-inv.azurewebsites.net
 // fetch("gather-app-inv.azurewebsites.net");
@@ -74,7 +75,7 @@ function App() {
   const [loggedIn, setLoggedIn] = useState(false);
 
   return (
-    <ChakraProvider>
+    <ChakraProvider theme={theme}>
       <Router>
         <Box width="100vw" height="100vh" display="flex" flexDirection="column">
           {loggedIn && username != "" ? (
@@ -117,10 +118,7 @@ function App() {
             {/* added route for individual group page */}
             <Route
               path="/items"
-              element={<ItemsPage 
-                stateVariable={{ user, token }}
-              />
-            }
+              element={<ItemsPage stateVariable={{ user, token }} />}
             />
             <Route
               path="/groups"
diff --git a/frontend/src/components/Basket.tsx b/frontend/src/components/Basket.tsx
index 665e65d..8df5d0c 100644
--- a/frontend/src/components/Basket.tsx
+++ b/frontend/src/components/Basket.tsx
@@ -33,7 +33,7 @@ const BasketComp = ({ basketId, stateObj, isOwnerView }: Props) => {
       .then((res) =>
         res.status === 200
           ? res.json()
-          : Promise.reject(`Error code ${res.status}`),
+          : Promise.reject(`Error code ${res.status}`)
       )
       .then((data) => {
         setBasket({
@@ -46,7 +46,7 @@ const BasketComp = ({ basketId, stateObj, isOwnerView }: Props) => {
         });
       })
       .catch((err) => {
-        console.log("Terrible error occured!", err);
+        console.log("Error: ", err);
         setError({
           msg: err,
           isErrored: true,
diff --git a/frontend/src/components/BasketItem.tsx b/frontend/src/components/BasketItem.tsx
index 503b4f1..80d0bd0 100644
--- a/frontend/src/components/BasketItem.tsx
+++ b/frontend/src/components/BasketItem.tsx
@@ -30,7 +30,7 @@ const BasketItem = ({ itemId, basketMemberView }: Props) => {
       .then((res) =>
         res.status === 200
           ? res.json()
-          : Promise.reject(`Error code ${res.status}`),
+          : Promise.reject(`Error code ${res.status}`)
       )
       .then((data) => {
         setItem({
@@ -59,7 +59,7 @@ const BasketItem = ({ itemId, basketMemberView }: Props) => {
   }
 
   return (
-    <Box w="100%" overflow="hidden" margin="1rem" className="b-item">
+    <Box w="100%" overflow="hidden" margin="0.5rem" className="b-item">
       {loading ? (
         <Flex>
           <Box>
diff --git a/frontend/src/pages/IndividualGroupPage.tsx b/frontend/src/pages/IndividualGroupPage.tsx
index 2bb5026..ce1737e 100644
--- a/frontend/src/pages/IndividualGroupPage.tsx
+++ b/frontend/src/pages/IndividualGroupPage.tsx
@@ -17,13 +17,16 @@ import {
 import { IoArrowBack, IoSearch } from "react-icons/io5";
 import { IGroup } from "../../../backend/models/groupSchema";
 import { IUser } from "../../../backend/models/userSchema";
+import { IBasket } from "../../../backend/models/basketSchema";
 import { fetchMembers, fetchGroupById } from "../../lib/fetches";
+import BasketComp from "../components/Basket";
 
 function IndividualGroupPage() {
   const { groupId } = useParams<{ groupId: string }>();
   const [group, setGroup] = useState<IGroup | null>(null);
   const [loading, setLoading] = useState(true);
   const [members, setMembers] = useState<IUser[]>([]);
+  const [baskets, setBaskets] = useState<IBasket[]>([]);
   const navigate = useNavigate();
 
   const fetchGroup = async () => {
@@ -33,9 +36,10 @@ function IndividualGroupPage() {
       }
       const fetchedGroup = await fetchGroupById(groupId);
       if (fetchedGroup.ok) {
-        const data = await fetchedGroup.json();
-        setGroup(data);
-        fetchMembers(data.members).then((members) => {
+        const group = await fetchedGroup.json();
+        setGroup(group);
+        setBaskets(group.baskets);
+        fetchMembers(group.members).then((members) => {
           setMembers(members as IUser[]);
         });
         setLoading(false);
@@ -119,7 +123,7 @@ function IndividualGroupPage() {
               width="99%"
               padding="20px"
               borderWidth="1px"
-              borderRadius="md"
+              borderRadius="2xl"
               backgroundColor="rgba(255, 255, 255, 0.8)"
             >
               <VStack align="stretch" spacing={4}>
@@ -197,23 +201,20 @@ function IndividualGroupPage() {
                   </Box>
                 </HStack>
               </VStack>
-            </Box>
-            <Box mt={8} width="99%">
-              <Heading size="md">Baskets Component</Heading>
-              <Text mt={2}>This is where the Baskets component will go!</Text>
-              <Box overflowY="auto" maxHeight="300px" mt={4}>
-                {/* Replace with actual basket items */}
-                <VStack spacing={4} align="stretch">
-                  <Box padding="10px" borderWidth="1px" borderRadius="md">
-                    Basket Item 1
-                  </Box>
-                  <Box padding="10px" borderWidth="1px" borderRadius="md">
-                    Basket Item 2
-                  </Box>
-                  <Box padding="10px" borderWidth="1px" borderRadius="md">
-                    Basket Item 3
-                  </Box>
-                </VStack>
+              <Box mt={8} width="99%">
+                <Heading size="xl">Baskets</Heading>
+                <Box overflowY="auto" maxHeight="300px" mt={4}>
+                  <VStack spacing={4} align="stretch">
+                    {baskets.map((basket) => (
+                      <BasketComp
+                        key={basket.basketName}
+                        basketId={basket._id.toString()}
+                        stateObj={{ user: members, token: "your-token-here" }}
+                        isOwnerView={false} // Adjust this
+                      />
+                    ))}
+                  </VStack>
+                </Box>
               </Box>
             </Box>
           </>
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 72909b3..09b01ba 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -4,7 +4,6 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
   font-synthesis: none;
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
new file mode 100644
index 0000000..8e70f71
--- /dev/null
+++ b/frontend/src/theme.ts
@@ -0,0 +1,15 @@
+// theme.ts
+
+// 1. import `extendTheme` function
+import { extendTheme, type ThemeConfig } from "@chakra-ui/react";
+
+// 2. Add your color mode config
+const config: ThemeConfig = {
+  initialColorMode: "light",
+  useSystemColorMode: false,
+};
+
+// 3. extend the theme
+const theme = extendTheme({ config });
+
+export default theme;