Start work on Styling

WebServer/Components/Layout/MainLayout.razor

@@ -3,12 +3,9 @@
 <div class="page">
     <main>
         <div class="top-row px-4">
-            <h1>AI Stock Traider</h1>
+            <h1>AI Stock Trader</h1>
         </div>
-
-        <article class="content px-4">
         @Body
-        </article>
     </main>
 </div>
 

WebServer/Components/Layout/MainLayout.razor.css

@@ -15,7 +15,7 @@ main {
 .top-row {
     background-color: #f7f7f7;
     border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
+    justify-content: center;
     height: 3.5rem;
     display: flex;
     align-items: center;

WebServer/Components/Pages/Home.razor

@@ -3,11 +3,24 @@
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
+<div class="card-holder">
+    <a class="card">
+        HOME
+    </a>
+    <a class="card">
+        S&P Chart
+    </a>
+    <a class="card">
+        Connect
+    </a>
+    <a class="card">
+        About
+    </a>
+</div>
 
+<div class="main-area">
     <button @onclick="pullData">@buttonText</button>
+</div>
 
 
 @code {

WebServer/Components/Pages/Home.razor.css

@@ -0,0 +1,25 @@
+.card-holder {
+    display: flex;
+    float: left;
+    flex-direction: column;
+    background-color: red;
+    width: 300px;
+    height: calc(100vh - 3.5rem);
+}
+
+.card {
+    background-color: blue;
+    margin: 5px;
+    height: 45px;
+    color: white;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.main-area {
+    float: left;
+    background-color: aqua;
+    height: calc(100vh - 3.5rem);
+    width: calc(100vw - 300px);
+}