diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
index 496b4e4..39166aa 100644
--- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
+++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
@@ -535,13 +535,13 @@ const DocumentSubmissionOptions = () => {
                     </div>
                 </div> */}
 
-                <div className="text-center pt-2  max-h-[25vh]">
-                    <div className="w-20 h-20  bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
+                <div className="text-center pt-1 max-h-[25vh]">
+                    <div className="w-20 h-20 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
                         <FaCheck className="text-white text-4xl" />
                     </div>
-                    <div>
-                        <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
-                    </div>
+                </div>
+                <div className='text-center py-1'>
+                    <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
                 </div>
                 <div className='border border-b border-gray-50'></div>
                 <div className=' min-h-[30vh]'>
diff --git a/src/components/setting/AsideSection.tsx b/src/components/setting/AsideSection.tsx
index 0cf696e..cd20e24 100644
--- a/src/components/setting/AsideSection.tsx
+++ b/src/components/setting/AsideSection.tsx
@@ -37,7 +37,7 @@ const AsideSection = ({
               e.preventDefault(); // Prevent default anchor behavior
               onSubSectionClick(subSection.id);
             }}
-            className={`block w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
+            className={`block w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
               activeSubSection === subSection.id
                 ? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm"
                 : "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
diff --git a/src/components/setting/ContactForm.tsx b/src/components/setting/ContactForm.tsx
index dbf5e01..e81732c 100644
--- a/src/components/setting/ContactForm.tsx
+++ b/src/components/setting/ContactForm.tsx
@@ -130,7 +130,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
   };
 
   return (
-    <div className="ms-2 space-y-2 max-w-[60vw]">
+    <div className="px-3 py-3 space-y-2 max-w-[60vw] bg-white rounded-lg">
       <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
 
       <div className="grid grid-cols-2 gap-3">
diff --git a/src/components/setting/CreateAndInvite.tsx b/src/components/setting/CreateAndInvite.tsx
index 7925a26..5ec4561 100644
--- a/src/components/setting/CreateAndInvite.tsx
+++ b/src/components/setting/CreateAndInvite.tsx
@@ -158,9 +158,9 @@ const CreateAndInvite = ({
   );
 
   return (
-    <div className="ms-2 space-y-3">
+    <div className=" space-y-1.5">
       {/* Create Section */}
-      <section className="border-gray-200 border-b">
+      <section className="border-gray-200 border-b bg-white px-3 py-3 rounded-md">
         <h2 className="text-lg font-medium mb-2 text-slate-500">Create Account</h2>
         <div className="flex flex-col mb-6">
           <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
@@ -197,7 +197,7 @@ const CreateAndInvite = ({
       </section>
 
       {/* Invite Section */}
-      <section className="border-gray-300">
+      <section className="border-gray-200 border-b bg-white px-3 py-3 rounded-lg">
         <h2 className="text-lg font-medium mb-2 text-slate-500">Invite</h2>
         <div className="grid grid-cols-2 gap-4 mb-6">
           {/* Account Name Dropdown */}
diff --git a/src/components/setting/Setting.tsx b/src/components/setting/Setting.tsx
index 806c5d2..c479cb0 100644
--- a/src/components/setting/Setting.tsx
+++ b/src/components/setting/Setting.tsx
@@ -226,7 +226,7 @@ const Setting = () => {
     }
 
     return (
-      <div className="space-y-8">
+      <div className="space-y-2">
         {currentSubSections.map((subSection) => (
           <div
             key={subSection.id}
@@ -417,7 +417,7 @@ const Setting = () => {
       <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
         {/* Tabs */}
         <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4">
-          <div className="flex flex-wrap gap-4 md:gap-6">
+          <div className="flex flex-wrap gap-4 md:gap-6 ">
             {tabs.map((tab) =>
               tab.type === page1 && (
                 <button
@@ -437,7 +437,7 @@ const Setting = () => {
         </div>
 
         {/* Responsive Layout */}
-        <div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-8 mt-3 gap-6">
+        <div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-7 pt-2 lg:gap-6 ">
 
           {/* Sidebar (hidden on small, shown on lg) */}
           {activeTab === 'userProfile' && (
@@ -455,8 +455,8 @@ const Setting = () => {
 
           {/* Sidebar as horizontal nav (only on mobile) */}
           {activeTab === 'userProfile' && (
-            <section className="lg:hidden mb-4">
-              <div className="flex overflow-x-auto no-scrollbar gap-4 border-b pb-2">
+            <section className="lg:hidden mb-2">
+              <div className="flex overflow-x-auto no-scrollbar gap-4 border-b border-gray-200 pb-2">
                 {getSubSections(activeTab).map((sub) => (
                   <button
                     key={sub.id}
diff --git a/src/components/setting/Signature/DrawSignatureCanvas.tsx b/src/components/setting/Signature/DrawSignatureCanvas.tsx
index 7129951..8ec33d1 100644
--- a/src/components/setting/Signature/DrawSignatureCanvas.tsx
+++ b/src/components/setting/Signature/DrawSignatureCanvas.tsx
@@ -106,7 +106,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
         const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
         const newPath = [...currentPath, point];
         setCurrentPath(newPath);
-        
+
         // Draw immediately for smooth experience
         drawCurrentPath(e.currentTarget as HTMLCanvasElement, newPath);
     };
@@ -149,7 +149,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
         }
 
         setCurrentPath([]);
-        
+
         // Export both canvases and notify parent
         const fullSignature = exportCanvasAsImage(canvasRef1.current);
         const initials = exportCanvasAsImage(canvasRef2.current);
@@ -238,10 +238,11 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
                             <canvas
                                 ref={canvasRef1}
                                 className="w-full h-51 cursor-crosshair"
-                                onMouseDown={handleMouseDown}
-                                onMouseMove={handleMouseMove}
-                                onMouseUp={handleMouseUp}
-                                onMouseLeave={handleMouseUp}
+                                onPointerDown={handleMouseDown}
+                                onPointerMove={handleMouseMove}
+                                onPointerUp={handleMouseUp}
+                                onPointerLeave={handleMouseUp}
+
                             />
                         </div>
                     </div>
@@ -253,10 +254,11 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
                             <canvas
                                 ref={canvasRef2}
                                 className="w-full h-51 cursor-crosshair"
-                                onMouseDown={handleMouseDown}
-                                onMouseMove={handleMouseMove}
-                                onMouseUp={handleMouseUp}
-                                onMouseLeave={handleMouseUp}
+                                onPointerDown={handleMouseDown}
+                                onPointerMove={handleMouseMove}
+                                onPointerUp={handleMouseUp}
+                                onPointerLeave={handleMouseUp}
+
                             />
                         </div>
                     </div>
diff --git a/src/components/setting/UserProfile.tsx b/src/components/setting/UserProfile.tsx
index 1b8e654..cbbe56a 100644
--- a/src/components/setting/UserProfile.tsx
+++ b/src/components/setting/UserProfile.tsx
@@ -20,7 +20,7 @@ interface UserProfileProps {
 
 const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
   return (
-    <div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6">
+    <div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 lg:gap-6 ">
       {/* Profile Picture */}
       <div className="flex-shrink-0 text-center">
         <div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">