diff --git a/src/App.tsx b/src/App.tsx
index e71f51f0..f7645b34 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -106,7 +106,12 @@ const App = () => {
         >
           <Route
             path="budgets"
-            element={<BudgetSwitch selectBudget={selectBudget} />}
+            element={
+              <BudgetSwitch
+                selectBudget={selectBudget}
+                currentBudget={budget}
+              />
+            }
           />
           <Route
             path="budgets/:budgetId"
diff --git a/src/components/BudgetForm.tsx b/src/components/BudgetForm.tsx
index 107ba2db..2c2b58aa 100644
--- a/src/components/BudgetForm.tsx
+++ b/src/components/BudgetForm.tsx
@@ -165,7 +165,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
                     })
                 }
               }}
-              className="btn-secondary"
+              className="btn-secondary-red"
             >
               {t('budgets.delete')}
             </button>
diff --git a/src/components/BudgetSwitch.tsx b/src/components/BudgetSwitch.tsx
index 1fddfa26..a300a3cb 100644
--- a/src/components/BudgetSwitch.tsx
+++ b/src/components/BudgetSwitch.tsx
@@ -2,9 +2,13 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import { Translation, Budget } from '../types'
-import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { PencilIcon } from '@heroicons/react/24/solid'
-import { PlusCircleIcon, PlusIcon } from '@heroicons/react/24/outline'
+import {
+  ArrowsRightLeftIcon,
+  EyeIcon,
+  PlusCircleIcon,
+  PlusIcon,
+} from '@heroicons/react/24/outline'
 import connectBudgetApi from '../lib/api/budgets'
 import LoadingSpinner from './LoadingSpinner'
 import { safeName } from '../lib/name-helper'
@@ -13,6 +17,7 @@ import FlyoutMenu from './FlyoutMenu'
 
 type BudgetSwitchProps = {
   selectBudget: (budget?: Budget) => void
+  currentBudget?: Budget
 }
 
 const BudgetSwitch = (props: BudgetSwitchProps) => {
@@ -66,54 +71,76 @@ const BudgetSwitch = (props: BudgetSwitchProps) => {
       ) : (
         <div className="mt-3">
           {budgets.length ? (
-            <ul className="grid grid-cols-1 gap-5 sm:gap-6">
-              {budgets.map(budget => (
-                <li
-                  key={budget.id}
-                  className="card col-span-1 relative hover:bg-gray-50 dark:hover:bg-slate-700 p-4 md:hover:-translate-y-0.5 hover:shadow-md cursor-pointer"
-                >
-                  <Link
-                    to="/"
-                    className="w-full text-center"
-                    onClick={() => {
-                      props.selectBudget(budget)
-                    }}
+            <>
+              <ul className="grid grid-cols-1 gap-10 lg:gap-6 lg:grid-cols-2">
+                {budgets.map(budget => (
+                  <li
+                    key={budget.id}
+                    className={`card p-0 col-span-1 divide-y divide-gray-200 dark:divide-gray-600 flex flex-col justify-between ${
+                      budget.id === props.currentBudget?.id
+                        ? 'border-2 border-red-800 dark:border-red-600'
+                        : ''
+                    }`}
                   >
-                    <div className="flex justify-center">
-                      <h3
-                        className={
-                          typeof budget.name === 'undefined' ? 'italic' : ''
-                        }
-                      >
-                        {safeName(budget, 'budget')}
-                      </h3>
+                    <div className="flex w-full items-center justify-between space-x-6 p-6">
+                      <div className="flex-1 truncate">
+                        <div className="flex items-center space-x-3">
+                          <h3
+                            className={`truncate text-sm ${
+                              budget.name === '' ? 'italic' : ''
+                            }`}
+                          >
+                            {safeName(budget, 'budget')}
+                          </h3>
+                        </div>
+                        {budget.note && (
+                          <p className="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
+                            {budget.note}
+                          </p>
+                        )}
+                      </div>
                       <Link
+                        className="flex-shrink-0"
                         to={`/budgets/${budget.id}`}
                         title={t('edit')}
-                        className="pl-2"
                       >
                         <PencilIcon className="icon-red icon-sm" />
                       </Link>
                     </div>
-                    {budget.note ? (
-                      <p className="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-line">
-                        {budget.note}
-                      </p>
-                    ) : null}
-                    <div className="flex justify-end">
-                      <Link
-                        to="/transactions/new"
-                        onClick={() => props.selectBudget(budget)}
-                        className="text-sky-600 hover:text-sky-700 dark:text-sky-400"
-                      >
-                        {t('transactions.add')}
-                        <ChevronRightIcon className="inline h-6" />
-                      </Link>
+                    <div className="-mt-px flex divide-x divide-gray-200 dark:divide-gray-600">
+                      <div className="flex w-0 flex-1">
+                        <Link
+                          to="/"
+                          onClick={() => {
+                            props.selectBudget(budget)
+                          }}
+                          className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-gray-100"
+                        >
+                          <EyeIcon
+                            className="h-5 w-5 text-gray-400"
+                            aria-hidden="true"
+                          />
+                          {t('open')}
+                        </Link>
+                      </div>
+                      <div className="-ml-px flex w-0 flex-1">
+                        <Link
+                          to="/transactions/new"
+                          onClick={() => props.selectBudget(budget)}
+                          className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-gray-100"
+                        >
+                          <ArrowsRightLeftIcon
+                            className="h-5 w-5 text-gray-400"
+                            aria-hidden="true"
+                          />
+                          {t('transactions.add')}
+                        </Link>
+                      </div>
                     </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
+                  </li>
+                ))}
+              </ul>
+            </>
           ) : (
             <>
               <div>{t('budgets.emptyList')}</div>
diff --git a/src/components/OwnAccountsList.tsx b/src/components/OwnAccountsList.tsx
index 7dcbfa1e..50044178 100644
--- a/src/components/OwnAccountsList.tsx
+++ b/src/components/OwnAccountsList.tsx
@@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next'
 import { Link, useSearchParams } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import { Translation, Budget, Account } from '../types'
-import { PencilIcon } from '@heroicons/react/24/solid'
 import {
   ArchiveBoxIcon,
   PlusCircleIcon,
@@ -14,7 +13,12 @@ import { safeName } from '../lib/name-helper'
 import LoadingSpinner from './LoadingSpinner'
 import AccountListSwitch from './AccountListSwitch'
 import Error from './Error'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
+import {
+  ArrowsRightLeftIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PencilIcon,
+} from '@heroicons/react/20/solid'
 
 type Props = {
   budget: Budget
@@ -111,59 +115,90 @@ const OwnAccountsList = ({ budget }: Props) => {
             </div>
           )}
           {accounts.length ? (
-            <ul className="grid grid-cols-1 gap-5 sm:gap-6">
-              {accounts.map(account => (
-                <li
-                  key={account.id}
-                  className="card col-span-1 relative hover:bg-gray-50 dark:hover:bg-slate-700 p-4 hover:-translate-y-0.5 hover:shadow-md cursor-pointer"
-                >
-                  <Link to={`${account.id}`} className="w-full text-center">
-                    <div title={t('edit')} className="absolute right-4">
-                      <PencilIcon className="icon-red" />
+            <>
+              <ul className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+                {accounts.map(account => (
+                  <li
+                    key={account.id}
+                    className="col-span-1 card p-0 flex flex-col justify-between  divide-y divide-gray-200 dark:divide-gray-600"
+                  >
+                    <div className="flex w-full items-center justify-between space-x-6 p-6">
+                      <div className="flex-1 truncate">
+                        <div className="md:flex items-start justify-between md:space-x-3">
+                          <div className="flex justify-between md:block">
+                            <h3
+                              className={`truncate text-base font-bold ${
+                                account.name === '' ? 'italic' : ''
+                              }`}
+                            >
+                              {safeName(account, 'account')}
+                              {account.archived ? (
+                                <ArchiveBoxIcon
+                                  className="icon-sm inline link-blue ml-2 stroke-2"
+                                  title={t('archived')}
+                                />
+                              ) : null}
+                            </h3>
+                            {account.computedData ? (
+                              <div
+                                className={`${
+                                  Number(account.computedData.balance) >= 0
+                                    ? 'text-lime-600'
+                                    : 'text-red-600'
+                                } md:mt-2 text-lg text-right md:text-left`}
+                              >
+                                <strong>
+                                  {formatMoney(
+                                    account.computedData.balance,
+                                    budget.currency,
+                                    { signDisplay: 'auto' }
+                                  )}
+                                </strong>
+                              </div>
+                            ) : null}
+                          </div>
+                          {!account.onBudget && (
+                            <span className="inline-flex flex-shrink-0 items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-800">
+                              {t('accounts.offBudget')}
+                            </span>
+                          )}
+                        </div>
+
+                        <p className="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
+                          {account.note}
+                        </p>
+                      </div>
                     </div>
-                    <h3
-                      className={`full-centered ${
-                        typeof account.name === 'undefined' ? 'italic' : ''
-                      }`}
-                    >
-                      {safeName(account, 'account')}
-                      {account.archived ? (
-                        <ArchiveBoxIcon
-                          className="icon-sm inline link-blue ml-2 stroke-2"
-                          title={t('archived')}
-                        />
-                      ) : null}
-                    </h3>
-                    {account.onBudget ? null : (
-                      <div className="text-gray-700 dark:text-gray-300">
-                        {t('accounts.offBudget')}
+                    <div className="-mt-px flex divide-x divide-gray-200 dark:divide-gray-600">
+                      <div className="flex w-0 flex-1">
+                        <Link
+                          to={`/transactions?account=${account.id}`}
+                          className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-gray-100"
+                        >
+                          <ArrowsRightLeftIcon
+                            className="icon-sm text-gray-400"
+                            aria-hidden="true"
+                          />
+                          {t('accounts.showTransactions')}
+                        </Link>
                       </div>
-                    )}
-                    {account.note ? (
-                      <p className="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-line">
-                        {account.note}
-                      </p>
-                    ) : null}
-                    {account.computedData ? (
-                      <div
-                        className={`${
-                          Number(account.computedData.balance) >= 0
-                            ? 'text-lime-600'
-                            : 'text-red-600'
-                        } mt-2 text-lg`}
-                      >
-                        <strong>
-                          {formatMoney(
-                            account.computedData.balance,
-                            budget.currency
-                          )}
-                        </strong>
+                      <div className="-ml-px flex w-0 flex-1">
+                        <Link
+                          to={`${account.id}`}
+                          className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-800 dark:text-gray-200"
+                        >
+                          <PencilIcon
+                            className="icon-sm text-gray-400"
+                            aria-hidden="true"
+                          />
+                          {t('editObject', { object: t('accounts.account') })}
+                        </Link>
                       </div>
-                    ) : null}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </>
           ) : (
             <>
               <div className="text-gray-700 dark:text-gray-300 text-center">
diff --git a/src/translations/en.json b/src/translations/en.json
index ac670fdd..e11a7443 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -12,6 +12,7 @@
   "import": "Import",
   "select": "Select...",
   "close": "Close",
+  "open": "Open",
   "untitled": "Untitled",
   "version": "Version",
   "seeAll": "See All",
@@ -86,7 +87,8 @@
     "initialBalance": "Initial Balance",
     "initialBalanceDate": "Date of Initial Balance",
     "onBudgetExplanation": "You can assign money from this account to your envelopes",
-    "offBudgetExplanation": "Money in this account is tracked, but can not be assigned to envelopes"
+    "offBudgetExplanation": "Money in this account is tracked, but can not be assigned to envelopes",
+    "showTransactions": "Show Transactions"
   },
   "transactions": {
     "transactions": "Transactions",
@@ -117,7 +119,7 @@
     "unlockBeforeEditingError": "This transaction has been reconciled and needs to be unlocked before updating it.",
     "create": "Create Transaction",
     "delete": "Delete Transaction",
-    "add": "Add transaction",
+    "add": "Add Transaction",
     "repeat": "Repeat Transaction",
     "confirmDelete": "Are you sure you want to delete this transaction?",
     "amount": "Amount",