diff --git a/src/app/admin/dev-management/page.tsx b/src/app/admin/dev-management/page.tsx
index aadeb04..be78e7a 100644
--- a/src/app/admin/dev-management/page.tsx
+++ b/src/app/admin/dev-management/page.tsx
@@ -85,20 +85,25 @@ export default function DevManagementPage() {
     <PageTransitionEffect>
       <div className="min-h-screen flex flex-col bg-gradient-to-br from-slate-50 via-white to-blue-50">
         <Header />
-        <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
+        {/* tighter padding on mobile */}
+        <main className="flex-1 py-6 md:py-8 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto">
-            <header className="bg-white/90 backdrop-blur border border-blue-100 py-8 px-6 rounded-2xl shadow-lg flex flex-col gap-4">
-              <div className="flex items-center gap-3">
-                <div className="h-12 w-12 rounded-xl bg-blue-100 border border-blue-200 flex items-center justify-center">
+            <header className="bg-white/90 backdrop-blur border border-blue-100 py-6 md:py-8 px-4 sm:px-6 rounded-2xl shadow-lg flex flex-col gap-4">
+              {/* stack on mobile */}
+              <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+                <div className="h-11 w-11 sm:h-12 sm:w-12 rounded-xl bg-blue-100 border border-blue-200 flex items-center justify-center flex-shrink-0">
                   <CommandLineIcon className="h-6 w-6 text-blue-700" />
                 </div>
-                <div>
-                  <h1 className="text-3xl font-extrabold text-blue-900">Dev Management</h1>
-                  <p className="text-blue-700">Import SQL dump files to run database migrations.</p>
+                <div className="min-w-0">
+                  <h1 className="text-2xl sm:text-3xl font-extrabold text-blue-900">Dev Management</h1>
+                  <p className="text-sm sm:text-base text-blue-700">
+                    Import SQL dump files to run database migrations.
+                  </p>
                 </div>
               </div>
+
               <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 flex items-start gap-2">
-                <ExclamationTriangleIcon className="h-5 w-5 mt-0.5" />
+                <ExclamationTriangleIcon className="h-5 w-5 mt-0.5 flex-shrink-0" />
                 <div>
                   <div className="font-semibold">Use with caution</div>
                   <div>SQL dumps run immediately and can modify production data.</div>
@@ -106,41 +111,52 @@ export default function DevManagementPage() {
               </div>
             </header>
 
-            <section className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <div className="lg:col-span-2 rounded-2xl bg-white border border-gray-100 shadow-lg p-6">
-                <div className="flex items-center justify-between mb-4">
+            <section className="mt-6 md:mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
+              <div className="lg:col-span-2 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                   <h2 className="text-lg font-semibold text-blue-900">SQL Dump Import</h2>
-                  <div className="flex items-center gap-3">
+
+                  {/* actions: stack on mobile, full width */}
+                  <div className="flex flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center gap-2 sm:gap-3">
                     <button
                       onClick={() => fileInputRef.current?.click()}
-                      className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                      className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     >
                       <ArrowUpTrayIcon className="h-4 w-4" /> Import SQL
                     </button>
                     <button
                       onClick={clearResults}
-                      className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                      className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     >
                       <TrashIcon className="h-4 w-4" /> Clear
                     </button>
                     <button
                       onClick={runImport}
                       disabled={loading}
-                      className="inline-flex items-center gap-2 rounded-lg bg-blue-900 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-800 disabled:opacity-60"
+                      className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg bg-blue-900 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-800 disabled:opacity-60"
                     >
                       <PlayIcon className="h-4 w-4" /> {loading ? 'Importing...' : 'Import'}
                     </button>
                   </div>
                 </div>
 
-                <div className="rounded-xl border border-dashed border-gray-200 bg-slate-50 px-6 py-10 text-center">
+                <div className="rounded-xl border border-dashed border-gray-200 bg-slate-50 px-4 sm:px-6 py-8 sm:py-10 text-center">
                   <div className="text-sm text-gray-600">Select a .sql dump file using Import SQL.</div>
                   <div className="mt-2 text-xs text-gray-500">Only SQL dump files are supported.</div>
                   {selectedFile && (
-                    <div className="mt-4 text-sm text-blue-900 font-semibold">Selected: {selectedFile.name}</div>
+                    <div className="mt-4 text-sm text-blue-900 font-semibold break-words">
+                      Selected: {selectedFile.name}
+                    </div>
                   )}
                 </div>
-                <input ref={fileInputRef} type="file" accept=".sql,text/plain" className="hidden" onChange={onImportFile} />
+
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".sql,text/plain"
+                  className="hidden"
+                  onChange={onImportFile}
+                />
 
                 {error && (
                   <div className="mt-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
@@ -149,7 +165,7 @@ export default function DevManagementPage() {
                 )}
               </div>
 
-              <div className="rounded-2xl bg-white border border-gray-100 shadow-lg p-6">
+              <div className="rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
                 <h3 className="text-lg font-semibold text-blue-900 mb-3">Result Summary</h3>
                 <div className="space-y-2 text-sm text-gray-700">
                   <div className="flex justify-between">
@@ -173,7 +189,7 @@ export default function DevManagementPage() {
               </div>
             </section>
 
-            <section className="mt-8 rounded-2xl bg-white border border-gray-100 shadow-lg p-6">
+            <section className="mt-6 md:mt-8 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
               <div className="flex items-center justify-between mb-4">
                 <h2 className="text-lg font-semibold text-blue-900">Import Results</h2>
               </div>
@@ -183,7 +199,7 @@ export default function DevManagementPage() {
               )}
 
               {result?.result && (
-                <pre className="mt-2 rounded-lg bg-slate-50 border border-gray-200 p-4 text-xs text-gray-800 overflow-auto">
+                <pre className="mt-2 rounded-lg bg-slate-50 border border-gray-200 p-3 md:p-4 text-xs text-gray-800 overflow-auto">
                   {JSON.stringify(result.result, null, 2)}
                 </pre>
               )}
diff --git a/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx b/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx
index 75e0427..e592d7f 100644
--- a/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx
+++ b/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx
@@ -347,12 +347,14 @@ export default function CompanySignContractPage() {
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.14),transparent_60%)]" />
         </div>
 
-        <main className="relative z-10 flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
+        {/* CHANGED: tighter padding on mobile */}
+        <main className="relative z-10 flex flex-col flex-1 w-full px-4 sm:px-8 lg:px-12 py-6 sm:py-10 lg:py-12">
           <form
             onSubmit={handleSubmit}
             className="relative max-w-5xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10"
           >
-            <div className="px-6 py-8 sm:px-10 lg:px-14">
+            {/* CHANGED: tighter padding on mobile */}
+            <div className="px-4 py-6 sm:px-10 sm:py-8 lg:px-14">
               <h1 className="text-center text-2xl sm:text-3xl font-semibold text-[#0F172A] mb-2">
                 Sign Company Partnership Contract
               </h1>
@@ -360,18 +362,21 @@ export default function CompanySignContractPage() {
                 Please review the contract details and sign on behalf of the company.
               </p>
 
-              <section className="grid gap-8 lg:grid-cols-2 mb-10">
+              {/* CHANGED: smaller gaps on mobile */}
+              <section className="grid gap-6 sm:gap-8 lg:grid-cols-2 mb-8 sm:mb-10">
                 <div className="space-y-4">
-                  <div className="rounded-lg border border-gray-200 p-5 bg-gray-50">
-                    <div className="flex items-center justify-between mb-3">
+                  {/* CHANGED: tighter padding */}
+                  <div className="rounded-lg border border-gray-200 p-4 sm:p-5 bg-gray-50">
+                    {/* CHANGED: stack header + tabs on mobile */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-3">
                       <h2 className="text-sm font-semibold text-gray-800">Document Information</h2>
-                      <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
+                      <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1 w-fit max-w-full overflow-x-auto">
                         {(['contract','gdpr'] as const).map((tab) => (
                           <button
                             key={tab}
                             type="button"
                             onClick={() => setActiveTab(tab)}
-                            className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
+                            className={`px-2.5 py-1 text-xs rounded-full transition whitespace-nowrap ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
                           >
                             {tab === 'contract' ? 'Contract' : 'GDPR'}
                           </button>
@@ -411,32 +416,37 @@ export default function CompanySignContractPage() {
                       )
                     })()}
                   </div>
-                  <div className="rounded-lg border border-amber-200 bg-amber-50 p-5">
+                  {/* CHANGED: tighter padding */}
+                  <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 sm:p-5">
                     <h3 className="text-sm font-semibold text-amber-900 mb-2">Attention</h3>
                     <p className="text-xs sm:text-sm text-amber-800 leading-relaxed">
                       You confirm that you are authorized to sign on behalf of the company.
                     </p>
                   </div>
                 </div>
+
                 <div>
                   <div className="rounded-lg border border-gray-200 bg-white relative overflow-hidden">
-                    <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-gray-50">
-                      <div className="flex items-center gap-2 text-sm font-semibold text-gray-900">
+                    {/* CHANGED: stack toolbar on mobile */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 border-b border-gray-200 bg-gray-50">
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm font-semibold text-gray-900">
                         <span>Document Preview</span>
-                        <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
+                        <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1 w-fit max-w-full overflow-x-auto">
                           {(['contract','gdpr'] as const).map((tab) => (
                             <button
                               key={tab}
                               type="button"
                               onClick={() => setActiveTab(tab)}
-                              className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
+                              className={`px-2.5 py-1 text-xs rounded-full transition whitespace-nowrap ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
                             >
                               {tab === 'contract' ? 'Contract' : 'GDPR'}
                             </button>
                           ))}
                         </div>
                       </div>
-                      <div className="flex items-center gap-2">
+
+                      {/* CHANGED: buttons wrap + full width on mobile */}
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-2">
                         <button
                           type="button"
                           onClick={() => {
@@ -447,7 +457,7 @@ export default function CompanySignContractPage() {
                             window.open(url, '_blank', 'noopener,noreferrer')
                           }}
                           disabled={!previewState[activeTab]?.html}
-                          className="inline-flex items-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
+                          className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
                         >
                           Open in new tab
                         </button>
@@ -455,20 +465,22 @@ export default function CompanySignContractPage() {
                           type="button"
                           onClick={() => loadPreview(activeTab)}
                           disabled={previewState[activeTab].loading}
-                          className="inline-flex items-center rounded-md bg-indigo-600 hover:bg-indigo-500 text-white px-2.5 py-1.5 text-xs disabled:opacity-60"
+                          className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-indigo-600 hover:bg-indigo-500 text-white px-2.5 py-1.5 text-xs disabled:opacity-60"
                         >
                           {previewState[activeTab].loading ? 'Loading…' : 'Refresh'}
                         </button>
                       </div>
                     </div>
+
+                    {/* CHANGED: shorter on mobile */}
                     {previewLoading || previewState[activeTab].loading ? (
-                      <div className="h-72 flex items-center justify-center text-xs text-gray-500">Loading preview…</div>
+                      <div className="h-64 sm:h-72 flex items-center justify-center text-xs text-gray-500">Loading preview…</div>
                     ) : previewState[activeTab].error ? (
-                      <div className="h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewState[activeTab].error}</div>
+                      <div className="h-64 sm:h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewState[activeTab].error}</div>
                     ) : previewState[activeTab].html ? (
-                      <iframe title={`Company Document Preview ${activeTab}`} className="w-full h-72" srcDoc={previewState[activeTab].html || ''} />
+                      <iframe title={`Company Document Preview ${activeTab}`} className="w-full h-64 sm:h-72" srcDoc={previewState[activeTab].html || ''} />
                     ) : (
-                      <div className="h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
+                      <div className="h-64 sm:h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
                     )}
                   </div>
                 </div>
@@ -488,7 +500,7 @@ export default function CompanySignContractPage() {
                       ref={canvasRef}
                       width={800}
                       height={220}
-                      className="w-full h-48 rounded-md border border-gray-200 bg-white shadow-inner touch-none"
+                      className="w-full h-40 sm:h-48 rounded-md border border-gray-200 bg-white shadow-inner touch-none"
                       onMouseDown={startDrawing}
                       onMouseMove={draw}
                       onMouseUp={endDrawing}
@@ -497,11 +509,12 @@ export default function CompanySignContractPage() {
                       onTouchMove={draw}
                       onTouchEnd={endDrawing}
                     />
-                    <div className="mt-3 flex items-center gap-3 text-xs text-gray-600">
+                    {/* CHANGED: stack helper row on mobile */}
+                    <div className="mt-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 text-xs text-gray-600">
                       <button
                         type="button"
                         onClick={clearSignature}
-                        className="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
+                        className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
                       >
                         Clear
                       </button>
@@ -556,18 +569,19 @@ export default function CompanySignContractPage() {
                 </div>
               )}
 
-              <div className="mt-10 flex items-center justify-between">
+              {/* CHANGED: stack bottom actions on mobile */}
+              <div className="mt-10 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-3">
                 <button
                   type="button"
                   onClick={() => router.push('/quickaction-dashboard')}
-                  className="inline-flex items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50"
+                  className="w-full sm:w-auto inline-flex items-center justify-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50"
                 >
                   Back to Dashboard
                 </button>
                 <button
                   type="submit"
                   disabled={submitting || success || (!previewState.contract.html && !previewState.gdpr.html)}
-                  className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
+                  className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
                 >
                   {submitting ? 'Signing…' : success ? 'Signed' : 'Sign Now'}
                 </button>
diff --git a/src/app/quickaction-dashboard/register-sign-contract/personal/page.tsx b/src/app/quickaction-dashboard/register-sign-contract/personal/page.tsx
index 8ee3f66..75f5135 100644
--- a/src/app/quickaction-dashboard/register-sign-contract/personal/page.tsx
+++ b/src/app/quickaction-dashboard/register-sign-contract/personal/page.tsx
@@ -356,12 +356,14 @@ export default function PersonalSignContractPage() {
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.14),transparent_60%)]" />
         </div>
 
-        <main className="relative z-10 flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
+        {/* CHANGED: tighter padding on mobile */}
+        <main className="relative z-10 flex flex-col flex-1 w-full px-4 sm:px-8 lg:px-12 py-6 sm:py-10 lg:py-12">
           <form
             onSubmit={handleSubmit}
             className="relative max-w-5xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10"
           >
-            <div className="px-6 py-8 sm:px-10 lg:px-14">
+            {/* CHANGED: tighter padding on mobile */}
+            <div className="px-4 py-6 sm:px-10 sm:py-8 lg:px-14">
               <h1 className="text-center text-2xl sm:text-3xl font-semibold text-[#0F172A] mb-2">
                 Sign Personal Participation Contract
               </h1>
@@ -370,18 +372,20 @@ export default function PersonalSignContractPage() {
               </p>
 
               {/* Contract Meta + Preview */}
-              <section className="grid gap-8 lg:grid-cols-2 mb-10">
+              <section className="grid gap-6 sm:gap-8 lg:grid-cols-2 mb-8 sm:mb-10">
                 <div className="space-y-4">
-                  <div className="rounded-lg border border-gray-200 p-5 bg-gray-50">
-                    <div className="flex items-center justify-between mb-3">
+                  {/* CHANGED: tighter padding */}
+                  <div className="rounded-lg border border-gray-200 p-4 sm:p-5 bg-gray-50">
+                    {/* CHANGED: stack header + tabs on mobile */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-3">
                       <h2 className="text-sm font-semibold text-gray-800">Document Information</h2>
-                      <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
+                      <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1 w-fit max-w-full overflow-x-auto">
                         {(['contract','gdpr'] as const).map((tab) => (
                           <button
                             key={tab}
                             type="button"
                             onClick={() => setActiveTab(tab)}
-                            className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
+                            className={`px-2.5 py-1 text-xs rounded-full transition whitespace-nowrap ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
                           >
                             {tab === 'contract' ? 'Contract' : 'GDPR'}
                           </button>
@@ -421,7 +425,8 @@ export default function PersonalSignContractPage() {
                       )
                     })()}
                   </div>
-                  <div className="rounded-lg border border-indigo-100 bg-indigo-50/60 p-5">
+                  {/* CHANGED: tighter padding */}
+                  <div className="rounded-lg border border-indigo-100 bg-indigo-50/60 p-4 sm:p-5">
                     <h3 className="text-sm font-semibold text-indigo-900 mb-2">Note</h3>
                     <p className="text-xs sm:text-sm text-indigo-800 leading-relaxed">
                       Your electronic signature is legally binding. Please ensure all details are correct.
@@ -430,23 +435,26 @@ export default function PersonalSignContractPage() {
                 </div>
                 <div>
                   <div className="rounded-lg border border-gray-200 bg-white relative overflow-hidden">
-                    <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-gray-50">
-                      <div className="flex items-center gap-2 text-sm font-semibold text-gray-900">
+                    {/* CHANGED: stack toolbar on mobile */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 border-b border-gray-200 bg-gray-50">
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm font-semibold text-gray-900">
                         <span>Contract Preview</span>
-                        <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
+                        <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1 w-fit max-w-full overflow-x-auto">
                           {(['contract','gdpr'] as const).map((tab) => (
                             <button
                               key={tab}
                               type="button"
                               onClick={() => setActiveTab(tab)}
-                              className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
+                              className={`px-2.5 py-1 text-xs rounded-full transition whitespace-nowrap ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
                             >
                               {tab === 'contract' ? 'Contract' : 'GDPR'}
                             </button>
                           ))}
                         </div>
                       </div>
-                      <div className="flex items-center gap-2">
+
+                      {/* CHANGED: button full width on mobile */}
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-2">
                         <button
                           type="button"
                           onClick={async () => {
@@ -457,20 +465,22 @@ export default function PersonalSignContractPage() {
                             window.open(url, '_blank', 'noopener,noreferrer')
                           }}
                           disabled={!previewState[activeTab]?.html}
-                          className="inline-flex items-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
+                          className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
                         >
                           Open in new tab
                         </button>
                       </div>
                     </div>
+
+                    {/* CHANGED: shorter on mobile */}
                     {previewLoading || previewState[activeTab].loading ? (
-                      <div className="h-72 flex items-center justify-center text-xs text-gray-500">Loading preview…</div>
+                      <div className="h-64 sm:h-72 flex items-center justify-center text-xs text-gray-500">Loading preview…</div>
                     ) : previewState[activeTab].error ? (
-                      <div className="h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewState[activeTab].error}</div>
+                      <div className="h-64 sm:h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewState[activeTab].error}</div>
                     ) : previewState[activeTab].html ? (
-                      <iframe title={`Contract Preview ${activeTab}`} className="w-full h-72" srcDoc={previewState[activeTab].html || ''} />
+                      <iframe title={`Contract Preview ${activeTab}`} className="w-full h-64 sm:h-72" srcDoc={previewState[activeTab].html || ''} />
                     ) : (
-                      <div className="h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
+                      <div className="h-64 sm:h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
                     )}
                   </div>
                 </div>
@@ -491,7 +501,7 @@ export default function PersonalSignContractPage() {
                       ref={canvasRef}
                       width={800}
                       height={220}
-                      className="w-full h-48 rounded-md border border-gray-200 bg-white shadow-inner touch-none"
+                      className="w-full h-40 sm:h-48 rounded-md border border-gray-200 bg-white shadow-inner touch-none"
                       onMouseDown={startDrawing}
                       onMouseMove={draw}
                       onMouseUp={endDrawing}
@@ -500,11 +510,12 @@ export default function PersonalSignContractPage() {
                       onTouchMove={draw}
                       onTouchEnd={endDrawing}
                     />
-                    <div className="mt-3 flex items-center gap-3 text-xs text-gray-600">
+                    {/* CHANGED: stack helper row on mobile */}
+                    <div className="mt-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 text-xs text-gray-600">
                       <button
                         type="button"
                         onClick={clearSignature}
-                        className="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
+                        className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
                       >
                         Clear
                       </button>
@@ -560,18 +571,19 @@ export default function PersonalSignContractPage() {
                 </div>
               )}
 
-              <div className="mt-10 flex items-center justify-between">
+              {/* CHANGED: stack bottom actions on mobile */}
+              <div className="mt-10 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-3">
                 <button
                   type="button"
                   onClick={() => router.push('/quickaction-dashboard')}
-                  className="inline-flex items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50"
+                  className="w-full sm:w-auto inline-flex items-center justify-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50"
                 >
                   Back to Dashboard
                 </button>
                 <button
                   type="submit"
                   disabled={submitting || success || (!previewState.contract.html && !previewState.gdpr.html)}
-                  className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
+                  className="w-full sm:w-auto inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
                 >
                   {submitting ? 'Signing…' : success ? 'Signed' : 'Sign Now'}
                 </button>