diff --git a/src/assets/icons/cycletwoarrowswithnumone.vue b/src/assets/icons/cycletwoarrowswithnumone.vue
new file mode 100644
index 0000000..e112847
--- /dev/null
+++ b/src/assets/icons/cycletwoarrowswithnumone.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="`w-${size} h-${size}`">
+		<path
+			d="M8 20V21.9325C8 22.2086 7.77614 22.4325 7.5 22.4325C7.38303 22.4325 7.26977 22.3915 7.17991 22.3166L3.06093 18.8841C2.84879 18.7073 2.82013 18.392 2.99691 18.1799C3.09191 18.0659 3.23264 18 3.38103 18L18 18C19.1046 18 20 17.1046 20 16V8H22V16C22 18.2091 20.2091 20 18 20H8ZM16 2.0675C16 1.79136 16.2239 1.5675 16.5 1.5675C16.617 1.5675 16.7302 1.60851 16.8201 1.68339L20.9391 5.11587C21.1512 5.29266 21.1799 5.60794 21.0031 5.82008C20.9081 5.93407 20.7674 5.99998 20.619 5.99998L6 6C4.89543 6 4 6.89543 4 8V16H2V8C2 5.79086 3.79086 4 6 4H16V2.0675ZM11 8H13V16H11V10H9V9L11 8Z">
+		</path>
+	</svg>
+</template>
\ No newline at end of file
diff --git a/src/components/Player.vue b/src/components/Player.vue
index c1fd923..eed6099 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -69,8 +69,13 @@ function playNext() {
 	if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
 		console.log("at the bottom, pause")
 		playQueueStore.currentIndex = 0
-		player.value?.pause()
-		playQueueStore.isPlaying = false
+		if(playQueueStore.playMode.repeat === 'all') {
+			playQueueStore.currentIndex = 0
+			playQueueStore.isPlaying = true
+		} else {
+			player.value?.pause()
+			playQueueStore.isPlaying = false
+		}
 	} else {
 		playQueueStore.currentIndex++
 		playQueueStore.isPlaying = true
@@ -204,7 +209,10 @@ function getCurrentTrack() {
 			ref="playerRef" 
 			:autoplay="playQueueStore.isPlaying" 
 			v-if="playQueueStore.list.length !== 0" 
-			@ended="playNext"
+			@ended="() => {
+				if (playQueueStore.playMode.repeat === 'single') { playQueueStore.isPlaying = true }
+				else { playNext() }
+			}"
 			@pause="playQueueStore.isPlaying = false" 
 			@play="playQueueStore.isPlaying = true" 
 			@playing="() => {
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 9f2d0b3..999436d 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -19,6 +19,7 @@ import EllipsisHorizontalIcon from '../assets/icons/ellipsishorizontal.vue'
 import XIcon from '../assets/icons/x.vue'
 import ShuffleIcon from '../assets/icons/shuffle.vue'
 import CycleTwoArrowsIcon from '../assets/icons/cycletwoarrows.vue'
+import CycleTwoArrowsWithNumOneIcon from '../assets/icons/cycletwoarrowswithnumone.vue'
 import SpeakerIcon from '../assets/icons/speaker.vue'
 
 const playQueueStore = usePlayQueueStore()
@@ -301,7 +302,7 @@ function getCurrentTrack() {
 					</button>
 				</div>
 
-				<div class="flex-1 text-right flex">
+				<div class="flex-1 text-right flex gap-1">
 					<div class="flex-1" />
 					<button class="text-white h-8 w-8 flex justify-center items-center rounded-full hover:bg-white/25">
 						<div class="w-6 h-6 relative">
@@ -354,9 +355,23 @@ function getCurrentTrack() {
 					<ShuffleIcon :size="4" />
 				</button>
 				<button
-					class="text-white flex-1 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
-					@click="">
-					<CycleTwoArrowsIcon :size="4" />
+					class="flex-1 h-9 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
+					:class="playQueueStore.playMode.repeat === 'off' ? 'text-white bg-neutral-800/80' : 'bg-[#ffffffaa] text-neutral-700'"
+					@click="() => {
+						switch (playQueueStore.playMode.repeat) {
+							case 'off':
+								playQueueStore.playMode.repeat = 'all'
+								break
+							case 'all':
+								playQueueStore.playMode.repeat = 'single'
+								break
+							case 'single':
+								playQueueStore.playMode.repeat = 'off'
+								break
+						}
+					}">
+					<CycleTwoArrowsIcon :size="4" v-if="playQueueStore.playMode.repeat !== 'single'" />
+					<CycleTwoArrowsWithNumOneIcon :size="4" v-else />
 				</button>
 			</div>