diff --git a/web/dashboard.templ b/web/dashboard.templ
index 67a20e7..a90ba4b 100644
--- a/web/dashboard.templ
+++ b/web/dashboard.templ
@@ -74,3 +74,9 @@ templ dashboard() {
         </div>
     </div>
 }
+
+templ new_transaction_pane() {
+    <div style="position: absolute; width: 500px; height: 500px" class="c-green">
+        
+    </div>
+}
diff --git a/web/data_endpoints.go b/web/data_endpoints.go
index 09024fb..72d5c7a 100644
--- a/web/data_endpoints.go
+++ b/web/data_endpoints.go
@@ -43,7 +43,7 @@ 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-- {
+	for i := 0; i < 20; i++ {
 		transaction := types.HumanLegibleTransaction{
 			Id:          i,
 			Amount:      fmt.Sprintf("%d.00", (i+1)*100),
@@ -55,12 +55,17 @@ func getTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request)
 			Date:        time.Now(),
 		}
 
-		transactions[20 - i] = transaction
+		transactions[i] = transaction
 	}
     component := transaction_quick_access_entries(&transactions);
     component.Render(context.Background(), w);
 }
 
+func getNewTransactionPane(w http.ResponseWriter, req *http.Request) {
+    component := new_transaction_pane();
+    component.Render(context.Background(), w);
+}
+
 func getRightPanelQuickAccess(w http.ResponseWriter, req *http.Request) {
     component := right_panel_quick_access();
     component.Render(context.Background(), w);
diff --git a/web/router.go b/web/router.go
index f476541..ebc083f 100644
--- a/web/router.go
+++ b/web/router.go
@@ -31,6 +31,7 @@ func WebRouter() http.Handler {
     r.Get("/transactions", getTransactionsPage)
 
     r.Get("/components/account_summaries", getAccountSummaries)
+    r.Get("/components/new_transaction_pane", getNewTransactionPane)
     r.Get("/components/right_panel_quick_access", getRightPanelQuickAccess)
 
     r.Get("/components/data/transaction_table_rows", getTransactionsRows)
@@ -107,5 +108,4 @@ func getTransactionsPage(w http.ResponseWriter, req *http.Request) {
     } else {
         renderFullPage(w, component, "Transactions")
     }
-
 }
diff --git a/web/sass/nav.scss b/web/sass/nav.scss
index 309f9d4..05ca35b 100644
--- a/web/sass/nav.scss
+++ b/web/sass/nav.scss
@@ -90,6 +90,7 @@ nav {
                 width: 50px;
                 display:flex;
                 z-index: 1;
+                cursor: pointer;
                 svg {
                     margin: auto;
                 }
diff --git a/web/sass/site.scss b/web/sass/site.scss
index 6ff8488..349c295 100644
--- a/web/sass/site.scss
+++ b/web/sass/site.scss
@@ -53,7 +53,7 @@ div#below-header {
 div#left-col {
     width: 15vw;
     padding: 10px;
-    background-color: var(--#{$prefix}-nav-base);
+    background-color: var(--#{$prefix}-nav-bg);
     border-radius: $border-radius;
 }
 
diff --git a/web/static/index.js b/web/static/index.js
index 23bfc11..4e4a3ab 100644
--- a/web/static/index.js
+++ b/web/static/index.js
@@ -1,4 +1,4 @@
-import {fill_charts, fill_chart} from "./chart_functions.js";
+import {fill_chart} from "./chart_functions.js";
 import {register_dropdowns} from "./dropdowns.js";
 
 
@@ -22,6 +22,10 @@ function switch_nav(event) {
     clicked.classList.add("active");
 }
 
+function open_drafts() {
+    console.log("Opening drafts panel");
+}
+
 function register_nav_links() {
     var navAnchors = document.querySelectorAll("nav a");
     navAnchors.forEach(function (a_el) {
@@ -35,6 +39,7 @@ function register_handlers() {
     register_nav_links();
     //fill_charts();
     register_dropdowns();
+    document.querySelector("#open-draft").addEventListener("click", open_drafts);
 }
 
 function load_in_table() {
@@ -47,14 +52,13 @@ function load_in_table() {
             if (index < rows.length - 1) {
                 processElement(rows[index + 1], index + 1);
             }
-        }, 25); // 1000 milliseconds (1 second) delay, adjust as needed
-};
+        }, 25);
+    };
 
     processElement(rows[0], 0);
 }
 
 const trigger_table_animation = debounce(load_in_table, 100);
-
 const trigger_reset_handlers = debounce(register_handlers, 200);
 
 export {trigger_reset_handlers, trigger_table_animation, fill_chart};
diff --git a/web/templates/index.html b/web/templates/index.html
index 81b90c2..afb9277 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -58,6 +58,7 @@
         <div id="right-col">
             <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);"
@@ -65,6 +66,7 @@
                         <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">
@@ -75,8 +77,14 @@
                 <div class="t-list">
                     <div class="tab-div">
                         <button id="open-draft">
-                            <i data-feather="file-plus"></i>
+                            <i  data-feather="file-plus"></i>
                         </button>
+                        <div 
+                            hx-get="/components/new_transaction_pane"
+                            hx-trigger="load"
+                            >
+
+                        </div>
                     </div>
                     <div 
                         class="t-list-container"
@@ -118,11 +126,7 @@
                 }
             });
             document.body.addEventListener('htmx:beforeSwap', function (event) {
-                // Get the target element where content will be replaced
-                var target = event.detail.target;
-
-                // Check if the target has Chart.js charts
-                var charts = target.querySelectorAll('.chartjs-chart');
+                var charts = event.detail.target.querySelectorAll('.chartjs-chart');
                 charts.forEach(function (chart) {
                     // Destroy each Chart.js chart before swapping content
                     Chart.getChart(chart).destroy();