diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8c633184193fa2afb74e9f29a023fb56cfddd88d..3ceb4d68acfad8111de35b81248b77d842f4ff81 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -4,7 +4,7 @@ import {ref} from "vue";
 import {searchSongByKeyword, searchPlaylistByKeyword} from "../api/search";
 
 const router = useRouter();
-const emit = defineEmits(['headData']);
+const emit = defineEmits(['headData','home']);
 
 const props = defineProps({
 	allowSearch: {
@@ -80,6 +80,10 @@ function callSearch() {
 		console.log("Failed to fetch playlists!")
 	})
 }
+
+function callHome() {
+	emit('home');
+}
 </script>
 
 <template>
@@ -105,14 +109,14 @@ function callSearch() {
 					      d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path>
 				</svg>
 			</router-link>
-			<router-link to="/home" class="home-btn">
+			<div @click="callHome" class="home-btn">
 				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
 				     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
 				     class="feather feather-home">
 					<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
 					<polyline points="9 22 9 12 15 12 15 22"></polyline>
 				</svg>
-			</router-link>
+			</div>
 			<div @click="toggleIcons" class="more-btn">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
 					<path fill="currentColor"
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 4c006d05a2273beb99e8e433f90e7b28e8bdcec4..b5e12198922b4d237c60693418165c8e40aea343 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -466,8 +466,15 @@ function receiveDataFromHeader(data) {
 	setMidComponents(3);
 }
 
+/*
+    HOME
+ */
+function receiveDataFromHome() {
+	setMidComponents(0);
+}
 /*
     MID COMPONENTS
+    0 - Main View
     1 - Music Albums
     2 - Comments
     3 - Search Results
@@ -528,7 +535,7 @@ let playFromLeftBarAlbum = ref(null);
 	<div class="body" v-show="!isPlayingPage" @click="unSelectAlbum">
 		
 		<!-- MAIN & RIGHT CONTENT -->
-		<Header class="header" @headData="receiveDataFromHeader" allow-search></Header>
+		<Header class="header" @headData="receiveDataFromHeader" @home="receiveDataFromHome" allow-search></Header>
 		<img class="logo" src="../assets/pictures/logos/logo3.png" alt="">
 		<left-side-bar class="left-side-bar" @playFromLeftBar="(id)=>{playFromLeftBarAlbum = id }"
 		               @setCurrentPlaylist="receiveDisplayingPlaylist"/>
@@ -1691,7 +1698,7 @@ footer {
 /* 閫€鍑烘悳绱㈠浘鏍� */
 .exit-search {
 	position: absolute;
-	top: 90px;
+	top: 110px;
 	right: 10px;
 	width: 30px;
 	height: 30px;