diff --git a/assets/play button/Play Active.svg b/assets/play button/Play Active.svg
new file mode 100644
index 0000000..39f605d
--- /dev/null
+++ b/assets/play button/Play Active.svg	
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 170">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e6e6e6;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #637a10;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <rect class="cls-2" width="335" height="170" rx="10.7" ry="10.7"/>
+    <g>
+      <path class="cls-1" d="m72.38,98.02v26.54h-24.73V39.35h49.34c5.87,0,9.94,4.38,9.94,10.59v37.37c0,6.21-4.06,10.71-9.94,10.71h-24.62Zm0-21.3h9.82v-15.95h-9.82v15.95Z"/>
+      <path class="cls-1" d="m114.83,39.35h24.62v63.91h24.84v21.3h-49.46V39.35Z"/>
+      <path class="cls-1" d="m219.84,39.35l11.07,74.62v10.59h-24.73l-1.47-17.16h-10.84l-1.58,17.16h-24.62v-10.59l11.07-74.62h41.1Zm-16.94,46.75l-2.26-25.32h-2.71l-2.26,25.32h7.23Z"/>
+      <path class="cls-1" d="m227.51,49.94v-10.59h24.73l5.98,33.11h1.81l6.1-33.11h24.62v10.59l-19.31,51.37v23.25h-24.62v-23.25l-19.31-51.37Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/assets/play button/Play Idle.svg b/assets/play button/Play Idle.svg
new file mode 100644
index 0000000..f386539
--- /dev/null
+++ b/assets/play button/Play Idle.svg	
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 170">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e6e6e6;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #91b315;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <rect class="cls-2" width="335" height="170" rx="10.7" ry="10.7"/>
+    <g>
+      <path class="cls-1" d="m72.38,98.02v26.54h-24.73V39.35h49.34c5.87,0,9.94,4.38,9.94,10.59v37.37c0,6.21-4.06,10.71-9.94,10.71h-24.62Zm0-21.3h9.82v-15.95h-9.82v15.95Z"/>
+      <path class="cls-1" d="m114.83,39.35h24.62v63.91h24.84v21.3h-49.46V39.35Z"/>
+      <path class="cls-1" d="m219.84,39.35l11.07,74.62v10.59h-24.73l-1.47-17.16h-10.84l-1.58,17.16h-24.62v-10.59l11.07-74.62h41.1Zm-16.94,46.75l-2.26-25.32h-2.71l-2.26,25.32h7.23Z"/>
+      <path class="cls-1" d="m227.51,49.94v-10.59h24.73l5.98,33.11h1.81l6.1-33.11h24.62v10.59l-19.31,51.37v23.25h-24.62v-23.25l-19.31-51.37Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/assets/play button/Play pressed.svg b/assets/play button/Play pressed.svg
new file mode 100644
index 0000000..1dd3f4b
--- /dev/null
+++ b/assets/play button/Play pressed.svg	
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 170">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e6e6e6;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #91b315;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <rect class="cls-1" width="335" height="170" rx="10.7" ry="10.7"/>
+    <g>
+      <path class="cls-2" d="m72.38,98.02v26.54h-24.73V39.35h49.34c5.87,0,9.94,4.38,9.94,10.59v37.37c0,6.21-4.06,10.71-9.94,10.71h-24.62Zm0-21.3h9.82v-15.95h-9.82v15.95Z"/>
+      <path class="cls-2" d="m114.83,39.35h24.62v63.91h24.84v21.3h-49.46V39.35Z"/>
+      <path class="cls-2" d="m219.84,39.35l11.07,74.62v10.59h-24.73l-1.47-17.16h-10.84l-1.58,17.16h-24.62v-10.59l11.07-74.62h41.1Zm-16.94,46.75l-2.26-25.32h-2.71l-2.26,25.32h7.23Z"/>
+      <path class="cls-2" d="m227.51,49.94v-10.59h24.73l5.98,33.11h1.81l6.1-33.11h24.62v10.59l-19.31,51.37v23.25h-24.62v-23.25l-19.31-51.37Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file