diff --git a/web/vtadmin/src/api/http.ts b/web/vtadmin/src/api/http.ts
index 030455c652d..c23ad131332 100644
--- a/web/vtadmin/src/api/http.ts
+++ b/web/vtadmin/src/api/http.ts
@@ -421,6 +421,20 @@ export const fetchVSchema = async ({ clusterID, keyspace }: FetchVSchemaParams)
     return pb.VSchema.create(result);
 };
 
+export interface FetchTransactionsParams {
+    clusterID: string;
+    keyspace: string;
+}
+
+export const fetchTransactions = async ({ clusterID, keyspace }: FetchTransactionsParams) => {
+    const { result } = await vtfetch(`/api/transactions/${clusterID}/${keyspace}`);
+
+    const err = vtctldata.GetUnresolvedTransactionsResponse.verify(result);
+    if (err) throw Error(err);
+
+    return vtctldata.GetUnresolvedTransactionsResponse.create(result);
+};
+
 export const fetchWorkflows = async () => {
     const { result } = await vtfetch(`/api/workflows`);
 
diff --git a/web/vtadmin/src/components/App.tsx b/web/vtadmin/src/components/App.tsx
index f7821f3a4ad..bbf6f014111 100644
--- a/web/vtadmin/src/components/App.tsx
+++ b/web/vtadmin/src/components/App.tsx
@@ -40,6 +40,7 @@ import { isReadOnlyMode } from '../util/env';
 import { CreateKeyspace } from './routes/createKeyspace/CreateKeyspace';
 import { Topology } from './routes/topology/Topology';
 import { ClusterTopology } from './routes/topology/ClusterTopology';
+import { Transactions } from './routes/Transactions';
 
 export const App = () => {
     return (
@@ -117,6 +118,10 @@ export const App = () => {
                             <Workflow />
                         </Route>
 
+                        <Route path="/transactions">
+                            <Transactions />
+                        </Route>
+
                         <Route path="/topology/:clusterID">
                             <ClusterTopology />
                         </Route>
diff --git a/web/vtadmin/src/components/NavRail.tsx b/web/vtadmin/src/components/NavRail.tsx
index e2897395760..9f9e1bf1681 100644
--- a/web/vtadmin/src/components/NavRail.tsx
+++ b/web/vtadmin/src/components/NavRail.tsx
@@ -65,6 +65,9 @@ export const NavRail = () => {
                 </ul>
 
                 <ul className={style.navList}>
+                    <li>
+                        <NavRailLink hotkey="T" text="Transactions" to="/transactions" />
+                    </li>
                     <li>
                         <NavRailLink icon={Icons.download} text="Backups" to="/backups" />
                     </li>
diff --git a/web/vtadmin/src/components/routes/Transactions.tsx b/web/vtadmin/src/components/routes/Transactions.tsx
new file mode 100644
index 00000000000..dc6742ccac8
--- /dev/null
+++ b/web/vtadmin/src/components/routes/Transactions.tsx
@@ -0,0 +1,113 @@
+/**
+ * Copyright 2024 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState } from 'react';
+import { useKeyspaces, useTransactions } from '../../hooks/api';
+import { DataCell } from '../dataTable/DataCell';
+import { DataTable } from '../dataTable/DataTable';
+import { ContentContainer } from '../layout/ContentContainer';
+import { WorkspaceHeader } from '../layout/WorkspaceHeader';
+import { WorkspaceTitle } from '../layout/WorkspaceTitle';
+import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
+import { query } from '../../proto/vtadmin';
+import { Select } from '../inputs/Select';
+import { FetchTransactionsParams } from '../../api/http';
+import { formatTransactionState } from '../../util/transactions';
+import { TABLET_TYPES } from '../../util/tablets';
+import { ShardLink } from '../links/ShardLink';
+
+const COLUMNS = ['ID', 'State', 'Participants'];
+
+export const Transactions = () => {
+    useDocumentTitle('Transactions');
+
+    const keyspacesQuery = useKeyspaces();
+
+    const { data: keyspaces = [] } = keyspacesQuery;
+
+    const [params, setParams] = useState<FetchTransactionsParams>({ clusterID: '', keyspace: '' });
+
+    const selectedKeyspace = keyspaces.find(
+        (ks) => ks.keyspace?.name === params.keyspace && ks.cluster?.id === params.clusterID
+    );
+
+    const transactionsQuery = useTransactions(params, {
+        enabled: !!params.keyspace,
+    });
+
+    const transactions = (transactionsQuery.data && transactionsQuery.data.transactions) || [];
+
+    const renderRows = (rows: query.ITransactionMetadata[]) => {
+        return rows.map((row) => {
+            return (
+                <tr key={row.dtid}>
+                    <DataCell>
+                        <div>{row.dtid}</div>
+                    </DataCell>
+                    <DataCell>
+                        <div>{formatTransactionState(row)}</div>
+                    </DataCell>
+                    <DataCell>
+                        {row.participants?.map((participant) => {
+                            const shard = `${participant.keyspace}/${participant.shard}`;
+                            const tabletType = TABLET_TYPES[participant.tablet_type!];
+                            return (
+                                <div>
+                                    <ShardLink
+                                        clusterID={params.clusterID}
+                                        keyspace={participant.keyspace}
+                                        shard={participant.shard}
+                                    >
+                                        {shard}
+                                    </ShardLink>
+                                    <span className="ml-2 text-sm">{tabletType}</span>
+                                </div>
+                            );
+                        })}
+                    </DataCell>
+                </tr>
+            );
+        });
+    };
+
+    return (
+        <div>
+            <WorkspaceHeader className="mb-0">
+                <WorkspaceTitle>Transactions</WorkspaceTitle>
+            </WorkspaceHeader>
+
+            <ContentContainer>
+                <Select
+                    className="block w-[740px]"
+                    disabled={keyspacesQuery.isLoading}
+                    inputClassName="block w-full"
+                    items={keyspaces}
+                    label="Keyspace"
+                    onChange={(ks) => setParams({ clusterID: ks?.cluster?.id!, keyspace: ks?.keyspace?.name! })}
+                    placeholder={
+                        keyspacesQuery.isLoading
+                            ? 'Loading keyspaces...'
+                            : 'Select a keyspace to view unresolved transactions'
+                    }
+                    renderItem={(ks) => `${ks?.keyspace?.name} (${ks?.cluster?.id})`}
+                    selectedItem={selectedKeyspace}
+                />
+                <DataTable columns={COLUMNS} data={transactions} renderRows={renderRows} />
+                <QueryLoadingPlaceholder query={transactionsQuery} />
+            </ContentContainer>
+        </div>
+    );
+};
diff --git a/web/vtadmin/src/hooks/api.ts b/web/vtadmin/src/hooks/api.ts
index f3772ed4ab0..c60888ef154 100644
--- a/web/vtadmin/src/hooks/api.ts
+++ b/web/vtadmin/src/hooks/api.ts
@@ -81,6 +81,8 @@ import {
     ValidateVersionShardParams,
     startWorkflow,
     stopWorkflow,
+    FetchTransactionsParams,
+    fetchTransactions,
 } from '../api/http';
 import { vtadmin as pb, vtctldata } from '../proto/vtadmin';
 import { formatAlias } from '../util/tablets';
@@ -405,6 +407,16 @@ export const useVSchema = (params: FetchVSchemaParams, options?: UseQueryOptions
     return useQuery(['vschema', params], () => fetchVSchema(params));
 };
 
+/**
+ * useTransactions is a query hook that fetches unresolved transactions for the given keyspace.
+ */
+export const useTransactions = (
+    params: FetchTransactionsParams,
+    options?: UseQueryOptions<vtctldata.GetUnresolvedTransactionsResponse, Error> | undefined
+) => {
+    return useQuery(['transactions', params], () => fetchTransactions(params), { ...options });
+};
+
 export const useVTExplain = (
     params: Parameters<typeof fetchVTExplain>[0],
     options?: UseQueryOptions<pb.VTExplainResponse, Error> | undefined
diff --git a/web/vtadmin/src/util/transactions.ts b/web/vtadmin/src/util/transactions.ts
new file mode 100644
index 00000000000..10d18cb6173
--- /dev/null
+++ b/web/vtadmin/src/util/transactions.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2024 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { invertBy } from 'lodash-es';
+import { query } from '../proto/vtadmin';
+
+/**
+ * TRANSACTION_STATES maps numeric transaction state back to human readable strings.
+ */
+export const TRANSACTION_STATES = Object.entries(invertBy(query.TransactionState)).reduce((acc, [k, vs]) => {
+    acc[k] = vs[0];
+    return acc;
+}, {} as { [k: string]: string });
+
+export const formatTransactionState = (transaction: query.ITransactionMetadata) =>
+    transaction.state && TRANSACTION_STATES[transaction.state];