diff --git a/apps/live/src/app/lib/Components/FilterButton.tsx b/apps/live/src/app/lib/Components/FilterButton.tsx
new file mode 100644
index 00000000..8dcdfb9b
--- /dev/null
+++ b/apps/live/src/app/lib/Components/FilterButton.tsx
@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+import useIsMobile from "@repo/util/hooks/useIsMobile";
+
+interface ButtonProps {
+  backgroundColor: string;
+  textColor: string;
+  text: string;
+  borderColor?: string;
+  hoverBGColor?: string;
+  hoverText?: string;
+}
+
+const FilterButton: React.FC<ButtonProps> = ({ 
+  backgroundColor, 
+  textColor, 
+  text,
+  borderColor,
+  hoverBGColor,
+  hoverText,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isMobile = useIsMobile();
+
+  const baseStyle: React.CSSProperties = {
+    backgroundColor: backgroundColor,
+    color: textColor,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor,
+    cursor: 'pointer',
+    transition: 'background-color 0.2s ease, color 0.2s ease',
+  };
+
+  const hoverStyle: React.CSSProperties = {
+    ...(hoverBGColor ? { backgroundColor: hoverBGColor } : {}),
+    ...(hoverText ? { color: hoverText } : {}),
+    ...(hoverBGColor ? { borderColor: hoverBGColor } : {}),
+  };
+
+  const finalStyle = {
+    ...baseStyle,
+    ...(isHovered && !isMobile ? hoverStyle : {}),
+  };
+
+  return (
+    <button className = "w-[10vw] h-auto"
+      style={finalStyle}
+      onMouseEnter={!isMobile ? () => setIsHovered(true) : undefined}
+      onMouseLeave={!isMobile ? () => setIsHovered(false) : undefined}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default FilterButton;
\ No newline at end of file
diff --git a/apps/main/src/app/(landing)/Sections/About.tsx b/apps/main/src/app/(landing)/Sections/About.tsx
index f2fa0947..2c72d53a 100644
--- a/apps/main/src/app/(landing)/Sections/About.tsx
+++ b/apps/main/src/app/(landing)/Sections/About.tsx
@@ -3,26 +3,26 @@
 import React from "react";
 import TextBackground from "../../lib/Assets/AboutLandingAssets/text";
 import TeamPicture from "../../lib/Assets/AboutLandingAssets/teamPicture";
-// import PurpleBear from "../../lib/Assets/AboutLandingAssets/purpleBear";
-// import YellowBear from "../../lib/Assets/AboutLandingAssets/yellowBear";
+import PurpleBear from "../../lib/Assets/AboutLandingAssets/purpleBear";
+import YellowBear from "../../lib/Assets/AboutLandingAssets/yellowBear";
 import RibbonTitle from "@repo/ui/RibbonTitle";
-// import Dart from "../../lib/Assets/AboutLandingAssets/dart";
+import Dart from "../../lib/Assets/AboutLandingAssets/dart";
 import useDevice from "@util/hooks/useDevice";
 
 export default function About(): React.ReactNode {
   const { isMobile } = useDevice();
   return (
-    <div className="relative w-full my-10 overflow-hidden">
+    <div className="relative w-full max-w-[1400px] mx-auto overflow-visible p-[clamp(2rem,6vw,8rem)]">
       <div className={`${isMobile ? "transform scale-[0.85]" : ""}`}>
         <RibbonTitle text="ABOUT US" />
       </div>
 
-      {/* <div className="absolute top-[20%] left-[80%]">
+      {<div className="absolute w-[160vw] h-auto top-[20%] left-[80%]">
         <YellowBear />
-      </div> */}
+      </div>}
 
       <div className="mt-[15vh] mobile:mt-20 flex desktop:flex-row mobile:flex-col mobile:items-center items-start justify-center scale-125">
-        <div className="relative flex  mobile:w-3/5">
+        <div className="relative flex h-auto mobile:w-3/5">
           <p className="text-charcoalFogDark mobile:text-xs font-DMSans-Regular absolute h-full mobile:p-12 desktop:py-20 desktop:px-16 desktop-xl:py-20 desktop-xl:px-16 self-center">
             We&apos;re a non-profit organization in the Boston area that
             organizes an annual undergraduate hackathon. Our goal is to expand
@@ -39,12 +39,14 @@ export default function About(): React.ReactNode {
         </div>
       </div>
 
-      {/* <div className="absolute top-[68%] left-[46%] mb-10">
+      <div className="absolute w-[160vw] h-auto top-[68%] left-[46%] mb-10">
         <PurpleBear />
       </div>
-      <div className="absolute top-[68%] left-[79%] mb-10">
+
+      <div className="absolute w-[160vw] h-auto top-[78%] left-[79%] mb-10">
         <Dart />
-      </div> */}
+      </div> 
+
     </div>
   );
 }