diff --git a/datafetcher/functions/functions.go b/datafetcher/functions/functions.go
index c9fcb69..aaf2377 100644
--- a/datafetcher/functions/functions.go
+++ b/datafetcher/functions/functions.go
@@ -1,6 +1,78 @@
 package functions
 
+import (
+	"fmt"
+	"log"
+	"net/url"
+	"os"
+	"strconv"
+	"time"
+)
+
 const (
 	AccountIdQueryParam      = "accountId"
 	TransactionNumQueryParam = "numTransactions"
+	StartDateParam           = "startDate"
+	EndDateParam             = "endDate"
 )
+
+// QueryParams struct to hold the query parameters
+type QueryParams struct {
+	AccountID       *string
+	NumTransactions *int32
+	StartDate       *time.Time
+	EndDate         *time.Time
+}
+
+func (q *QueryParams) String() string {
+	return fmt.Sprintf("QueryParams{AccountID: %s, NumTransactions: %d, StartDate: %s, EndDate: %s}", *q.AccountID, *q.NumTransactions, *q.StartDate, *q.EndDate)
+}
+
+// FetchQueryParams extracts query parameters from the url.Values map
+func FetchQueryParams(queryParams url.Values) *QueryParams {
+	params := &QueryParams{}
+	defaultTransactions := int32(20)
+	params.NumTransactions = &defaultTransactions
+	logger := log.New(os.Stdout, "query params:", log.Default().Flags())
+
+	// Fetch "accountId"
+	if accountID := queryParams.Get(AccountIdQueryParam); accountID != "" {
+		params.AccountID = &accountID
+	}
+
+	// Fetch "numTransactions"
+	if numTransactions := queryParams.Get(TransactionNumQueryParam); numTransactions != "" {
+		if num, err := strconv.Atoi(numTransactions); err == nil {
+			myInt := int32(num)
+			params.NumTransactions = &myInt
+		}
+	}
+
+	// Fetch "startDate"
+	if startDate := queryParams.Get(StartDateParam); startDate != "" {
+		log.Println(fmt.Sprintf("Start date is %s", startDate))
+		timeStartDate, err := time.Parse(time.RFC3339, startDate)
+		if err == nil {
+			params.StartDate = &timeStartDate
+		}
+		log.Println(fmt.Sprintf("Parsed date is %s", timeStartDate))
+		log.Println(fmt.Sprintf("Error in parsing date is %s", err))
+	}
+
+	// Fetch "endDate"
+	if endDate := queryParams.Get(EndDateParam); endDate != "" {
+		timeEndDate, err := time.Parse(time.RFC3339, endDate)
+		if err == nil {
+			params.EndDate = &timeEndDate
+		}
+	}
+
+	if params.StartDate != nil && params.EndDate != nil {
+		maxTransactions := int32(10000)
+		params.NumTransactions = &maxTransactions
+	}
+
+	logger.Println(fmt.Sprintf("query params are: %v", params))
+
+	return params
+}
diff --git a/datafetcher/handlers/transactions-csv.go b/datafetcher/handlers/transactions-csv.go
index 1f16384..b3eddc3 100644
--- a/datafetcher/handlers/transactions-csv.go
+++ b/datafetcher/handlers/transactions-csv.go
@@ -7,14 +7,16 @@ import (
 	"log"
 	"net/http"
 
+	"github.com/esteanes/expense-manager/datafetcher/functions"
 	"github.com/esteanes/expense-manager/datafetcher/upclient"
 )
 
 type TransactionsCsvHandler struct {
 	*BaseHandler
+	*TransactionsHandler
 }
 
-func NewTransactionCsvHandler(log *log.Logger, upclient *upclient.APIClient, auth context.Context) *TransactionsCsvHandler {
+func NewTransactionCsvHandler(log *log.Logger, upclient *upclient.APIClient, auth context.Context, transactionsHandler *TransactionsHandler) *TransactionsCsvHandler {
 	handler := &TransactionsCsvHandler{}
 	handler.BaseHandler = &BaseHandler{
 		Uri:      "/transactions-csv",
@@ -22,40 +24,46 @@ func NewTransactionCsvHandler(log *log.Logger, upclient *upclient.APIClient, aut
 		UpClient: upclient,
 		UpAuth:   auth,
 		Handler:  handler}
+	handler.TransactionsHandler = transactionsHandler
 	return handler
 }
 
 func (h *TransactionsCsvHandler) Post(w http.ResponseWriter, r *http.Request) {}
 func (h *TransactionsCsvHandler) Get(w http.ResponseWriter, r *http.Request) {
+	queryParams := functions.FetchQueryParams(r.URL.Query())
 	w.Header().Set("Content-Type", "text/csv")
 	w.Header().Set("Content-Disposition", "attachment;filename=transactions.csv")
 	csvWriter := csv.NewWriter(w)
-	pageSize := int32(30) // int32 | The number of records to return in each page.  (optional)
-	resp2, _, _ := h.UpClient.TransactionsAPI.TransactionsGet(h.UpAuth).PageSize(pageSize).Execute()
+	transactionsChannel := make(chan upclient.TransactionResource, *queryParams.NumTransactions)
+	if queryParams.AccountID == nil {
+		go h.getTransactionsForAllAccounts(transactionsChannel, queryParams)
+	} else {
+		go h.getTransactionsForSpecifiedAccount(transactionsChannel, queryParams)
 
-	header := []string{"Transaction Description", "Amount", "Date"}
+		header := []string{"Transaction Description", "Amount", "Date"}
 
-	h.Log.Printf("trying to generate a CSV")
-	// Print the JSON-formatted response
-	if err := csvWriter.Write(header); err != nil {
-		http.Error(w, "Error writing CSV header", http.StatusInternalServerError)
-		return
-	}
-	for _, transaction := range resp2.Data {
-		record := []string{
-			transaction.Attributes.Description,
-			transaction.Attributes.Amount.Value,
-			transaction.Attributes.CreatedAt.String(),
-		}
-		if err := csvWriter.Write(record); err != nil {
-			fmt.Fprintf(w, "Error writing CSV line %v\n", err)
+		h.Log.Printf("trying to generate a CSV")
+		// Print the JSON-formatted response
+		if err := csvWriter.Write(header); err != nil {
+			http.Error(w, "Error writing CSV header", http.StatusInternalServerError)
 			return
 		}
-	}
+		for transaction := range transactionsChannel {
+			record := []string{
+				transaction.Attributes.Description,
+				transaction.Attributes.Amount.Value,
+				transaction.Attributes.CreatedAt.String(),
+			}
+			if err := csvWriter.Write(record); err != nil {
+				fmt.Fprintf(w, "Error writing CSV line %v\n", err)
+				return
+			}
+		}
 
-	csvWriter.Flush()
+		csvWriter.Flush()
 
-	if err := csvWriter.Error(); err != nil {
-		fmt.Fprintf(w, "Error flushing CSV writer: %v\n", err)
+		if err := csvWriter.Error(); err != nil {
+			fmt.Fprintf(w, "Error flushing CSV writer: %v\n", err)
+		}
 	}
 }
diff --git a/datafetcher/handlers/transactions.go b/datafetcher/handlers/transactions.go
index 5316df3..98c8c54 100644
--- a/datafetcher/handlers/transactions.go
+++ b/datafetcher/handlers/transactions.go
@@ -6,7 +6,6 @@ import (
 	"log"
 	"net/http"
 	"net/url"
-	"strconv"
 
 	"github.com/a-h/templ"
 	"github.com/esteanes/expense-manager/datafetcher/functions"
@@ -35,30 +34,33 @@ func NewTransactionHandler(log *log.Logger, upclient *upclient.APIClient, auth c
 
 func (h *TransactionsHandler) Post(w http.ResponseWriter, r *http.Request) {}
 func (h *TransactionsHandler) Get(w http.ResponseWriter, r *http.Request) {
-	queryParams := r.URL.Query()
-	numTransactions, err := strconv.ParseInt(queryParams.Get(functions.TransactionNumQueryParam), 10, 32)
-	if err != nil {
-		numTransactions = int64(10)
-	}
-	transactionsChannel := make(chan upclient.TransactionResource, numTransactions)
-	accountId := queryParams.Get(functions.AccountIdQueryParam)
-	if accountId == "" {
-		go h.getTransactionsForAllAccounts(transactionsChannel, int32(numTransactions))
+	queryParams := functions.FetchQueryParams(r.URL.Query())
+	transactionsChannel := make(chan upclient.TransactionResource, *queryParams.NumTransactions)
+	if queryParams.AccountID == nil {
+		go h.getTransactionsForAllAccounts(transactionsChannel, queryParams)
 	} else {
-		go h.getTransactionsForSpecifiedAccount(transactionsChannel, int32(numTransactions), accountId)
+		go h.getTransactionsForSpecifiedAccount(transactionsChannel, queryParams)
 	}
 	accountsChannel := make(chan upclient.AccountResource)
 	go h.AccountHandler.GetAccounts(accountsChannel, upclient.OwnershipTypeEnum("INDIVIDUAL"))
-	templ.Handler(templates.Transactions("Transactions", transactionsChannel, accountsChannel, strconv.Itoa(int(numTransactions))), templ.WithStreaming()).ServeHTTP(w, r)
+	templ.Handler(templates.Transactions("Transactions", transactionsChannel, accountsChannel, queryParams), templ.WithStreaming()).ServeHTTP(w, r)
 
 }
-func (h *TransactionsHandler) getTransactionsForAllAccounts(transactionsChannel chan upclient.TransactionResource, numTransactions int32) {
+func (h *TransactionsHandler) getTransactionsForAllAccounts(transactionsChannel chan upclient.TransactionResource, queryParams *functions.QueryParams) {
 	defer close(transactionsChannel)
 	getRequest := h.UpClient.TransactionsAPI.TransactionsGet(h.UpAuth).PageSize(h.MaxPageSize)
+
+	if queryParams.StartDate != nil {
+		getRequest.FilterSince(*queryParams.StartDate)
+	}
+	if queryParams.EndDate != nil {
+		getRequest.FilterUntil(*queryParams.EndDate)
+	}
+
 	var pageAfter *string
 	pageAfter = nil
 	countTransactions := int32(0)
-	for countTransactions < numTransactions {
+	for countTransactions < *queryParams.NumTransactions {
 		if pageAfter != nil {
 			pageKeyParsed, err := ExtractPageAfter(*pageAfter)
 			if err != nil {
@@ -80,7 +82,7 @@ func (h *TransactionsHandler) getTransactionsForAllAccounts(transactionsChannel
 			h.Log.Println(fmt.Sprintf("page after link is: %s", *pageAfter))
 		}
 		for _, transaction := range resp.Data {
-			if countTransactions < numTransactions {
+			if countTransactions < *queryParams.NumTransactions {
 				transactionsChannel <- transaction
 				countTransactions++
 			}
@@ -91,13 +93,23 @@ func (h *TransactionsHandler) getTransactionsForAllAccounts(transactionsChannel
 	}
 }
 
-func (h *TransactionsHandler) getTransactionsForSpecifiedAccount(transactionsChannel chan upclient.TransactionResource, numTransactions int32, accountId string) {
+func (h *TransactionsHandler) getTransactionsForSpecifiedAccount(transactionsChannel chan upclient.TransactionResource, queryParams *functions.QueryParams) {
 	defer close(transactionsChannel)
-	getRequest := h.UpClient.TransactionsAPI.AccountsAccountIdTransactionsGet(h.UpAuth, accountId).PageSize(h.MaxPageSize)
+	getRequest := h.UpClient.TransactionsAPI.AccountsAccountIdTransactionsGet(h.UpAuth, *queryParams.AccountID).PageSize(h.MaxPageSize)
+
+	if queryParams.StartDate != nil {
+		h.Log.Println(fmt.Sprintf("Setting Filter Since to: %s", *queryParams.StartDate))
+		getRequest = getRequest.FilterSince(*queryParams.StartDate)
+	}
+	if queryParams.EndDate != nil {
+		h.Log.Println(fmt.Sprintf("Setting Filter Until to: %s", *queryParams.EndDate))
+		getRequest = getRequest.FilterUntil(*queryParams.EndDate)
+	}
+
 	var pageAfter *string
 	pageAfter = nil
 	countTransactions := int32(0)
-	for countTransactions < numTransactions {
+	for countTransactions < *queryParams.NumTransactions {
 		if pageAfter != nil {
 			pageKeyParsed, err := ExtractPageAfter(*pageAfter)
 			if err != nil {
@@ -114,16 +126,17 @@ func (h *TransactionsHandler) getTransactionsForSpecifiedAccount(transactionsCha
 			}
 			return
 		}
-		pageAfter = resp.Links.Next.Get()
-		if pageAfter != nil {
-			h.Log.Println(fmt.Sprintf("page after link is: %s", *pageAfter))
-		}
 		for _, transaction := range resp.Data {
-			if countTransactions < numTransactions {
+			if countTransactions < *queryParams.NumTransactions {
 				transactionsChannel <- transaction
 				countTransactions++
 			}
 		}
+		pageAfter = resp.Links.Next.Get()
+		if pageAfter == nil {
+			break
+		}
+		h.Log.Println(fmt.Sprintf("page after link is: %s", *pageAfter))
 	}
 	if pageAfter == nil {
 		h.Log.Println("You have reached the end of all transactions")
diff --git a/datafetcher/server.go b/datafetcher/server.go
index 35eff41..2f19aee 100644
--- a/datafetcher/server.go
+++ b/datafetcher/server.go
@@ -80,7 +80,7 @@ func HandleRequests(upBankToken string, log *log.Logger) {
 	// Creating individual handlers
 	accountHandler := handlers.NewAccountHandler(log, apiClient, auth)
 	transactionsHandler := handlers.NewTransactionHandler(log, apiClient, auth, accountHandler)
-	transactionsCsvHandler := handlers.NewTransactionCsvHandler(log, apiClient, auth)
+	transactionsCsvHandler := handlers.NewTransactionCsvHandler(log, apiClient, auth, transactionsHandler)
 	staticFileHandler := handlers.NewStaticFileHandler(log)
 	mux := http.NewServeMux()
 	mux.HandleFunc(accountHandler.Uri, accountHandler.ServeHTTP)
diff --git a/datafetcher/templates/transactions.templ b/datafetcher/templates/transactions.templ
index 45e65a6..56016d9 100644
--- a/datafetcher/templates/transactions.templ
+++ b/datafetcher/templates/transactions.templ
@@ -1,6 +1,11 @@
 package templates
 
-import "github.com/esteanes/expense-manager/datafetcher/upclient"
+import (
+	"github.com/esteanes/expense-manager/datafetcher/functions"
+	"github.com/esteanes/expense-manager/datafetcher/upclient"
+	"strconv"
+	"time"
+)
 
 func getMessage(transaction upclient.TransactionResource) string {
 	maybeString := transaction.Attributes.Message.Get()
@@ -39,9 +44,23 @@ func getCategory(transaction upclient.TransactionResource) string {
 
 }
 
+func getDateOrDefault(dateTime *time.Time, defaultTime time.Time) string {
+	if dateTime == nil {
+		return defaultTime.Format("2006-01-02")
+	}
+	return dateTime.Format("2006-01-02")
+}
+
 templ TransactionsTable(transactions chan upclient.TransactionResource) {
 	<div class="container mx-auto p-8">
 		<h1 class="text-4xl font-bold mb-6">Transactions</h1>
+		<button id="downloadButton" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex items-center justify-center">
+			<span id="buttonText">Download Content</span>
+			<svg id="loadingSpinner" class="hidden animate-spin h-5 w-5 ml-2 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+			</svg>
+		</button>
 		<div class="overflow-y-auto max-h-96 border border-gray-200 rounded-lg">
 			<table class="min-w-full table-auto bg-gray-50 border border-gray-200 p-10">
 				<thead class="bg-gray-200">
@@ -75,6 +94,53 @@ templ TransactionsTable(transactions chan upclient.TransactionResource) {
 			</table>
 		</div>
 	</div>
+	<script>
+        document.getElementById('downloadButton').addEventListener('click', function() {
+            const startDateInput = document.getElementById('start-date');
+            const endDateInput = document.getElementById('end-date');
+            const startDate = new Date(startDateInput.value).toISOString();
+            const endDate = new Date(endDateInput.value).toISOString();
+            const numTransactions = document.getElementById('slider').value;
+
+            // Build the URL with query parameters
+            const url = new URL('/transactions-csv', window.location.origin);
+            if (startDate) {
+                url.searchParams.set('startDate', startDate);
+            }
+            if (endDate) {
+                url.searchParams.set('endDate', endDate);
+            }
+            url.searchParams.set('numTransactions', numTransactions);
+            url.searchParams.set('accountId', new URLSearchParams(window.location.search).get("accountId"))
+
+            // Fetch the file with the generated URL
+            fetch(url, {
+                method: 'GET',
+                headers: {
+                    // Add any headers if necessary
+                }
+            })
+            .then(response => response.blob())  // Convert to blob
+            .then(blob => {
+                // Create a URL for the blob object
+                const downloadUrl = window.URL.createObjectURL(blob);
+
+                // Create a temporary <a> element for the download
+                const a = document.createElement('a');
+                a.href = downloadUrl;
+                a.download = 'upbank-downloads.csv';  // Specify the filename
+                document.body.appendChild(a);
+
+                // Trigger the download
+                a.click();
+
+                // Clean up
+                a.remove();
+                window.URL.revokeObjectURL(downloadUrl);
+            })
+            .catch(error => console.error('Download failed', error));
+        });
+    </script>
 }
 
 templ numTransactionSlider(numTransactions string) {
@@ -119,33 +185,32 @@ templ numTransactionSlider(numTransactions string) {
     </script>
 }
 
-templ dateSelector() {
+templ dateSelector(startDate string, endDate string) {
 	<div class="p-6 bg-white rounded-lg shadow-lg max-w-2xl">
 		<h2 class="text-xl font-bold mb-4 text-gray-700">Select Date Range</h2>
 		<div class="flex space-x-4">
 			<!-- Start Date Input -->
 			<div class="flex flex-col">
 				<label for="start-date" class="mb-2 text-sm font-medium text-gray-600">Start Date</label>
-				<input type="datetime-local" id="start-date" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/>
+				<input type="date" id="start-date" value={ startDate } class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/>
 			</div>
 			<!-- End Date Input -->
 			<div class="flex flex-col">
 				<label for="end-date" class="mb-2 text-sm font-medium text-gray-600">End Date</label>
-				<input type="datetime-local" id="end-date" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/>
+				<input type="date" id="end-date" value={ endDate } class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"/>
 			</div>
 		</div>
 		<button id="dateSubmitButton" class="mt-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
 			Submit
 		</button>
 		<script>
-        const startDateInput = document.getElementById('start-date');
-        const endDateInput = document.getElementById('end-date');
-        const dateSubmitButton = document.getElementById('dateSubmitButton');
-
         // On button click, update URL with the query parameters for startDate and endDate and refresh the page
         dateSubmitButton.addEventListener('click', function() {
-            const startDate = startDateInput.value;
-            const endDate = endDateInput.value;
+            const startDateInput = document.getElementById('start-date');
+            const endDateInput = document.getElementById('end-date');
+            const dateSubmitButton = document.getElementById('dateSubmitButton');
+            const startDate = new Date(startDateInput.value).toISOString();
+            const endDate = new Date(endDateInput.value).toISOString();
 
             // Create a new URL object
             const url = new URL(window.location.href);
@@ -168,12 +233,12 @@ templ dateSelector() {
 	</div>
 }
 
-templ Transactions(title string, transactions chan upclient.TransactionResource, accounts chan upclient.AccountResource, numTransactions string) {
+templ Transactions(title string, transactions chan upclient.TransactionResource, accounts chan upclient.AccountResource, queryParams *functions.QueryParams) {
 	@Base(title) {
 		@GridOrganiser() {
 			@AccountButtons(accounts, false)
-			@numTransactionSlider(numTransactions)
-			@dateSelector()
+			@numTransactionSlider(strconv.Itoa(int(*queryParams.NumTransactions)))
+			@dateSelector(getDateOrDefault(queryParams.StartDate, time.Now().AddDate(0, 0, -1)), getDateOrDefault(queryParams.EndDate, time.Now()))
 		}
 		@TransactionsTable(transactions)
 	}
diff --git a/datafetcher/templates/transactions_templ.go b/datafetcher/templates/transactions_templ.go
index 4e57475..c3667f9 100644
--- a/datafetcher/templates/transactions_templ.go
+++ b/datafetcher/templates/transactions_templ.go
@@ -8,7 +8,12 @@ package templates
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-import "github.com/esteanes/expense-manager/datafetcher/upclient"
+import (
+	"github.com/esteanes/expense-manager/datafetcher/functions"
+	"github.com/esteanes/expense-manager/datafetcher/upclient"
+	"strconv"
+	"time"
+)
 
 func getMessage(transaction upclient.TransactionResource) string {
 	maybeString := transaction.Attributes.Message.Get()
@@ -47,6 +52,13 @@ func getCategory(transaction upclient.TransactionResource) string {
 
 }
 
+func getDateOrDefault(dateTime *time.Time, defaultTime time.Time) string {
+	if dateTime == nil {
+		return defaultTime.Format("2006-01-02")
+	}
+	return dateTime.Format("2006-01-02")
+}
+
 func TransactionsTable(transactions chan upclient.TransactionResource) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -65,7 +77,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container mx-auto p-8\"><h1 class=\"text-4xl font-bold mb-6\">Transactions</h1><div class=\"overflow-y-auto max-h-96 border border-gray-200 rounded-lg\"><table class=\"min-w-full table-auto bg-gray-50 border border-gray-200 p-10\"><thead class=\"bg-gray-200\"><tr><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Transaction Amount</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Description</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Status</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Time</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Message</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Category</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Purchase Method</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Card Number</th></tr></thead> <tbody class=\"bg-grey-light\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container mx-auto p-8\"><h1 class=\"text-4xl font-bold mb-6\">Transactions</h1><button id=\"downloadButton\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex items-center justify-center\"><span id=\"buttonText\">Download Content</span> <svg id=\"loadingSpinner\" class=\"hidden animate-spin h-5 w-5 ml-2 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle> <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"></path></svg></button><div class=\"overflow-y-auto max-h-96 border border-gray-200 rounded-lg\"><table class=\"min-w-full table-auto bg-gray-50 border border-gray-200 p-10\"><thead class=\"bg-gray-200\"><tr><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Transaction Amount</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Description</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Status</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Time</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Message</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Category</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Purchase Method</th><th class=\"bg-gray-200 px-4 py-2 text-left border-b border-gray-300 sticky top-0\">Card Number</th></tr></thead> <tbody class=\"bg-grey-light\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -89,7 +101,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(transaction.Attributes.Amount.Value)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 63, Col: 92}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 82, Col: 92}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
@@ -102,7 +114,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(transaction.Attributes.Description)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 64, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 83, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
@@ -115,7 +127,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(string(transaction.Attributes.Status))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 65, Col: 94}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 84, Col: 94}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
@@ -128,7 +140,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(transaction.Attributes.CreatedAt.String())
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 66, Col: 98}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 85, Col: 98}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 				if templ_7745c5c3_Err != nil {
@@ -141,7 +153,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(getMessage(transaction))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 67, Col: 80}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 86, Col: 80}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
@@ -154,7 +166,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(getCategory(transaction))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 68, Col: 81}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 87, Col: 81}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
@@ -167,7 +179,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(getCardPurchase(transaction))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 69, Col: 85}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 88, Col: 85}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
@@ -180,7 +192,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(getCardPurchaseNumber(transaction))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 70, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 89, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -197,7 +209,7 @@ func TransactionsTable(transactions chan upclient.TransactionResource) templ.Com
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table></div></div><script>\n        document.getElementById('downloadButton').addEventListener('click', function() {\n            const startDateInput = document.getElementById('start-date');\n            const endDateInput = document.getElementById('end-date');\n            const startDate = new Date(startDateInput.value).toISOString();\n            const endDate = new Date(endDateInput.value).toISOString();\n            const numTransactions = document.getElementById('slider').value;\n\n            // Build the URL with query parameters\n            const url = new URL('/transactions-csv', window.location.origin);\n            if (startDate) {\n                url.searchParams.set('startDate', startDate);\n            }\n            if (endDate) {\n                url.searchParams.set('endDate', endDate);\n            }\n            url.searchParams.set('numTransactions', numTransactions);\n            url.searchParams.set('accountId', new URLSearchParams(window.location.search).get(\"accountId\"))\n\n            // Fetch the file with the generated URL\n            fetch(url, {\n                method: 'GET',\n                headers: {\n                    // Add any headers if necessary\n                }\n            })\n            .then(response => response.blob())  // Convert to blob\n            .then(blob => {\n                // Create a URL for the blob object\n                const downloadUrl = window.URL.createObjectURL(blob);\n\n                // Create a temporary <a> element for the download\n                const a = document.createElement('a');\n                a.href = downloadUrl;\n                a.download = 'upbank-downloads.csv';  // Specify the filename\n                document.body.appendChild(a);\n\n                // Trigger the download\n                a.click();\n\n                // Clean up\n                a.remove();\n                window.URL.revokeObjectURL(downloadUrl);\n            })\n            .catch(error => console.error('Download failed', error));\n        });\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -230,7 +242,7 @@ func numTransactionSlider(numTransactions string) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(numTransactions)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 84, Col: 77}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 150, Col: 77}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
@@ -243,7 +255,7 @@ func numTransactionSlider(numTransactions string) templ.Component {
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(numTransactions)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 88, Col: 64}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 154, Col: 64}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
@@ -257,7 +269,7 @@ func numTransactionSlider(numTransactions string) templ.Component {
 	})
 }
 
-func dateSelector() templ.Component {
+func dateSelector(startDate string, endDate string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
@@ -275,7 +287,33 @@ func dateSelector() templ.Component {
 			templ_7745c5c3_Var14 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"p-6 bg-white rounded-lg shadow-lg max-w-2xl\"><h2 class=\"text-xl font-bold mb-4 text-gray-700\">Select Date Range</h2><div class=\"flex space-x-4\"><!-- Start Date Input --><div class=\"flex flex-col\"><label for=\"start-date\" class=\"mb-2 text-sm font-medium text-gray-600\">Start Date</label> <input type=\"datetime-local\" id=\"start-date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div><!-- End Date Input --><div class=\"flex flex-col\"><label for=\"end-date\" class=\"mb-2 text-sm font-medium text-gray-600\">End Date</label> <input type=\"datetime-local\" id=\"end-date\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div></div><button id=\"dateSubmitButton\" class=\"mt-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Submit</button><script>\n        const startDateInput = document.getElementById('start-date');\n        const endDateInput = document.getElementById('end-date');\n        const dateSubmitButton = document.getElementById('dateSubmitButton');\n\n        // On button click, update URL with the query parameters for startDate and endDate and refresh the page\n        dateSubmitButton.addEventListener('click', function() {\n            const startDate = startDateInput.value;\n            const endDate = endDateInput.value;\n\n            // Create a new URL object\n            const url = new URL(window.location.href);\n\n            // Add or update the query parameters for startDate and endDate\n            if (startDate) {\n                url.searchParams.set('startDate', startDate);\n            }\n            if (endDate) {\n                url.searchParams.set('endDate', endDate);\n            }\n            if (startDate == null && endDate == null) {\n                return;\n            }\n\n            // Refresh the page with the updated URL\n            window.location.href = url.toString();\n        });\n    </script></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"p-6 bg-white rounded-lg shadow-lg max-w-2xl\"><h2 class=\"text-xl font-bold mb-4 text-gray-700\">Select Date Range</h2><div class=\"flex space-x-4\"><!-- Start Date Input --><div class=\"flex flex-col\"><label for=\"start-date\" class=\"mb-2 text-sm font-medium text-gray-600\">Start Date</label> <input type=\"date\" id=\"start-date\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(startDate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 195, Col: 56}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div><!-- End Date Input --><div class=\"flex flex-col\"><label for=\"end-date\" class=\"mb-2 text-sm font-medium text-gray-600\">End Date</label> <input type=\"date\" id=\"end-date\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(endDate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `datafetcher/templates/transactions.templ`, Line: 200, Col: 52}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"></div></div><button id=\"dateSubmitButton\" class=\"mt-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Submit</button><script>\n        // On button click, update URL with the query parameters for startDate and endDate and refresh the page\n        dateSubmitButton.addEventListener('click', function() {\n            const startDateInput = document.getElementById('start-date');\n            const endDateInput = document.getElementById('end-date');\n            const dateSubmitButton = document.getElementById('dateSubmitButton');\n            const startDate = new Date(startDateInput.value).toISOString();\n            const endDate = new Date(endDateInput.value).toISOString();\n\n            // Create a new URL object\n            const url = new URL(window.location.href);\n\n            // Add or update the query parameters for startDate and endDate\n            if (startDate) {\n                url.searchParams.set('startDate', startDate);\n            }\n            if (endDate) {\n                url.searchParams.set('endDate', endDate);\n            }\n            if (startDate == null && endDate == null) {\n                return;\n            }\n\n            // Refresh the page with the updated URL\n            window.location.href = url.toString();\n        });\n    </script></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -283,7 +321,7 @@ func dateSelector() templ.Component {
 	})
 }
 
-func Transactions(title string, transactions chan upclient.TransactionResource, accounts chan upclient.AccountResource, numTransactions string) templ.Component {
+func Transactions(title string, transactions chan upclient.TransactionResource, accounts chan upclient.AccountResource, queryParams *functions.QueryParams) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
@@ -296,12 +334,12 @@ func Transactions(title string, transactions chan upclient.TransactionResource,
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var15 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var15 == nil {
-			templ_7745c5c3_Var15 = templ.NopComponent
+		templ_7745c5c3_Var17 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var17 == nil {
+			templ_7745c5c3_Var17 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var16 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var18 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
 			if !templ_7745c5c3_IsBuffer {
@@ -313,7 +351,7 @@ func Transactions(title string, transactions chan upclient.TransactionResource,
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Var17 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Var19 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 				templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 				templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
 				if !templ_7745c5c3_IsBuffer {
@@ -333,7 +371,7 @@ func Transactions(title string, transactions chan upclient.TransactionResource,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = numTransactionSlider(numTransactions).Render(ctx, templ_7745c5c3_Buffer)
+				templ_7745c5c3_Err = numTransactionSlider(strconv.Itoa(int(*queryParams.NumTransactions))).Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -341,13 +379,13 @@ func Transactions(title string, transactions chan upclient.TransactionResource,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = dateSelector().Render(ctx, templ_7745c5c3_Buffer)
+				templ_7745c5c3_Err = dateSelector(getDateOrDefault(queryParams.StartDate, time.Now().AddDate(0, 0, -1)), getDateOrDefault(queryParams.EndDate, time.Now())).Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				return templ_7745c5c3_Err
 			})
-			templ_7745c5c3_Err = GridOrganiser().Render(templ.WithChildren(ctx, templ_7745c5c3_Var17), templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = GridOrganiser().Render(templ.WithChildren(ctx, templ_7745c5c3_Var19), templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -361,7 +399,7 @@ func Transactions(title string, transactions chan upclient.TransactionResource,
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var16), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var18), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/datafetcher/upclient/api_transactions.go b/datafetcher/upclient/api_transactions.go
index a06ffc6..3e87563 100644
--- a/datafetcher/upclient/api_transactions.go
+++ b/datafetcher/upclient/api_transactions.go
@@ -13,6 +13,7 @@ package upclient
 import (
 	"bytes"
 	"context"
+	"fmt"
 	"io"
 	"net/http"
 	"net/url"
@@ -37,6 +38,50 @@ type ApiAccountsAccountIdTransactionsGetRequest struct {
 	filterTag      *string
 }
 
+func (r ApiAccountsAccountIdTransactionsGetRequest) String() string {
+	var (
+		pageSize       = "<nil>"
+		pageBefore     = "<nil>"
+		pageAfter      = "<nil>"
+		filterStatus   = "<nil>"
+		filterSince    = "<nil>"
+		filterUntil    = "<nil>"
+		filterCategory = "<nil>"
+		filterTag      = "<nil>"
+	)
+
+	// Dereference pointers if they are not nil
+	if r.pageSize != nil {
+		pageSize = fmt.Sprintf("%d", *r.pageSize)
+	}
+	if r.pageBefore != nil {
+		pageBefore = *r.pageBefore
+	}
+	if r.pageAfter != nil {
+		pageAfter = *r.pageAfter
+	}
+	if r.filterStatus != nil {
+		filterStatus = string(*r.filterStatus)
+	}
+	if r.filterSince != nil {
+		filterSince = r.filterSince.Format(time.RFC3339)
+	}
+	if r.filterUntil != nil {
+		filterUntil = r.filterUntil.Format(time.RFC3339)
+	}
+	if r.filterCategory != nil {
+		filterCategory = *r.filterCategory
+	}
+	if r.filterTag != nil {
+		filterTag = *r.filterTag
+	}
+
+	return fmt.Sprintf(
+		"ApiAccountsAccountIdTransactionsGetRequest{ accountId: %s, pageSize: %s, pageBefore: %s, pageAfter: %s, filterStatus: %s, filterSince: %s, filterUntil: %s, filterCategory: %s, filterTag: %s}",
+		r.accountId, pageSize, pageBefore, pageAfter, filterStatus, filterSince, filterUntil, filterCategory, filterTag,
+	)
+}
+
 // The number of records to return in each page.
 func (r ApiAccountsAccountIdTransactionsGetRequest) PageSize(pageSize int32) ApiAccountsAccountIdTransactionsGetRequest {
 	r.pageSize = &pageSize
diff --git a/static/css/output.css b/static/css/output.css
index 84aed6d..3fbef76 100644
--- a/static/css/output.css
+++ b/static/css/output.css
@@ -629,6 +629,10 @@ video {
   margin-top: 1.5rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -661,6 +665,10 @@ video {
   height: 100%;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -677,6 +685,10 @@ video {
   width: 100%;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -689,6 +701,16 @@ video {
   table-layout: auto;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -895,6 +917,14 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);