diff --git a/drcr/templates/journal/journal.html b/drcr/templates/journal/journal.html
index 57d74eb..66747b0 100644
--- a/drcr/templates/journal/journal.html
+++ b/drcr/templates/journal/journal.html
@@ -1,5 +1,5 @@
 {#  DrCr: Web-based double-entry bookkeeping framework
-    Copyright (C) 2022–2023  Lee Yingtong Li (RunasSudo)
+    Copyright (C) 2022–2024  Lee Yingtong Li (RunasSudo)
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -15,50 +15,68 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #}
 
-{% extends 'base.html' %}
+{% extends 'base_tailwind.html' %}
 {% block title %}Journal{% endblock %}
 
 {% block content %}
-	<h1 class="h2 my-4">Journal</h1>
+	<h1 class="text-3xl text-gray-900">
+		Journal
+	</h1>
 	
-	<div class="mb-2">
-		<a href="{{ url_for('journal_new_transaction') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> New transaction</a>
+	<div class="my-4 flex gap-x-2">
+		<a href="{{ url_for('journal_new_transaction') }}" class="inline-flex items-center gap-x-1.5 bg-blue-600 pl-2 pr-3 py-1 text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+			</svg>
+			New transaction
+		</a>
 		{% if commodity_detail %}
-			<a href="{{ url_for('journal') }}" class="btn btn-outline-secondary">Hide commodity detail</a>
+			<a href="{{ url_for('journal') }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+				Hide commodity detail
+			</a>
 		{% else %}
-			<a href="{{ url_for('journal', commodity_detail=1) }}" class="btn btn-outline-secondary">Show commodity detail</a>
+			<a href="{{ url_for('journal', commodity_detail=1) }}" class="px-3 py-1 text-gray-800 ring-1 ring-inset ring-gray-400 hover:bg-gray-50">
+				Show commodity detail
+			</a>
 		{% endif %}
 	</div>
 	
-	<table class="table">
+	<table class="min-w-full">
 		<thead>
 			<tr>
-				<th>Date</th>
-				<th colspan="3">Description</th>
-				<th class="text-end">Dr</th>
-				<th class="text-end">Cr</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-start">Date</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-start" colspan="3">Description</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-end">Dr</th>
+				<th class="py-0.5 text-gray-900 font-semibold text-end">Cr</th>
 			</tr>
 		</thead>
 		<tbody>
 			{% for transaction in transactions %}
-				<tr>
-					<td>{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
-					<td colspan="3">{{ transaction.description }} <a href="{{ url_for('journal_edit_transaction', id=transaction.id) }}"><i class="bi bi-pencil text-muted"></i></a></td>
+				<tr class="border-t border-gray-300">
+					<td class="py-0.5 text-gray-900">{{ transaction.dt.strftime('%Y-%m-%d') }}</td>
+					<td class="py-0.5 text-gray-900" colspan="3">
+						{{ transaction.description }}
+						<a href="{{ url_for('journal_edit_transaction', id=transaction.id) }}" class="text-gray-500 hover:text-gray-700">
+							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline align-middle -mt-0.5">
+								<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+							</svg>
+						</a>
+					</td>
 					<td></td>
 					<td></td>
 				</tr>
 				{% for posting in transaction.postings %}
 					<tr>
 						<td></td>
-						<td>{{ posting.description or '' }}</td>
-						<td class="text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
-						<td>{{ posting.account }}</td>
+						<td class="py-0.5 text-gray-900">{{ posting.description or '' }}</td>
+						<td class="py-0.5 pr-2 text-gray-900 text-end"><i>{{ 'Dr' if posting.quantity >= 0 else 'Cr' }}</i></td>
+						<td class="py-0.5 text-gray-900">{{ posting.account }}</td>
 						{% if commodity_detail %}
-							<td class="text-end">{{ posting.amount().format('force') if posting.quantity >= 0 else '' }}</td>
-							<td class="text-end">{{ (posting.amount()|abs).format('force') if posting.quantity < 0 else '' }}</td>
+							<td class="py-0.5 text-gray-900 text-end">{{ posting.amount().format('force') if posting.quantity >= 0 else '' }}</td>
+							<td class="py-0.5 text-gray-900 text-end">{{ (posting.amount()|abs).format('force') if posting.quantity < 0 else '' }}</td>
 						{% else %}
-							<td class="text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
-							<td class="text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
+							<td class="py-0.5 text-gray-900 text-end">{{ posting.amount().as_cost().format() if posting.quantity >= 0 else '' }}</td>
+							<td class="py-0.5 text-gray-900 text-end">{{ (posting.amount()|abs).as_cost().format() if posting.quantity < 0 else '' }}</td>
 						{% endif %}
 					</tr>
 				{% endfor %}