From 448ec5c647877e3d4985754329aa71ba8b37d112 Mon Sep 17 00:00:00 2001
From: Gabriel Goldbronn <gabriel.goldbronn@gmail.com>
Date: Mon, 21 Apr 2025 11:03:36 +0200
Subject: [PATCH] =?UTF-8?q?d=C3=A9but=20des=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                    | Bin 0 -> 6148 bytes
 .idea/workspace.xml                          |  72 +++---
 frontend/package-lock.json                   | 237 ++++++++++++-------
 frontend/src/assets/Global.scss              |  13 +-
 frontend/src/assets/Icons/InPlayListIcon.vue |  16 ++
 frontend/src/assets/Icons/Trash.vue          |  11 +-
 frontend/src/components/LectureList.vue      |  27 +++
 frontend/src/components/Player.vue           |   5 +-
 frontend/src/items/InputSearch.vue           |   5 +
 frontend/src/items/SwitchTab.vue             |  71 ++++++
 frontend/src/stores/dataStore.ts             |  37 +++
 11 files changed, 367 insertions(+), 127 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 frontend/src/assets/Icons/InPlayListIcon.vue
 create mode 100644 frontend/src/items/SwitchTab.vue

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..a549e98fca7a7d7b80d67f618fb5bbeef75d936c
GIT binary patch
literal 6148
zcmeHL%W4!s6g?GNGf8GKOE*e?fCK`Pbtm>LBGHAj7R)^Cgv?AQA+Fr?#)XLAkYy0W
z$I3tO2Sjw`HwdEOO3%GjhN|uvT`3akLe=T6y7$&Sr<kr(0GQ1O!!@7-pv5MbEVG+o
zGB2%R3vT2x(MXQ1aXILZ%Rb*FVYH|~RN((sKz_RkR#9LN$KmgHq2S!=4>cum<~J_Z
zdV_Luprh@RhklMpndj~sz>h}t;?c*q8{z!$xAO<PUhYL*V)<8ntg*lpC5|u(YlW=w
z+^h8>WA-q_2s<^;m-9UXUby;{o?afG*|*oHU!GZJfrrlx`Qba|?s)|4P;mh)qK_R6
zu+Lhj7}ly4Uj81`yn~9(%_q%#e%0KMyX`kxQ!US=^edm|6;y9NOZ9D5zRUWj+?f%^
z+?#^RPZ~T#b)QEI_qmHD<Bn(XHdp@S?=!#j`1(5i8#!y-KYjh6+-Lat>~Zb=96z6b
zvh<2ea`(2eg&XMNHhSoWyJuuSeAY|2L(dK5xJ8_yllfkYkTw36@yr%$tyqkGR3Iu4
z6*yBsz7HvzVCJy0sGkmYdIcaR99H9VM;?f&!^~l2kux-7Ly0!jxGRQnHwR<GIiETI
z%AyU2(UqCUt!&&4#pvoBPt_eJvl#oRKvW=9;DUYa$ob!$fBz4I;#*W8DsZk8FiGCa
zH%ZBztqpQ=)~0Ot*u=!IvZx{K+;OZAaumz|71TJF$^$WTSXtx<E&d^(GQ=(_@J|)^
E3D05eg8%>k

literal 0
HcmV?d00001

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index db98e59..34621f6 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,22 +5,15 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DefaultPlaylist.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/frontend/src/stores/dataStore.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/InPlayListIcon.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/assets/Global.scss" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Global.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Trash.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Trash.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/frontend/src/components/Player.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Player.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/components/Playlist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Playlist.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/components/SearchPreview.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/SearchPreview.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/MiniatureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/MiniatureList.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/PlaylistItem.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/PlaylistItem.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/stores/globalStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/stores/globalStore.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/views/Home.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/Home.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/views/HomeDesktop.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/HomeDesktop.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/views/HomeTablet.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/HomeTablet.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -50,30 +43,31 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;frontend-0.2.0&quot;,
-    &quot;last_opened_file_path&quot;: &quot;/Users/gabriel/Documents/GitHub/chopin/frontend/src/views&quot;,
-    &quot;list.type.of.created.stylesheet&quot;: &quot;SCSS&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;/Users/gabriel/Documents/GitHub/chopin/frontend/node_modules/typescript/lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "git-widget-placeholder": "frontend-0.2.0",
+    "last_opened_file_path": "/Users/gabriel/Documents/Project/GitHub/chopin/frontend/src/assets/Icons",
+    "list.type.of.created.stylesheet": "SCSS",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "ts.external.directory.path": "/Users/gabriel/Documents/Project/GitHub/chopin/frontend/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
   },
-  &quot;keyToStringList&quot;: {
-    &quot;vue.recent.templates&quot;: [
-      &quot;Vue Composition API Component&quot;
+  "keyToStringList": {
+    "vue.recent.templates": [
+      "Vue Composition API Component"
     ]
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/frontend/src/assets/Icons" />
       <recent name="$PROJECT_DIR$/frontend/src/views" />
       <recent name="$PROJECT_DIR$/frontend/src/items" />
       <recent name="$PROJECT_DIR$/frontend/src/components" />
@@ -85,7 +79,7 @@
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
-        <option value="bundled-js-predefined-d6986cc7102b-1632447f56bf-JavaScript-WS-243.25659.40" />
+        <option value="bundled-js-predefined-d6986cc7102b-1632447f56bf-JavaScript-WS-243.26053.12" />
       </set>
     </attachedChunks>
   </component>
@@ -100,7 +94,17 @@
       <workItem from="1740503281735" duration="34792000" />
       <workItem from="1740931209372" duration="2409000" />
       <workItem from="1740934406955" duration="5718000" />
-      <workItem from="1740989873081" duration="10636000" />
+      <workItem from="1740989873081" duration="18670000" />
+      <workItem from="1741365838888" duration="54000" />
+      <workItem from="1741628247325" duration="887000" />
+      <workItem from="1742802910685" duration="950000" />
+      <workItem from="1743000529409" duration="1573000" />
+      <workItem from="1743168539274" duration="1223000" />
+      <workItem from="1743406006503" duration="564000" />
+      <workItem from="1744218861266" duration="19000" />
+      <workItem from="1744793678915" duration="3951000" />
+      <workItem from="1744962250986" duration="599000" />
+      <workItem from="1744963762669" duration="3595000" />
     </task>
     <servers />
   </component>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 41e37c4..fab1083 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -506,9 +506,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
-      "integrity": "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
+      "integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
       "cpu": [
         "arm"
       ],
@@ -520,9 +520,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.8.tgz",
-      "integrity": "sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.0.tgz",
+      "integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
       "cpu": [
         "arm64"
       ],
@@ -534,9 +534,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.8.tgz",
-      "integrity": "sha512-02rVdZ5tgdUNRxIUrFdcMBZQoaPMrxtwSb+/hOfBdqkatYHR3lZ2A2EGyHq2sGOd0Owk80oV3snlDASC24He3Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.0.tgz",
+      "integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
       "cpu": [
         "arm64"
       ],
@@ -548,9 +548,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.8.tgz",
-      "integrity": "sha512-qIP/elwR/tq/dYRx3lgwK31jkZvMiD6qUtOycLhTzCvrjbZ3LjQnEM9rNhSGpbLXVJYQ3rq39A6Re0h9tU2ynw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.0.tgz",
+      "integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
       "cpu": [
         "x64"
       ],
@@ -562,9 +562,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.8.tgz",
-      "integrity": "sha512-IQNVXL9iY6NniYbTaOKdrlVP3XIqazBgJOVkddzJlqnCpRi/yAeSOa8PLcECFSQochzqApIOE1GHNu3pCz+BDA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.0.tgz",
+      "integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
       "cpu": [
         "arm64"
       ],
@@ -576,9 +576,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.8.tgz",
-      "integrity": "sha512-TYXcHghgnCqYFiE3FT5QwXtOZqDj5GmaFNTNt3jNC+vh22dc/ukG2cG+pi75QO4kACohZzidsq7yKTKwq/Jq7Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.0.tgz",
+      "integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
       "cpu": [
         "x64"
       ],
@@ -590,9 +590,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.8.tgz",
-      "integrity": "sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.0.tgz",
+      "integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
       "cpu": [
         "arm"
       ],
@@ -604,9 +604,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.8.tgz",
-      "integrity": "sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.0.tgz",
+      "integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==",
       "cpu": [
         "arm"
       ],
@@ -618,9 +618,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.8.tgz",
-      "integrity": "sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.0.tgz",
+      "integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
       "cpu": [
         "arm64"
       ],
@@ -632,9 +632,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.8.tgz",
-      "integrity": "sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.0.tgz",
+      "integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
       "cpu": [
         "arm64"
       ],
@@ -646,9 +646,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.8.tgz",
-      "integrity": "sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.0.tgz",
+      "integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
       "cpu": [
         "loong64"
       ],
@@ -660,9 +660,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.8.tgz",
-      "integrity": "sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.0.tgz",
+      "integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
       "cpu": [
         "ppc64"
       ],
@@ -674,9 +674,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz",
-      "integrity": "sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.0.tgz",
+      "integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.0.tgz",
+      "integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
       "cpu": [
         "riscv64"
       ],
@@ -688,9 +702,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz",
-      "integrity": "sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.0.tgz",
+      "integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
       "cpu": [
         "s390x"
       ],
@@ -702,9 +716,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.8.tgz",
-      "integrity": "sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.0.tgz",
+      "integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
       "cpu": [
         "x64"
       ],
@@ -716,9 +730,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.8.tgz",
-      "integrity": "sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.0.tgz",
+      "integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
       "cpu": [
         "x64"
       ],
@@ -730,9 +744,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.8.tgz",
-      "integrity": "sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.0.tgz",
+      "integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
       "cpu": [
         "arm64"
       ],
@@ -744,9 +758,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.8.tgz",
-      "integrity": "sha512-r3NRQrXkHr4uWy5TOjTpTYojR9XmF0j/RYgKCef+Ag46FWUTltm5ziticv8LdNsDMehjJ543x/+TJAek/xBA2w==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.0.tgz",
+      "integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
       "cpu": [
         "ia32"
       ],
@@ -758,9 +772,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.8.tgz",
-      "integrity": "sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz",
+      "integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
       "cpu": [
         "x64"
       ],
@@ -772,9 +786,9 @@
       ]
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -1143,6 +1157,21 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1286,6 +1315,19 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/pinia": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.1.tgz",
@@ -1342,13 +1384,13 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.8.tgz",
-      "integrity": "sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
+      "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.6"
+        "@types/estree": "1.0.7"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1358,25 +1400,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.34.8",
-        "@rollup/rollup-android-arm64": "4.34.8",
-        "@rollup/rollup-darwin-arm64": "4.34.8",
-        "@rollup/rollup-darwin-x64": "4.34.8",
-        "@rollup/rollup-freebsd-arm64": "4.34.8",
-        "@rollup/rollup-freebsd-x64": "4.34.8",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.34.8",
-        "@rollup/rollup-linux-arm-musleabihf": "4.34.8",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.8",
-        "@rollup/rollup-linux-arm64-musl": "4.34.8",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.34.8",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.34.8",
-        "@rollup/rollup-linux-riscv64-gnu": "4.34.8",
-        "@rollup/rollup-linux-s390x-gnu": "4.34.8",
-        "@rollup/rollup-linux-x64-gnu": "4.34.8",
-        "@rollup/rollup-linux-x64-musl": "4.34.8",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.8",
-        "@rollup/rollup-win32-ia32-msvc": "4.34.8",
-        "@rollup/rollup-win32-x64-msvc": "4.34.8",
+        "@rollup/rollup-android-arm-eabi": "4.40.0",
+        "@rollup/rollup-android-arm64": "4.40.0",
+        "@rollup/rollup-darwin-arm64": "4.40.0",
+        "@rollup/rollup-darwin-x64": "4.40.0",
+        "@rollup/rollup-freebsd-arm64": "4.40.0",
+        "@rollup/rollup-freebsd-x64": "4.40.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.40.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.40.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.40.0",
+        "@rollup/rollup-linux-arm64-musl": "4.40.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.40.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.40.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-musl": "4.40.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.40.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.40.0",
+        "@rollup/rollup-win32-x64-msvc": "4.40.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -1855,6 +1898,23 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -1884,15 +1944,18 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
-      "integrity": "sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.0.tgz",
+      "integrity": "sha512-9aC0n4pr6hIbvi1YOpFjwQ+QOTGssvbJKoeYkuHHGWwlXfdxQlI8L2qNMo9awEEcCPSiS+5mJZk5jH1PAqoDeQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.12"
       },
       "bin": {
         "vite": "bin/vite.js"
diff --git a/frontend/src/assets/Global.scss b/frontend/src/assets/Global.scss
index 004977a..a3bf232 100644
--- a/frontend/src/assets/Global.scss
+++ b/frontend/src/assets/Global.scss
@@ -79,13 +79,22 @@ body{
   box-sizing: border-box;
 }
 
-h1 {
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
   font-family: Inter, sans-serif;
-  font-size: 24px;
   font-style: normal;
   font-weight: 600;
+}
+
+h1 {
+  font-size: 24px;
   line-height: 29px;
 }
+h2 {
+  font-size: 20px;
+  line-height: 20px;
+}
 
 p {
   font-family: Inter, sans-serif;
diff --git a/frontend/src/assets/Icons/InPlayListIcon.vue b/frontend/src/assets/Icons/InPlayListIcon.vue
new file mode 100644
index 0000000..30957e5
--- /dev/null
+++ b/frontend/src/assets/Icons/InPlayListIcon.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.5 8.96536C9.5 8.48808 9.5 8.24944 9.59974 8.11621C9.68666 8.0001 9.81971 7.92747 9.96438 7.91713C10.1304 7.90528 10.3311 8.03432 10.7326 8.29242L15.4532 11.3271C15.8016 11.551 15.9758 11.663 16.0359 11.8054C16.0885 11.9298 16.0885 12.0702 16.0359 12.1946C15.9758 12.337 15.8016 12.449 15.4532 12.6729L10.7326 15.7076C10.3311 15.9657 10.1304 16.0948 9.96438 16.0829C9.81971 16.0726 9.68666 15.9999 9.59974 15.8838C9.5 15.7506 9.5 15.512 9.5 15.0347V8.96536Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3 7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/assets/Icons/Trash.vue b/frontend/src/assets/Icons/Trash.vue
index 94e56eb..49913ce 100644
--- a/frontend/src/assets/Icons/Trash.vue
+++ b/frontend/src/assets/Icons/Trash.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
+import {defineProps} from "vue";
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: "#fff"
+  }
+});
 
 </script>
 
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6"
+          :stroke="props.color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
 
 </template>
diff --git a/frontend/src/components/LectureList.vue b/frontend/src/components/LectureList.vue
index 47307f0..0928ded 100644
--- a/frontend/src/components/LectureList.vue
+++ b/frontend/src/components/LectureList.vue
@@ -3,6 +3,9 @@
 import MiniatureList from "../items/MiniatureList.vue";
 import {defineProps} from "vue";
 import {lectureListStore} from "../stores/dataStore.ts";
+import InPlayListIcon from "../assets/Icons/InPlayListIcon.vue";
+import Trash from "../assets/Icons/Trash.vue";
+import SwitchTab from "../items/SwitchTab.vue";
 
 const props = defineProps({
   popup: {
@@ -17,6 +20,20 @@ const lecturesList = lectureListStore();
 <template>
   <div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'">
     <div class="lecture-list__content">
+      <div class="lecture-list__header">
+        <div>
+          <button>
+            <Trash color="#FF306F"/>
+          </button>
+          <div><p>{{ lecturesList.lectures.length }}</p>
+            <InPlayListIcon/>
+          </div>
+        </div>
+        <switch-tab
+            tab1-label="Liste de lecture"
+            tab2-label="Historique de lecture"
+        />
+      </div>
       <MiniatureList
           v-for="lecture in lecturesList.lectures"
           :thumbnail="lecture.thumbnail"
@@ -50,6 +67,16 @@ const lecturesList = lectureListStore();
   background: var(--neutral-100);
   overflow: hidden;
 
+  &__header {
+
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 5px;
+    }
+  }
+
 
   &__content {
     display: flex;
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index 033d411..b22d232 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -34,15 +34,14 @@ function togglePlay() {
           class="play_button"
           @click="togglePlay"
       >
-        <PlayIcon v-if="isPlaying"/>
-        <PauseIcon v-else />
+        <PauseIcon v-if="isPlaying"/>
+        <PlayIcon v-else />
       </button>
       <button><NextIcon /></button>
     </div>
     <div class="player__actions">
       <button><RepeatIcon /></button>
       <button><ShuffleIcon /></button>
-      <button><SoundIcon /></button>
       <button><HandIcon /></button>
       <button><LeaveIcon /></button>
     </div>
diff --git a/frontend/src/items/InputSearch.vue b/frontend/src/items/InputSearch.vue
index c39c853..93b3bdf 100644
--- a/frontend/src/items/InputSearch.vue
+++ b/frontend/src/items/InputSearch.vue
@@ -2,6 +2,7 @@
 import {lectureListIsOpen, playlistsIsOpen} from '../stores/globalStore.ts'
 import {searchStore} from '../stores/dataStore.ts'
 import SearchIcon from "../assets/Icons/SearchIcon.vue";
+import {onMounted} from "vue";
 
 const search = searchStore();
 
@@ -13,6 +14,10 @@ const updateSearch = (event: Event) => {
   playlists.closePlaylists();
   search.updateSearch((event.target as HTMLInputElement).value);
 };
+
+onMounted(() => {
+  (document.querySelector('.input') as HTMLInputElement).value = search.searchQuery;
+});
 </script>
 
 <template>
diff --git a/frontend/src/items/SwitchTab.vue b/frontend/src/items/SwitchTab.vue
new file mode 100644
index 0000000..9f72af0
--- /dev/null
+++ b/frontend/src/items/SwitchTab.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+import {defineProps} from "vue";
+
+const props = defineProps<{
+  tab1Click?: (event: MouseEvent) => void;
+  tab1Label?: string;
+  tab2Click?: (event: MouseEvent) => void;
+  tab2Label?: string;
+}>();
+
+</script>
+
+<template>
+  <div class="tab-container">
+    <button v-on:click="props.tab1Click" class="tab tab--1">{{ props.tab1Label }}</button>
+    <button v-on:click="props.tab2Click" class="tab tab--2">{{ props.tab2Label }}</button>
+    <div class="indicator"></div>
+  </div>
+</template>
+
+<style scoped>
+.tab-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  position: relative;
+  padding: 2px;
+  background-color: var(--neutral-50);
+  border-radius: 9px;
+  margin: 10px 20px 0px 20px;
+}
+
+.indicator {
+  content: "";
+  width: 50%;
+  height: 85%;
+  background: var(--neutral-100);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  z-index: 9;
+  border: 0.5px solid rgba(0, 0, 0, 0.04);
+  border-radius: 7px;
+  transition: all 0.2s ease-out;
+}
+
+.tab {
+  width: 50%;
+  height: 28px;
+  position: relative;
+  z-index: 99;
+  background-color: transparent;
+  border: 0;
+  outline: none;
+  flex: none;
+  align-self: stretch;
+  flex-grow: 1;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.tab--1:hover ~ .indicator {
+  left: 2px;
+}
+
+.tab--2:hover ~ .indicator {
+  left: calc(50% - 2px);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/stores/dataStore.ts b/frontend/src/stores/dataStore.ts
index 7946817..c768222 100644
--- a/frontend/src/stores/dataStore.ts
+++ b/frontend/src/stores/dataStore.ts
@@ -158,4 +158,41 @@ export const lectureListStore = defineStore('lecture', {
             this.lectures = [];
         }
     }
+});
+
+export const historyListStore = defineStore('history', {
+    state: () => ({
+        history: [
+            {
+                name: 'LofiGirl',
+                title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)',
+                thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
+            },
+            {
+                name: 'LofiGirl',
+                title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)',
+                thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
+            },
+            {
+                name: 'LofiGirl',
+                title: 'lofi hip hop mix 📚 beats to relax/study to (Part 3)',
+                thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
+            },
+            {
+                name: 'LofiGirl',
+                title: 'lofi hip hop mix 📚 beats to relax/study to (Part 4)',
+                thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
+            },
+        ]
+    }),
+
+    actions: {
+        updateHistoryList(lecture: { name: string; title: string; thumbnail: string }[]) {
+            this.history = lecture;
+        },
+
+        clearHistoryList() {
+            this.history = [];
+        }
+    }
 });
\ No newline at end of file