diff --git a/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx b/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx
index 7713282..1df6162 100644
--- a/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx
+++ b/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx
@@ -1,57 +1,74 @@
-import React, { forwardRef } from "react";
-import { cn } from "@/lib/utils";
-import { useButtonClick } from "@/components/button/useButtonClick";
+"use client";
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { useRef, memo } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./BounceButton.css";
+
+interface ButtonBounceEffectProps {
   text: string;
+  onClick?: () => void;
   href?: string;
+  className?: string;
   bgClassName?: string;
   textClassName?: string;
-  iconClassName?: string;
-  newTab?: boolean;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
 }
 
-export const ButtonBounceEffect = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      text,
-      onClick,
-      href,
-      className,
-      bgClassName,
-      textClassName,
-      iconClassName,
-      disabled = false,
-      ariaLabel,
-      type = "button",      newTab,
-      ...props
-    },
-    ref
-  ) => {
-    const clickHandler = useButtonClick(href, onClick, newTab);
+const ButtonBounceEffect = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonBounceEffectProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
 
-    return (
-      <button
-        className={cn(
-          "group relative flex h-12 w-full items-center justify-center rounded-lg bg-primary-cta p-3 text-sm font-medium text-primary-cta-foreground transition-all duration-300 ease-out active:scale-95",          className
+  useCharAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      data-href={href}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "bounce-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "bounce-button-bg absolute! inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className={cls(
+          "bounce-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
         )}
-        onClick={clickHandler}
-        aria-label={ariaLabel}
-        disabled={disabled}
-        type={type}
-        ref={ref}
-        {...props}
       >
-        <span
-          className={cn(
-            "relative flex items-center gap-2 translate-y-0 group-hover:-translate-y-1 group-active:translate-y-0 transition-transform duration-300 ease-out",            textClassName
-          )}
-        >
-          {text}
-        </span>
-      </button>
-    );
-  }
-);
+        {text}
+      </span>
+    </button>
+  );
+};
 
 ButtonBounceEffect.displayName = "ButtonBounceEffect";
+
+export default memo(ButtonBounceEffect);