diff --git a/src/App.tsx b/src/App.tsx
index 1126609d..1b8f2c4e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,6 @@ import ApplyPage from "pages/ApplyPage";
 import TeamPage from "pages/TeamPage";
 import ProjectsPage from "pages/ProjectsPage";
 import MerchPage from "pages/MerchPage";
-import MerchItemPage from "pages/MerchItemPage";
 
 import { useEffect } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
@@ -36,9 +35,6 @@ function App() {
             <Route path="/projects">
               <ProjectsPage />
             </Route>
-            <Route path="/merch/item/:itemNumber">
-              <MerchItemPage />
-            </Route>
             <Route path="/merch">
               <MerchPage />
             </Route>
diff --git a/src/components/BuyNowButton.css b/src/components/BuyNowButton.css
new file mode 100644
index 00000000..2f60ce48
--- /dev/null
+++ b/src/components/BuyNowButton.css
@@ -0,0 +1,12 @@
+.buy-now--button {
+  margin-top: 36px;
+  width: 75%;
+  background-color: #50abed;
+  color: white;
+  outline: none;
+  border: none;
+  padding: 12px;
+  border-radius: 10px;
+  text-align: center;
+  text-decoration-line: none;
+}
diff --git a/src/components/BuyNowButton.tsx b/src/components/BuyNowButton.tsx
new file mode 100644
index 00000000..51ee6a70
--- /dev/null
+++ b/src/components/BuyNowButton.tsx
@@ -0,0 +1,17 @@
+import "./BuyNowButton.css";
+
+const BuyNowButton = () => {
+  return (
+    <>
+      <a
+        className="buy-now--button"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSfpXS4hisen7IBvMGZnrfYWH600W_vpJwW0-b7blsA-D5Dq2w/viewform"
+        target="_blank"
+      >
+        Buy Now
+      </a>
+    </>
+  );
+};
+
+export default BuyNowButton;
diff --git a/src/components/MerchSection/MerchData.ts b/src/components/MerchSection/MerchData.ts
index f74171d7..dcd65fc9 100644
--- a/src/components/MerchSection/MerchData.ts
+++ b/src/components/MerchSection/MerchData.ts
@@ -14,8 +14,8 @@ export type MerchComponents = {
 export const merchList: MerchComponents[] = [
   {
     id: 0,
-    item: "Crewneck",
-    price: "$10.00 CAD",
+    item: "Original Basic Crewneck",
+    price: "$29.95 CAD",
     image: BlackHoodie,
     description: "placeholder descripton",
     sizes: ["S", "M", "L", "XL"],
@@ -23,8 +23,8 @@ export const merchList: MerchComponents[] = [
   },
   {
     id: 1,
-    item: "T-Shirt",
-    price: "$10.00 CAD",
+    item: "Crewneck with Sleeve Print",
+    price: "$49.99 CAD",
     image: BlackShortSleeve,
     description: "placeholder descripton",
     sizes: ["S", "M", "L", "XL"],
diff --git a/src/components/MerchSection/MerchDescription.tsx b/src/components/MerchSection/MerchDescription.tsx
index e276d768..70dd6500 100644
--- a/src/components/MerchSection/MerchDescription.tsx
+++ b/src/components/MerchSection/MerchDescription.tsx
@@ -8,8 +8,8 @@ interface MerchDescriptionProps {
 const MerchDescription = (props: MerchDescriptionProps) => {
   return (
     <MerchDescriptionDiv>
-      <h3>{props.item}</h3>
-      <h4>{props.price}</h4>
+      <h2>{props.item}</h2>
+      <h3>{props.price}</h3>
     </MerchDescriptionDiv>
   );
 };
diff --git a/src/components/MerchSection/MerchItem.styles.ts b/src/components/MerchSection/MerchItem.styles.ts
index 010179e2..1cad3243 100644
--- a/src/components/MerchSection/MerchItem.styles.ts
+++ b/src/components/MerchSection/MerchItem.styles.ts
@@ -7,10 +7,10 @@ interface MerchItemStyleProps {
 export const MerchItemDiv = styled.div<MerchItemStyleProps>`
   width: clamp(150px, 20%, 300px);
   margin: 0 1% 2.5rem;
-  display: block;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
 
   width: ${(props) => props.mobileView && "100%"};
   max-width: ${(props) => props.mobileView && "400px"};
diff --git a/src/components/MerchSection/MerchItem.tsx b/src/components/MerchSection/MerchItem.tsx
index 542f0b4a..a70eceb5 100644
--- a/src/components/MerchSection/MerchItem.tsx
+++ b/src/components/MerchSection/MerchItem.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React from "react";
 import * as S from "./MerchItem.styles";
 import { MerchComponents } from "./MerchData";
 import MerchDescription from "./MerchDescription";
-import { useHistory } from "react-router";
+import BuyNowButton from "components/BuyNowButton";
 
 export type MerchItemProps = {
   member: MerchComponents;
@@ -13,7 +13,6 @@ export type MerchItemProps = {
 const MerchItem = (props: MerchItemProps) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const preventDragHandler = (e: any) => e.preventDefault();
-  const history = useHistory();
 
   return (
     <>
@@ -21,7 +20,6 @@ const MerchItem = (props: MerchItemProps) => {
         data-aos={!props.mobileView && "zoom-in"}
         data-aos-duration={!props.mobileView && "1000"}
         mobileView={props.mobileView}
-        onClick={() => history.push(`/merch/item/${props.member.id}`)}
       >
         <S.MerchItemIconDiv>
           <img
@@ -32,6 +30,7 @@ const MerchItem = (props: MerchItemProps) => {
         </S.MerchItemIconDiv>
 
         <MerchDescription item={props.member.item} price={props.member.price} />
+        <BuyNowButton />
       </S.MerchItemDiv>
     </>
   );
diff --git a/src/pages/MerchItemPage.styles.ts b/src/pages/MerchItemPage.styles.ts
deleted file mode 100644
index 7baa65d6..00000000
--- a/src/pages/MerchItemPage.styles.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import styled from "styled-components/macro";
-
-interface MerchItemStyleProps {
-  mobileView: boolean;
-}
-
-export const MerchItemPageContainer = styled.div<MerchItemStyleProps>`
-  margin: ${(props) => props.mobileView ? "1rem;" : "5rem 8rem;"}
-  padding: 1rem;
-`;
-
-export const MerchItemPageContent = styled.div<MerchItemStyleProps>`
-  display: flex;
-  gap: 1rem;
-  justify-content: space-evenly;
-  flex-direction: ${(props) => props.mobileView ? "column" : "row"}
-`;
-
-export const MerchItemImage = styled.div<MerchItemStyleProps>`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  width: ${(props) => props.mobileView ? "100%" : ""}
-`;
-
-export const MerchItemItemDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  row-gap: 5px;
-`
-export const MerchItemItemName = styled.div`
-  font-weight: 700;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  width: 100%;
-`
-
-export const merchItemPrice = styled.div`
-  color: #636363;
-  width: 100%;
-`
-
-export const merchItemSizes = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`
-
-export const merchItemColors = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`
diff --git a/src/pages/MerchItemPage.tsx b/src/pages/MerchItemPage.tsx
deleted file mode 100644
index 8c9b3296..00000000
--- a/src/pages/MerchItemPage.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useHistory, useParams } from "react-router-dom";
-import { merchList } from "components/MerchSection/MerchData";
-import useViewport from "components/UseViewport";
-import * as S from "./MerchItemPage.styles";
-
-const merchItemPage = () => {
-  const params = useParams();
-  const history = useHistory();
-  const { width } = useViewport();
-  const mobileView = !(width > 768 ? true : false);
-
-  const merchItem = merchList.filter(
-    // @ts-expect-error b/c we're using old react router doesn't support element={}
-    (item) => item.id === parseInt(params.itemNumber)
-  )[0];
-  console.log(merchItem);
-
-  if (!merchItem) {
-    history.push("/merch");
-    return <></>;
-  } else {
-    return (
-      <>
-        <S.MerchItemPageContainer mobileView={mobileView}>
-          <S.MerchItemPageContent mobileView={mobileView}>
-            <S.MerchItemImage mobileView={mobileView}>
-              <img width={mobileView ? "200" : "400"} src={merchItem.image} />
-            </S.MerchItemImage>
-            <S.MerchItemItemDetails>
-              <S.MerchItemItemName>{merchItem.item}</S.MerchItemItemName>
-              <S.merchItemPrice>{merchItem.price}</S.merchItemPrice>
-              <S.merchItemSizes style={{ marginTop: "16px" }}>
-                Available Sizes
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: "16px",
-                  }}
-                >
-                  {merchItem.sizes.map((size) => (
-                    <div
-                      style={{
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        width: "100px",
-                        height: "50px",
-                        background: "#F5F5F5",
-                        borderRadius: "0.5rem",
-                      }}
-                    >
-                      {size}
-                    </div>
-                  ))}
-                </div>
-              </S.merchItemSizes>
-              <S.merchItemColors style={{ marginTop: "1rem" }}>
-                Available Colors
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: "10px",
-                  }}
-                >
-                  {merchItem.colors.map((color) => (
-                    <div
-                      style={{
-                        width: "30px",
-                        height: "30px",
-                        background: color,
-                        border: "solid",
-                        borderColor: "rgb(156 163 175)",
-                        borderRadius: "999px",
-                      }}
-                    ></div>
-                  ))}
-                </div>
-              </S.merchItemColors>
-              <a
-                style={{
-                  marginTop: "36px",
-                  width: "75%",
-                  backgroundColor: "#50ABED",
-                  color: "white",
-                  outline: "none",
-                  border: "none",
-                  padding: "12px",
-                  borderRadius: "10px",
-                  textAlign: "center",
-                  textDecorationLine: "none",
-                }}
-                href="https://docs.google.com/forms/d/e/1FAIpQLSfpXS4hisen7IBvMGZnrfYWH600W_vpJwW0-b7blsA-D5Dq2w/viewform"
-                target="_blank"
-              >
-                Buy Now
-              </a>
-            </S.MerchItemItemDetails>
-          </S.MerchItemPageContent>
-        </S.MerchItemPageContainer>
-      </>
-    );
-  }
-};
-
-export default merchItemPage;