diff --git a/css/main.css b/css/main.css
index c38c201..d0466b5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -101,12 +101,21 @@ body {
   display: none;
   position: fixed;
   z-index: 1;
-  width: 100%;
-  height: 100%;
+  width: 80vw;
+  height: 80vh;
   overflow: auto;
-  background: #fff; }
+  background: #fff;
+  color: #212121;
+  padding: 15px; }
   .settings-modal .modal-content {
-    border: 1px solid red; }
+    width: 100%;
+    height: 100%; }
+  .settings-modal .settings-container .row {
+    padding: 15px 10px; }
+    .settings-modal .settings-container .row .col {
+      vertical-align: top;
+      display: inline-block;
+      padding: 10px 15px; }
   .settings-modal .close {
     color: #aaa;
     float: right;
diff --git a/index.html b/index.html
index 45be030..8990e9a 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,34 @@
     <div id="settings" class="settings-modal">
         <div class="modal-content">
             <span class="close">&times;</span>
-            <p>Testing</p>
+            <h2>Settings</h2>
+            <div class="settings-container">
+                <div class="row">
+                    <div class="col">
+                        Username <input type="text" id="username">
+                    </div>
+                    <div class="col">
+                        Search Engine
+                        <select id="search-engine">
+                            <option value="DuckDuckGo">DuckDuckGo</option>
+                            <option value="Google">Google</option>
+                            <option value="Bing">Bing</option>
+                            <option value="Yahoo">Yahoo</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <b>Hide</b> Welcome Message <input type="checkbox" id="disabel-message">
+                    </div>
+                    <div class="col">
+                        <b>Hide</b> date and time <input type="checkbox" id="disabel-date">
+                    </div>
+                    <div class="col">
+                        <b>Hide</b> Search Bar <input type="checkbox" id="disabel-bar">
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <div id="main" class="main">
diff --git a/scss/main.scss b/scss/main.scss
index bf985af..d2720fd 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -182,13 +182,27 @@ body {
     display: none;
     position: fixed;
     z-index: 1;
-    width: 100%;
-    height: 100%;
+    width: 80vw;
+    height: 80vh;
     overflow: auto;
     background: $foreground;
+    color: #212121;
+    padding: 15px;
 
     .modal-content {
-        border: 1px solid red;
+        width: 100%;
+        height: 100%;
+    }
+
+    .settings-container {
+        .row {
+            padding: 15px 10px;
+            .col {
+                vertical-align: top;
+                display: inline-block;
+                padding: 10px 15px;
+            }
+        }
     }
 
     .close {