diff --git a/public/favicon.png b/public/favicon.png
index 7e6f5eb..e6790eb 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/rollup.config.js b/rollup.config.js
index def6b78..026f5de 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -5,11 +5,13 @@ import terser from '@rollup/plugin-terser';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import css from 'rollup-plugin-css-only';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+import dotenv from 'dotenv';
+dotenv.config();
 
 const production = !process.env.ROLLUP_WATCH;
 
-console.log('Environment variables:', process.env);
-
 function serve() {
 	let server;
 
@@ -40,6 +42,11 @@ export default {
 		file: 'public/build/bundle.js'
 	},
 	plugins: [
+		json(),
+		replace({
+      'process.env.YOUTUBE_CLIENT_ID': JSON.stringify(process.env.YOUTUBE_CLIENT_ID),
+			'process.env.YOUTUBE_CLIENT_SECRET': JSON.stringify(process.env.YOUTUBE_CLIENT_SECRET),
+    }),
 		svelte({
 			compilerOptions: {
 				// enable run-time checks when not in production
diff --git a/src/YouTubeService.js b/src/YouTubeService.js
index 357aeb9..0668370 100644
--- a/src/YouTubeService.js
+++ b/src/YouTubeService.js
@@ -1,23 +1,16 @@
 class YouTubeService {
   constructor() {
+    this.clientId = process.env.YOUTUBE_CLIENT_ID
+    this.clientSecret = process.env.YOUTUBE_CLIENT_SECRET
     this.redirectUri = "http://localhost:3000";
     this.accessToken = localStorage.getItem("accessToken");
     this.refreshToken = localStorage.getItem("refreshToken");
     this.tokenExpiryTime = localStorage.getItem("tokenExpiryTime");
     this.logTokens(this.accessToken, this.refreshToken, this.tokenExpiryTime);
-    this.fetchClientInfo()
-  }
-
-  async fetchClientInfo() {
-    const fetchConfig = await fetch('/config.json');
-    const config = await fetchConfig.json();
-    this.clientId = config.clientId_youTube;
-    this.clientSecret = config.clientSecret_youTube;
   }
 
   // Exchange authorization code for access and refresh tokens
   async exchangeCodeForTokens(code) {
-    await this.fetchClientInfo();
     const response = await fetch("https://oauth2.googleapis.com/token", {
       method: "POST",
       headers: {