diff --git a/my-app/package-lock.json b/my-app/package-lock.json
index 8a80945f..2a307bf0 100644
--- a/my-app/package-lock.json
+++ b/my-app/package-lock.json
@@ -15,6 +15,9 @@
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "react-router-dom": "^6.16.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3445,6 +3448,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
+      "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
+      "dev": true,
+      "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",
@@ -14188,6 +14200,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
+      "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.9.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
+      "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.9.0",
+        "react-router": "6.16.0"
+      },
+      "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",
@@ -16186,16 +16230,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/my-app/package.json b/my-app/package.json
index a321edd6..d19f73a8 100644
--- a/my-app/package.json
+++ b/my-app/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-router-dom": "^6.16.0"
   }
 }
diff --git a/my-app/src/App.js b/my-app/src/App.js
index 17d90f06..ae8b01d5 100644
--- a/my-app/src/App.js
+++ b/my-app/src/App.js
@@ -2,11 +2,17 @@ import logo from "./logo.svg";
 import "./App.css";
 import Home from "./components/home/home";
 import Main from "./components/about/main";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 
 function App() {
   return (
     <div className="App">
-      <Main />
+      <Router>
+        <Routes>
+          <Route path="/main" element={<Main />} />
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </Router>
     </div>
   );
 }
diff --git a/my-app/src/components/about/main.css b/my-app/src/components/about/main.css
index dac64811..e1825661 100644
--- a/my-app/src/components/about/main.css
+++ b/my-app/src/components/about/main.css
@@ -77,11 +77,13 @@
 
 .buttonText {
   color: white;
+  background-color: rgba(255, 255, 255, 0);
   font-size: 18px;
   font-family: "Inter";
   font-weight: 600;
   line-height: 28px;
   word-wrap: break-word;
+  border: none;
 }
 
 .mainTitle {
diff --git a/my-app/src/components/about/main.js b/my-app/src/components/about/main.js
index 8406be42..9d73a085 100644
--- a/my-app/src/components/about/main.js
+++ b/my-app/src/components/about/main.js
@@ -5,13 +5,23 @@ import nytImage from "../../assets/nyt.png";
 import foxImage from "../../assets/fox.webp";
 import washingtonImage from "../../assets/washington.png";
 import cnnImage from "../../assets/CNN_International_logo.svg.png";
+import { inputValue } from "../home/home";
+import { Routes, Route, useNavigate, BrowserRouter } from "react-router-dom";
 
 const Main = () => {
+  const navigate = useNavigate();
+
+  const goHome = () => {
+    navigate("/");
+  };
+
   return (
     <>
       <div className="main">
         <div className="buttonContainer">
-          <div className="buttonText">Back</div>
+          <button className="buttonText" onClick={goHome}>
+            Back
+          </button>
         </div>
         <div className="mainTitle">Israel and Palestine Conflict</div>
         <div className="timelineContainer">
diff --git a/my-app/src/components/home/home.css b/my-app/src/components/home/home.css
index b3c63c41..e0482dcd 100644
--- a/my-app/src/components/home/home.css
+++ b/my-app/src/components/home/home.css
@@ -8,11 +8,11 @@
 
 .title {
   text-align: center;
-  margin-top: 30vh;
   font-family: Merriweather Sans;
   font-size: 70px;
   font-weight: 700;
   margin: 0 auto;
+  margin-top: 30vh;
 }
 
 .subtitle {
@@ -63,3 +63,8 @@
   height: 20px;
   width: 20px;
 }
+
+.p {
+  text-align: center;
+  color: rgb(40, 39, 39);
+}
diff --git a/my-app/src/components/home/home.js b/my-app/src/components/home/home.js
index 124a9142..41bb9706 100644
--- a/my-app/src/components/home/home.js
+++ b/my-app/src/components/home/home.js
@@ -2,34 +2,43 @@ import React from "react";
 import "./home.css";
 import { useState } from "react";
 import btn from "../../assets/Vectorinputicon.png";
+import { Routes, Route, useNavigate, BrowserRouter } from "react-router-dom";
+import Main from "../about/main";
 
 const Home = () => {
   const [inputValue, setInputValue] = useState("");
+  const navigate = useNavigate();
 
   const handleInputChange = (e) => {
     setInputValue(e.target.value);
   };
 
+  const goMain = () => {
+    navigate("/main");
+  };
+
   return (
-    <section>
-      <div className="title">SpectrumAI</div>
-      <div className="subtitle"> Experience multiple perspectives </div>
-      <div className="input">
-        <div className="inputBoxContainer">
-          <input
-            className="inputBox"
-            type="text"
-            value={inputValue}
-            onChange={handleInputChange}
-            placeholder="What do you want to know?"
-          />
-          <button className="inputBtn">
-            <img className="inputImg" alt="go" src={btn}></img>
-          </button>
+    <>
+      <section>
+        <div className="title">SpectrumAI</div>
+        <div className="subtitle"> Experience multiple perspectives </div>
+        <div className="input">
+          <div className="inputBoxContainer">
+            <input
+              className="inputBox"
+              type="text"
+              value={inputValue}
+              onChange={handleInputChange}
+              placeholder="What do you want to know?"
+            />
+            <button className="inputBtn" onClick={goMain}>
+              <img className="inputImg" alt="go" src={btn}></img>
+            </button>
+            <p className="p">Learn more about: {inputValue}</p>
+          </div>
         </div>
-        {/* <p>You typed: {inputValue}</p>*/} .
-      </div>
-    </section>
+      </section>
+    </>
   );
 };
 
diff --git a/my-app/src/index.js b/my-app/src/index.js
index e407cebb..770ee7d6 100644
--- a/my-app/src/index.js
+++ b/my-app/src/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './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'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
@@ -15,5 +15,3 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-
-