diff --git a/index.html b/index.html
index b3d7772..3010429 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://pipedapi.kavin.rocks" />
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Hyperpipe</title>
diff --git a/src/App.vue b/src/App.vue
index 7373531..bd1ac73 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,17 +22,17 @@ let search = ref('');
 
   <Artist
     @playall="getAlbum"
-    :title="artistTitle"
-    :desc="artistDesc"
-    :subs="artistSubs"
-    :thumbs="artistThumbs"
-    :play="artistPlay" />
+    :title="artist.title"
+    :desc="artist.description"
+    :subs="artist.subscriberCount"
+    :thumbs="artist.thumbnails"
+    :play="artist.playlistId" />
 
-  <header v-if="!artistTitle">
+  <header v-if="!artist.title">
     <div v-if="cover" class="art bg-img" :style="cover"></div>
 
     <div class="wrapper">
-      <NowPlaying :title="title" :artist="artist" />
+      <NowPlaying :title="nowtitle" :artist="nowartist" />
     </div>
   </header>
 
@@ -81,8 +81,8 @@ export default {
     return {
       artUrl: '',
       cover: '',
-      title: '',
-      artist: '',
+      nowtitle: '',
+      nowartist: '',
       state: 'play',
       audioSrc: '',
       duration: 0,
@@ -93,11 +93,13 @@ export default {
       showplaylist: false,
       loop: false,
       hls: null,
-      artistTitle: null,
-      artistDesc: null,
-      artistSubs: 0,
-      artistPlay: null,
-      artistThumbs: [],
+      artist: {
+        playlistId: null,
+        title: null,
+        description: null,
+        subscriberCount: 0,
+        thumbnails: [],
+      },
       items: {},
     };
   },
@@ -166,7 +168,12 @@ export default {
       if (!res.error) {
         return res;
       } else {
-        alert(res.message.replaceAll('Video', 'Audio').replaceAll('video', 'audio').replaceAll('watched', 'heard'));
+        alert(
+          res.message
+            .replaceAll('Video', 'Audio')
+            .replaceAll('video', 'audio')
+            .replaceAll('watched', 'heard'),
+        );
         console.error(res.message);
       }
     },
@@ -257,6 +264,8 @@ export default {
       };
 
       history.pushState({}, '', e);
+
+      this.artist = null;
     },
     async getArtist(e) {
       console.log(e);
@@ -267,13 +276,10 @@ export default {
 
       console.log(json);
 
-      this.artistTitle = json.title;
-      this.artistDesc = json.description;
-      this.artistPlay = json.playlistId;
-      this.artistSubs = json.subscriberCount;
-      this.artistThumbs = json.thumbnails;
       this.items = json.items;
       this.items.notes = json.playlistId;
+      json.items = null;
+      this.artist = json;
 
       history.pushState({}, '', '/channel/' + e);
     },
@@ -294,8 +300,8 @@ export default {
 
       this.art = res.art;
       this.cover = `--art: url(${res.art});`;
-      this.title = res.title;
-      this.artist = res.artist.split(' - ')[0];
+      this.nowtitle = res.title;
+      this.nowartist = res.artist.split(' - ')[0];
       this.duration = res.time;
       this.url = res.url;
 
@@ -318,15 +324,15 @@ export default {
         history.pushState({}, '', this.url);
       }
 
-      document.title = `Playing: ${this.title} by ${this.artist}`;
+      document.title = `Playing: ${this.nowtitle} by ${this.nowartist}`;
 
       this.setMetadata(this.art);
     },
     setMetadata(art) {
       if (navigator.mediaSession) {
         navigator.mediaSession.metadata = new MediaMetadata({
-          title: this.title,
-          artist: this.artist,
+          title: this.nowtitle,
+          artist: this.nowartist,
           artwork: [
             {
               src: art,
@@ -400,6 +406,13 @@ header {
 .bg-img.lazy {
   background-image: var(--art);
 }
+.search-artists {
+  text-align: center;
+}
+.search-artists .bg-img {
+  border-radius: 50%;
+  margin-bottom: 0.5rem;
+}
 img,
 .card,
 .card-bg {
diff --git a/src/assets/base.css b/src/assets/base.css
index 7f87d60..28c8672 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -113,3 +113,7 @@ body {
 ::-webkit-scrollbar-button:single-button {
   height: 0.75rem;
 }
+
+h2 {
+  text-align: center;
+}
diff --git a/src/components/Artist.vue b/src/components/Artist.vue
index dfca941..6c89ba8 100644
--- a/src/components/Artist.vue
+++ b/src/components/Artist.vue
@@ -13,7 +13,7 @@ defineEmits(['playall']);
       <h2>{{ title }}</h2>
       <p @click="$event.target.classList.toggle('more')">{{ desc }}</p>
       <div class="us-playwrap">
-        <PlayBtn @click="$emit('playall', '?list=' + play)" />
+        <PlayBtn @click="$emit('playall', '/playlist?list=' + play)" />
         <span class="us-box subs">{{ subs || 0 }}</span>
       </div>
     </div>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index fbdad5b..eb5d296 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -70,10 +70,7 @@ defineEmits([
             '--art: url(' + (album.thumbnail || album.thumbnails[0].url) + ');'
           "
           @open-album="
-            $emit(
-              'get-album',
-              album.url || '/playlist?list=' + album.id,
-            )
+            $emit('get-album', album.url || '/playlist?list=' + album.id)
           " />
       </template>
     </div>
@@ -200,6 +197,7 @@ export default {
   display: grid;
   grid-template-columns: 1fr;
 }
+
 .text-full {
   padding: 1rem;
   font-size: 1.5rem;