diff --git a/web/data_endpoints.go b/web/data_endpoints.go
index 000b63e..09024fb 100644
--- a/web/data_endpoints.go
+++ b/web/data_endpoints.go
@@ -39,10 +39,26 @@ func getTransactionsRows(w http.ResponseWriter, req *http.Request) {
     component.Render(context.Background(), w);
 }
 
-func getTransactionQuickAccess(w http.ResponseWriter, req *http.Request) {
-    component := transaction_quick_access();
-    component.Render(context.Background(), w);
+func getTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request) {
+    transactions := make([]types.HumanLegibleTransaction, 20)
 
+	// Populate the slice with dummy data (you can replace this with your actual data)
+	for i := 20; i > 0; i-- {
+		transaction := types.HumanLegibleTransaction{
+			Id:          i,
+			Amount:      fmt.Sprintf("%d.00", (i+1)*100),
+			Description: sql.NullString{String: fmt.Sprintf("Transaction %d", i+1), Valid: true},
+			AccountName: sql.NullString{String: "Savings", Valid: true},
+			Account:     123,
+			Bucket:      sql.NullInt64{Int64: int64(i + 100), Valid: true},
+			BucketName:  sql.NullString{String: fmt.Sprintf("Bucket %d", i+1), Valid: true},
+			Date:        time.Now(),
+		}
+
+		transactions[20 - i] = transaction
+	}
+    component := transaction_quick_access_entries(&transactions);
+    component.Render(context.Background(), w);
 }
 
 func getRightPanelQuickAccess(w http.ResponseWriter, req *http.Request) {
diff --git a/web/dataendpoints.templ b/web/dataendpoints.templ
index 7f0b519..6da9475 100644
--- a/web/dataendpoints.templ
+++ b/web/dataendpoints.templ
@@ -57,34 +57,31 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
     }
 }
 
-templ transaction_quick_access() {
-    <div id="transaction-quick-access-panel">
-        <div class="t-header">
-            <button
-                class="borderless-btn btn-sm mx-auto c-green ch-teal"
-                style="color: var(--pf-base);"
-            >
-                <i class="" data-feather="plus"></i>
-                Add New
-            </button>
-            <div class="m-auto d-flex">
-                <input id="show-pending-transactions" type="checkbox"></input>
-                <label for="show-pending-transactions">
-                    Show Pending
-                </label>
+templ transaction_quick_access_entries(transactions *[]types.HumanLegibleTransaction) {
+    for _, value := range *transactions {
+        <div class="card-item">
+            <div class="row">
+                <div class="w-50 d-flex">
+                    <span class="mx-auto">{strconv.Itoa(value.Id)}</span>
+                </div>
+                <div class="w-50 d-flex">
+                    if (len(value.Amount) > 0 && value.Amount[0] == '-') {
+                        <span class="mx-auto negative">{value.Amount}</span>
+                    } else {
+                        <span class="mx-auto positive">+{value.Amount}</span>
+                    }
+                </div>
+            </div>
+            <div class="row">
+                <div class="w-50 d-flex">
+                    <span class="mx-auto">{value.AccountName.String}</span>
+                </div>
+                <div class="w-50 d-flex">
+                    <span class="mx-auto c-surface0">Description</span>
+                </div>
             </div>
         </div>
-        <div class="t-list">
-            <div class="tab-div">
-                <button id="open-draft">
-                    <i data-feather="file-plus"></i>
-                </button>
-            </div>
-            <div class="t-list-container">
-
-            </div>
-        </div>
-    </div>
+    }
 }
 
 templ right_panel_quick_access() {
diff --git a/web/router.go b/web/router.go
index 96dddb1..f476541 100644
--- a/web/router.go
+++ b/web/router.go
@@ -31,12 +31,12 @@ func WebRouter() http.Handler {
     r.Get("/transactions", getTransactionsPage)
 
     r.Get("/components/account_summaries", getAccountSummaries)
-    r.Get("/components/transactions_quick_access", getTransactionQuickAccess)
     r.Get("/components/right_panel_quick_access", getRightPanelQuickAccess)
 
     r.Get("/components/data/transaction_table_rows", getTransactionsRows)
     r.Get("/components/data/expenditure_chart", getExpenditureChart)
     r.Get("/components/data/account_summary/{accountID}", getAccountSummaryChart)
+    r.Get("/components/data/transaction_quick_access", getTransactionQuickAccessEntries)
 
     r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static/"))))
 	return r
diff --git a/web/sass/nav.scss b/web/sass/nav.scss
index ef55521..309f9d4 100644
--- a/web/sass/nav.scss
+++ b/web/sass/nav.scss
@@ -49,9 +49,9 @@ nav {
 }
 
 #transaction-quick-access-panel {
-    height: 100%;
     display:flex;
     flex-direction: column;
+    height: 60%;
 
     .t-header {
         display: flex;
@@ -71,9 +71,7 @@ nav {
 
     .t-list {
         display: flex;
-        flex-grow: 1;
-        margin-left: 10px;
-        margin-right: 10px;
+        height: inherit;
         .tab-div {
             height: 100%;
             width: 50px;
@@ -100,12 +98,19 @@ nav {
         .t-list-container {
             overflow-y: scroll;
             border: 2px solid var(--#{$prefix}-surface1);
-            margin: 5px;
-            margin-left: 0px;
             background-color: var(--#{$prefix}-base);
-            height: 100%;
             flex-grow: 1;
             border-radius: $border-radius;
+            .card-item {
+                border-radius: $border-radius;
+                background-color: var(--#{$prefix}-surface0);
+                margin: 10px;
+                .row {
+                    width: 100%;
+                    padding-top: 5px;
+                    padding-bottom: 5px;
+                }
+            }
         }
     }
 }
diff --git a/web/sass/utility-classes.scss b/web/sass/utility-classes.scss
index d401d69..b63f626 100644
--- a/web/sass/utility-classes.scss
+++ b/web/sass/utility-classes.scss
@@ -49,17 +49,6 @@ $directions: (
         padding-bottom: $val;
     }
 }
-.m-auto {
-    margin: auto;
-}
-.my-auto {
-    margin-top: auto;
-    margin-bottom: auto;
-}
-.mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
 
 $w_h_sizes: (
   '25': 25%,
@@ -124,6 +113,13 @@ $w_h_sizes: (
     color: var(--#{$prefix}-text) !important;
 }
 
+.positive {
+    color: var(--#{$prefix}-green);
+}
+.negative {
+    color: var(--#{$prefix}-red);
+}
+
 .borderless-btn.btn-sm {
     padding: 4px 8px 4px 8px;
 }
@@ -184,12 +180,6 @@ table.table-striped {
             }
         }
     }
-    .positive {
-        color: var(--#{$prefix}-green);
-    }
-    .negative {
-        color: var(--#{$prefix}-red);
-    }
 }
 
 .popup-menu {
diff --git a/web/templates/index.html b/web/templates/index.html
index f4651c1..81b90c2 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -56,13 +56,38 @@
             {{.InnerHtml}}
         </div>
         <div id="right-col">
-            <div 
-                id="transactions-quick-access"
-                hx-get="/components/transactions_quick_access"
-                hx-swap="innerHtml swap:0.2s settle:0.2s"
-                hx-trigger="load"
-            >
+            <div id="transaction-quick-access-panel">
+                <div class="t-header">
+                    <button
+                        class="borderless-btn btn-sm mx-auto c-green ch-teal"
+                        style="color: var(--pf-base);"
+                    >
+                        <i class="" data-feather="plus"></i>
+                        Add New
+                    </button>
+                    <div class="m-auto d-flex">
+                        <input id="show-pending-transactions" type="checkbox"></input>
+                        <label for="show-pending-transactions">
+                            Show Pending
+                        </label>
+                    </div>
+                </div>
+                <div class="t-list">
+                    <div class="tab-div">
+                        <button id="open-draft">
+                            <i data-feather="file-plus"></i>
+                        </button>
+                    </div>
+                    <div 
+                        class="t-list-container"
+                        hx-get="/components/data/transaction_quick_access"
+                        hx-trigger="load"
+                    >
+
+                    </div>
+                </div>
             </div>
+            <div style="height: 25%"></div>
 
             <div 
                 class=""