diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue
index 825036342..1dea6090d 100644
--- a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue
+++ b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/App.vue
@@ -16,7 +16,13 @@
         Authorize with Spotify
       </button>
     </div>
-    <router-view />
+    <!-- 
+      https://youtu.be/VZ1NV7EHGJw?si=FtsSuMndmHLiBwsc&t=710 
+
+      delcare global variable via router view
+      -> so baseURL, categories are visible to ALL views
+      -->
+    <router-view :baseURL="baseURL"> </router-view>
   </div>
 </template>
 
diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue
index fd7011e84..a4570f32d 100644
--- a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue
+++ b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Album/GetAlbum.vue
@@ -4,7 +4,10 @@
     <!-- Album ID Form -->
     <form class="album-form text-center">
       <div class="form-group">
-        <p style="text-align: center;">Enter Album ID, example: 1VuIx4XMmSs1hGZk2uCzvO</p><br>
+        <p style="text-align: center">
+          Enter Album ID, example: 1VuIx4XMmSs1hGZk2uCzvO
+        </p>
+        <br />
         <label for="albumId" class="form-label">Enter Album ID</label>
         <input
           type="text"
@@ -14,13 +17,21 @@
           required
         />
       </div>
-      <button type="button" class="btn btn-outline-light btn-lg" @click="fetchAlbum">
+      <button
+        type="button"
+        class="btn btn-outline-light btn-lg"
+        @click="fetchAlbum"
+      >
         Submit
       </button>
     </form>
 
     <!-- Error message -->
-    <div v-if="fetchAlbumError" class="error-message text-center" style="color: red;">
+    <div
+      v-if="fetchAlbumError"
+      class="error-message text-center"
+      style="color: red"
+    >
       {{ fetchAlbumError }}
     </div>
 
@@ -51,7 +62,11 @@
       <!-- Tracks List -->
       <div class="track-list mt-4">
         <h3 class="text-center">Tracks</h3>
-        <div v-for="track in album.tracks.items" :key="track.id" class="track-card">
+        <div
+          v-for="track in album.tracks.items"
+          :key="track.id"
+          class="track-card"
+        >
           <p class="track-name">Track: {{ track.name }}</p>
 
           <!-- Track URL -->
@@ -77,17 +92,20 @@
     </div>
 
     <!-- Loading Placeholder -->
-    <div v-else-if="!fetchAlbumError" class="loading-text text-center mt-5">Loading...</div>
+    <div v-else-if="!fetchAlbumError" class="loading-text text-center mt-5">
+      Loading...
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: ["baseURL"],
   data() {
     return {
       albumId: "1VuIx4XMmSs1hGZk2uCzvO", // default value
       album: null,
-      fetchAlbumError: null // Error message state
+      fetchAlbumError: null, // Error message state
     };
   },
   methods: {
@@ -95,7 +113,7 @@ export default {
       try {
         this.fetchAlbumError = null; // Reset error state
         const response = await fetch(
-          `http://localhost:8888/album/${this.albumId}`
+          `${this.baseURL}/album/${this.albumId}`
         );
         if (!response.ok) {
           throw new Error("Failed to fetch album");
diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue
index 089eaa386..dfbd480c3 100644
--- a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue
+++ b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchAlbum.vue
@@ -82,6 +82,7 @@
   
   <script>
 export default {
+  props: ["baseURL"],
   data() {
     return {
       albumKeyword: "funky", // default val
@@ -96,7 +97,7 @@ export default {
       try {
         console.log("this.albumKeyword = " + this.albumKeyword);
         const response = await fetch(
-          `http://localhost:8888/search/album/?keyword=${this.albumKeyword}`
+          `${this.baseURL}/search/album/?keyword=${this.albumKeyword}`
         );
         if (!response.ok) {
           throw new Error("Failed to search album");
diff --git a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchArtist.vue b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchArtist.vue
index 8ffba7e45..770062c78 100644
--- a/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchArtist.vue
+++ b/springSpotifyPlayList/frontend/spotify-playlist-ui/src/views/Search/SearchArtist.vue
@@ -1,211 +1,187 @@
 <template>
-    <div class="container">
-      <h1>Search Artist With Keyword</h1>
-      <!-- Artist Keyword Form -->
-      <form class="album-form text-center">
-        <div class="form-group">
-          <p style="text-align: center;">Search Artist with keyword, example: jay</p><br>
-          <label for="artistKeyword" class="form-label">Enter Artist keyword</label>
-          <input
-            type="text"
-            class="form-control form-control-lg"
-            v-model="artistKeyword"
-            placeholder="Search keywords"
-            required
-          />
-        </div>
-        <button
-          type="button"
-          class="btn btn-outline-light btn-lg"
-          @click="searchArtist"
+  <div class="container">
+    <h1>Search Artist With Keyword</h1>
+    <!-- Artist Keyword Form -->
+    <form class="album-form text-center">
+      <div class="form-group">
+        <p style="text-align: center">
+          Search Artist with keyword, example: jay
+        </p>
+        <br />
+        <label for="artistKeyword" class="form-label"
+          >Enter Artist keyword</label
         >
-          Submit
-        </button>
-      </form>
-  
-      <!-- Album Details -->
-      <div v-if="artists.length > 0" class="album-details mt-5">
-        <h2 class="text-center">Search Results</h2>
-        <div v-for="artist in artists" :key="artist.id" class="album-card mt-4">
-          <h3 class="album-title">
-            Artist: {{ artist.name }} | id : {{ artist.id }}
-          </h3>
-  
-          <!-- Album Image -->
-          <div class="text-center">
-            <img
-              v-if="artist.images && artist.images.length > 0"
-              :src="artist.images[0].url"
-              class="album-cover"
-              :alt="artist.name"
-            />
-          </div>
-  
-          <!-- Album URL -->
-          <!-- <p class="album-url text-center">
-            Album URL:
-            <a :href="album.external_urls.spotify" target="_blank">
-              View on Spotify
-            </a>
-          </p> -->
-  
-          <!-- Track List -->
-          <!-- <div
-            v-if="album.tracks && album.tracks.length > 0"
-            class="track-list mt-4"
-          >
-            <h4 class="text-center">Tracks</h4>
-            <ul>
-              <li v-for="track in album.tracks" :key="track.id">
-                <strong>{{ track.name }}</strong>
-                <a :href="track.external_urls.spotify" target="_blank">
-                  Listen on Spotify
-                </a>
-                <audio v-if="track.preview_url" controls class="track-preview">
-                  <source :src="track.preview_url" type="audio/mpeg" />
-                  Your browser does not support the audio element.
-                </audio>
-              </li>
-            </ul>
-          </div> -->
-        </div>
+        <input
+          type="text"
+          class="form-control form-control-lg"
+          v-model="artistKeyword"
+          placeholder="Search keywords"
+          required
+        />
       </div>
-  
-      <!-- Loading or No Albums Found -->
-      <div v-else class="text-center mt-5">
-        <p v-if="isLoading">Loading...</p>
-        <p v-else>No artist found. Please try a different keyword.</p>
+      <button
+        type="button"
+        class="btn btn-outline-light btn-lg"
+        @click="searchArtist"
+      >
+        Submit
+      </button>
+    </form>
+
+    <!-- Album Details -->
+    <div v-if="artists.length > 0" class="album-details mt-5">
+      <h2 class="text-center">Search Results</h2>
+      <div v-for="artist in artists" :key="artist.id" class="album-card mt-4">
+        <h3 class="album-title">
+          Artist: {{ artist.name }} | id : {{ artist.id }}
+        </h3>
+
+        <!-- Album Image -->
+        <div class="text-center">
+          <img
+            v-if="artist.images && artist.images.length > 0"
+            :src="artist.images[0].url"
+            class="album-cover"
+            :alt="artist.name"
+          />
+        </div>
       </div>
     </div>
-  </template>
+
+    <!-- Loading or No Albums Found -->
+    <div v-else class="text-center mt-5">
+      <p v-if="isLoading">Loading...</p>
+      <p v-else>No artist found. Please try a different keyword.</p>
+    </div>
+  </div>
+</template>
     
     <script>
-  export default {
-    data() {
-      return {
-        artistKeyword: "jay", // default val
-        artists: [], // Array to hold multiple artists
-        isLoading: false,
-      };
-    },
-    methods: {
-      async searchArtist() {
-        this.isLoading = true;
-        this.artists = []; // Reset the artists array for each new search
-        try {
-          console.log("this.artistKeyword = " + this.artistKeyword);
-          const response = await fetch(
-            `http://localhost:8888/search/artist/?keyword=${this.artistKeyword}`
-          );
-          if (!response.ok) {
-            throw new Error("Failed to search artist");
-          }
-          //   const data = await response.json();
-          //   this.albums = data.albums; // Assume 'data.albums.items' holds an array of albums
-          const data = await response.json();
-          this.artists = data;
-          console.log("this.artists length =  ", this.artists.length);
-          console.log("this.artists =", JSON.stringify(this.artists));
-        } catch (error) {
-          console.error(error);
-        } finally {
-          this.isLoading = false;
+export default {
+  props: ["baseURL"],
+  data() {
+    return {
+      artistKeyword: "jay", // default val
+      artists: [], // Array to hold multiple artists
+      isLoading: false,
+    };
+  },
+  methods: {
+    async searchArtist() {
+      this.isLoading = true;
+      this.artists = []; // Reset the artists array for each new search
+      try {
+        console.log("this.artistKeyword = " + this.artistKeyword);
+        const response = await fetch(
+          `${this.baseURL}/search/artist/?keyword=${this.artistKeyword}`
+        );
+        if (!response.ok) {
+          throw new Error("Failed to search artist");
         }
-      },
+        const data = await response.json();
+        this.artists = data;
+        console.log("this.artists length =  ", this.artists.length);
+        console.log("this.artists =", JSON.stringify(this.artists));
+      } catch (error) {
+        console.error(error);
+      } finally {
+        this.isLoading = false;
+      }
     },
-  };
-  </script>
+  },
+};
+</script>
     
     <style scoped>
-  /* Main container and form styling */
-  .container {
-    max-width: 900px;
-    margin: 0 auto;
-  }
-  
-  .album-form {
-    margin-top: 30px;
-  }
-  
-  .form-label {
-    color: #fff;
-    font-size: 1.5rem;
-  }
-  
-  .form-control-lg {
-    font-size: 1.2rem;
-    border-radius: 10px;
-    padding: 10px;
-  }
-  
-  .album-details {
-    margin-top: 30px;
-  }
-  
-  .album-card {
-    background-color: #191414;
-    border-radius: 15px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
-  }
-  
-  .album-title {
-    font-family: "Roboto", sans-serif;
-    color: #1db954;
-    font-weight: 700;
-    font-size: 1.8rem;
-    text-align: center;
-    margin-bottom: 10px;
-  }
-  
-  /* Album image styling */
-  .album-cover {
-    max-width: 400px;
-    max-height: 400px;
-    object-fit: cover;
-    border-radius: 15px;
-    border: 4px solid #1db954;
-    margin-top: 10px;
-  }
-  
-  /* URL and button styling */
-  .album-url a {
-    font-size: 1.2rem;
-    color: #1db954;
-    text-decoration: none;
-  }
-  
-  .btn-outline-light {
-    border-color: #1db954;
-    color: #1db954;
-    font-size: 1.2rem;
-    font-weight: bold;
-  }
-  
-  .btn-outline-light:hover {
-    background-color: #1db954;
-    color: #191414;
-  }
-  
-  /* Track list styling */
-  .track-list ul {
-    list-style: none;
-    padding: 0;
-  }
-  
-  .track-list li {
-    margin-bottom: 10px;
-    font-size: 1.2rem;
-    color: #fff;
-  }
-  
-  .track-preview {
-    margin-top: 5px;
-  }
-  
-  .loading-text {
-    font-size: 1.5rem;
-    color: #686868;
-  }
-  </style>
\ No newline at end of file
+/* Main container and form styling */
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.album-form {
+  margin-top: 30px;
+}
+
+.form-label {
+  color: #fff;
+  font-size: 1.5rem;
+}
+
+.form-control-lg {
+  font-size: 1.2rem;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.album-details {
+  margin-top: 30px;
+}
+
+.album-card {
+  background-color: #191414;
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+}
+
+.album-title {
+  font-family: "Roboto", sans-serif;
+  color: #1db954;
+  font-weight: 700;
+  font-size: 1.8rem;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+/* Album image styling */
+.album-cover {
+  max-width: 400px;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 15px;
+  border: 4px solid #1db954;
+  margin-top: 10px;
+}
+
+/* URL and button styling */
+.album-url a {
+  font-size: 1.2rem;
+  color: #1db954;
+  text-decoration: none;
+}
+
+.btn-outline-light {
+  border-color: #1db954;
+  color: #1db954;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.btn-outline-light:hover {
+  background-color: #1db954;
+  color: #191414;
+}
+
+/* Track list styling */
+.track-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.track-list li {
+  margin-bottom: 10px;
+  font-size: 1.2rem;
+  color: #fff;
+}
+
+.track-preview {
+  margin-top: 5px;
+}
+
+.loading-text {
+  font-size: 1.5rem;
+  color: #686868;
+}
+</style>
\ No newline at end of file