diff --git a/package-lock.json b/package-lock.json
index 4da9873..e49abee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "axios": "^1.7.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.25.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3679,6 +3680,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
+      "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15625,6 +15635,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
+      "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.18.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz",
+      "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.18.0",
+        "react-router": "6.25.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 2557727..6a6d325 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.js b/src/App.js
index 9b462d8..b3cbfaa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,118 +1,142 @@
-import React, { useState, useEffect } from "react";
-import axios from "axios";
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Home from "./Home";
+import Playlist from "./Playlist";
 import Header from "./Header";
-import TextInput from "./TextInput";
-import Button from "./Button";
-import Rectangle1 from "./Rectangle1";
 import "./App.css";
 
 function App() {
-  const [description, setDescription] = useState("");
-  const [recommendations, setRecommendations] = useState([]);
-  const [spotifyLink, setSpotifyLink] = useState(null);
-  const [error, setError] = useState(null);
-  const [authorized, setAuthorized] = useState(true);
-  const [sessionId, setSessionId] = useState(null);
-  const [loading, setLoading] = useState(false);
+  return (
+    <Router>
+      <div className="App">
+        <Header />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/playlist" element={<Playlist />} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
 
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const sessionIdParam = urlParams.get("session_id");
-    if (sessionIdParam) {
-      setSessionId(sessionIdParam);
-    }
-  }, []);
+export default App;
 
-  const handleInputChange = (e) => {
-    setDescription(e.target.value);
-  };
+// import React, { useState, useEffect } from "react";
+// import axios from "axios";
+// import Header from "./Header";
+// // import Home from "./Home";
+// import TextInput from "./TextInput";
+// import Button from "./Button";
+// import Rectangle1 from "./Rectangle1";
+// import "./App.css";
 
-  const handleGetRecommendations = async () => {
-    setLoading(true);
-    try {
-      const response = await axios.post(
-        `http://localhost:5000/recommend`,
-        { description },
-        { params: { session_id: sessionId } }
-      );
-      if (response && response.data) {
-        if (response.data.authorized) {
-          setRecommendations(response.data.recommendation);
-          setSpotifyLink(response.data.spotify_link);
-          setError(null);
-          setAuthorized(true);
-        } else {
-          setAuthorized(false);
-        }
-      } else {
-        console.error("Unexpected response structure:", response);
-      }
-    } catch (error) {
-      console.error("Error fetching recommendation:", error);
-      setError("Error fetching recommendation. Please try again.");
-      if (error.response && error.response.status === 401) {
-        setAuthorized(false);
-      }
-    } finally {
-      setLoading(false); // End loading
-    }
-  };
+// function App() {
+//   const [description, setDescription] = useState("");
+//   const [recommendations, setRecommendations] = useState([]);
+//   const [spotifyLink, setSpotifyLink] = useState(null);
+//   const [error, setError] = useState(null);
+//   const [authorized, setAuthorized] = useState(true);
+//   const [sessionId, setSessionId] = useState(null);
+//   const [loading, setLoading] = useState(false);
 
-  return (
-    <div className="App">
-      <Header />
-      <Rectangle1
-        title="Mood Melody"
-        description="Discover music that fits your mood. + add description"
-      />
+//   useEffect(() => {
+//     const urlParams = new URLSearchParams(window.location.search);
+//     const sessionIdParam = urlParams.get("session_id");
+//     if (sessionIdParam) {
+//       setSessionId(sessionIdParam);
+//     }
+//   }, []);
 
-      <TextInput
-        value={description}
-        onChange={handleInputChange}
-        placeholder="Enter the desired song qualities or mood..."
-      />
-      <br />
-      <Button
-        type="button"
-        label={loading ? "Loading..." : "Get Recommendations"}
-        onClick={handleGetRecommendations}
-        disabled={loading}
-      />
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      {!authorized && (
-        <div>
-          <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
-          <Button
-            type="button"
-            label="Authorize"
-            onClick={() =>
-              (window.location.href = "http://localhost:5000/auth/login")
-            }
-          />
-        </div>
-      )}
-      {authorized && recommendations.length > 0 && (
-        <div>
-          <h2>Recommendations</h2>
-          <ul>
-            {recommendations.map((rec, index) => (
-              <li key={index}>{rec}</li>
-            ))}
-          </ul>
-          {spotifyLink && (
-            <div>
-              <h2>Spotify Playlist</h2>
-              <p>
-                <a href={spotifyLink} target="_blank" rel="noopener noreferrer">
-                  Open Playlist on Spotify
-                </a>
-              </p>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
+//   const handleInputChange = (e) => {
+//     setDescription(e.target.value);
+//   };
 
-export default App;
+//   const handleGetRecommendations = async () => {
+//     setLoading(true);
+//     try {
+//       const response = await axios.post(
+//         `http://127.0.0.1:5000/recommend`,
+//         { description },
+//         { params: { session_id: sessionId } }
+//       );
+//       if (response && response.data) {
+//         if (response.data.authorized) {
+//           setRecommendations(response.data.recommendation);
+//           setSpotifyLink(response.data.spotify_link);
+//           setError(null);
+//           setAuthorized(true);
+//         } else {
+//           setAuthorized(false);
+//         }
+//       } else {
+//         console.error("Unexpected response structure:", response);
+//       }
+//     } catch (error) {
+//       console.error("Error fetching recommendation:", error);
+//       setError("Error fetching recommendation. Please try again.");
+//       if (error.response && error.response.status === 401) {
+//         setAuthorized(false);
+//       }
+//     } finally {
+//       setLoading(false); // End loading
+//     }
+//   };
+
+//   return (
+//     <div className="App">
+//       <Header />
+//       <Rectangle1
+//         title="Mood Melody"
+//         description="Discover music that fits your mood. + add description"
+//       />
+
+//       <TextInput
+//         value={description}
+//         onChange={handleInputChange}
+//         placeholder="Enter the desired song qualities or mood..."
+//       />
+//       <br />
+//       <Button
+//         type="button"
+//         label={loading ? "Loading..." : "Get Recommendations"}
+//         onClick={handleGetRecommendations}
+//         disabled={loading}
+//       />
+//       {error && <p style={{ color: "red" }}>{error}</p>}
+//       {!authorized && (
+//         <div>
+//           <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
+//           <Button
+//             type="button"
+//             label="Authorize"
+//             onClick={() =>
+//               (window.location.href = "http://127.0.0.1:5000/auth/login")
+//             }
+//           />
+//         </div>
+//       )}
+//       {authorized && recommendations.length > 0 && (
+//         <div>
+//           <h2>Recommendations</h2>
+//           <ul>
+//             {recommendations.map((rec, index) => (
+//               <li key={index}>{rec}</li>
+//             ))}
+//           </ul>
+//           {spotifyLink && (
+//             <div>
+//               <h2>Spotify Playlist</h2>
+//               <p>
+//                 <a href={spotifyLink} target="_blank" rel="noopener noreferrer">
+//                   Open Playlist on Spotify
+//                 </a>
+//               </p>
+//             </div>
+//           )}
+//         </div>
+//       )}
+//     </div>
+//   );
+// }
+
+// export default App;
diff --git a/src/Header.js b/src/Header.js
index 8a9f9c0..15fe5e7 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -15,3 +15,21 @@ function Header() {
 }
 
 export default Header;
+
+// import React from "react";
+// import "./Header.css";
+
+// function Header() {
+//   return (
+//     <header className="header">
+//       <img
+//         src="/images/moodMelody_logo.jpg"
+//         alt="Mood Melody logo"
+//         style={{ height: "50px", width: "auto" }}
+//       />
+//       <h1>Mood Melody</h1>
+//     </header>
+//   );
+// }
+
+// export default Header;
diff --git a/src/Home.js b/src/Home.js
new file mode 100644
index 0000000..dd5abb5
--- /dev/null
+++ b/src/Home.js
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import TextInput from "./TextInput";
+import Button from "./Button";
+import Rectangle1 from "./Rectangle1";
+import { useNavigate } from "react-router-dom";
+
+const Home = () => {
+  const [description, setDescription] = useState("");
+  const [sessionId, setSessionId] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [authorized, setAuthorized] = useState(true);
+  const [recommendations, setRecommendations] = useState([]);
+  const [spotifyLink, setSpotifyLink] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const sessionIdParam = urlParams.get("session_id");
+    if (sessionIdParam) {
+      setSessionId(sessionIdParam);
+    }
+  }, []);
+
+  const handleInputChange = (e) => {
+    setDescription(e.target.value);
+  };
+
+  const handleGetRecommendations = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.post(
+        `http://127.0.0.1:5000/recommend`,
+        { description },
+        { params: { session_id: sessionId } }
+      );
+      if (response && response.data) {
+        if (response.data.authorized) {
+          setRecommendations(response.data.recommendation);
+          setSpotifyLink(response.data.spotify_link);
+          setError(null);
+          setAuthorized(true);
+          navigate("/playlist", {
+            state: {
+              recommendations: response.data.recommendation,
+              spotifyLink: response.data.spotify_link,
+            },
+          });
+        } else {
+          setAuthorized(false);
+        }
+      } else {
+        console.error("Unexpected response structure:", response);
+      }
+    } catch (error) {
+      console.error("Error fetching recommendation:", error);
+      setError("Error fetching recommendation. Please try again.");
+      if (error.response && error.response.status === 401) {
+        setAuthorized(false);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <Rectangle1
+        title="Mood Melody"
+        description="Discover music that fits your mood. + add description"
+      />
+      <TextInput
+        value={description}
+        onChange={handleInputChange}
+        placeholder="Enter the desired song qualities or mood..."
+      />
+      <br />
+      <Button
+        type="button"
+        label={loading ? "Loading..." : "Get Recommendations"}
+        onClick={handleGetRecommendations}
+        disabled={loading}
+      />
+      {error && <p style={{ color: "red" }}>{error}</p>}
+      {!authorized && (
+        <div>
+          <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
+          <Button
+            type="button"
+            label="Authorize"
+            onClick={() =>
+              (window.location.href = "http://127.0.0.1:5000/auth/login")
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Home;
+
+// import React, { useState, useEffect } from "react";
+// import axios from "axios";
+// import TextInput from "./TextInput";
+// import Button from "./Button";
+// import Rectangle1 from "./Rectangle1";
+// import { useNavigate } from "react-router-dom";
+
+// const Home = () => {
+//   const [description, setDescription] = useState("");
+//   const [sessionId, setSessionId] = useState(null);
+//   const [loading, setLoading] = useState(false);
+//   const [error, setError] = useState(null);
+//   const [authorized, setAuthorized] = useState(true);
+//   const [recommendations, setRecommendations] = useState([]);
+//   const [spotifyLink, setSpotifyLink] = useState(null);
+//   const navigate = useNavigate();
+
+//   useEffect(() => {
+//     const urlParams = new URLSearchParams(window.location.search);
+//     const sessionIdParam = urlParams.get("session_id");
+//     if (sessionIdParam) {
+//       setSessionId(sessionIdParam);
+//     }
+//   }, []);
+
+//   const handleInputChange = (e) => {
+//     setDescription(e.target.value);
+//   };
+
+//   const handleGetRecommendations = async () => {
+//     setLoading(true);
+//     try {
+//       const response = await axios.post(
+//         `http://127.0.0.1:5000/recommend`,
+//         { description },
+//         { params: { session_id: sessionId } }
+//       );
+//       if (response && response.data) {
+//         if (response.data.authorized) {
+//           setRecommendations(response.data.recommendation);
+//           setSpotifyLink(response.data.spotify_link);
+//           setError(null);
+//           setAuthorized(true);
+//           // Navigate to Playlist page with recommendations and Spotify link
+//           navigate("/playlist", {
+//             state: {
+//               recommendations: response.data.recommendation,
+//               spotifyLink: response.data.spotify_link,
+//             },
+//           });
+//         } else {
+//           setAuthorized(false);
+//         }
+//       } else {
+//         console.error("Unexpected response structure:", response);
+//       }
+//     } catch (error) {
+//       console.error("Error fetching recommendation:", error);
+//       setError("Error fetching recommendation. Please try again.");
+//       if (error.response && error.response.status === 401) {
+//         setAuthorized(false);
+//       }
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   return (
+//     <div>
+//       <Rectangle1
+//         title="Mood Melody"
+//         description="Discover music that fits your mood. + add description"
+//       />
+//       <TextInput
+//         value={description}
+//         onChange={handleInputChange}
+//         placeholder="Enter the desired song qualities or mood..."
+//       />
+//       <br />
+//       <Button
+//         type="button"
+//         label={loading ? "Loading..." : "Get Recommendations"}
+//         onClick={handleGetRecommendations}
+//         disabled={loading}
+//       />
+//       {error && <p style={{ color: "red" }}>{error}</p>}
+//       {!authorized && (
+//         <div>
+//           <p style={{ color: "red" }}>You are not authorized in Spotify.</p>
+//           <Button
+//             type="button"
+//             label="Authorize"
+//             onClick={() =>
+//               (window.location.href = "http://127.0.0.1:5000/auth/login")
+//             }
+//           />
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default Home;
diff --git a/src/Playlist.js b/src/Playlist.js
new file mode 100644
index 0000000..729ff97
--- /dev/null
+++ b/src/Playlist.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+
+const Playlist = () => {
+  const location = useLocation();
+  const { recommendations, spotifyLink } = location.state || {
+    recommendations: [],
+    spotifyLink: null,
+  };
+
+  return (
+    <div>
+      <h2>Recommendations</h2>
+      <ul>
+        {recommendations.map((rec, index) => (
+          <li key={index}>{rec}</li>
+        ))}
+      </ul>
+      {spotifyLink && (
+        <div>
+          <h2>Spotify Playlist</h2>
+          <p>
+            <a href={spotifyLink} target="_blank" rel="noopener noreferrer">
+              Open Playlist on Spotify
+            </a>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Playlist;
+
+// import React from "react";
+// import { useLocation } from "react-router-dom";
+
+// const Playlist = () => {
+//   const location = useLocation();
+//   const { recommendations, spotifyLink } = location.state || {
+//     recommendations: [],
+//     spotifyLink: null,
+//   };
+
+//   return (
+//     <div>
+//       {recommendations.length > 0 && (
+//         <div>
+//           <h2>Recommendations</h2>
+//           <ul>
+//             {recommendations.map((rec, index) => (
+//               <li key={index}>{rec}</li>
+//             ))}
+//           </ul>
+//           {spotifyLink && (
+//             <div>
+//               <h2>Spotify Playlist</h2>
+//               <p>
+//                 <a href={spotifyLink} target="_blank" rel="noopener noreferrer">
+//                   Open Playlist on Spotify
+//                 </a>
+//               </p>
+//             </div>
+//           )}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default Playlist;
diff --git a/src/index.js b/src/index.js
index 770ee7d..2f96464 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -11,7 +10,20 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// import React from "react";
+// import ReactDOM from "react-dom/client";
+// import "./index.css";
+// import App from "./App";
+// import reportWebVitals from "./reportWebVitals";
+
+// const root = ReactDOM.createRoot(document.getElementById("root"));
+// root.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>
+// );
+
+// // If you want to start measuring performance in your app, pass a function
+// // to log results (for example: reportWebVitals(console.log))
+// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();