diff --git a/app/components/ButtonIcon.tsx b/app/components/ButtonIcon.tsx
index bba32e7ce8..fa74559bb0 100644
--- a/app/components/ButtonIcon.tsx
+++ b/app/components/ButtonIcon.tsx
@@ -1,28 +1,27 @@
+// ButtonIcon.tsx
+import React from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconProps,
-} from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-export interface ButtonIconPropsI
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonIconProps {
   icon: IconDefinition;
-  iconClass?: string;
-  iconProps?: FontAwesomeIconProps;
+  fill?: boolean;
+  onClick: () => void;
 }
 
-export const ButtonIcon = ({
+const ButtonIcon: React.FC<ButtonIconProps> = ({
   icon,
-  iconClass,
-  iconProps,
-  className: propsClassName,
-  ...rest
-}: ButtonIconPropsI) => {
+  onClick,
+  fill = false,
+}) => {
   return (
-    <button className={propsClassName} {...rest}>
-      {icon && (
-        <FontAwesomeIcon {...iconProps} className={iconClass} icon={icon} />
-      )}
+    <button
+      className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150 hover:bg-ui-panel/[0.4] ${fill ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]" : "bg-transparent"}`}
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={icon} />
     </button>
   );
 };
+
+export { ButtonIcon };
diff --git a/app/components/ButtonIconSelect.tsx b/app/components/ButtonIconSelect.tsx
new file mode 100644
index 0000000000..4e96ce01ff
--- /dev/null
+++ b/app/components/ButtonIconSelect.tsx
@@ -0,0 +1,44 @@
+// ButtonIconSelect.tsx
+import { useState } from "react";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface Option {
+  value: string;
+  icon: IconDefinition;
+}
+
+interface ButtonIconSelectProps {
+  options: Option[];
+  onOptionChange?: (value: string) => void;
+}
+
+export function ButtonIconSelect({
+  options,
+  onOptionChange,
+}: ButtonIconSelectProps) {
+  const [selectedOption, setSelectedOption] = useState<string>(
+    options[0].value,
+  );
+
+  const handleOptionChange = (value: string) => {
+    setSelectedOption(value);
+    if (onOptionChange) {
+      onOptionChange(value);
+    }
+  };
+
+  return (
+    <div className="flex space-x-1">
+      {options.map(({ value, icon }) => (
+        <button
+          key={value}
+          className={`flex h-8 w-8 items-center justify-center transition-all duration-150 hover:bg-ui-panel/[0.4] ${selectedOption === value ? "border-2 border-brand-primary bg-ui-panel/[0.2]" : "border-2 border-transparent"} rounded-lg`}
+          onClick={() => handleOptionChange(value)}
+        >
+          <FontAwesomeIcon icon={icon} />
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 5ddffb4ded..10671425e4 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -1,9 +1,6 @@
 import { Button } from "./Button";
 import { ButtonIcon } from "./ButtonIcon";
 import { ButtonLink } from "./ButtonLink";
+import { ButtonIconSelect } from "./ButtonIconSelect";
 
-export {
-  Button,
-  ButtonIcon,
-  ButtonLink,
-};
+export { Button, ButtonIcon, ButtonLink, ButtonIconSelect };
diff --git a/app/contexts/ButtonSelectContext.tsx b/app/contexts/ButtonSelectContext.tsx
new file mode 100644
index 0000000000..649c5c6d25
--- /dev/null
+++ b/app/contexts/ButtonSelectContext.tsx
@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface ButtonSelectContextType {
+  selectedButton: number | null;
+  setSelectedButton: (index: number | null) => void;
+}
+
+const ButtonSelectContext = createContext<ButtonSelectContextType | undefined>(
+  undefined,
+);
+
+export const ButtonSelectProvider: React.FC = ({ children }) => {
+  const [selectedButton, setSelectedButton] = useState<number | null>(null);
+
+  return (
+    <ButtonSelectContext.Provider value={{ selectedButton, setSelectedButton }}>
+      {children}
+    </ButtonSelectContext.Provider>
+  );
+};
+
+// Custom hook to use the context
+export const useButtonSelect = () => {
+  const context = useContext(ButtonSelectContext);
+  if (context === undefined) {
+    throw new Error(
+      "useButtonSelect must be used within a ButtonSelectProvider",
+    );
+  }
+  return context;
+};
diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx
index e2ab1e68b2..321d038e04 100644
--- a/app/modules/Tabs/Tabs.tsx
+++ b/app/modules/Tabs/Tabs.tsx
@@ -15,7 +15,7 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => {
       "px-4 py-4 text-md font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-b-[3px] border-white/[.1]",
       selected
         ? "text-white border-brand-primary"
-        : "text-gray-400 hover:text-white hover:border-white/[.3]",
+        : "text-white/[0.5] hover:text-white hover:border-white/[.3]",
     );
 
   return (
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index c93a7f29ec..eef4ef84a6 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -130,7 +130,7 @@ export const PageEnigma = () => {
           </div>
 
           {/* Side panel */}
-          <div>
+          <div className="border-l border-l-ui-panel-border">
             <Tabs
               tabs={[
                 {
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index 0d19d012b6..91e3f75829 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -9,8 +9,7 @@ import {
   fa3dTorus,
   fa3dSphere,
 } from "@awesome.me/kit-fde2be5eb0/icons/kit/custom";
-
-import { ButtonIcon } from "~/components";
+import { ButtonIcon, ButtonIconSelect } from "~/components";
 
 export const Controls3D = () => {
   const handlePlus = () => {
@@ -34,25 +33,49 @@ export const Controls3D = () => {
   const handleZoomArrows = () => {
     console.log("Controls 3D: Zoom Arrows clicked");
   };
+
+  const handleModeChange = (value: string) => {
+    switch (value) {
+      case "move":
+        handleMoveArrows();
+        break;
+      case "rotate":
+        handleRotateArrows();
+        break;
+      case "scale":
+        handleZoomArrows();
+        break;
+      default:
+        console.log("Unknown option");
+    }
+  };
+
+  const modes = [
+    { value: "move", icon: faArrowsUpDownLeftRight },
+    { value: "rotate", icon: faArrowsRotate },
+    { value: "scale", icon: faUpRightAndDownLeftFromCenter },
+  ];
+
   return (
     <div>
       <div className="flex justify-center">
-        <div className="bg-ui-controls rounded-b-md border-x border-b border-ui-panel-border px-4 py-2 text-white">
-          <div className="flex gap-4">
-            <ButtonIcon icon={faPlus} onClick={handlePlus} />
-            <span className="w-0 border-l border-white/[0.1]" />
-            <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
-            <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
-            <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
-            <span className="w-0 border-l border-white/[0.1]" />
-            <ButtonIcon
-              icon={faArrowsUpDownLeftRight}
-              onClick={handleMoveArrows}
-            />
-            <ButtonIcon icon={faArrowsRotate} onClick={handleRotateArrows} />
-            <ButtonIcon
-              icon={faUpRightAndDownLeftFromCenter}
-              onClick={handleZoomArrows}
+        <div className="rounded-b-lg border-x border-b border-ui-panel-border bg-ui-controls p-2 text-white">
+          <div className="flex items-center justify-center gap-2">
+            <ButtonIcon icon={faPlus} onClick={handlePlus} fill={true} />
+
+            <span className="h-4 w-0 border-l border-white/[0.15]" />
+
+            <div className="flex gap-1">
+              <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
+              <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
+              <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
+            </div>
+
+            <span className="h-4 w-0 border-l border-white/[0.15]" />
+
+            <ButtonIconSelect
+              options={modes}
+              onOptionChange={handleModeChange}
             />
           </div>
         </div>
diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
index 84664de1c2..ade68ff1be 100644
--- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
+++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
@@ -26,11 +26,11 @@ export const ControlsVideo = () => {
   return (
     <div>
       <div className="flex justify-center">
-        <div className="bg-ui-controls -mt-10 rounded-t-md border-x border-t border-ui-panel-border px-6 py-2 text-white">
-          <div className="flex content-center gap-6	">
+        <div className="rounded-t-lg border-x border-t border-ui-panel-border bg-ui-controls p-2 text-white">
+          <div className="flex content-center gap-2">
             <ButtonIcon icon={faBackwardFast} onClick={handleBackwardFast} />
             <ButtonIcon icon={faBackwardStep} onClick={handleBackwardStep} />
-            <ButtonIcon className="h-6" icon={faPlay} onClick={handlePlay} />
+            <ButtonIcon icon={faPlay} onClick={handlePlay} />
             <ButtonIcon icon={faForwardStep} onClick={handleForwardStep} />
             <ButtonIcon icon={faForwardFast} onClick={handleForwardFast} />
           </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3dffe6da9b..fe39bb2e87 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -83,6 +83,7 @@ export default {
       "ui-panel": "#242433",
       "ui-panel-border": "#393948",
       "ui-controls": "#39394D",
+      "ui-controls-button": "#676781",
 
       gray: colors.gray,
       white: colors.white,