diff --git a/src/API/api.ts b/src/API/api.ts
index 1571af4b..9b392da9 100644
--- a/src/API/api.ts
+++ b/src/API/api.ts
@@ -1,6 +1,8 @@
 import axios from "axios";
 import { IAdvertisement, IGenre, IPlaylist, ISong } from "../models/IModels";
 
+const localhost = process.env.REACT_APP_LOCALHOST || 'http://localhost:3000';
+
 export function getPlaylistsByGenre(genre: string, playlists: IPlaylist[]) {
     return playlists.filter((playlist: IPlaylist) => playlist.genres.includes(genre));
     
@@ -8,13 +10,12 @@ export function getPlaylistsByGenre(genre: string, playlists: IPlaylist[]) {
 
 export async function getPlaylists() {
     
-    return await axios.get<IPlaylist[]>('playlists');
+    return await axios.get<IPlaylist[]>(`${localhost}playlists`);
 
 }
-
 export async function getPlaylist(id: string) {
     
-    return await axios.get<IPlaylist[]>('http://localhost:3000/playlists/' + id);
+    return await axios.get<IPlaylist[]>(`${localhost}playlists/` + id);
 
 }
 
diff --git a/src/components/mainComponents/Header.tsx b/src/components/mainComponents/Header.tsx
index 6cffa39e..eeae08c3 100644
--- a/src/components/mainComponents/Header.tsx
+++ b/src/components/mainComponents/Header.tsx
@@ -4,7 +4,7 @@ import { UserOutlined } from '@ant-design/icons';
 
 export function Header() {
   return (
-    <div className="flex items-center justify-between p-4 border-b bg-gradient-to-bl from-red-800 to-red-600 border-solid border-2 border-slate-100">
+    <div className="flex items-center justify-between p-4 border-b bg-gradient-to-bl from-red-900 to-red-600 border-solid border-2 border-slate-100">
       <h1 className="text-3xl font-bold">😈 DEVIL music</h1>
       <Button href="/login" style={{ width: 30, height: 30 }}>
         <UserOutlined />