diff --git a/electron/renderer/components/sidebar/accounts/modal-remove-account.tsx b/electron/renderer/components/sidebar/accounts/modal-remove-account.tsx
index f20a5cee..3608bbba 100644
--- a/electron/renderer/components/sidebar/accounts/modal-remove-account.tsx
+++ b/electron/renderer/components/sidebar/accounts/modal-remove-account.tsx
@@ -1,6 +1,7 @@
-import { EuiConfirmModal } from '@elastic/eui';
-import { type ReactNode, useCallback } from 'react';
-import { useListCharacters } from '../../../hooks/list-characters.jsx';
+import { EuiCode, EuiConfirmModal } from '@elastic/eui';
+import type { ReactNode } from 'react';
+import { useCallback } from 'react';
+import { useListCharacters } from '../../../hooks/characters.jsx';
 
 export interface ModalRemoveAccountInitialData {
   accountName: string;
@@ -41,7 +42,7 @@ export const ModalRemoveAccount: React.FC<ModalRemoveAccountProps> = (
 
   return (
     <EuiConfirmModal
-      title={<>Log out of account {initialData.accountName}?</>}
+      title={<>Log out of account?</>}
       onCancel={onModalClose}
       onConfirm={onModalConfirm}
       cancelButtonText="Cancel"
@@ -49,12 +50,24 @@ export const ModalRemoveAccount: React.FC<ModalRemoveAccountProps> = (
       buttonColor="danger"
       defaultFocusedButton="cancel"
     >
-      Associated characters will also be removed.
-      <ul>
-        {characters.map(({ characterName }) => {
-          return <li key={characterName}>{characterName}</li>;
-        })}
-      </ul>
+      <p>
+        <EuiCode>{initialData.accountName}</EuiCode>
+      </p>
+
+      {characters.length > 0 && (
+        <p>
+          Associated characters will also be removed:
+          <ul>
+            {characters.map(({ characterName }) => {
+              return (
+                <li key={characterName}>
+                  <EuiCode>{characterName}</EuiCode>
+                </li>
+              );
+            })}
+          </ul>
+        </p>
+      )}
     </EuiConfirmModal>
   );
 };
diff --git a/electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx b/electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx
index b160d30c..f5d4e269 100644
--- a/electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx
+++ b/electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx
@@ -1,19 +1,8 @@
-import type { EuiBasicTableColumn } from '@elastic/eui';
-import {
-  EuiButton,
-  EuiButtonIcon,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiInMemoryTable,
-  EuiPanel,
-  EuiSpacer,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiPanel, EuiSpacer } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import type React from 'react';
 import { useCallback, useState } from 'react';
-import { useListAccounts } from '../../../hooks/list-accounts.jsx';
+import { useRemoveAccount, useSaveAccount } from '../../../hooks/accounts.jsx';
 import { runInBackground } from '../../../lib/async/run-in-background.js';
 import type { Account } from '../../../types/game.types.js';
 import type { ModalAddAccountConfirmData } from './modal-add-account.jsx';
@@ -21,14 +10,16 @@ import { ModalAddAccount } from './modal-add-account.jsx';
 import { ModalEditAccount } from './modal-edit-account.jsx';
 import type { ModalRemoveAccountConfirmData } from './modal-remove-account.jsx';
 import { ModalRemoveAccount } from './modal-remove-account.jsx';
+import { TableListAccounts } from './table-list-accounts.jsx';
 
 export const SidebarItemAccounts: React.FC = (): ReactNode => {
   const [showAddAccountModal, setShowAddAccountModal] = useState(false);
   const [showEditAccountModal, setShowEditAccountModal] = useState(false);
   const [showRemoveAccountModal, setShowRemoveAccountModal] = useState(false);
 
-  // All accounts to display.
-  const accounts = useListAccounts();
+  // Hooks to save and remove accounts.
+  const saveAccount = useSaveAccount();
+  const removeAccount = useRemoveAccount();
 
   // The contextual account being edited or removed.
   const [account, setAccount] = useState<Account>();
@@ -67,67 +58,27 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
     (data: ModalAddAccountConfirmData) => {
       closeModals();
       runInBackground(async () => {
-        await window.api.saveAccount({
+        await saveAccount({
           accountName: data.accountName,
           accountPassword: data.accountPassword,
         });
       });
     },
-    [closeModals]
+    [closeModals, saveAccount]
   );
 
   const onAccountRemoveConfirm = useCallback(
     (data: ModalRemoveAccountConfirmData) => {
       closeModals();
       runInBackground(async () => {
-        await window.api.removeAccount({
+        await removeAccount({
           accountName: data.accountName,
         });
       });
     },
-    [closeModals]
+    [closeModals, removeAccount]
   );
 
-  const columns: Array<EuiBasicTableColumn<Account>> = [
-    {
-      field: 'accountName',
-      name: 'Name',
-      dataType: 'string',
-    },
-    {
-      field: 'actions',
-      name: 'Actions',
-      render: (_value: unknown, account: Account) => {
-        return (
-          <EuiFlexGroup responsive={true} gutterSize="s" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiToolTip content="Change Password" position="bottom">
-                <EuiButtonIcon
-                  aria-label="Change Password"
-                  iconType="lock"
-                  // display="base"
-                  color="warning"
-                  onClick={() => onEditAccountClick(account)}
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiToolTip content="Log Out" position="bottom">
-                <EuiButtonIcon
-                  aria-label="Log Out"
-                  iconType="exit"
-                  // display="base"
-                  color="danger"
-                  onClick={() => onRemoveAccountClick(account)}
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        );
-      },
-    },
-  ];
-
   return (
     <EuiPanel>
       <EuiCallOut title="My Accounts" iconType="key" size="s">
@@ -143,9 +94,10 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
 
       <EuiSpacer size="m" />
 
-      {accounts.length > 0 && (
-        <EuiInMemoryTable items={accounts} columns={columns} />
-      )}
+      <TableListAccounts
+        editAccountClick={onEditAccountClick}
+        removeAccountClick={onRemoveAccountClick}
+      />
 
       <EuiSpacer size="m" />
 
diff --git a/electron/renderer/components/sidebar/accounts/table-list-accounts.tsx b/electron/renderer/components/sidebar/accounts/table-list-accounts.tsx
new file mode 100644
index 00000000..5d2e95d1
--- /dev/null
+++ b/electron/renderer/components/sidebar/accounts/table-list-accounts.tsx
@@ -0,0 +1,83 @@
+import type { EuiBasicTableColumn } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiInMemoryTable,
+  EuiToolTip,
+} from '@elastic/eui';
+import { type ReactNode, memo, useMemo } from 'react';
+import { useListAccounts } from '../../../hooks/accounts.jsx';
+import type { Account } from '../../../types/game.types.js';
+
+export interface TableListAccountsProps {
+  editAccountClick: (account: Account) => void;
+  removeAccountClick: (account: Account) => void;
+}
+
+export const TableListAccounts: React.FC<TableListAccountsProps> = memo(
+  (props: TableListAccountsProps): ReactNode => {
+    const { editAccountClick, removeAccountClick } = props;
+
+    // All accounts to display.
+    const accounts = useListAccounts();
+
+    const columns = useMemo<Array<EuiBasicTableColumn<Account>>>(() => {
+      return [
+        {
+          field: 'accountName',
+          name: 'Name',
+          dataType: 'string',
+          truncateText: true,
+        },
+        {
+          field: 'actions',
+          name: 'Actions',
+          width: '25%',
+          render: (_value: unknown, account: Account) => {
+            return (
+              <EuiFlexGroup
+                responsive={true}
+                gutterSize="s"
+                alignItems="center"
+              >
+                <EuiFlexItem grow={false}>
+                  <EuiToolTip content="Change Password" position="bottom">
+                    <EuiButtonIcon
+                      aria-label="Change Password"
+                      iconType="lock"
+                      display="base"
+                      color="warning"
+                      onClick={() => editAccountClick(account)}
+                    />
+                  </EuiToolTip>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiToolTip content="Log Out" position="bottom">
+                    <EuiButtonIcon
+                      aria-label="Log Out"
+                      iconType="exit"
+                      display="base"
+                      color="danger"
+                      onClick={() => removeAccountClick(account)}
+                    />
+                  </EuiToolTip>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            );
+          },
+        },
+      ];
+    }, [editAccountClick, removeAccountClick]);
+
+    return (
+      <>
+        {accounts.length > 0 && (
+          <EuiInMemoryTable items={accounts} columns={columns} />
+        )}
+      </>
+    );
+  }
+);
+
+TableListAccounts.displayName = 'TableListAccounts';