diff --git a/web/src/gui/deployments/DeploymentPreview.tsx b/web/src/gui/deployments/DeploymentPreview.tsx
index 9045885c..6f1ae898 100644
--- a/web/src/gui/deployments/DeploymentPreview.tsx
+++ b/web/src/gui/deployments/DeploymentPreview.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 import { FC } from 'react';
 import { FiClock, FiFileText, FiGitCommit } from 'react-icons/fi';
 import TimeAgo from 'react-timeago-i18n';
@@ -31,6 +31,7 @@ export const DeploymentPreview: FC<{
         siteIdQuery ?? '',
         deployment_id ?? ''
     );
+    const navigate = useNavigate();
 
     const { data: previews } = deployment_id
         ? useDeploymentPreviews(siteIdQuery ?? '', deployment_id ?? '')
@@ -49,9 +50,27 @@ export const DeploymentPreview: FC<{
         githubContext?.data.workflow ?? ''
     );
 
+    const handleCardClick = (event: any) => {
+        event.preventDefault();
+
+        navigate({
+            to: '/site/$siteId/deployment/$deploymentId',
+            params: {
+                siteId: deployment?.site_id ?? '',
+                deploymentId: deployment?.deployment_id ?? '',
+            },
+        });
+    };
+
     if (githubContext) {
         return (
-            <div className="card flex flex-wrap items-stretch justify-stretch gap-4">
+            <div
+                onClick={handleCardClick}
+                onKeyDown={handleCardClick}
+                role="button"
+                tabIndex={0}
+                className="card flex flex-wrap items-stretch justify-stretch gap-4"
+            >
                 <Link
                     to="/site/$siteId/deployment/$deploymentId"
                     params={{
@@ -59,8 +78,10 @@ export const DeploymentPreview: FC<{
                         siteId: deployment?.site_id ?? '',
                     }}
                     className="block h-fit w-full cursor-pointer md:h-screen md:max-h-32 md:w-fit"
+                    title="View deployment details"
+                    onClick={(event) => event.stopPropagation()}
                 >
-                    <div className="bg-secondary aspect-video h-full min-h-24 rounded-md border drop-shadow-sm md:max-h-48">
+                    <div className="aspect-video h-full min-h-24 rounded-md border bg-secondary drop-shadow-sm md:max-h-48">
                         {previews && previews.length > 0 && (
                             <img
                                 alt="Deployment Preview"
@@ -70,98 +91,115 @@ export const DeploymentPreview: FC<{
                         )}
                     </div>
                 </Link>
-                <div className="w-full py-2 md:w-fit md:grow">
-                    <div className="flex w-fit items-center gap-2">
-                        <Link
-                            to="/site/$siteId/deployment/$deploymentId"
-                            params={{
-                                deploymentId: deployment?.deployment_id ?? '',
-                                siteId: deployment?.site_id ?? '',
-                            }}
-                            className="hover:text-link flex w-fit items-center gap-2 hover:underline"
-                        >
-                            {githubContext.data.commit.message}
-                        </Link>
-                        <WorkflowStatusIndicator
-                            status={githubContext.data.workflow_status}
-                        />
+                <div className="flex grow flex-wrap justify-between">
+                    <div className="md:w-fit md:grow">
+                        <div className="flex w-fit items-center gap-2">
+                            <Link
+                                to="/site/$siteId/deployment/$deploymentId"
+                                params={{
+                                    deploymentId:
+                                        deployment?.deployment_id ?? '',
+                                    siteId: deployment?.site_id ?? '',
+                                }}
+                                className="flex w-fit items-center gap-2 hover:text-link hover:underline"
+                                title="View deployment details"
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                {githubContext.data.commit.message}
+                            </Link>
+                            <WorkflowStatusIndicator
+                                status={githubContext.data.workflow_status}
+                            />
+                        </div>
+                        <div className="w-fit">
+                            <Link
+                                to={githubContext.data.commit.url}
+                                className="flex w-fit items-center gap-1 text-muted hover:text-link hover:underline"
+                                target="_blank"
+                                title="View commit on GitHub"
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                <FiGitCommit />
+                                {githubContext.data.commit.id.slice(0, 7)}
+                            </Link>
+                            <Link
+                                to={githubContext.workflowUrl}
+                                className="flex w-fit items-center gap-1 text-muted hover:text-link hover:underline"
+                                target="_blank"
+                                title="View workflow on GitHub"
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                {!workflowStartsWithEmoji && <FiFileText />}
+                                {githubContext.data.workflow}
+                            </Link>
+                            {githubContext.duration &&
+                                match(githubContext.duration)
+                                    .with({ type: 'completed' }, (duration) => (
+                                        <div className="flex items-center gap-1 text-muted">
+                                            <FiClock />
+                                            {secondsToDuration(
+                                                duration.duration
+                                            )}
+                                        </div>
+                                    ))
+                                    .with({ type: 'pending' }, (duration) => (
+                                        <div className="flex animate-pulse items-center gap-1 text-muted">
+                                            <FiClock className="animate-spin" />
+                                            <LiveAgo
+                                                date={
+                                                    new Date(duration.startedAt)
+                                                }
+                                            />
+                                        </div>
+                                    ))
+                                    .otherwise(() => <></>)}
+                        </div>
                     </div>
-                    <div className="w-fit">
+                    <div className="flex flex-col items-end gap-2">
                         <Link
-                            to={githubContext.data.commit.url}
-                            className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
+                            to={githubContext.workflowUrl}
+                            className="w-fit rounded-md bg-secondary px-2 py-0"
                             target="_blank"
+                            title="View workflow run on GitHub"
+                            onClick={(event) => event.stopPropagation()}
                         >
-                            <FiGitCommit />
-                            {githubContext.data.commit.id.slice(0, 7)}
+                            {githubContext.data.event} #{' '}
+                            {githubContext.data.runNumber}
                         </Link>
                         <Link
-                            to={githubContext.workflowUrl}
-                            className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
+                            to={
+                                `https://github.com/${githubContext.data.commit.author.username}` as any
+                            }
+                            className="flex items-center gap-2 hover:text-link hover:underline"
                             target="_blank"
+                            title="View author's GitHub profile"
+                            onClick={(event) => event.stopPropagation()}
                         >
-                            {!workflowStartsWithEmoji && <FiFileText />}
-                            {githubContext.data.workflow}
-                        </Link>
-                        {githubContext.duration &&
-                            match(githubContext.duration)
-                                .with({ type: 'completed' }, (duration) => (
-                                    <div className="text-muted flex items-center gap-1">
-                                        <FiClock />
-                                        {secondsToDuration(duration.duration)}
-                                    </div>
-                                ))
-                                .with({ type: 'pending' }, (duration) => (
-                                    <div className="text-muted flex animate-pulse items-center gap-1">
-                                        <FiClock className="animate-spin" />
-                                        <LiveAgo
-                                            date={new Date(duration.startedAt)}
-                                        />
-                                    </div>
-                                ))
-                                .otherwise(() => <></>)}
-                    </div>
-                </div>
-                <div className="flex flex-col items-end justify-center gap-2 ">
-                    <Link
-                        to={githubContext.workflowUrl}
-                        className="bg-secondary w-fit rounded-md border px-2 py-0"
-                        target="_blank"
-                    >
-                        {githubContext.data.event} #{' '}
-                        {githubContext.data.runNumber}
-                    </Link>
-                    <Link
-                        to={
-                            `https://github.com/${githubContext.data.commit.author.username}` as any
-                        }
-                        className="hover:text-link flex items-center gap-2 hover:underline"
-                        target="_blank"
-                    >
-                        <span>{githubContext.data.commit.author.name}</span>
-                        <img
-                            src={`https://github.com/${githubContext.data.commit.author.username}.png`}
-                            className="size-6 rounded-sm"
-                            alt={githubContext.data.commit.author.name}
-                        />
-                    </Link>
-                    {githubContext.data.commit.timestamp && (
-                        <div className="text-muted">
-                            <TimeAgo
-                                date={
-                                    new Date(
-                                        githubContext.data.commit.timestamp
-                                    )
-                                }
-                                formatOptions={{
-                                    numeric: 'always',
-                                    style: 'long',
-                                }}
+                            <span>{githubContext.data.commit.author.name}</span>
+                            <img
+                                src={`https://github.com/${githubContext.data.commit.author.username}.png`}
+                                className="size-6 rounded-sm"
+                                alt={githubContext.data.commit.author.name}
                             />
-                        </div>
-                    )}
+                        </Link>
+                        {githubContext.data.commit.timestamp && (
+                            <div className="text-muted">
+                                <TimeAgo
+                                    date={
+                                        new Date(
+                                            githubContext.data.commit.timestamp
+                                        )
+                                    }
+                                    formatOptions={{
+                                        numeric: 'always',
+                                        style: 'long',
+                                    }}
+                                />
+                            </div>
+                        )}
 
-                    {/* <div>{githubContext.data.commit.timestamp}</div> */}
+                        {/* <div>{githubContext.data.commit.timestamp}</div> */}
+                    </div>
                 </div>
             </div>
         );
@@ -176,8 +214,9 @@ export const DeploymentPreview: FC<{
                     siteId: deployment?.site_id ?? '',
                 }}
                 className="block h-fit w-full cursor-pointer md:h-screen md:max-h-32 md:w-fit"
+                title="View deployment details"
             >
-                <div className="bg-secondary aspect-video h-full min-h-24 overflow-hidden rounded-md border drop-shadow-sm md:max-h-48">
+                <div className="aspect-video h-full min-h-24 overflow-hidden rounded-md border bg-secondary drop-shadow-sm md:max-h-48">
                     {previews && previews.length > 0 && (
                         <img
                             alt="Deployment Preview"
diff --git a/web/src/gui/deployments/DeploymentPreviewCover.tsx b/web/src/gui/deployments/DeploymentPreviewCover.tsx
index 20cf42d9..9369c67c 100644
--- a/web/src/gui/deployments/DeploymentPreviewCover.tsx
+++ b/web/src/gui/deployments/DeploymentPreviewCover.tsx
@@ -18,7 +18,7 @@ export const DeploymentPreviewCover: FC<{
     return (
         <div className="flex">
             <ModalRoot>
-                <div className="aspect-video h-fit w-full max-w-sm overflow-hidden rounded-md border border-gray-200 bg-gray-100">
+                <div className="aspect-video h-fit w-full overflow-hidden rounded-md border border-gray-200 bg-gray-100 md:max-w-md">
                     <ModalTrigger>
                         {previews && previews.length > 0 && (
                             <img
diff --git a/web/src/gui/deployments/context/context.tsx b/web/src/gui/deployments/context/context.tsx
index 57d993d1..5a67251a 100644
--- a/web/src/gui/deployments/context/context.tsx
+++ b/web/src/gui/deployments/context/context.tsx
@@ -30,7 +30,7 @@ export const DeploymentContext: FC<{
         );
 
     return (
-        <div className="card no-padding flex gap-4 p-4">
+        <div className="card no-padding flex flex-col gap-4 p-4 md:flex-row">
             <div className="">
                 <DeploymentPreviewCover
                     siteId={siteId}
diff --git a/web/src/gui/deployments/context/github.tsx b/web/src/gui/deployments/context/github.tsx
index cdef596e..4fdb276b 100644
--- a/web/src/gui/deployments/context/github.tsx
+++ b/web/src/gui/deployments/context/github.tsx
@@ -105,7 +105,7 @@ export const GithubDeploymentContext: FC<{
     return (
         <div className="flex grow flex-col justify-center gap-2">
             <div className="flex grow items-start justify-between gap-4">
-                <div className="flex h-full flex-col justify-center gap-1">
+                <div className="flex h-full flex-col justify-center gap-1 md:justify-start">
                     <div className="flex items-center gap-2">
                         <div className="font-bold">
                             {context.data.commit.message}
@@ -113,8 +113,9 @@ export const GithubDeploymentContext: FC<{
                         {decoratedContext.workflowUrl && (
                             <Link
                                 to={decoratedContext.workflowUrl}
-                                className="hover:text-link flex items-center gap-2 hover:underline"
+                                className="flex items-center gap-2 hover:text-link hover:underline"
                                 target="_blank"
+                                title="View workflow run"
                             >
                                 <FiFileText />
                             </Link>
@@ -122,8 +123,9 @@ export const GithubDeploymentContext: FC<{
                         {decoratedContext.data.commit.url && (
                             <Link
                                 to={decoratedContext.data.commit.url}
-                                className="hover:text-link flex items-center gap-2 hover:underline"
+                                className="flex items-center gap-2 hover:text-link hover:underline"
                                 target="_blank"
+                                title="View commit details"
                             >
                                 <FiGitCommit />
                             </Link>
@@ -132,8 +134,9 @@ export const GithubDeploymentContext: FC<{
                     <div className="space-y-2">
                         <Link
                             to={decoratedContext.repoUrl}
-                            className="hover:text-link text-muted flex w-fit items-center gap-1 hover:underline"
+                            className="flex w-fit items-center gap-1 text-muted hover:text-link hover:underline"
                             target="_blank"
+                            title="View repository"
                         >
                             <FiGitCommit />
                             {decoratedContext.data.commit.id.slice(0, 7)}
@@ -141,7 +144,7 @@ export const GithubDeploymentContext: FC<{
                     </div>
                 </div>
                 <div className="flex flex-col items-end justify-center">
-                    <div className="bg-secondary w-fit rounded-md border px-2 py-0">
+                    <div className="w-fit rounded-md border bg-secondary px-2 py-0">
                         {context.data.event}
                     </div>
                     <div>
@@ -151,15 +154,16 @@ export const GithubDeploymentContext: FC<{
                     </div>
                 </div>
             </div>
-            <div className="grid grid-cols-2 gap-2">
+            <div className="grid gap-2 sm:grid-cols-1 lg:grid-cols-2">
                 <div className="mt-auto space-y-1">
                     <div className="text-muted">Created by</div>
                     <Link
                         to={
                             `https://github.com/${context.data.commit.author.username}` as any
                         }
-                        className="hover:text-link flex items-center gap-2 hover:underline"
+                        className="flex items-center gap-2 hover:text-link hover:underline"
                         target="_blank"
+                        title={`View ${context.data.commit.author.name}'s GitHub profile`}
                     >
                         <img
                             src={`https://github.com/${context.data.commit.author.username}.png`}
@@ -183,7 +187,7 @@ export const GithubDeploymentContext: FC<{
                         <div className="text-muted">Duration</div>
                         {match(decoratedContext.duration)
                             .with({ type: 'completed' }, (duration) => (
-                                <div className="text-default flex items-center gap-1.5">
+                                <div className="flex items-center gap-1.5 text-default">
                                     <FiClock />
                                     {secondsToDuration(duration.duration)}
                                 </div>
@@ -208,6 +212,7 @@ export const GithubDeploymentContext: FC<{
                             to={decoratedContext.workflowUrl}
                             className="flex items-center gap-1.5 hover:underline"
                             target="_blank"
+                            title="View workflow details"
                         >
                             {!workflowStartsWithEmoji && <FiFileText />}
                             <span>{decoratedContext.data.workflow}</span>
diff --git a/web/src/gui/deployments/files/FileExplorer.tsx b/web/src/gui/deployments/files/FileExplorer.tsx
index 8c7374dd..63ba7787 100644
--- a/web/src/gui/deployments/files/FileExplorer.tsx
+++ b/web/src/gui/deployments/files/FileExplorer.tsx
@@ -1,8 +1,9 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import byteSize from 'byte-size';
 import clsx from 'clsx';
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { LuChevronRight, LuFolderClosed, LuFolderOpen } from 'react-icons/lu';
+import { VscCollapseAll, VscExpandAll } from 'react-icons/vsc';
 
 import { useDeploymentFiles } from '@/api';
 import { components } from '@/api/schema.gen';
@@ -75,22 +76,47 @@ export const FileExplorer: FC<{ siteId: string; deploymentId: string }> = ({
 }) => {
     const { data: deploymentFiles } = useDeploymentFiles(siteId, deploymentId);
     const tree = reorgFilesIntoTree(deploymentFiles);
+    const [allCollapsed, setAllCollapsed] = useState(false);
 
     if (!deploymentFiles) {
         return;
     }
 
+    const collapseAllLabel = allCollapsed
+        ? 'Expand all folders'
+        : 'Collapse all folders';
+
     return (
         <div className="card space-y-3">
             <div className="flex justify-between">
                 <div className="font-bold">File Explorer</div>
-                <FrameworkDetection
-                    siteId={siteId}
-                    deploymentId={deploymentId}
-                />
+                <div className="flex items-center gap-2">
+                    <FrameworkDetection
+                        siteId={siteId}
+                        deploymentId={deploymentId}
+                    />
+                    <button
+                        title={collapseAllLabel}
+                        className="hover:text-foreground cursor-pointer text-muted"
+                        onClick={() => setAllCollapsed((previous) => !previous)}
+                        aria-label={collapseAllLabel}
+                    >
+                        {allCollapsed ? (
+                            <VscExpandAll className="size-5" />
+                        ) : (
+                            <VscCollapseAll className="size-5" />
+                        )}
+                    </button>
+                </div>
             </div>
-            <div className="bg-secondary rounded-md border">
-                <TreeEntry node={tree} name="/" isRoot hideRoot />
+            <div className="rounded-md border bg-secondary">
+                <TreeEntry
+                    node={tree}
+                    name="/"
+                    isRoot
+                    hideRoot
+                    allCollapsed={allCollapsed}
+                />
             </div>
         </div>
     );
@@ -101,7 +127,14 @@ export const TreeEntry: FC<{
     name: string;
     isRoot?: boolean;
     hideRoot?: boolean;
-}> = ({ node, name, isRoot = false, hideRoot = false }) => {
+    allCollapsed?: boolean;
+}> = ({
+    node,
+    name,
+    isRoot = false,
+    hideRoot = false,
+    allCollapsed = false,
+}) => {
     if (node.type === 'file') {
         return <FileEntry file={node.file} name={name} />;
     }
@@ -112,6 +145,7 @@ export const TreeEntry: FC<{
             name={name}
             isRoot={isRoot}
             hideRoot={hideRoot}
+            allCollapsed={allCollapsed}
         />
     );
 };
@@ -121,15 +155,26 @@ export const FolderEntry: FC<{
     name: string;
     isRoot?: boolean;
     hideRoot?: boolean;
-}> = ({ node, name, isRoot = false, hideRoot = false }) => {
+    allCollapsed?: boolean;
+}> = ({
+    node,
+    name,
+    isRoot = false,
+    hideRoot = false,
+    allCollapsed = false,
+}) => {
     const [isOpen, setIsOpen] = useState(true);
 
+    useEffect(() => {
+        setIsOpen(!allCollapsed);
+    }, [allCollapsed]);
+
     const { fileCount, directoryCount } = countFilesAndDirectories(node);
 
     if (isRoot && hideRoot) {
         return (
             <ul className="" role="group">
-                <SubTree node={node} />
+                <SubTree node={node} allCollapsed={allCollapsed} />
             </ul>
         );
     }
@@ -144,7 +189,7 @@ export const FolderEntry: FC<{
             >
                 <Collapsible.Trigger asChild>
                     <div
-                        className="hover:bg-muted flex cursor-pointer items-center justify-between gap-2 rounded-sm px-2 py-1"
+                        className="flex cursor-pointer items-center justify-between gap-2 rounded-sm px-2 py-1 hover:bg-muted"
                         role="button"
                         tabIndex={0}
                     >
@@ -162,7 +207,7 @@ export const FolderEntry: FC<{
                             )}
                             <span>{name}</span>
                         </div>
-                        <div className="text-muted flex justify-end gap-1.5">
+                        <div className="flex justify-end gap-1.5 text-muted">
                             {[
                                 fileCount &&
                                     `${fileCount} file${
@@ -177,7 +222,7 @@ export const FolderEntry: FC<{
                                 .map((count) => (
                                     <div
                                         key={count}
-                                        className="text-muted rounded-md border px-2"
+                                        className="rounded-md border px-2 text-muted"
                                     >
                                         {count}
                                     </div>
@@ -188,7 +233,7 @@ export const FolderEntry: FC<{
 
                 <Collapsible.Content>
                     <ul className="ml-4 border-l pl-2" role="group">
-                        <SubTree node={node} />
+                        <SubTree node={node} allCollapsed={allCollapsed} />
                     </ul>
                 </Collapsible.Content>
             </div>
@@ -196,7 +241,10 @@ export const FolderEntry: FC<{
     );
 };
 
-export const SubTree: FC<{ node: FolderNode }> = ({ node }) => {
+export const SubTree: FC<{ node: FolderNode; allCollapsed?: boolean }> = ({
+    node,
+    allCollapsed = false,
+}) => {
     return (
         <>
             {Object.entries(node.files)
@@ -213,7 +261,11 @@ export const SubTree: FC<{ node: FolderNode }> = ({ node }) => {
                 })
                 .map(([key, value]) => (
                     <li key={key}>
-                        <TreeEntry node={value} name={key} />
+                        <TreeEntry
+                            node={value}
+                            name={key}
+                            allCollapsed={allCollapsed}
+                        />
                     </li>
                 ))}
         </>
@@ -228,7 +280,7 @@ export const FileEntry: FC<{ file: DeploymentFile; name: string }> = ({
 
     return (
         <div
-            className="hover:bg-muted flex items-center justify-between gap-2 px-2 py-1"
+            className="flex items-center justify-between gap-2 px-2 py-1 hover:bg-muted"
             // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
             role="treeitem"
             aria-label={name}
@@ -243,7 +295,7 @@ export const FileEntry: FC<{ file: DeploymentFile; name: string }> = ({
                 </span>
                 <span>{name}</span>
             </div>
-            <div className="text-muted flex items-center gap-2">
+            <div className="flex items-center gap-2 text-muted">
                 <span>{file.deployment_file_mime_type}</span>
                 {file_size && <span>{file_size.toString()}</span>}
             </div>
@@ -258,7 +310,7 @@ export const FrameworkDetection: FC<{
     const framework = useFramework(siteId, deploymentId);
 
     return (
-        <div className="text-muted flex items-center gap-2">
+        <div className="flex items-center gap-2 text-muted">
             {getFrameworkIcon(framework)}
             <span className={getFrameworkColor(framework)}>{framework}</span>
         </div>
diff --git a/web/src/routes/_authed/site/$siteId._site/deployment/$deploymentId/index.tsx b/web/src/routes/_authed/site/$siteId._site/deployment/$deploymentId/index.tsx
index aef642ce..2070f4a6 100644
--- a/web/src/routes/_authed/site/$siteId._site/deployment/$deploymentId/index.tsx
+++ b/web/src/routes/_authed/site/$siteId._site/deployment/$deploymentId/index.tsx
@@ -105,6 +105,7 @@ function RouteComponent() {
                                         'Preview regeneration queued'
                                     );
                                 }}
+                                className="cursor-pointer"
                             >
                                 <LuPictureInPicture />
                                 <span>Refresh Preview</span>