diff --git a/firebase.json b/firebase.json
index f475554..319edfb 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,10 +1,12 @@
 {
   "hosting": {
     "public": "build",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ]
-  }
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+  },
+  "rewrites": [
+    {
+      "source": "**",
+      "destination": "/index.html"
+    }
+  ]
 }
diff --git a/src/App.js b/src/App.js
index 10ba7d4..d06bdbc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,103 +1,17 @@
-import { useState } from "react";
-import { TypeAnimation } from "react-type-animation";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { TTS_API } from "./api";
 
 import "./App.css";
+import Home from "./components/Home";
 import Form from "./components/Form";
 
 function App() {
-  const [flag, setFlag] = useState(false);
-  const [name, setName] = useState("");
-  const [isSubmit, setIsSubmit] = useState(false);
-  const handleButtonClick = async () => {
-    try {
-      const response = await TTS_API.brianTTS(
-        `Hello, ${name}! Welcome to our website. We're glad to have you here.`
-      );
-      if (response.status !== 200) {
-        const errorText = await response.text();
-        alert(errorText);
-        return;
-      }
-      const mp3 = await response.blob();
-      const blobUrl = URL.createObjectURL(mp3);
-      const audio = new Audio(blobUrl);
-      audio.pause();
-      audio.load();
-      audio.play();
-    } catch (error) {
-      console.error("An error occurred:", error);
-    }
-  };
   return (
     <div className="App">
       <BrowserRouter>
         <Routes>
+          <Route path="/" element={<Home />} />
           <Route path="/form" element={<Form />} />
         </Routes>
-        <div className="head">
-          <div>
-            {flag ? (
-              <div>Hello World!👋</div>
-            ) : (
-              <TypeAnimation
-                cursor={false}
-                sequence={[
-                  `Hello World!👋`,
-                  1000,
-                  () => {
-                    setFlag(true);
-                  },
-                ]}
-                speed={10}
-              />
-            )}
-          </div>
-        </div>
-        <div className="middle">
-          <div>
-            {flag ? (
-              <>
-                <div>Hi there!👀 What's your name?</div>
-                <input
-                  className="name-field"
-                  value={name}
-                  onChange={(e) => {
-                    setName(e.target.value);
-                    setIsSubmit(false);
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      setIsSubmit(true);
-                      handleButtonClick();
-                    }
-                  }}
-                ></input>
-              </>
-            ) : (
-              <></>
-            )}
-          </div>
-        </div>
-        <div className="body">
-          {isSubmit ? (
-            <div className="body-text">
-              <TypeAnimation
-                sequence={[
-                  `Hello, ${name}! Welcome to our website. We're glad to have you here.`,
-                  1000,
-                  () => {
-                    setFlag(true);
-                  },
-                ]}
-                speed={20}
-              ></TypeAnimation>
-            </div>
-          ) : (
-            <></>
-          )}
-        </div>
       </BrowserRouter>
     </div>
   );
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..2ab19ad
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { TypeAnimation } from "react-type-animation";
+import { TTS_API } from "../api";
+
+import "../App.css";
+
+function Home() {
+  const [flag, setFlag] = useState(false);
+  const [name, setName] = useState("");
+  const [isSubmit, setIsSubmit] = useState(false);
+  const handleButtonClick = async () => {
+    try {
+      const response = await TTS_API.brianTTS(
+        `Hello, ${name}! Welcome to our website. We're glad to have you here.`
+      );
+      if (response.status !== 200) {
+        const errorText = await response.text();
+        alert(errorText);
+        return;
+      }
+      const mp3 = await response.blob();
+      const blobUrl = URL.createObjectURL(mp3);
+      const audio = new Audio(blobUrl);
+      audio.pause();
+      audio.load();
+      audio.play();
+    } catch (error) {
+      console.error("An error occurred:", error);
+    }
+  };
+  return (
+    <>
+      <div className="head">
+        <div>
+          {flag ? (
+            <div>Hello World!👋</div>
+          ) : (
+            <TypeAnimation
+              cursor={false}
+              sequence={[
+                `Hello World!👋`,
+                1000,
+                () => {
+                  setFlag(true);
+                },
+              ]}
+              speed={10}
+            />
+          )}
+        </div>
+      </div>
+      <div className="middle">
+        <div>
+          {flag ? (
+            <>
+              <div>Hi there!👀 What's your name?</div>
+              <input
+                className="name-field"
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                  setIsSubmit(false);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    setIsSubmit(true);
+                    handleButtonClick();
+                  }
+                }}
+              ></input>
+            </>
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+      <div className="body">
+        {isSubmit ? (
+          <div className="body-text">
+            <TypeAnimation
+              sequence={[
+                `Hello, ${name}! Welcome to our website. We're glad to have you here.`,
+                1000,
+                () => {
+                  setFlag(true);
+                },
+              ]}
+              speed={20}
+            ></TypeAnimation>
+          </div>
+        ) : (
+          <></>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Home;