diff --git a/Resources/Favicon/favicon.svg b/Resources/Favicon/favicon.svg
new file mode 100644
index 0000000..5b1774e
--- /dev/null
+++ b/Resources/Favicon/favicon.svg
@@ -0,0 +1,6 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <g fill="#E91E63">
+        <circle cx="19" cy="33" r="9"/>
+        <polygon points="24,6 24,33 28,33 28,14 39,17 39,10"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Resources/Favicon/music-solid-favicon.svg b/Resources/Favicon/music-solid-favicon.svg
new file mode 100644
index 0000000..fad77f0
--- /dev/null
+++ b/Resources/Favicon/music-solid-favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v72V368c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6V147L192 223.8V432c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6V200 128c0-14.1 9.3-26.6 22.8-30.7l320-96c9.7-2.9 20.2-1.1 28.3 5z"/></svg>
\ No newline at end of file
diff --git a/Resources/MusicPlayerColorDarkMode/MusicPlayerColorDarkMode-codes.txt b/Resources/MusicPlayerColorDarkMode/MusicPlayerColorDarkMode-codes.txt
new file mode 100644
index 0000000..2265ecb
--- /dev/null
+++ b/Resources/MusicPlayerColorDarkMode/MusicPlayerColorDarkMode-codes.txt
@@ -0,0 +1,11 @@
+Your selected colors:
+
+    Text: #ffffff (RGB: 255, 255, 255)
+    Background: #000000 (RGB: 0, 0, 0)
+    Primary: #8fb3ff (RGB: 143, 179, 255)
+    Secondary: #001952 (RGB: 0, 25, 82)
+    Accent: #f199bf (RGB: 241, 153, 191)
+
+Realtime Colors link for selected colors: https://realtimecolors.com/?colors=ffffff-000000-8fb3ff-001952-f199bf
+
+Thanks for using RealtimeColors.com!
\ No newline at end of file
diff --git a/Resources/MusicPlayerColorDarkMode/MusicPlayerColorDarkMode-palette.png b/Resources/MusicPlayerColorDarkMode/MusicPlayerColorDarkMode-palette.png
new file mode 100644
index 0000000..c1d9a29
Binary files /dev/null and b/Resources/MusicPlayerColorDarkMode/MusicPlayerColorDarkMode-palette.png differ
diff --git a/Resources/MusicPlayerColorLightMode/MusicPlayerColorLightMode-codes.txt b/Resources/MusicPlayerColorLightMode/MusicPlayerColorLightMode-codes.txt
new file mode 100644
index 0000000..8474910
--- /dev/null
+++ b/Resources/MusicPlayerColorLightMode/MusicPlayerColorLightMode-codes.txt
@@ -0,0 +1,11 @@
+Your selected colors:
+
+    Text: #000000 (RGB: 0, 0, 0)
+    Background: #ffffff (RGB: 255, 255, 255)
+    Primary: #8fb3ff (RGB: 143, 179, 255)
+    Secondary: #ebf1ff (RGB: 235, 241, 255)
+    Accent: #d41d6c (RGB: 212, 29, 108)
+
+Realtime Colors link for selected colors: https://realtimecolors.com/?colors=000000-ffffff-8fb3ff-ebf1ff-d41d6c
+
+Thanks for using RealtimeColors.com!
\ No newline at end of file
diff --git a/Resources/MusicPlayerColorLightMode/MusicPlayerColorLightMode-palette.png b/Resources/MusicPlayerColorLightMode/MusicPlayerColorLightMode-palette.png
new file mode 100644
index 0000000..607c417
Binary files /dev/null and b/Resources/MusicPlayerColorLightMode/MusicPlayerColorLightMode-palette.png differ
diff --git a/fonts.css b/fonts.css
new file mode 100644
index 0000000..672b9e9
--- /dev/null
+++ b/fonts.css
@@ -0,0 +1,304 @@
+/* roboto-100 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-100italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-300 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-300italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-regular - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-500 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-500italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-700 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-700italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    src: url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-900 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    src: url('../fonts/roboto-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-900italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    src: url('../fonts/roboto-v30-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+  /* roboto-mono-100 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 100;
+    src: url('../fonts/roboto-mono-v22-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-100italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 100;
+    src: url('../fonts/roboto-mono-v22-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-200 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 200;
+    src: url('../fonts/roboto-mono-v22-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-200italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 200;
+    src: url('../fonts/roboto-mono-v22-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-300 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/roboto-mono-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-300italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 300;
+    src: url('../fonts/roboto-mono-v22-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-regular - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/roboto-mono-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/roboto-mono-v22-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-500 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../fonts/roboto-mono-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-500italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 500;
+    src: url('../fonts/roboto-mono-v22-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-600 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/roboto-mono-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-600italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 600;
+    src: url('../fonts/roboto-mono-v22-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-700 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/roboto-mono-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* roboto-mono-700italic - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Roboto Mono';
+    font-style: italic;
+    font-weight: 700;
+    src: url('../fonts/roboto-mono-v22-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+/* handjet-100 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 100;
+    src: url('../fonts/handjet-v17-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-200 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 200;
+    src: url('../fonts/handjet-v17-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-300 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/handjet-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-regular - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/handjet-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-500 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../fonts/handjet-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-600 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/handjet-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-700 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../fonts/handjet-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-800 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 800;
+    src: url('../fonts/handjet-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* handjet-900 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Handjet';
+    font-style: normal;
+    font-weight: 900;
+    src: url('../fonts/handjet-v17-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
\ No newline at end of file
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-100.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-100.woff2
new file mode 100644
index 0000000..91618be
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-100.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-200.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-200.woff2
new file mode 100644
index 0000000..3536324
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-200.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-300.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-300.woff2
new file mode 100644
index 0000000..dc90c1a
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-300.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-500.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-500.woff2
new file mode 100644
index 0000000..78243ff
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-500.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-600.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-600.woff2
new file mode 100644
index 0000000..d2857db
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-600.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-700.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-700.woff2
new file mode 100644
index 0000000..a46e9c6
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-700.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-800.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-800.woff2
new file mode 100644
index 0000000..f3b492d
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-800.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-900.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-900.woff2
new file mode 100644
index 0000000..454a29e
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-900.woff2 differ
diff --git a/fonts/handjet-v17-latin/handjet-v17-latin-regular.woff2 b/fonts/handjet-v17-latin/handjet-v17-latin-regular.woff2
new file mode 100644
index 0000000..9fc41d0
Binary files /dev/null and b/fonts/handjet-v17-latin/handjet-v17-latin-regular.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100.woff2
new file mode 100644
index 0000000..a2ed61e
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100italic.woff2
new file mode 100644
index 0000000..90d23e7
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-100italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200.woff2
new file mode 100644
index 0000000..8143daf
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200italic.woff2
new file mode 100644
index 0000000..f52a027
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-200italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300.woff2
new file mode 100644
index 0000000..3d6e168
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300italic.woff2
new file mode 100644
index 0000000..8cbff86
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-300italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500.woff2
new file mode 100644
index 0000000..b4f2bf8
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500italic.woff2
new file mode 100644
index 0000000..306b2c9
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-500italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600.woff2
new file mode 100644
index 0000000..b211539
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600italic.woff2
new file mode 100644
index 0000000..ee1b826
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-600italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700.woff2
new file mode 100644
index 0000000..d7170da
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700italic.woff2
new file mode 100644
index 0000000..f4a6649
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-700italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-italic.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-italic.woff2
new file mode 100644
index 0000000..ece53bd
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-italic.woff2 differ
diff --git a/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-regular.woff2 b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-regular.woff2
new file mode 100644
index 0000000..f8894ba
Binary files /dev/null and b/fonts/roboto-mono-v22-latin/roboto-mono-v22-latin-regular.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-100.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-100.woff2
new file mode 100644
index 0000000..71c9bb7
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-100.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-100italic.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-100italic.woff2
new file mode 100644
index 0000000..4ccadd1
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-100italic.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-300.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-300.woff2
new file mode 100644
index 0000000..6068138
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-300.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-300italic.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-300italic.woff2
new file mode 100644
index 0000000..22c57b0
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-300italic.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-500.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-500.woff2
new file mode 100644
index 0000000..29342a8
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-500.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-500italic.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-500italic.woff2
new file mode 100644
index 0000000..ae1933f
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-500italic.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-700.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-700.woff2
new file mode 100644
index 0000000..771fbec
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-700.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-700italic.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-700italic.woff2
new file mode 100644
index 0000000..a56a6ed
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-700italic.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-900.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-900.woff2
new file mode 100644
index 0000000..067cb32
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-900.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-900italic.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-900italic.woff2
new file mode 100644
index 0000000..59cab0f
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-900italic.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2
new file mode 100644
index 0000000..e1b7a79
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2 differ
diff --git a/fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2 b/fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2
new file mode 100644
index 0000000..020729e
Binary files /dev/null and b/fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2 differ
diff --git a/index.html b/index.html
index 8afb6d0..16342b3 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,21 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Site Favicon -->
+    <link rel="shortcut icon" href="Resources\Favicon\music-solid-favicon.svg" type="image/x-icon">
+    <!-- link style.css -->
+    <link rel="stylesheet" href="style.css">
+    <script>src = "script.js"</script>
+    <!-- Linking Fonts -->
     <title>Lite Music Player</title>
-    <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
-<body>
+
+<body class="lightMode" class="darkMode">
     <div class="container">
-        <h1>Lite Music Player</h1>
+        <h1 class="title">Lite Music Player</h1>
         <div class="music-player">
             <audio id="audioPlayer">
                 Your browser does not support the audio element.
@@ -29,6 +38,7 @@ <h1>Lite Music Player</h1>
             </div>
         </div>
     </div>
-    <script src="js/script.js"></script>
+    <script src="script.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/js/script.js b/script.js
similarity index 100%
rename from js/script.js
rename to script.js
diff --git a/css/style.css b/style.css
similarity index 69%
rename from css/style.css
rename to style.css
index 3af339e..3b16516 100644
--- a/css/style.css
+++ b/style.css
@@ -1,9 +1,28 @@
+.lightMode{
+    --textLight: #000000;
+    --backgroundLight: #ffffff;
+    --primaryLight: #50545c;
+    --secondaryLight: #ebf1ff;
+    --accentLight: #d41d6d;
+}
+
+.darkMode{
+    --textDark: #ffffff;
+    --backgroundDark: #000000;
+    --primaryDark: #8fb3ff;
+    --secondaryDark: #001952;
+    --accentDark: #f199bf;
+}
+
+
 /* Global styles */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Roboto Mono', monospace;
     margin: 0;
     padding: 0;
-    background-color: #f5f5f5;
+    background-color: var(--backgroundLight) !important;
+    color: var(--textLight);
+    transition: background-color 0.3s, color 0.3s; /* Add transition for smooth effect */
 }
 
 .container {
@@ -12,8 +31,15 @@ body {
     padding: 20px;
 }
 
-h1 {
+.title {
     text-align: center;
+    transition: all 0.15s;
+}
+
+.title:hover{
+    color: orangered;
+    font-size: 35px;
+    cursor: pointer;
 }
 
 /* Music Player styles */
@@ -22,6 +48,7 @@ h1 {
     background-color: #fff;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
 }
 
 .controls {
@@ -60,6 +87,7 @@ h1 {
     background-color: #4caf50;
     color: #fff;
     border: none;
+    border-radius: 3px;
     padding: 5px 10px;
     font-size: 14px;
     cursor: pointer;
@@ -67,6 +95,7 @@ h1 {
 
 .download-btn:hover {
     background-color: #45a049;
+    cursor: pointer;
 }
 
 /* Music List styles */
@@ -93,6 +122,7 @@ h1 {
     border: 1px solid #ccc;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s; /* Add transition for smooth effect */
+    border-radius: 3px;
 }
 
 /* Darken the song name button when clicked */
@@ -104,6 +134,7 @@ h1 {
 /* Hover effect for the song name button */
 .song-name:hover {
     background-color: #f1f1f1;
+    cursor: pointer;
 }
 
 /* Style for the play and pause button */
@@ -116,10 +147,13 @@ h1 {
     cursor: pointer;
     margin-right: 10px;
     transition: background-color 0.3s, color 0.3s; /* Add transition for smooth effect */
+    border-radius: 3px;
 }
 
 #playPauseBtn:hover {
     background-color: #5ba9d8;
+    opacity: 0.8;
+    cursor: pointer;
 }
 
 .edit-btn {
@@ -131,3 +165,14 @@ h1 {
     cursor: pointer;
     float: right;
 }
+
+#speedSelect{
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    margin-right: 10px;
+}
+
+#speedSelect:focus{
+    outline: none;
+}
\ No newline at end of file