From a24ea523a8afb33aa573c9fe5005820f223254ca Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Mon, 16 Feb 2026 16:37:50 -0800
Subject: [PATCH] Start work on Styling

---
 WebServer/Components/Layout/MainLayout.razor  |  7 ++----
 .../Components/Layout/MainLayout.razor.css    |  2 +-
 WebServer/Components/Pages/Home.razor         | 21 +++++++++++++---
 WebServer/Components/Pages/Home.razor.css     | 25 +++++++++++++++++++
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 WebServer/Components/Pages/Home.razor.css

diff --git a/WebServer/Components/Layout/MainLayout.razor b/WebServer/Components/Layout/MainLayout.razor
index 6bcc486d..f86cd637 100644
--- a/WebServer/Components/Layout/MainLayout.razor
+++ b/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>
+        @Body
     </main>
 </div>
 
diff --git a/WebServer/Components/Layout/MainLayout.razor.css b/WebServer/Components/Layout/MainLayout.razor.css
index f29f3c3b..d490defa 100644
--- a/WebServer/Components/Layout/MainLayout.razor.css
+++ b/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;
diff --git a/WebServer/Components/Pages/Home.razor b/WebServer/Components/Pages/Home.razor
index 3ce6b4d2..4c54c54f 100644
--- a/WebServer/Components/Pages/Home.razor
+++ b/WebServer/Components/Pages/Home.razor
@@ -3,11 +3,24 @@
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
+<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>
 
-Welcome to your new app.
-
-<button @onclick="pullData">@buttonText</button>
+<div class="main-area">
+    <button @onclick="pullData">@buttonText</button>
+</div>
 
 
 @code {
diff --git a/WebServer/Components/Pages/Home.razor.css b/WebServer/Components/Pages/Home.razor.css
new file mode 100644
index 00000000..9d8e445d
--- /dev/null
+++ b/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);
+}
\ No newline at end of file