diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9015013..6638719 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,9 +29,9 @@ jobs:
 
       - name: Rory Lange ItemCard Unit Tests
         run: cd AugmentedSpace && npm test --testPathPattern="components\__tests__\ItemCard.test"
-
+        
       - name: Bryan Lor LogIn Page Unit Tests
         run: cd AugmentedSpace && npm test --testPathPattern="app\__tests__\logIn.test"
         
       - name: Mohammad Sulaiman CartCard Unit Tests
-        run: cd AugmentedSpace && npm test --testPathPattern="components\__tests__\CartCard.test"
+        run: cd AugmentedSpace && npm test --testPathPattern="components\__tests__\CartCard.test"
\ No newline at end of file
diff --git a/AugmentedSpace/components/ItemCard.tsx b/AugmentedSpace/components/ItemCard.tsx
index dc3f70d..2848a25 100644
--- a/AugmentedSpace/components/ItemCard.tsx
+++ b/AugmentedSpace/components/ItemCard.tsx
@@ -1,9 +1,4 @@
-import {
-  Image,
-  Pressable,
-  Text,
-  View,
-} from "react-native";
+import { Image, Pressable, Text, View } from "react-native";
 import { useTheme } from "@react-navigation/native";
 import { useEffect, useState } from "react";
 import { getDownloadURL, getStorage, ref } from "firebase/storage";
@@ -51,8 +46,7 @@ export default function ItemCard(props: ItemCardProps) {
           shadowOpacity: 1,
         }}
       >
-        <Pressable onPress={props.onPress}
-          testID="card-button">
+        <Pressable onPress={props.onPress} testID="card-button">
           <View>
             <Image
               className="self-center h-32 w-32 my-2"
@@ -78,8 +72,7 @@ export default function ItemCard(props: ItemCardProps) {
 
         {/* Quick Action Buttons */}
         <View className="flex w-full flex-row">
-          <Pressable className="bg-red-500 flex-grow py-2"
-            testID="ar-button">
+          <Pressable className="bg-red-500 flex-grow py-2" testID="ar-button">
             <Text
               className="align-middle text-center justify-center items-center"
               style={{ color: colors.text }}
@@ -91,8 +84,10 @@ export default function ItemCard(props: ItemCardProps) {
               />
             </Text>
           </Pressable>
-          <Pressable className="bg-blue-500 flex-grow py-2"
-            testID="cart-button">
+          <Pressable
+            className="bg-blue-500 flex-grow py-2"
+            testID="cart-button"
+          >
             <Text
               className="align-middle text-center justify-center items-center"
               style={{ color: colors.text }}
diff --git a/AugmentedSpace/components/__tests__/CartCard.test.tsx b/AugmentedSpace/components/__tests__/CartCard.test.tsx
new file mode 100644
index 0000000..1c66ebb
--- /dev/null
+++ b/AugmentedSpace/components/__tests__/CartCard.test.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react-native"; // Import act
+import CartCard from "../CartCard"; // Assuming the component file is in the same directory
+import { useTheme } from "@react-navigation/native";
+import { getDownloadURL, ref, getStorage } from "firebase/storage";
+import { Text, View } from "@/components/Themed";
+import { router } from "expo-router";
+
+// Mocks
+jest.mock("@react-navigation/native", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("firebase/storage", () => ({
+  getStorage: jest.fn(),
+  ref: jest.fn(),
+  getDownloadURL: jest.fn(),
+}));
+
+jest.mock("expo-router", () => ({
+  router: {
+    push: jest.fn(),
+  },
+}));
+
+// Mock theme
+const theme = {
+  colors: {
+    card: "white",
+    text: "black",
+  },
+};
+
+beforeEach(() => {
+  (useTheme as jest.Mock).mockReturnValue(theme);
+  (getDownloadURL as jest.Mock).mockResolvedValue("http://dummyimage.com");
+});
+
+describe("CartCard", () => {
+  const baseProps = {
+    itemName: "Test Item",
+    brandName: "Test Brand",
+    itemCost: 99,
+    imagePath: "path/to/image",
+    onRemove: jest.fn(),
+    width: 200,
+  };
+
+  test("renders correctly", () => {
+    const { getByText } = render(<CartCard {...baseProps} />);
+    expect(getByText("Test Brand")).toBeTruthy();
+    expect(getByText("Test Item")).toBeTruthy();
+    expect(getByText("$99")).toBeTruthy();
+  });
+
+  test("calls onRemove when remove button is pressed", () => {
+    const { getByText } = render(<CartCard {...baseProps} />);
+    const removeButton = getByText("Remove");
+    fireEvent.press(removeButton);
+    expect(baseProps.onRemove).toHaveBeenCalled();
+  });
+
+  test("navigates to item info when pressed", () => {
+    const { getByText } = render(<CartCard {...baseProps} />);
+    fireEvent.press(getByText("Test Brand"));
+    expect(router.push).toHaveBeenCalledWith({
+      pathname: "/item-info/[items]",
+      params: {
+        items: "Test Item",
+        imageSource: "path/to/image",
+        itemCost: 99,
+        brandName: "Test Brand",
+      },
+    });
+  });
+
+  test("applies theme colors correctly", () => {
+    const { getByText } = render(<CartCard {...baseProps} />);
+    const textComponent = getByText("Test Brand");
+    const style = textComponent.props.style;
+    console.log("Style:", style);
+
+    expect(style).toEqual(
+      expect.objectContaining([
+        { color: "#000" },
+        [{ fontWeight: "bold" }, { color: "black" }],
+      ])
+    );
+  });
+});