diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
index 57a37bd0c..f29747e5e 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
@@ -1,15 +1,23 @@
-import { useMemo, useRef } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
-import { Plural, Trans } from '@lingui/react/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
-import { ArrowLeftIcon, BanIcon, DownloadCloudIcon, PaperclipIcon } from 'lucide-react';
+import {
+  ArrowLeftIcon,
+  BanIcon,
+  DownloadCloudIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PaperclipIcon,
+} from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { PDF_VIEWER_ERROR_MESSAGES } from '@documenso/lib/constants/pdf-viewer-i18n';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -57,6 +65,9 @@ export const DocumentSigningPageViewV2 = () => {
     onDocumentRejected,
   } = useEmbedSigningContext() || {};
 
+  const { t } = useLingui();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+
   /**
    * The total remaining fields remaining for the current recipient or selected assistant recipient.
    *
@@ -86,121 +97,157 @@ export const DocumentSigningPageViewV2 = () => {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="embed--DocumentWidgetContainer hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4 lg:flex">
-          <div className="px-4">
-            <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
-              {match(recipient.role)
-                .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
-                .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
-                .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
-                .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
-                .otherwise(() => null)}
-
-              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
-                <Plural
-                  value={recipientFieldsRemaining.length}
-                  one="1 Field Remaining"
-                  other="# Fields Remaining"
-                />
-              </span>
-            </h3>
-
-            <div className="relative my-4 h-[4px] rounded-md bg-muted">
-              <motion.div
-                layout="size"
-                layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-primary"
-                style={{
-                  width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
-                }}
-              />
-            </div>
-
-            <div className="embed--DocumentWidgetContent mt-6 space-y-3">
-              <EnvelopeSignerForm />
-            </div>
-          </div>
-
-          <Separator className="my-6" />
-
-          {/* Quick Actions. */}
-          {!isDirectTemplate && (
-            <div className="embed--Actions space-y-3 px-4">
-              <h4 className="text-sm font-semibold text-foreground">
-                <Trans>Actions</Trans>
-              </h4>
-
-              <DocumentSigningAttachmentsPopover
-                envelopeId={envelope.id}
-                token={recipient.token}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <PaperclipIcon className="mr-2 h-4 w-4" />
-                    <Trans>Attachments</Trans>
-                  </Button>
-                }
-              />
-
-              <EnvelopeDownloadDialog
-                envelopeId={envelope.id}
-                envelopeStatus={envelope.status}
-                envelopeItems={envelope.envelopeItems}
-                token={recipient.token}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start">
-                    <DownloadCloudIcon className="mr-2 h-4 w-4" />
-                    <Trans>Download PDF</Trans>
-                  </Button>
-                }
-              />
-
-              {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection && (
-                <DocumentSigningRejectDialog
-                  documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
-                  token={recipient.token}
-                  onRejected={
-                    onDocumentRejected &&
-                    ((reason) =>
-                      onDocumentRejected({
-                        token: recipient.token,
-                        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-                        envelopeId: envelope.id,
-                        recipientId: recipient.id,
-                        reason,
-                      }))
-                  }
-                  trigger={
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="w-full justify-start hover:text-destructive"
-                    >
-                      <BanIcon className="mr-2 h-4 w-4" />
-                      <Trans>Reject Document</Trans>
-                    </Button>
-                  }
-                />
-              )}
+        <div
+          className={cn(
+            'embed--DocumentWidgetContainer hidden flex-shrink-0 flex-col border-r border-border bg-background transition-[width] duration-300 lg:flex',
+            isSidebarCollapsed ? 'w-12' : 'w-80',
+          )}
+        >
+          {isSidebarCollapsed && (
+            <div className="flex justify-center pt-4">
+              <Button
+                variant="ghost"
+                className="h-7 w-7 p-0"
+                aria-label={t`Expand sidebar`}
+                onClick={() => setIsSidebarCollapsed(false)}
+              >
+                <PanelLeftOpenIcon className="h-4 w-4" />
+              </Button>
             </div>
           )}
 
-          <div className="embed--DocumentWidgetFooter mt-auto">
-            {/* Footer of left sidebar. */}
-            {!isEmbed && (
-              <div className="px-4">
-                <Button asChild variant="ghost" className="w-full justify-start">
-                  <Link to="/">
-                    <ArrowLeftIcon className="mr-2 h-4 w-4" />
-                    <Trans>Return</Trans>
-                  </Link>
-                </Button>
+          <div
+            className={cn(
+              'flex flex-1 flex-col overflow-hidden py-4',
+              isSidebarCollapsed && 'invisible w-0',
+            )}
+          >
+            <div className="px-4">
+              <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
+                {match(recipient.role)
+                  .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
+                  .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
+                  .with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
+                  .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
+                  .otherwise(() => null)}
+
+                <div className="ml-2 flex items-center gap-1">
+                  <span className="rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
+                    <Plural
+                      value={recipientFieldsRemaining.length}
+                      one="1 Field Remaining"
+                      other="# Fields Remaining"
+                    />
+                  </span>
+
+                  <Button
+                    variant="ghost"
+                    className="h-7 w-7 p-0"
+                    aria-label={t`Collapse sidebar`}
+                    onClick={() => setIsSidebarCollapsed(true)}
+                  >
+                    <PanelLeftCloseIcon className="h-4 w-4" />
+                  </Button>
+                </div>
+              </h3>
+
+              <div className="relative my-4 h-[4px] rounded-md bg-muted">
+                <motion.div
+                  layout="size"
+                  layoutId="document-flow-container-step"
+                  className="absolute inset-y-0 left-0 bg-primary"
+                  style={{
+                    width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
+                  }}
+                />
+              </div>
+
+              <div className="embed--DocumentWidgetContent mt-6 space-y-3">
+                <EnvelopeSignerForm />
+              </div>
+            </div>
+
+            <Separator className="my-6" />
+
+            {/* Quick Actions. */}
+            {!isDirectTemplate && (
+              <div className="embed--Actions space-y-3 px-4">
+                <h4 className="text-sm font-semibold text-foreground">
+                  <Trans>Actions</Trans>
+                </h4>
+
+                <DocumentSigningAttachmentsPopover
+                  envelopeId={envelope.id}
+                  token={recipient.token}
+                  trigger={
+                    <Button variant="ghost" size="sm" className="w-full justify-start">
+                      <PaperclipIcon className="mr-2 h-4 w-4" />
+                      <Trans>Attachments</Trans>
+                    </Button>
+                  }
+                />
+
+                <EnvelopeDownloadDialog
+                  envelopeId={envelope.id}
+                  envelopeStatus={envelope.status}
+                  envelopeItems={envelope.envelopeItems}
+                  token={recipient.token}
+                  trigger={
+                    <Button variant="ghost" size="sm" className="w-full justify-start">
+                      <DownloadCloudIcon className="mr-2 h-4 w-4" />
+                      <Trans>Download PDF</Trans>
+                    </Button>
+                  }
+                />
+
+                {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection && (
+                  <DocumentSigningRejectDialog
+                    documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
+                    token={recipient.token}
+                    onRejected={
+                      onDocumentRejected &&
+                      ((reason) =>
+                        onDocumentRejected({
+                          token: recipient.token,
+                          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+                          envelopeId: envelope.id,
+                          recipientId: recipient.id,
+                          reason,
+                        }))
+                    }
+                    trigger={
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="w-full justify-start hover:text-destructive"
+                      >
+                        <BanIcon className="mr-2 h-4 w-4" />
+                        <Trans>Reject Document</Trans>
+                      </Button>
+                    }
+                  />
+                )}
               </div>
             )}
+
+            <div className="embed--DocumentWidgetFooter mt-auto">
+              {/* Footer of left sidebar. */}
+              {!isEmbed && (
+                <div className="px-4">
+                  <Button asChild variant="ghost" className="w-full justify-start">
+                    <Link to="/">
+                      <ArrowLeftIcon className="mr-2 h-4 w-4" />
+                      <Trans>Return</Trans>
+                    </Link>
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
         <div
-          className="embed--DocumentContainer flex-1 overflow-y-auto"
+          className="embed--DocumentContainer min-w-0 flex-1 overflow-y-auto"
           ref={scrollableContainerRef}
         >
           <div className="flex flex-col">