diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1edf3a6..044dac5 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -7,6 +7,9 @@ const Button = ({
   link,
   borderColor = "grey", //defaults to "grey" border class if no colors provided
   bgColor = "grey", //defaults to "grey" bg class if no colors provided
+  smVariant = "small",
+  lgVariant = "large",
+  mdVariant = "medium",
   size = "", //defaults to empty string if no size is provided
   textSize = "text-xl lg:text-3xl",
 }: {
@@ -15,6 +18,9 @@ const Button = ({
   link: string;
   borderColor?: "red" | "blue" | "grey";
   bgColor?: "red" | "blue" | "grey";
+  smVariant?: "small";
+  lgVariant?: "large";
+  mdVariant?: "medium";
   size?: string;
   textSize?: string;
 }) => {
@@ -30,15 +36,30 @@ const Button = ({
     blue: "border-tkd-blue-300 hover:border-opacity-90",
   };
 
+  const screenSmVariant = {
+    small: "sm:border-1  sm:px-1/6 sm:py-1/12 sm:text-xs  ",
+  };
+
+  const screenLgVariant = {
+    large: "lg:px-7 lg:py-7 lg:text-3xl",
+  };
+
+  const screenMdVariant = {
+    medium: "md:px-5 md:py-5 md:text-2xl md:border-3",
+  };
+
   //fall back to default colors if no provided colors
   const bgClass = bgVariant[bgColor];
   const borderClass = borderVariant[borderColor];
+  const smClass = screenSmVariant[smVariant];
+  const lgClass = screenLgVariant[lgVariant];
+  const mdClass = screenMdVariant[mdVariant];
 
   return (
     <Link
       href={link}
       target={target}
-      className={`box-border flex items-center justify-center border-4 border-solid px-7 py-7 font-inika font-medium ${textSize} ${bgClass} ${borderClass} ${size}`}
+      className={`box-border flex items-center justify-center border-4 border-solid font-inika text-xl font-medium lg:text-3xl ${bgClass} ${borderClass} ${smClass} ${lgClass} ${mdClass} ${textSize} ${size} `}
     >
       <div className="relative inline-block whitespace-nowrap">
         <span className="flex justify-center text-white opacity-100">
diff --git a/src/components/home/SparringGear.tsx b/src/components/home/SparringGear.tsx
index 85aa6a3..660316a 100644
--- a/src/components/home/SparringGear.tsx
+++ b/src/components/home/SparringGear.tsx
@@ -10,8 +10,10 @@ const SparringGear = () => {
         alt="sparringGearPhoto"
         className="w-screen brightness-50"
       />
-      <div className="absolute inset-0 flex flex-col items-center justify-center space-y-5 lg:space-y-20">
-        <div>Need Sparring Gear</div>
+      <div className="absolute inset-0 flex flex-col items-center justify-center space-y-1 lg:space-y-20">
+        <div className="text-xl md:text-3xl lg:text-6xl">
+          Need Sparring Gear
+        </div>
         <div className="">
           <Button
             txt="Need Sparring Gear"
@@ -19,11 +21,16 @@ const SparringGear = () => {
             bgColor="red"
             borderColor="red"
             target="_blank"
+            smVariant="small"
+            lgVariant="large"
           />
         </div>
         <br></br>
-        <div className="absolute -bottom-[-5%] right-5 flex w-1/2 flex-col items-end space-y-4 md:text-2xl lg:right-20 lg:text-4xl">
-          <div className="mx-10">Want a Jacket?</div>
+        <br></br>
+        <div className="absolute -bottom-[-5%] right-5 flex w-1/2 flex-col items-end sm:space-y-2 md:text-2xl lg:right-20 lg:space-y-4 lg:text-4xl">
+          <div className="sm:mx-5 sm:text-xl md:mx-0 md:text-3xl lg:-mx-8 lg:text-5xl">
+            Want a Jacket?
+          </div>
           <div>
             <Button
               txt="Purchase Jacket"
@@ -31,6 +38,8 @@ const SparringGear = () => {
               bgColor="red"
               borderColor="red"
               target="_blank"
+              smVariant="small"
+              lgVariant="large"
             />
           </div>
         </div>