diff --git a/trivia-forge/.gitignore b/trivia-forge/.gitignore
index 8307a1e1..f9049f85 100644
--- a/trivia-forge/.gitignore
+++ b/trivia-forge/.gitignore
@@ -26,3 +26,4 @@ openai-env
 *.sln
 *.sw?
 .env
+__pycache__
diff --git a/trivia-forge/frontend/package-lock.json b/trivia-forge/frontend/package-lock.json
index 9870c8d2..807ff39f 100644
--- a/trivia-forge/frontend/package-lock.json
+++ b/trivia-forge/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.1.0",
         "react-router-dom": "^6.22.3"
       },
       "devDependencies": {
@@ -3909,6 +3910,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7436,6 +7445,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/trivia-forge/frontend/package.json b/trivia-forge/frontend/package.json
index 55d51e32..7c522d71 100644
--- a/trivia-forge/frontend/package.json
+++ b/trivia-forge/frontend/package.json
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
diff --git a/trivia-forge/frontend/src/App.css b/trivia-forge/frontend/src/App.css
index 6b5e1ce4..c576f960 100644
--- a/trivia-forge/frontend/src/App.css
+++ b/trivia-forge/frontend/src/App.css
@@ -51,3 +51,15 @@ footer{
   text-align: center;
   width: 100%;
 }
+
+.homepage-container .row {
+  justify-content: center;
+}
+
+.homepage-container .col {
+  margin: 10px;
+}
+
+.homepage-container .button {
+  background-color: #e0d6b7;
+}
\ No newline at end of file
diff --git a/trivia-forge/frontend/src/Pages/HomePage.jsx b/trivia-forge/frontend/src/Pages/HomePage.jsx
index bc71faf3..1a803fc8 100644
--- a/trivia-forge/frontend/src/Pages/HomePage.jsx
+++ b/trivia-forge/frontend/src/Pages/HomePage.jsx
@@ -1,59 +1,78 @@
 import React from "react";
 import { Button, Container, Row, Col} from 'react-bootstrap';
+import '../App.css';
+import { FaRegFolderOpen } from "react-icons/fa";
 
 function Home() {
     return (
-        <div id="test">
-            <h2 class="mt-5 mb-3">Customize Your Game!</h2>
-            <div class="container">
-                <div class="justify-content-center d-flex text-start">
-                    <form class="border rounded-4 p-5 col-5" id="customForm">
-                        <label class="form-label">Game Name</label>
-                        <input type="text" class="form-control" required></input>
-                        <label class="form-label mt-3">Catgeories</label>
-                        <div class="form-check">
-                            <input type="checkbox" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">History</label>
-                        </div>
-                        <div class="form-check">
-                            <input type="checkbox" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Science</label>
-                        </div>    
-                        <div class="form-check">
-                            <input type="checkbox" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Geography</label>
-                        </div>    
-                        <div class="form-check">
-                            <input type="checkbox" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Sports</label>
-                        </div>
-                        <div class="form-check">                
-                            <input type="checkbox" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Art and Literature</label>
-                        </div>
-                        <label class="form-label mt-3">Number of Questions</label>
-                        <input type="number" class="form-control" min="1"></input>
-                        <label class="form-label mt-3">Difficulty</label>
-                        <div class="form-check">
-                            <input type="radio" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Easy</label>
-                        </div>
-                        <div class="form-check">
-                            <input type="radio" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Medium</label>
-                        </div>    
-                        <div class="form-check mb-3">
-                            <input type="radio" class="form-check-input" name="category"></input>
-                            <label class="form-check-label" for="category">Hard</label>
-                        </div>
-                        <div class="text-center">        
-                            <button type="submit" class="btn btn-warning">Submit</button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
+        <Container className="homepage-container">
+            <Row>
+                <Col>
+                    <h1>Trivia Forge</h1>
+                </Col>
+            </Row>
+            <Row >
+                <Col>
+                    <Button variant="primary"> <FaRegFolderOpen /> My Trivia Games </Button>
+                </Col>
+            </Row>
+            <Row>
+                <Col>
+                    <Button variant="primary">Create New Game </Button>
+                </Col>
+            </Row>
+        </Container>
     );
+};
+export default Home;
 
-}
-export default Home;
\ No newline at end of file
+{/* // <div id="test">
+    //     <h2 class="mt-5 mb-3">Customize Your Game!</h2>
+    //     <div class="container">
+    //         <div class="justify-content-center d-flex text-start">
+    //             <form class="border rounded-4 p-5 col-5" id="customForm">
+    //                 <label class="form-label">Game Name</label>
+    //                 <input type="text" class="form-control" required></input>
+    //                 <label class="form-label mt-3">Catgeories</label>
+    //                 <div class="form-check">
+    //                     <input type="checkbox" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">History</label>
+    //                 </div>
+    //                 <div class="form-check">
+    //                     <input type="checkbox" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Science</label>
+    //                 </div>    
+    //                 <div class="form-check">
+    //                     <input type="checkbox" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Geography</label>
+    //                 </div>    
+    //                 <div class="form-check">
+    //                     <input type="checkbox" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Sports</label>
+    //                 </div>
+    //                 <div class="form-check">                
+    //                     <input type="checkbox" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Art and Literature</label>
+    //                 </div>
+    //                 <label class="form-label mt-3">Number of Questions</label>
+    //                 <input type="number" class="form-control" min="1"></input>
+    //                 <label class="form-label mt-3">Difficulty</label>
+    //                 <div class="form-check">
+    //                     <input type="radio" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Easy</label>
+    //                 </div>
+    //                 <div class="form-check">
+    //                     <input type="radio" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Medium</label>
+    //                 </div>    
+    //                 <div class="form-check mb-3">
+    //                     <input type="radio" class="form-check-input" name="category"></input>
+    //                     <label class="form-check-label" for="category">Hard</label>
+    //                 </div>
+    //                 <div class="text-center">        
+    //                     <button type="submit" class="btn btn-warning">Submit</button>
+    //                 </div>
+    //             </form>
+    //         </div>
+    //     </div>
+    // </div> */}
\ No newline at end of file