diff --git a/src/css/style.css b/src/css/style.css
index 2a5c446..a49a773 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -31,6 +31,7 @@ body {
   width: 300px;
   height: 300px;
   background-color: rgb(53, 45, 106);
+  transform: translateX(30px);
 }
 
 svg {
@@ -125,3 +126,62 @@ path {
   transform: translate(-45px, -45px);
   background-color: yellow;
 }
+
+button {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 4px;
+  border: none;
+  background-color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+button:hover {
+  background-color: rgb(242, 242, 242);
+}
+
+img {
+  height: 25px;
+  width: 25px;
+}
+
+#menu {
+  display: flex;
+  flex-direction: column;
+  transform: translate(40px, -150px);
+}
+
+button span {
+  position: absolute;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.2);
+  width: 40px;
+  height: 40px;
+  animation: ripple 1s;
+  opacity: 0;
+}
+
+@keyframes ripple {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(10);
+  }
+}
+
+.active {
+  background-color: rgb(236, 236, 236);
+}
+
+.active:hover {
+  background-color: rgb(226, 226, 226);
+}
diff --git a/src/icons/square-arrow-left-svgrepo-com.svg b/src/icons/square-arrow-left-svgrepo-com.svg
new file mode 100644
index 0000000..50e5a78
--- /dev/null
+++ b/src/icons/square-arrow-left-svgrepo-com.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ // 16pxls (c) by Paul mackenzie <paul@whatspauldoing.com>
+ //
+ // 16pxls is licensed under a
+ // Creative Commons Attribution-ShareAlike 4.0 International License.
+ //
+ // You should have received a copy of the license along with this
+ // work. If not, see <http://creativecommons.org/licenses/by-sa/4.0/>.
+-->
+
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.95 5.843L7.828 7.964l2.122 2.122L8.536 11.5 5 7.964 8.536 4.43 9.95 5.843zM0 16V0h16v16H0zm2-2h12V2H2v12z" fill-rule="evenodd"/>
+</svg>
\ No newline at end of file
diff --git a/src/icons/square-arrow-right-svgrepo-com.svg b/src/icons/square-arrow-right-svgrepo-com.svg
new file mode 100644
index 0000000..fed1cb9
--- /dev/null
+++ b/src/icons/square-arrow-right-svgrepo-com.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ // 16pxls (c) by Paul mackenzie <paul@whatspauldoing.com>
+ //
+ // 16pxls is licensed under a
+ // Creative Commons Attribution-ShareAlike 4.0 International License.
+ //
+ // You should have received a copy of the license along with this
+ // work. If not, see <http://creativecommons.org/licenses/by-sa/4.0/>.
+-->
+
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.05 10.157l2.122-2.121L6.05 5.914 7.464 4.5 11 8.036 7.464 11.57 6.05 10.157zM16 0v16H0V0h16zm-2 2H2v12h12V2z" fill-rule="evenodd"/>
+</svg>
\ No newline at end of file
diff --git a/src/icons/square-pause-svgrepo-com.svg b/src/icons/square-pause-svgrepo-com.svg
new file mode 100644
index 0000000..3e8c8c1
--- /dev/null
+++ b/src/icons/square-pause-svgrepo-com.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+ // 16pxls (c) by Paul mackenzie <paul@whatspauldoing.com>
+ //
+ // 16pxls is licensed under a
+ // Creative Commons Attribution-ShareAlike 4.0 International License.
+ //
+ // You should have received a copy of the license along with this
+ // work. If not, see <http://creativecommons.org/licenses/by-sa/4.0/>.
+-->
+
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 16h16V0H0v16zm2-2V2h12v12H2zm7-3h2V5H9v6zm-4 0h2V5H5v6z" fill-rule="evenodd"/>
+</svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 7c5bf08..4b83fce 100644
--- a/src/index.html
+++ b/src/index.html
@@ -35,6 +35,11 @@
         </div>
       </div>
     </div>
+    <div id="menu">
+      <button id="pause">
+        <img src="./icons/square-pause-svgrepo-com.svg" alt="pause" />
+      </button>
+    </div>
     <script type="module" src="ts/index.ts"></script>
   </body>
 </html>
diff --git a/src/modules/addRippleEffect.ts b/src/modules/addRippleEffect.ts
new file mode 100644
index 0000000..b6bd047
--- /dev/null
+++ b/src/modules/addRippleEffect.ts
@@ -0,0 +1,8 @@
+export const addRippleEffect = (button: HTMLButtonElement): void => {
+  const ripple = document.createElement('span');
+  ripple.classList.add('ripple');
+  button.appendChild(ripple);
+  setTimeout(() => {
+    ripple.remove();
+  }, 600);
+};
diff --git a/src/modules/handleMenuButtons.ts b/src/modules/handleMenuButtons.ts
new file mode 100644
index 0000000..aefd66e
--- /dev/null
+++ b/src/modules/handleMenuButtons.ts
@@ -0,0 +1,16 @@
+import { addRippleEffect } from './addRippleEffect';
+import { setPauseRewind } from './rewindColors';
+
+export const handleMenuButtons = (): void => {
+  document.querySelectorAll('button').forEach((button) => {
+    button.addEventListener('click', (evt) => {
+      const button = evt.currentTarget as HTMLButtonElement;
+      addRippleEffect(button);
+
+      if (button.id === 'pause') {
+        button.classList.toggle('active');
+        setPauseRewind();
+      }
+    });
+  });
+};
diff --git a/src/modules/index.ts b/src/modules/index.ts
index 2c13534..50f78f6 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -3,3 +3,4 @@ export * from './colorSVG';
 export * from './colorReflection';
 export * from './handleClickableElement';
 export * from './recordColorChange';
+export * from './handleMenuButtons';
diff --git a/src/modules/rewindColors.ts b/src/modules/rewindColors.ts
index bb29bc6..2429736 100644
--- a/src/modules/rewindColors.ts
+++ b/src/modules/rewindColors.ts
@@ -7,11 +7,12 @@ const TIMEOUT = 5000;
 let idleTime: NodeJS.Timeout;
 let interval: NodeJS.Timeout;
 let stopRewind = true;
+let pauseRewind = false;
 let initialDelay: number;
 
 const rewind = (): void => {
   const removeStep = (): void => {
-    if (stopRewind) return;
+    if (stopRewind || pauseRewind) return;
     if (steps.length > 0) {
       console.log(steps.length);
       const removedStep = steps.pop();
@@ -29,8 +30,12 @@ export const setStopRewind = (arg: boolean): void => {
   stopRewind = arg;
 };
 
+export const setPauseRewind = (): void => {
+  pauseRewind = !pauseRewind;
+};
+
 export const resetTimer = (): void => {
-  if (stopRewind) return;
+  if (stopRewind || pauseRewind) return;
   clearTimeout(idleTime);
   clearTimeout(interval);
   initialDelay = DELAY;
diff --git a/src/ts/index.ts b/src/ts/index.ts
index 0b8d928..c0f48ea 100644
--- a/src/ts/index.ts
+++ b/src/ts/index.ts
@@ -1,5 +1,6 @@
-import { handleClickableElement } from '../modules';
+import { handleClickableElement, handleMenuButtons } from '../modules';
 
 ((): void => {
   handleClickableElement();
+  handleMenuButtons();
 })();