diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index 0626523d..3609e7ee 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -65,29 +65,34 @@ export function AccountListCard({
                     <div className="flex max-w-full flex-col sm:flex-row sm:items-center sm:justify-between">
                         <div className="flex items-start gap-3">
                             <div className="flex flex-col gap-1">
-                                <h3 className="flex items-center gap-2 font-semibold">
-                                    {account.bank?.logo ? (
-                                        <img
-                                            src={account.bank.logo}
-                                            alt={account.bank.name}
-                                            className="size-4 rounded-full object-contain"
+                                <Link
+                                    href={show.url(account.id)}
+                                    className="-my-1 -ml-1.5 flex items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
+                                >
+                                    <h3 className="flex items-center gap-2 font-semibold">
+                                        {account.bank?.logo ? (
+                                            <img
+                                                src={account.bank.logo}
+                                                alt={account.bank.name}
+                                                className="size-4 rounded-full object-contain"
+                                            />
+                                        ) : (
+                                            <div className="flex size-4 items-center justify-center rounded-full bg-muted">
+                                                <span className="text-sm font-medium text-muted-foreground">
+                                                    {account.bank?.name?.charAt(
+                                                        0,
+                                                    ) || '?'}
+                                                </span>
+                                            </div>
+                                        )}
+                                        <EncryptedText
+                                            encryptedText={account.name}
+                                            iv={account.name_iv}
+                                            length={{ min: 8, max: 25 }}
+                                            className="truncate"
                                         />
-                                    ) : (
-                                        <div className="flex size-4 items-center justify-center rounded-full bg-muted">
-                                            <span className="text-sm font-medium text-muted-foreground">
-                                                {account.bank?.name?.charAt(
-                                                    0,
-                                                ) || '?'}
-                                            </span>
-                                        </div>
-                                    )}
-                                    <EncryptedText
-                                        encryptedText={account.name}
-                                        iv={account.name_iv}
-                                        length={{ min: 8, max: 25 }}
-                                        className="truncate"
-                                    />
-                                </h3>
+                                    </h3>
+                                </Link>
                                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                     <span>
                                         {account.bank?.name || 'Unknown Bank'}
diff --git a/resources/js/pages/Accounts/Index.tsx b/resources/js/pages/Accounts/Index.tsx
index 16bed354..c948e819 100644
--- a/resources/js/pages/Accounts/Index.tsx
+++ b/resources/js/pages/Accounts/Index.tsx
@@ -78,7 +78,7 @@ export default function AccountsIndex({ accounts }: Props) {
                     description="View and manage your bank accounts"
                 />
 
-                <div className="">
+                <div className="grid sm:grid-cols-2 gap-4">
                     {ACCOUNT_TYPE_ORDER.map((type) => {
                         const accountsInGroup = groupedAccounts[type];
                         if (accountsInGroup.length === 0) return null;
@@ -87,19 +87,19 @@ export default function AccountsIndex({ accounts }: Props) {
                             <>
                                 {isLoading
                                     ? accountsInGroup.map((account) => (
-                                          <AccountListCard
-                                              key={account.id}
-                                              account={account}
-                                              loading={true}
-                                          />
-                                      ))
+                                        <AccountListCard
+                                            key={account.id}
+                                            account={account}
+                                            loading={true}
+                                        />
+                                    ))
                                     : accountsInGroup.map((account) => (
-                                          <AccountListCard
-                                              key={account.id}
-                                              account={account}
-                                              onBalanceUpdated={refetch}
-                                          />
-                                      ))}
+                                        <AccountListCard
+                                            key={account.id}
+                                            account={account}
+                                            onBalanceUpdated={refetch}
+                                        />
+                                    ))}
                             </>
                         );
                     })}