diff --git a/apps/dashboard/src/components/activity/activity-detail-card.tsx b/apps/dashboard/src/components/activity/activity-detail-card.tsx
new file mode 100644
index 00000000000..c9438902e6d
--- /dev/null
+++ b/apps/dashboard/src/components/activity/activity-detail-card.tsx
@@ -0,0 +1,44 @@
+import { cn } from '@/utils/ui';
+import { ChevronDown } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+
+interface ActivityDetailCardProps {
+  title: ReactNode;
+  timestamp?: string;
+  expandable?: boolean;
+  open?: boolean;
+  children?: ReactNode;
+}
+
+export function ActivityDetailCard({ title, timestamp, expandable = false, open, children }: ActivityDetailCardProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isExpanded = open ?? internalOpen;
+
+  return (
+    <div className="border-1 w-full overflow-hidden rounded-lg border border-neutral-100">
+      <div
+        className={cn('group flex w-full items-center px-3 py-2 hover:bg-neutral-50', expandable && 'cursor-pointer')}
+        onClick={expandable ? () => setInternalOpen(!internalOpen) : undefined}
+      >
+        <span className="text-foreground-950 flex-1 text-left text-xs font-medium">{title}</span>
+        <div className="flex items-center gap-2 pl-3">
+          {timestamp && (
+            <span className="text-xs text-[#717784] opacity-0 transition-opacity group-hover:opacity-100">
+              {timestamp}
+            </span>
+          )}
+          {expandable && (
+            <ChevronDown className={cn('h-4 w-4 text-[#717784] transition-transform', isExpanded && 'rotate-180')} />
+          )}
+        </div>
+      </div>
+      {isExpanded && children && (
+        <div className="border-t border-neutral-200 bg-neutral-50 p-3">
+          <div className="text-foreground-600 text-xs">
+            <div className="overflow-x-auto">{children}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/activity/activity-job-item.tsx b/apps/dashboard/src/components/activity/activity-job-item.tsx
new file mode 100644
index 00000000000..4502e480fda
--- /dev/null
+++ b/apps/dashboard/src/components/activity/activity-job-item.tsx
@@ -0,0 +1,211 @@
+import { Route, ChevronDown } from 'lucide-react';
+import { IActivityJob, IDelayRegularMetadata, IDigestRegularMetadata, JobStatusEnum, StepTypeEnum } from '@novu/shared';
+import { Button } from '@/components/primitives/button';
+import { Badge } from '@/components/primitives/badge';
+import { Card, CardContent, CardHeader } from '../primitives/card';
+import { format } from 'date-fns';
+import { useState } from 'react';
+import { cn } from '@/utils/ui';
+import { ExecutionDetailItem } from './execution-detail-item';
+import { STEP_TYPE_TO_ICON } from '../icons/utils';
+import { STEP_TYPE_TO_COLOR } from '../../utils/color';
+import { JOB_STATUS_CONFIG } from './constants';
+import { TimeDisplayHoverCard } from '../time-display-hover-card';
+
+interface ActivityJobItemProps {
+  job: IActivityJob;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+export function ActivityJobItem({ job, isFirst, isLast }: ActivityJobItemProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="relative flex items-center gap-1">
+      <div
+        className={cn(
+          'absolute left-[11px] h-[calc(100%+24px)] w-[1px] bg-neutral-200',
+          isFirst ? 'top-[50%]' : 'top-0',
+          isLast ? 'h-[50%]' : 'h-[calc(100%+24px)]',
+          isFirst && isLast && 'bg-transparent'
+        )}
+      />
+
+      <JobStatusIndicator status={job.status} />
+
+      <Card className="border-1 flex-1 border border-neutral-200 p-1 shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]">
+        <CardHeader
+          className="flex flex-row items-center justify-between bg-white p-2 px-1 hover:cursor-pointer"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <div className="flex items-center gap-1.5">
+            <div
+              className={`h-5 w-5 rounded-full border opacity-40 border-${STEP_TYPE_TO_COLOR[job.type as keyof typeof STEP_TYPE_TO_COLOR]}`}
+            >
+              <div
+                className={`h-full w-full rounded-full bg-neutral-50 text-${STEP_TYPE_TO_COLOR[job.type as keyof typeof STEP_TYPE_TO_COLOR]} flex items-center justify-center`}
+              >
+                {getJobIcon(job.type)}
+              </div>
+            </div>
+            <span className="text-foreground-950 text-xs capitalize">{formatJobType(job.type)}</span>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-foreground-600 !mt-0 h-5 gap-0 p-0 leading-[12px] hover:bg-transparent"
+          >
+            Show more
+            <ChevronDown className={cn('h-4 w-4 transition-transform', isExpanded && 'rotate-180')} />
+          </Button>
+        </CardHeader>
+
+        {!isExpanded && (
+          <CardContent className="rounded-lg bg-neutral-50 p-2">
+            <div className="flex items-center justify-between">
+              <span className="text-foreground-400 max-w-[300px] truncate pr-2 text-xs">{getStatusMessage(job)}</span>
+              <Badge variant="soft" className="bg-foreground-50 shrink-0 px-2 py-0.5 text-[11px] leading-3">
+                <TimeDisplayHoverCard date={new Date(job.updatedAt)}>
+                  {format(new Date(job.updatedAt), 'MMM d yyyy, HH:mm:ss')}
+                </TimeDisplayHoverCard>
+              </Badge>
+            </div>
+          </CardContent>
+        )}
+
+        {isExpanded && <JobDetails job={job} />}
+      </Card>
+    </div>
+  );
+}
+
+function formatJobType(type?: StepTypeEnum): string {
+  return type?.replace(/_/g, ' ') || '';
+}
+
+function getStatusMessage(job: IActivityJob): string {
+  if (job.status === JobStatusEnum.MERGED) {
+    return 'Step merged with another execution';
+  }
+
+  if (job.status === JobStatusEnum.FAILED && job.executionDetails?.length > 0) {
+    return job.executionDetails[job.executionDetails.length - 1].detail || 'Step execution failed';
+  }
+
+  switch (job.type?.toLowerCase()) {
+    case StepTypeEnum.DIGEST:
+      if (job.status === JobStatusEnum.COMPLETED) {
+        return `Digested ${job.digest?.events?.length ?? 0} events for ${(job.digest as IDigestRegularMetadata)?.amount ?? 0} ${
+          (job.digest as IDigestRegularMetadata)?.unit ?? ''
+        }`;
+      }
+      if (job.status === JobStatusEnum.DELAYED) {
+        return `Collecting Digest events for ${(job.digest as IDigestRegularMetadata)?.amount ?? 0} ${
+          (job.digest as IDigestRegularMetadata)?.unit ?? ''
+        }`;
+      }
+      return 'Digest failed';
+
+    case StepTypeEnum.DELAY:
+      if (job.status === JobStatusEnum.COMPLETED) {
+        return 'Delay completed';
+      }
+
+      if (job.status === JobStatusEnum.DELAYED) {
+        return (
+          'Waiting for ' +
+          (job.digest as IDelayRegularMetadata)?.amount +
+          ' ' +
+          (job.digest as IDelayRegularMetadata)?.unit
+        );
+      }
+
+      return 'Delay failed';
+
+    default:
+      if (job.status === JobStatusEnum.COMPLETED) {
+        return 'Message sent successfully';
+      }
+      if (job.status === JobStatusEnum.PENDING) {
+        return 'Sending message';
+      }
+
+      return '';
+  }
+}
+
+function getJobIcon(type?: StepTypeEnum) {
+  const Icon = STEP_TYPE_TO_ICON[type?.toLowerCase() as keyof typeof STEP_TYPE_TO_ICON] ?? Route;
+
+  return <Icon className="h-3.5 w-3.5" />;
+}
+
+function getJobColor(status: JobStatusEnum) {
+  switch (status) {
+    case JobStatusEnum.COMPLETED:
+      return 'success';
+    case JobStatusEnum.FAILED:
+      return 'destructive';
+    case JobStatusEnum.DELAYED:
+      return 'warning';
+    case JobStatusEnum.MERGED:
+      return 'neutral-300';
+    default:
+      return 'neutral-300';
+  }
+}
+
+function JobDetails({ job }: { job: IActivityJob }) {
+  return (
+    <div className="border-t border-neutral-100 p-4">
+      <div className="flex flex-col gap-4">
+        {job.executionDetails && job.executionDetails.length > 0 && (
+          <div className="flex flex-col gap-2">
+            {job.executionDetails.map((detail, index) => (
+              <ExecutionDetailItem key={index} detail={detail} />
+            ))}
+          </div>
+        )}
+        {/*
+        TODO: Missing backend support for digest events widget
+        {job.type === 'digest' && job.digest?.events && (
+          <ActivityDetailCard title="Digest Events" expandable={true} open>
+            <div className="min-w-0 max-w-full font-mono">
+              {job.digest.events.map((event: DigestEvent, index: number) => (
+                <div key={index} className="group flex items-center gap-2 rounded-sm px-1 py-1.5 hover:bg-neutral-100">
+                  <RiCheckboxCircleLine className="text-success h-4 w-4 shrink-0" />
+                  <div className="flex items-center gap-2 truncate">
+                    <span className="truncate text-xs text-neutral-500">{event.type}</span>
+                    <span className="text-xs text-neutral-400">
+                      {`${format(new Date(job.updatedAt), 'HH:mm')} UTC`}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ActivityDetailCard>
+        )} */}
+      </div>
+    </div>
+  );
+}
+
+interface JobStatusIndicatorProps {
+  status: JobStatusEnum;
+}
+
+function JobStatusIndicator({ status }: JobStatusIndicatorProps) {
+  const { icon: Icon, animationClass } = JOB_STATUS_CONFIG[status] || JOB_STATUS_CONFIG[JobStatusEnum.PENDING];
+
+  return (
+    <div className="relative flex-shrink-0">
+      <div className="flex h-6 w-6 items-center justify-center rounded-full bg-white shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]">
+        <div className={`text-${getJobColor(status)} flex items-center justify-center`}>
+          <Icon className={cn('h-4 w-4', animationClass)} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/activity/activity-panel.tsx b/apps/dashboard/src/components/activity/activity-panel.tsx
new file mode 100644
index 00000000000..8d179b969d2
--- /dev/null
+++ b/apps/dashboard/src/components/activity/activity-panel.tsx
@@ -0,0 +1,128 @@
+import { motion } from 'motion/react';
+import { RiPlayCircleLine, RiRouteFill } from 'react-icons/ri';
+import { ActivityJobItem } from './activity-job-item';
+import { InlineToast } from '../primitives/inline-toast';
+import { useFetchActivity } from '@/hooks/use-fetch-activity';
+import { ActivityOverview } from './components/activity-overview';
+import { IActivityJob } from '@novu/shared';
+import { Skeleton } from '../primitives/skeleton';
+
+export interface ActivityPanelProps {
+  activityId: string;
+  onActivitySelect: (activityId: string) => void;
+}
+
+export function ActivityPanel({ activityId, onActivitySelect }: ActivityPanelProps) {
+  const { activity, isPending, error } = useFetchActivity({ activityId });
+
+  if (isPending) {
+    return (
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.1 }}>
+        <LoadingSkeleton />
+      </motion.div>
+    );
+  }
+
+  if (error || !activity) {
+    return (
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }}>
+        <div className="flex h-96 items-center justify-center border-t border-neutral-200">
+          <div className="text-foreground-600 text-sm">Failed to load activity details</div>
+        </div>
+      </motion.div>
+    );
+  }
+
+  const isMerged = activity.jobs.some((job) => job.status === 'merged');
+
+  return (
+    <motion.div
+      key={activityId}
+      initial={{ opacity: 0.7 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+      className="h-full"
+    >
+      <div>
+        <div className="flex items-center gap-2 border-b border-t border-neutral-200 border-b-neutral-100 p-2 px-3">
+          <RiRouteFill className="h-3 w-3" />
+          <span className="text-foreground-950 text-sm font-medium">
+            {activity.template?.name || 'Deleted workflow'}
+          </span>
+        </div>
+        <ActivityOverview activity={activity} />
+
+        <div className="flex items-center gap-2 border-b border-t border-neutral-100 p-2 px-3">
+          <RiPlayCircleLine className="h-3 w-3" />
+          <span className="text-foreground-950 text-sm font-medium">Logs</span>
+        </div>
+
+        {isMerged && (
+          <div className="px-3 py-3">
+            <InlineToast
+              ctaClassName="text-foreground-950"
+              variant={'tip'}
+              ctaLabel="View Execution"
+              onCtaClick={() => {
+                if (activity._digestedNotificationId) {
+                  onActivitySelect(activity._digestedNotificationId);
+                }
+              }}
+              description="Remaining execution has been merged to an active Digest of an existing workflow execution."
+            />
+          </div>
+        )}
+        <LogsSection jobs={activity.jobs} />
+      </div>
+    </motion.div>
+  );
+}
+
+function LogsSection({ jobs }: { jobs: IActivityJob[] }): JSX.Element {
+  return (
+    <div className="flex flex-col gap-6 bg-white p-3">
+      {jobs.map((job, index) => (
+        <ActivityJobItem key={job._id} job={job} isFirst={index === 0} isLast={index === jobs.length - 1} />
+      ))}
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div>
+      <div className="flex items-center gap-2 border-b border-t border-neutral-200 border-b-neutral-100 p-2">
+        <Skeleton className="h-3 w-3 rounded-full" />
+        <Skeleton className="h-[20px] w-32" />
+      </div>
+
+      <div className="px-3 py-2">
+        <div className="flex flex-col gap-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="flex items-center justify-between">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-32" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 border-b border-t border-neutral-100 p-2">
+        <Skeleton className="h-3 w-3 rounded-full" />
+        <Skeleton className="h-4 w-16" />
+      </div>
+
+      <div className="flex flex-col gap-6 bg-white p-3">
+        {[...Array(2)].map((_, i) => (
+          <div key={i} className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+            <Skeleton className="h-16 w-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/activity/components/activity-overview.tsx b/apps/dashboard/src/components/activity/components/activity-overview.tsx
new file mode 100644
index 00000000000..56b81e47bf4
--- /dev/null
+++ b/apps/dashboard/src/components/activity/components/activity-overview.tsx
@@ -0,0 +1,58 @@
+import { format } from 'date-fns';
+import { Link } from 'react-router-dom';
+import { cn } from '@/utils/ui';
+import { buildRoute, ROUTES } from '@/utils/routes';
+import { useEnvironment } from '@/context/environment/hooks';
+import { TimeDisplayHoverCard } from '@/components/time-display-hover-card';
+import { OverviewItem } from './overview-item';
+import { IActivity } from '@novu/shared';
+import { JOB_STATUS_CONFIG } from '../constants';
+
+export interface ActivityOverviewProps {
+  activity: IActivity;
+}
+
+export function ActivityOverview({ activity }: ActivityOverviewProps) {
+  const { currentEnvironment } = useEnvironment();
+  const status = activity.jobs[activity?.jobs?.length - 1]?.status;
+
+  const workflowPath = buildRoute(ROUTES.EDIT_WORKFLOW, {
+    environmentSlug: currentEnvironment?.slug ?? '',
+    workflowSlug: activity?.template?._id ?? '',
+  });
+
+  return (
+    <div className="px-3 py-2">
+      <div className="mb-2 flex flex-col gap-[14px]">
+        <OverviewItem label="Workflow Identifier" value={activity.template?.name || 'Deleted workflow'}>
+          <Link
+            to={activity.template?._id ? workflowPath : '#'}
+            className={cn('text-foreground-600 cursor-pointer font-mono text-xs group-hover:underline', {
+              'text-foreground-300 cursor-not-allowed': !activity.template?._id,
+            })}
+          >
+            {activity.template?.name || 'Deleted workflow'}
+          </Link>
+        </OverviewItem>
+
+        <OverviewItem label="Transaction ID" value={activity.transactionId} isCopyable />
+
+        <OverviewItem label="Subscriber ID" value={activity.subscriber?.subscriberId ?? ''} isCopyable />
+
+        <OverviewItem label="Triggered at" value={format(new Date(activity.createdAt), 'MMM d yyyy, HH:mm:ss')}>
+          <TimeDisplayHoverCard date={new Date(activity.createdAt)}>
+            <span className="text-foreground-600 font-mono text-xs">
+              {format(new Date(activity.createdAt), 'MMM d yyyy, HH:mm:ss')}
+            </span>
+          </TimeDisplayHoverCard>
+        </OverviewItem>
+
+        <OverviewItem label="Status">
+          <span className={cn('font-mono text-xs uppercase', 'text-' + JOB_STATUS_CONFIG[status]?.color)}>
+            {status || 'QUEUED'}
+          </span>
+        </OverviewItem>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/activity/components/overview-item.tsx b/apps/dashboard/src/components/activity/components/overview-item.tsx
new file mode 100644
index 00000000000..77a6c43c6ea
--- /dev/null
+++ b/apps/dashboard/src/components/activity/components/overview-item.tsx
@@ -0,0 +1,41 @@
+import { Copy } from 'lucide-react';
+import { ReactNode } from 'react';
+import { cn } from '@/utils/ui';
+import { CopyButton } from '@/components/primitives/copy-button';
+
+interface OverviewItemProps {
+  label: string;
+  value?: string;
+  className?: string;
+  isMonospace?: boolean;
+  isCopyable?: boolean;
+  children?: ReactNode;
+}
+
+export function OverviewItem({
+  label,
+  value,
+  className = '',
+  isMonospace = true,
+  isCopyable = false,
+  children,
+}: OverviewItemProps) {
+  return (
+    <div className={cn('group flex items-center justify-between', className)}>
+      <span className="text-foreground-950 text-xs font-medium">{label}</span>
+      <div className="relative flex items-center gap-2">
+        {isCopyable && value && (
+          <CopyButton
+            valueToCopy={value}
+            variant="ghost"
+            size="icon"
+            className="text-foreground-600 mr-0 size-3 gap-0 p-0 opacity-0 transition-opacity group-hover:opacity-100"
+          >
+            <Copy className="h-3 w-3" />
+          </CopyButton>
+        )}
+        {children || <span className={cn('text-foreground-600 text-xs', isMonospace && 'font-mono')}>{value}</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/activity/execution-detail-item.tsx b/apps/dashboard/src/components/activity/execution-detail-item.tsx
new file mode 100644
index 00000000000..b6759317f21
--- /dev/null
+++ b/apps/dashboard/src/components/activity/execution-detail-item.tsx
@@ -0,0 +1,67 @@
+import { RiErrorWarningLine, RiCheckboxCircleLine, RiLoader3Line } from 'react-icons/ri';
+import { format } from 'date-fns';
+import { cn } from '@/utils/ui';
+import { ActivityDetailCard } from './activity-detail-card';
+import { IExecutionDetail } from '@novu/shared';
+import { formatJSONString } from '../../utils/string';
+
+interface ExecutionDetailItemProps {
+  detail: IExecutionDetail;
+}
+
+function getStatusConfig(status: string) {
+  switch (status.toLowerCase()) {
+    case 'success':
+      return {
+        icon: RiCheckboxCircleLine,
+        colorClass: 'text-success',
+      };
+    case 'failed':
+    case 'error':
+      return {
+        icon: RiErrorWarningLine,
+        colorClass: 'text-destructive',
+      };
+    case 'pending':
+    case 'queued':
+      return {
+        icon: RiLoader3Line,
+        colorClass: 'text-neutral-300',
+      };
+    default:
+      return {
+        icon: RiCheckboxCircleLine,
+        colorClass: 'text-success',
+      };
+  }
+}
+
+export function ExecutionDetailItem({ detail }: ExecutionDetailItemProps) {
+  const { icon: StatusIcon, colorClass } = getStatusConfig(detail.status);
+
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex h-full items-center pt-2">
+        <div
+          className={cn(
+            'flex items-center justify-center rounded-full bg-white shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]',
+            colorClass
+          )}
+        >
+          <StatusIcon className={cn('h-4 w-4', colorClass)} />
+        </div>
+      </div>
+      <ActivityDetailCard
+        title={detail.detail}
+        timestamp={format(new Date(detail.createdAt), 'HH:mm:ss')}
+        expandable={!!detail.raw}
+      >
+        {detail.raw && (
+          <pre className="min-w-0 max-w-full font-mono" style={{ width: '1px' }}>
+            {formatJSONString(detail.raw)}
+          </pre>
+        )}
+      </ActivityDetailCard>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/hooks/use-fetch-activity.ts b/apps/dashboard/src/hooks/use-fetch-activity.ts
new file mode 100644
index 00000000000..fb5fa67fdd7
--- /dev/null
+++ b/apps/dashboard/src/hooks/use-fetch-activity.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { QueryKeys } from '@/utils/query-keys';
+import type { IActivity } from '@novu/shared';
+import { useEnvironment } from '@/context/environment/hooks';
+import { getNotification } from '@/api/activity';
+
+export function useFetchActivity({ activityId }: { activityId?: string }) {
+  const { currentEnvironment } = useEnvironment();
+
+  const { data, isPending, error } = useQuery<{ data: IActivity }>({
+    queryKey: [QueryKeys.fetchActivity, currentEnvironment?._id, activityId],
+    queryFn: () => getNotification(activityId!, currentEnvironment!),
+    enabled: !!currentEnvironment?._id && !!activityId,
+  });
+
+  return {
+    activity: data?.data,
+    isPending,
+    error,
+  };
+}
diff --git a/apps/dashboard/src/pages/activity-feed.tsx b/apps/dashboard/src/pages/activity-feed.tsx
index ae0c2cb6370..dfb06104012 100644
--- a/apps/dashboard/src/pages/activity-feed.tsx
+++ b/apps/dashboard/src/pages/activity-feed.tsx
@@ -1,5 +1,7 @@
 import { DashboardLayout } from '@/components/dashboard-layout';
 import { ActivityTable } from '@/components/activity/activity-table';
+import { motion, AnimatePresence } from 'motion/react';
+import { ActivityPanel } from '@/components/activity/activity-panel';
 import { Badge } from '../components/primitives/badge';
 import { useSearchParams } from 'react-router-dom';
 import { IActivity } from '@novu/shared';
@@ -20,6 +22,13 @@ export function ActivityFeed() {
     });
   };
 
+  const handleActivityPanelSelect = (activityId: string) => {
+    setSearchParams((prev) => {
+      prev.set('activityItemId', activityId);
+      return prev;
+    });
+  };
+
   return (
     <>
       <PageMeta title="Activity Feed" />
@@ -34,7 +43,35 @@ export function ActivityFeed() {
         }
       >
         <div className="relative mt-10 flex h-[calc(100vh-88px)]">
-          <ActivityTable selectedActivityId={activityItemId} onActivitySelect={handleActivitySelect} />
+          <motion.div
+            layout
+            transition={{
+              duration: 0.2,
+              ease: [0.32, 0.72, 0, 1],
+            }}
+            className="h-full flex-1"
+            style={{
+              width: activityItemId ? '65%' : '100%',
+            }}
+          >
+            <ActivityTable selectedActivityId={activityItemId} onActivitySelect={handleActivitySelect} />
+          </motion.div>
+
+          <AnimatePresence mode="wait">
+            {activityItemId && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{
+                  duration: 0.2,
+                }}
+                className="bg-background h-full w-[35%] overflow-auto border-l"
+              >
+                <ActivityPanel activityId={activityItemId} onActivitySelect={handleActivityPanelSelect} />
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       </DashboardLayout>
     </>
diff --git a/apps/dashboard/src/utils/string.ts b/apps/dashboard/src/utils/string.ts
index 45c8e8e431f..523e6343cb8 100644
--- a/apps/dashboard/src/utils/string.ts
+++ b/apps/dashboard/src/utils/string.ts
@@ -1,3 +1,26 @@
 export const capitalize = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
+
+export const formatJSONString = (raw: unknown): string => {
+  if (typeof raw === 'string') {
+    try {
+      const parsed = JSON.parse(raw);
+      return JSON.stringify(parsed, null, 2)
+        .split('\n')
+        .map((line) => line.trimEnd())
+        .join('\n');
+    } catch {
+      return raw;
+    }
+  }
+
+  if (typeof raw === 'object') {
+    return JSON.stringify(raw, null, 2)
+      .split('\n')
+      .map((line) => line.trimEnd())
+      .join('\n');
+  }
+
+  return String(raw);
+};