diff --git a/lib/component/button/Button.tsx b/lib/component/button/Button.tsx
index 5b95a4c..4a273ba 100644
--- a/lib/component/button/Button.tsx
+++ b/lib/component/button/Button.tsx
@@ -1,10 +1,9 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function Button({
 	className,
 	type="button",
 	rounding = "lg",
@@ -13,11 +12,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref ) => {
+}: Readonly<ButtonProps>){
 	return (
 		<button
 			data-testid="mattrixwv-button"
-			ref={ref}
 			type={type}
 			disabled={disabled}
 			className={clsx(
@@ -59,8 +57,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-Button.displayName = "Button";
-
-export default Button;
+}
diff --git a/lib/component/button/DangerButton.tsx b/lib/component/button/DangerButton.tsx
index 39d13ea..635e5e4 100644
--- a/lib/component/button/DangerButton.tsx
+++ b/lib/component/button/DangerButton.tsx
@@ -1,20 +1,18 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
 
-const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function DangerButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-danger-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -44,8 +42,4 @@ const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-DangerButton.displayName = "DangerButton";
-
-export default DangerButton;
+}
diff --git a/lib/component/button/DarkButton.tsx b/lib/component/button/DarkButton.tsx
index 6561550..2fe70a7 100644
--- a/lib/component/button/DarkButton.tsx
+++ b/lib/component/button/DarkButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function DarkButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-dark-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-DarkButton.displayName = "DarkButton";
-
-export default DarkButton;
+}
diff --git a/lib/component/button/InfoButton.tsx b/lib/component/button/InfoButton.tsx
index e3a80e1..57a6571 100644
--- a/lib/component/button/InfoButton.tsx
+++ b/lib/component/button/InfoButton.tsx
@@ -1,21 +1,19 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function InfoButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-info-button"
 			variant={variant}
 			disabled={disabled}
-			ref={ref}
 			className={clsx(
 				"transition duration-300",
 				className,
@@ -43,8 +41,4 @@ const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-InfoButton.displayName = "InfoButton";
-
-export default InfoButton;
+}
diff --git a/lib/component/button/LightButton.tsx b/lib/component/button/LightButton.tsx
index e6d63f6..5a82af3 100644
--- a/lib/component/button/LightButton.tsx
+++ b/lib/component/button/LightButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function LightButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-light-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-LightButton.displayName = "LightButton";
-
-export default LightButton;
+}
diff --git a/lib/component/button/MoltenButton.tsx b/lib/component/button/MoltenButton.tsx
index b3e1fdd..2807b90 100644
--- a/lib/component/button/MoltenButton.tsx
+++ b/lib/component/button/MoltenButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function MoltenButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-molten-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-MoltenButton.displayName = "MoltenButton";
-
-export default MoltenButton;
+}
diff --git a/lib/component/button/PrimaryButton.tsx b/lib/component/button/PrimaryButton.tsx
index 27c59bf..850574f 100644
--- a/lib/component/button/PrimaryButton.tsx
+++ b/lib/component/button/PrimaryButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function PrimaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-primary-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-PrimaryButton.displayName = "PrimaryButton";
-
-export default PrimaryButton;
+}
diff --git a/lib/component/button/SecondaryButton.tsx b/lib/component/button/SecondaryButton.tsx
index 781a354..5fd91d3 100644
--- a/lib/component/button/SecondaryButton.tsx
+++ b/lib/component/button/SecondaryButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function SecondaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-secondary-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-SecondaryButton.displayName = "SecondaryButton";
-
-export default SecondaryButton;
+}
diff --git a/lib/component/button/SuccessButton.tsx b/lib/component/button/SuccessButton.tsx
index a2a5863..b1652db 100644
--- a/lib/component/button/SuccessButton.tsx
+++ b/lib/component/button/SuccessButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function SuccessButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-success-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-SuccessButton.displayName = "SuccessButton";
-
-export default SuccessButton;
+}
diff --git a/lib/component/button/TertiaryButton.tsx b/lib/component/button/TertiaryButton.tsx
index 6118e44..fa04720 100644
--- a/lib/component/button/TertiaryButton.tsx
+++ b/lib/component/button/TertiaryButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function TertiaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-tertiary-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-TertiaryButton.displayName = "TertiaryButton";
-
-export default TertiaryButton;
+}
diff --git a/lib/component/button/WarningButton.tsx b/lib/component/button/WarningButton.tsx
index a48d3b9..09372a6 100644
--- a/lib/component/button/WarningButton.tsx
+++ b/lib/component/button/WarningButton.tsx
@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function WarningButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-warning-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-WarningButton.displayName = "WarningButton";
-
-export default WarningButton;
+}