diff --git a/public/index.html b/public/index.html
index 152f002..a63fb48 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,17 +3,40 @@
   <head>
     <meta charset="utf-8">
     <title>AthenaHacks Web Hackpack - ideaKeeper</title>
-    <link rel="stylesheet" href="/main.css">
+
+    <!-- googlefonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
+
+    <!-- bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+    <!-- stylesheet -->
+    <link rel="stylesheet" href="main.css">
+
   </head>
-  <body>
-    <h1>The Idea Keeper</h1>
-    <form name="ideaForm" action="/ideas" method="post">
-      <input type="test" name="idea" size="40" placeholder="Add an Idea">
-      <button type="submit">Submit</button>
-    </form>
+<body>
+<h1>The Idea Keeper</h1>
+<section>
+
+  <div class="container">
+    <div class="row">
+      <div  class="col col-lg-3 col-md-6 col-sm-12">
+        <form  name="ideaForm" action="/ideas" method="post">
+        <input class="input-group-text" id="inputGroup-sizing-sm" type="test" name="idea" size="40" placeholder="Add an Idea">
+        <button class="btn btn-primary btn-lg btn-dark"type="submit">Submit</button>
+        </form>
+
+        <ul></ul>
+
+        <script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>  
 
-    <ul></ul>
+      </div>
+    </div>
+  </div>
 
-    <script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>
+</section>
     </body>
 </html>
diff --git a/public/main.css b/public/main.css
index 4db6067..5a074c6 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,30 +1,33 @@
 body {
-  padding: 30px;
   background-color: #84888a;
-  font-family: Arial, sans-serif;
+  font-family: 'Montserrat', sans-serif;
   color: #fff;
+  text-align: center;
 }
 
-form {
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  max-width: 90%;
+h1{
+  padding: 7% 15%;
+  padding-bottom: 0px;
+  padding-top: 40px;
+  font-size: 3rem;
+  line-height: 1.5;
+  text-align: center;
 }
 
-input {
-  font-size: 1.2em;
-  padding: 5px;
-  margin-bottom: 10px;
+.container{
+  padding: 7% 15%;
+  padding-top: 50px;
+  padding-left: 350px;
+  text-align: center;
+  line-height: 5rem;   
 }
 
-button {
-  padding: 10px;
-  background-color: #0f5f74;
-  border: none;
-  color: #fff;
+#inputGroup-sizing-sm{
+  padding: 7% 15%;
+  text-align: center;
+  margin-right: 200px;
 }
 
-button:hover {
-  box-shadow: 3px 2px 3px #6a7988;
+.btn{
+  margin-left: 150px;
 }
