diff --git a/web/vtadmin/src/components/routes/workflow/Workflow.tsx b/web/vtadmin/src/components/routes/workflow/Workflow.tsx
index ef81bb40c25..c46218e351c 100644
--- a/web/vtadmin/src/components/routes/workflow/Workflow.tsx
+++ b/web/vtadmin/src/components/routes/workflow/Workflow.tsx
@@ -30,6 +30,7 @@ import { TabContainer } from '../../tabs/TabContainer';
 import { Tab } from '../../tabs/Tab';
 import { getStreams } from '../../../util/workflows';
 import { Code } from '../../Code';
+import { ShardLink } from '../../links/ShardLink';
 
 interface RouteParams {
     clusterID: string;
@@ -46,6 +47,11 @@ export const Workflow = () => {
     const { data } = useWorkflow({ clusterID, keyspace, name });
     const streams = getStreams(data);
 
+    let isReshard = false;
+    if (data && data.workflow) {
+        isReshard = data.workflow.workflow_type === 'Reshard';
+    }
+
     return (
         <div>
             <WorkspaceHeader>
@@ -54,6 +60,36 @@ export const Workflow = () => {
                 </NavCrumbs>
 
                 <WorkspaceTitle className="font-mono">{name}</WorkspaceTitle>
+                {isReshard && (
+                    <div className={style.headingMetaContainer}>
+                        <div className={style.headingMeta}>
+                            <span>
+                                {data?.workflow?.source?.shards?.length! > 1 ?
+                                    "Source Shards: "
+                                : "Source Shard: "}
+                                {data?.workflow?.source?.shards?.map((shard) => (
+                                    <code key={`${keyspace}/${shard}`}>
+                                        <ShardLink clusterID={clusterID} keyspace={keyspace} shard={shard}>
+                                            {`${keyspace}/${shard} `}
+                                        </ShardLink>
+                                    </code>
+                                ))}
+                            </span>
+                            <span>
+                                {data?.workflow?.target?.shards?.length! > 1 ?
+                                    "Target Shards: "
+                                : "Target Shard: "}
+                                {data?.workflow?.target?.shards?.map((shard) => (
+                                    <code key={`${keyspace}/${shard}`}>
+                                        <ShardLink clusterID={clusterID} keyspace={keyspace} shard={shard}>
+                                            {`${keyspace}/${shard} `}
+                                        </ShardLink>
+                                    </code>
+                                ))}
+                            </span>
+                        </div>
+                    </div>
+                )}
                 <div className={style.headingMetaContainer}>
                     <div className={style.headingMeta} style={{ float: 'left' }}>
                         <span>
diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx
index 54c473c9432..331d356ca23 100644
--- a/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx
+++ b/web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx
@@ -25,6 +25,7 @@ import {
     formatStreamKey,
     getReverseWorkflow,
     getStreamSource,
+    getStreamTarget,
     getStreams,
     getTableCopyStates,
 } from '../../../util/workflows';
@@ -34,6 +35,9 @@ import { DataCell } from '../../dataTable/DataCell';
 import { StreamStatePip } from '../../pips/StreamStatePip';
 import { ThrottleThresholdSeconds } from '../Workflows';
 import { ShardLink } from '../../links/ShardLink';
+import { Tooltip } from '../../tooltip/Tooltip';
+import { TabletLink } from '../../links/TabletLink';
+import { formatAlias } from '../../../util/tablets';
 
 interface Props {
     clusterID: string;
@@ -47,7 +51,7 @@ const LOG_COLUMNS = ['Type', 'State', 'Updated At', 'Message', 'Count'];
 
 const TABLE_COPY_STATE_COLUMNS = ['Table Name', 'Total Bytes', 'Bytes Copied', 'Total Rows', 'Rows Copied'];
 
-const STREAM_COLUMNS = ['Stream', 'State', 'Message', 'Transaction Timestamp', 'Database Name'];
+const STREAM_COLUMNS = ['Stream', 'Source Shard', 'Target Shard', 'Message', 'Transaction Timestamp', 'Database Name'];
 
 export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
     const { data: workflowData } = useWorkflow({ clusterID, keyspace, name });
@@ -148,6 +152,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
     const renderStreamRows = (rows: typeof streams) => {
         return rows.map((row) => {
             const source = getStreamSource(row);
+            const target = getStreamTarget(row, keyspace);
             const href =
                 row.tablet && row.id
                     ? `/workflow/${clusterID}/${keyspace}/${name}/stream/${row.tablet.cell}/${row.tablet.uid}/${row.id}`
@@ -159,22 +164,20 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
             return (
                 <tr key={row.key}>
                     <DataCell>
-                        <StreamStatePip state={rowState} />{' '}
+                        <Tooltip text={rowState!}>
+                            <span>
+                                <StreamStatePip state={rowState} />{' '}
+                            </span>
+                        </Tooltip>
                         <Link className="font-bold" to={href}>
                             {row.key}
                         </Link>
-                        {source && (
-                            <div className="text-sm text-secondary">
-                                Source Shard{' '}
-                                <ShardLink
-                                    clusterID={clusterID}
-                                    keyspace={row.binlog_source?.keyspace}
-                                    shard={row.binlog_source?.shard}
-                                >
-                                    {source}
-                                </ShardLink>
-                            </div>
-                        )}
+                        <div className="text-sm text-secondary">
+                            Tablet{' '}
+                            <TabletLink alias={formatAlias(row.tablet)} clusterID={clusterID}>
+                                {formatAlias(row.tablet)}
+                            </TabletLink>
+                        </div>
                         <div className="text-sm text-secondary">
                             Updated {formatDateTimeShort(row.time_updated?.seconds)}
                         </div>
@@ -185,7 +188,28 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
                             </div>
                         ) : null}
                     </DataCell>
-                    <DataCell>{rowState}</DataCell>
+                    <DataCell>
+                        {source ? (
+                            <ShardLink
+                                clusterID={clusterID}
+                                keyspace={row.binlog_source?.keyspace}
+                                shard={row.binlog_source?.shard}
+                            >
+                                {source}
+                            </ShardLink>
+                        ) : (
+                            '-'
+                        )}
+                    </DataCell>
+                    <DataCell>
+                        {target ? (
+                            <ShardLink clusterID={clusterID} keyspace={keyspace} shard={row.shard}>
+                                {target}
+                            </ShardLink>
+                        ) : (
+                            '-'
+                        )}
+                    </DataCell>
                     <DataCell>{row.message ? row.message : '-'}</DataCell>
                     <DataCell>
                         {row.transaction_timestamp && row.transaction_timestamp.seconds
@@ -239,7 +263,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
     };
 
     return (
-        <div className="mt-12 mb-16">
+        <div className="mt-8 mb-16">
             <DataTable
                 columns={SUMMARY_COLUMNS}
                 data={[workflowSummary]}
@@ -247,6 +271,7 @@ export const WorkflowDetails = ({ clusterID, keyspace, name }: Props) => {
                 pageSize={1}
                 title="Summary"
             />
+            <span id="workflowStreams"></span>
             <DataTable
                 columns={STREAM_COLUMNS}
                 data={streams}
diff --git a/web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx b/web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
index ef521406e3d..bc0860755fc 100644
--- a/web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
+++ b/web/vtadmin/src/components/routes/workflow/WorkflowStreams.tsx
@@ -122,29 +122,6 @@ export const WorkflowStreams = ({ clusterID, keyspace, name }: Props) => {
                     <WorkflowStreamsLagChart clusterID={clusterID} keyspace={keyspace} workflowName={name} />
                 </>
             )}
-
-            <h3 className="mt-24 mb-8" id="workflowStreams">
-                Streams
-            </h3>
-            {/* TODO(doeg): add a protobuf enum for this (https://github.com/vitessio/vitess/projects/12#card-60190340) */}
-            {['Error', 'Copying', 'Running', 'Stopped'].map((streamState) => {
-                if (!Array.isArray(streamsByState[streamState])) {
-                    return null;
-                }
-
-                return (
-                    <div className="my-12" key={streamState}>
-                        <DataTable
-                            columns={COLUMNS}
-                            data={streamsByState[streamState]}
-                            // TODO(doeg): make pagination optional in DataTable https://github.com/vitessio/vitess/projects/12#card-60810231
-                            pageSize={1000}
-                            renderRows={renderRows}
-                            title={streamState}
-                        />
-                    </div>
-                );
-            })}
         </div>
     );
 };