diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..1c2fda5
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..b08b5d5
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/music-collection.iml" filepath="$PROJECT_DIR$/.idea/music-collection.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/music-collection.iml b/.idea/music-collection.iml
new file mode 100644
index 0000000..0b872d8
--- /dev/null
+++ b/.idea/music-collection.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..8bc49dc
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..c8397c9
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index 225e495..0920f7f 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: 'standalone',
+  env: {
+    BACKEND_URL: process.env.BACKEND_URL || 'http://localhost:5000',
+  }
 };
 
 export default nextConfig;
diff --git a/frontend/package.json b/frontend/package.json
index eaffd52..c44bc9b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --port 5001 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint --fix",
diff --git a/frontend/src/app/actions.tsx b/frontend/src/app/actions.tsx
index 15d7bb3..295c06a 100644
--- a/frontend/src/app/actions.tsx
+++ b/frontend/src/app/actions.tsx
@@ -2,6 +2,8 @@
 
 import { revalidateTag } from 'next/cache'
 
+const backendUrl = process.env.BACKEND_URL;
+
 export async function revalidateAlbums() {
   revalidateTag('albums')
 }
@@ -19,7 +21,7 @@ export async function revalidateSong() {
 }
 
 export async function getAlbums() {
-  return fetch('https://api.anatid.net/album/', {
+  return fetch(`${backendUrl}/album/`, {
     method: "GET",
     headers: { "Content-Type": "application/json" },
     next: {
@@ -37,7 +39,7 @@ export async function getAlbums() {
 }
 
 export async function getAlbum(id: number) {
-  return fetch(`https://api.anatid.net/album/${id}`, {
+  return fetch(`${backendUrl}/album/${id}`, {
     method: "GET",
     headers: { "Content-Type": "application/json" },
     next: {
@@ -58,7 +60,7 @@ export async function createAlbum(formData: FormData) {
   const title = formData.get('title');
   const artist = formData.get('artist');
   const genre = formData.get('genre');
-  return fetch("https://api.anatid.net/album/", {
+  return fetch(`${backendUrl}/album/`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
@@ -81,7 +83,7 @@ export async function updateAlbum(formData: FormData) {
   const title = formData.get('title');
   const artist = formData.get('artist');
   const genre = formData.get('genre');
-  return fetch(`https://api.anatid.net/album/${id}`, {
+  return fetch(`${backendUrl}/album/${id}`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
@@ -101,7 +103,7 @@ export async function updateAlbum(formData: FormData) {
 }
 
 export async function deleteAlbum(id: number) {
-  return fetch(`https://api.anatid.net/album/${id}`, {
+  return fetch(`${backendUrl}/album/${id}`, {
     method: "DELETE",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
@@ -118,7 +120,7 @@ export async function deleteAlbum(id: number) {
 }
 
 export async function getSongs() {
-  return fetch("https://api.anatid.net/song/", {
+  return fetch(`${backendUrl}/song/`, {
     method: "GET",
     headers: { "Content-Type": "application/json" },
     next: {
@@ -136,7 +138,7 @@ export async function getSongs() {
 }
 
 export async function getSong(id: number) {
-  return fetch(`https://api.anatid.net/song/${id}`, {
+  return fetch(`${backendUrl}/song/${id}`, {
     method: "GET",
     headers: { "Content-Type": "application/json" },
     next: {
@@ -158,7 +160,7 @@ export async function createSong(formData: FormData) {
   const title = formData.get('title');
   const duration = Number(formData.get('duration'));
   const trackNumber = Number(formData.get('trackNumber'));
-  return fetch("https://api.anatid.net/song/", {
+  return fetch(`${backendUrl}/song/`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
@@ -183,7 +185,7 @@ export async function updateSong(formData: FormData) {
   const title = formData.get('title');
   const duration = Number(formData.get('duration'));
   const trackNumber = Number(formData.get('trackNumber'));
-  return fetch(`https://api.anatid.net/song/${id}`, {
+  return fetch(`${backendUrl}/song/${id}`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
@@ -204,7 +206,7 @@ export async function updateSong(formData: FormData) {
 }
 
 export async function deleteSong(id: number) {
-  return fetch(`https://api.anatid.net/song/${id}`, {
+  return fetch(`${backendUrl}/song/${id}`, {
     method: "DELETE",
     headers: { "Content-Type": "application/json" }
   }).then(response => {