diff --git a/client/src/common/components/buttons/CollapseIconBtn.jsx b/client/src/common/components/buttons/CollapseIconBtn.jsx
new file mode 100644
index 000000000..d42bb7334
--- /dev/null
+++ b/client/src/common/components/buttons/CollapseIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiArrowDownCircle } from 'react-icons/fi';
+
+export default function CollapseIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiArrowDownCircle />}
+      colorScheme='orange'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+    />
+  );
+}
diff --git a/client/src/common/components/buttons/NextIconBtn.jsx b/client/src/common/components/buttons/NextIconBtn.jsx
new file mode 100644
index 000000000..23912605e
--- /dev/null
+++ b/client/src/common/components/buttons/NextIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSkipForward } from 'react-icons/fi';
+
+export default function NextIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiSkipForward />}
+      colorScheme= 'blackAlpha'
+      variant= 'outline'
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}
diff --git a/client/src/common/components/buttons/PauseIconBtn.jsx b/client/src/common/components/buttons/PauseIconBtn.jsx
new file mode 100644
index 000000000..637c5c8b0
--- /dev/null
+++ b/client/src/common/components/buttons/PauseIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiPause } from 'react-icons/fi';
+
+export default function PauseIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiPause />}
+      colorScheme='orange'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}
diff --git a/client/src/common/components/buttons/PrevIconBtn.jsx b/client/src/common/components/buttons/PrevIconBtn.jsx
new file mode 100644
index 000000000..89453adec
--- /dev/null
+++ b/client/src/common/components/buttons/PrevIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSkipBack } from 'react-icons/fi';
+
+export default function PrevIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiSkipBack />}
+      colorScheme= 'blackAlpha'
+      variant= 'outline'
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}
diff --git a/client/src/common/components/buttons/RollIconBtn.jsx b/client/src/common/components/buttons/RollIconBtn.jsx
new file mode 100644
index 000000000..c2d169d02
--- /dev/null
+++ b/client/src/common/components/buttons/RollIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiClock } from 'react-icons/fi';
+
+export default function RollIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiClock />}
+      colorScheme='blue'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}
diff --git a/client/src/common/components/buttons/StartIconBtn.jsx b/client/src/common/components/buttons/StartIconBtn.jsx
new file mode 100644
index 000000000..7ec449908
--- /dev/null
+++ b/client/src/common/components/buttons/StartIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiPlay } from 'react-icons/fi';
+
+export default function StartIconBtn(props) {
+  return (
+    <IconButton
+      icon={<FiPlay />}
+      colorScheme='green'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+      width={90}
+    />
+  );
+}
diff --git a/client/src/common/components/buttons/VisibleIconBtn.jsx b/client/src/common/components/buttons/VisibleIconBtn.jsx
new file mode 100644
index 000000000..598ce4653
--- /dev/null
+++ b/client/src/common/components/buttons/VisibleIconBtn.jsx
@@ -0,0 +1,14 @@
+import { IconButton } from '@chakra-ui/button';
+import { FiSun } from 'react-icons/fi';
+
+export default function VisibleIconBtn(props) {
+  return (
+    <IconButton
+      size={props.size || 'xs'}
+      icon={<FiSun />}
+      colorScheme='blue'
+      variant={props.active ? 'solid' : 'outline'}
+      onClick={props.clickHandler}
+    />
+  );
+}