diff --git a/boredcareers/Pages/Index.razor b/boredcareers/Pages/Index.razor
index e32a7a6..f9420f0 100644
--- a/boredcareers/Pages/Index.razor
+++ b/boredcareers/Pages/Index.razor
@@ -1,2 +1,32 @@
 @page "/"
 
+<style>
+</style>
+
+<div id="PageFrame">
+
+    <div id="Header">
+        <div id="LoginButtons">
+            <button @onclick="LoginClick" class="LoginButton">Login</button>
+            <button @onclick="RegisterClick" class="LoginButton">Register</button>
+        </div>
+    </div>
+    <div id="Body">
+
+    </div>
+    <div id="Footer">
+
+    </div>
+</div>
+
+@code{
+    
+    void LoginClick(){
+
+    }
+
+    void RegisterClick(){
+
+    }
+
+}
\ No newline at end of file
diff --git a/boredcareers/wwwroot/css/site.css b/boredcareers/wwwroot/css/site.css
index 08e7f0b..8e020dc 100644
--- a/boredcareers/wwwroot/css/site.css
+++ b/boredcareers/wwwroot/css/site.css
@@ -1,3 +1,52 @@
+* {
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+#Header {
+    width: 100%;
+    height: 200px;
+    background-color: blue;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+}
+
+#LoginButtons {
+    width: 400px;
+    height: 100px;
+    background-color: #b32121;
+    margin-right: 50px;
+    display: flex;
+}
+
+.LoginButton {
+    width: 125px;
+    margin: 25px 0 25px 50px;
+    border-radius: 5px;
+    background-color: #aaa;
+    color: #000;
+    font-size: 20px;
+}
+
+    .LoginButton:hover {
+        background-color: #555;
+        color: #fff;
+    }
+
+#Body {
+    background-color: green;
+    min-height: calc( 100vh - 400px );
+}
+
+#Footer {
+    width: 100%;
+    height: 200px;
+    background-color: blue;
+}
+
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;