diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx
index 7cfca39..a5f9090 100644
--- a/src/components/ControlBar.tsx
+++ b/src/components/ControlBar.tsx
@@ -1,17 +1,29 @@
 import { Button, Space } from 'antd';
 import styled from 'styled-components';
 import { type ModelSave } from '../services/model/modelService';
-import { useEffect } from 'react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons';
 
-export const ControlBarContainer = styled(Space)`
+const ControlBarContainer = styled(Space)`
   position: absolute;
-  bottom: 1rem;
-  right: 1rem;
+  bottom: 4rem;
+  right: 40%;
   z-index: 100;
   display: flex;
+  gap: 1.8rem;
+  background-color: #c5c5c5;
+  padding-top: 0.5rem;
+  padding-right: 1.8rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1.8rem;
+  border-radius: 25px;
+  @media (max-width: 760px) {
+    right: 65%;
+  }
 `;
 
-export const SaveBtn = styled(Button)`
+const SaveBtn = styled(Button)`
   position: absolute;
   bottom: 4rem;
   right: 11rem;
@@ -26,7 +38,7 @@ export const SaveBtn = styled(Button)`
   }
 `;
 
-export const RestoreBtn = styled(Button)`
+const RestoreBtn = styled(Button)`
   position: absolute;
   bottom: 4rem;
   right: 2rem;
@@ -41,6 +53,34 @@ export const RestoreBtn = styled(Button)`
   }
 `;
 
+const ControlBarBtn = styled(Button)`
+  shape: circle;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #909090;
+  font-size: 1rem;
+`;
+
+const ControlBarBtnWithAttr = styled(ControlBarBtn)`
+  &[data-icon='square']::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40%;
+    height: 40%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+  }
+`;
+
 interface ControlBarProps {
   modelSaveSubs: Array<(save: ModelSave) => void>;
   worker: Worker;
@@ -83,7 +123,15 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement {
     console.log('wrote a save to ' + filename, sav);
   }
 
-  // take a file and send its contents to the worker
+  const [isPlaying, setIsPlaying] = useState(true);
+  const handleIconClick = (): void => {
+    if (isPlaying) {
+      worker.postMessage({ func: 'pause' });
+    } else {
+      worker.postMessage({ func: 'start' });
+    }
+    setIsPlaying(!isPlaying);
+  };
 
   return (
     <>
@@ -103,34 +151,25 @@ export default function ControlBar(props: ControlBarProps): React.ReactElement {
         Restore Model
       </RestoreBtn>
       <ControlBarContainer size="small" direction="horizontal">
-        <Button
-          onClick={() => {
-            worker.postMessage({ func: 'start' });
-          }}
-        >
-          Play
-        </Button>
-        <Button
-          onClick={() => {
-            worker.postMessage({ func: 'pause' });
-          }}
-        >
-          Pause
-        </Button>
-        <Button
+        <ControlBarBtn onClick={handleIconClick}>
+          {isPlaying ? (
+            <PauseOutlined style={{ color: 'white' }} />
+          ) : (
+            <CaretRightOutlined
+              style={{
+                color: 'white',
+                fontSize: '1.4em',
+                marginLeft: '0.15em',
+              }}
+            />
+          )}
+        </ControlBarBtn>
+        <ControlBarBtnWithAttr
+          data-icon="square"
           onClick={() => {
             worker.postMessage({ func: 'stop' });
           }}
-        >
-          Stop
-        </Button>
-        <Button
-          onClick={() => {
-            worker.terminate();
-          }}
-        >
-          TERMINATE
-        </Button>
+        />
       </ControlBarContainer>
     </>
   );