diff --git a/frontend/src/components/basics/CircularIconButton.tsx b/frontend/src/components/basics/CircularIconButton.tsx
new file mode 100644
index 0000000..493302d
--- /dev/null
+++ b/frontend/src/components/basics/CircularIconButton.tsx
@@ -0,0 +1,37 @@
+import {defaultIconSize} from "./SvgIcon";
+import type {LucideIcon} from "lucide-react";
+import {ButtonType} from "./BasicButtonDefinitions.ts";
+
+type CircularIconButtonProps = {
+    icon: LucideIcon;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+};
+
+/**
+ * Circular button component
+ */
+export default function CircularIconButton({
+                                               onClick,
+                                               icon: Icon,
+                                               className = "",
+                                               disabled = false,
+                                               ...props
+                                           }: CircularIconButtonProps) {
+    return (
+        <button
+            className={`flex-shrink-0 w-7 h-7 rounded-full text-white flex items-center justify-center shadow-sm 
+                        ${ButtonType.PrimaryButton.backgroundColor} ${className}`}
+            onClick={onClick}
+            disabled={disabled}
+            {...props}
+        >
+            {Icon && (
+                <Icon
+                    size={defaultIconSize}
+                />
+            )}
+        </button>
+    );
+}
diff --git a/frontend/src/components/basics/NumberStepControl.tsx b/frontend/src/components/basics/NumberStepControl.tsx
index 0dc45ea..f73ccdc 100644
--- a/frontend/src/components/basics/NumberStepControl.tsx
+++ b/frontend/src/components/basics/NumberStepControl.tsx
@@ -1,5 +1,5 @@
 import {Minus, Plus} from "lucide-react";
-import {defaultIconSize} from "./SvgIcon.tsx";
+import CircularIconButton from "./CircularIconButton.tsx";
 
 type NumberStepControlProps = {
     /** Current numeric value */
@@ -45,13 +45,10 @@ export function NumberStepControl({
 
     return (
         <div className={`flex items-center gap-2 ${className}`}>
-            <button
-                type="button"
+            <CircularIconButton
                 onClick={handleDecrease}
-                className="circular-container primary-button-bg"
-            >
-                <Minus size={defaultIconSize}/>
-            </button>
+                icon={Minus}
+            />
 
             <input
                 type="text"
@@ -62,13 +59,11 @@ export function NumberStepControl({
                 className="w-16 text-center"
             />
 
-            <button
-                type="button"
+            <CircularIconButton
                 onClick={handleIncrease}
-                className="circular-container primary-button-bg"
-            >
-                <Plus size={defaultIconSize}/>
-            </button>
+                icon={Plus}
+            />
+
         </div>
     );
 }