diff --git a/fix.md b/fix.md
index 1d14199..0a3ed66 100644
--- a/fix.md
+++ b/fix.md
@@ -1,20 +1,28 @@
-[Backend] Enhance error recovery for Audit Logger
-
+[Frontend] Implement framer-motion animations for Multi-sig Approval Modal
+Repo Avatar
+emdevelopa/Stellar_Payment_API
 Description
-This task involves system optimization for the Audit Logger module.
-The goal is to Enhance error recovery for.lower Audit Logger to enhance the platform's robustness and user experience.
+This task involves UX enhancement for the Multi-sig Approval Modal module.
+The goal is to implement framer-motion animations for Multi-sig Approval Modal to improve the platform's styling, user interactions, and overall accessibility.
 
 Requirements and context
 
-Adhere to the Drips Wave design and engineering standards.
-Ensure full test coverage for new logic.
-Must be secure, performant, and well-documented.
-Specifically focused on system optimization.
+Must be secure, tested, and documented
+Adhere to the Drips Wave design and UI/UX standards
+Ensure compatibility across desktop and mobile browsers
+Specifically focused on frontend UX enhancement and responsiveness
 Suggested execution
 
 Fork the repo and create a branch
-Review existing implementation in Audit Logger.
-Apply changes: Enhance error recovery for.
+git checkout -b feature/fe-implement-framer-motion-animations-for-multi-sig-approval-modal
+Implement changes
+
+Review existing component in Multi-sig Approval Modal
+Apply changes: Implement framer-motion animations for Multi-sig Approval Modal
+Use clean CSS or tailwind variables for styling
+Maintain state transitions and visual feedback
 Test and commit
-Example commit message
-backend: Enhance error recovery for Audit Logger
\ No newline at end of file
+
+Test mobile responsiveness and interactive states
+Check accessibility (a11y) using standard audits
+Include screenshots or gifs in the PR
diff --git a/frontend/src/components/MultisigApprovalModal.tsx b/frontend/src/components/MultisigApprovalModal.tsx
index 536b712..cc3901a 100644
--- a/frontend/src/components/MultisigApprovalModal.tsx
+++ b/frontend/src/components/MultisigApprovalModal.tsx
@@ -1,10 +1,57 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { useCallback, useEffect, useRef } from "react";
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
 import { useMultisigState, useMultisigActions } from "@/lib/multisig-context";
 import { toast } from "sonner";
 import { CopyButton } from "@/components/CopyButton";
+import {
+  errorMessageVariants,
+} from "@/lib/network-animations";
+
+const backdropVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+  exit: { opacity: 0, transition: { duration: 0.3 } },
+};
+
+const modalVariants = {
+  hidden: { scale: 0.85, opacity: 0, y: 30 },
+  visible: {
+    scale: 1,
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.4,
+      ease: [0.32, 0.72, 0.0, 1.0],
+      type: "spring",
+      stiffness: 300,
+      damping: 30,
+    },
+  },
+  exit: {
+    scale: 0.85,
+    opacity: 0,
+    y: 30,
+    transition: { duration: 0.2, ease: [0.32, 0.72, 0.0, 1.0] },
+  },
+};
+
+const stepVariants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.2 } },
+  exit: { opacity: 0, y: -10, transition: { duration: 0.15 } },
+};
+
+const signerListVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.05 } },
+};
+
+const signerItemVariants = {
+  hidden: { opacity: 0, x: -10 },
+  visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
+};
 
 interface MultisigApprovalModalProps {
   readonly isOpen: boolean;
@@ -19,8 +66,7 @@ export default function MultisigApprovalModal({
   networkPassphrase,
   transaction: initialTransaction,
 }: MultisigApprovalModalProps) {
-  const [mounted, setMounted] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
   const modalRef = useRef<HTMLDivElement>(null);
 
   const {
@@ -47,20 +93,6 @@ export default function MultisigApprovalModal({
     retryAction,
   } = useMultisigActions();
 
-  // Handle modal visibility animations
-  useEffect(() => {
-    if (isOpen) {
-      setMounted(true);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setVisible(true));
-      });
-    } else {
-      setVisible(false);
-      const timer = setTimeout(() => setMounted(false), 300);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen]);
-
   // Set transaction when modal opens
   useEffect(() => {
     if (isOpen && initialTransaction && !transaction) {
@@ -70,7 +102,7 @@ export default function MultisigApprovalModal({
 
   // Handle escape key and focus management
   useEffect(() => {
-    if (!isOpen || !visible) return;
+    if (!isOpen) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -82,7 +114,7 @@ export default function MultisigApprovalModal({
     modalRef.current?.focus();
 
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, visible]);
+  }, [isOpen]);
 
   // Body scroll lock
   useEffect(() => {
@@ -167,28 +199,38 @@ export default function MultisigApprovalModal({
               </span>
               <span className="text-xs text-slate-400">{Math.round(progress)}%</span>
             </div>
-            <div 
-              className="w-full bg-white/10 rounded-full h-2"
-              role="progressbar"
-              aria-valuenow={Math.round(progress)}
-              aria-valuemin={0}
-              aria-valuemax={100}
-              aria-label="Signature progress"
-            >
-              <div 
-                className="bg-mint h-2 rounded-full transition-all duration-300"
-                style={{ width: `${progress}%` }}
-              />
-            </div>
+              <motion.div 
+                className="w-full bg-white/10 rounded-full h-2"
+                role="progressbar"
+                aria-valuenow={Math.round(progress)}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-label="Signature progress"
+              >
+                <motion.div 
+                  className="bg-mint h-2 rounded-full"
+                  layout
+                  initial={{ width: 0 }}
+                  animate={{ width: `${progress}%` }}
+                  transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+                />
+              </motion.div>
           </div>
 
           {/* Signers List */}
           <div className="space-y-2" role="region" aria-label="Signers list">
             <span className="text-xs font-medium uppercase tracking-wider text-slate-500" id="signers-label">Signers</span>
-            <ul className="space-y-2" aria-labelledby="signers-label">
+            <motion.ul
+              className="space-y-2"
+              aria-labelledby="signers-label"
+              variants={!prefersReducedMotion ? signerListVariants : undefined}
+              initial="hidden"
+              animate="visible"
+            >
               {transaction.signers.map((signer) => (
-                <li
+                <motion.li
                   key={signer.id}
+                  variants={!prefersReducedMotion ? signerItemVariants : undefined}
                   className={`flex items-center justify-between rounded-lg border p-3 transition-colors ${
                     signer.hasSigned
                       ? "border-mint/30 bg-mint/5"
@@ -213,9 +255,11 @@ export default function MultisigApprovalModal({
                       </p>
                     </div>
                   </div>
-                  <button
+                  <motion.button
                     onClick={() => handleSign(signer.id)}
                     disabled={!canSign || signer.hasSigned || isLoading}
+                    whileHover={!prefersReducedMotion && canSign && !signer.hasSigned && !isLoading ? { scale: 1.02 } : undefined}
+                    whileTap={!prefersReducedMotion && canSign && !signer.hasSigned && !isLoading ? { scale: 0.98 } : undefined}
                     className={`px-3 py-1 rounded-lg text-xs font-medium transition-colors ${
                       signer.hasSigned
                         ? "bg-mint/10 text-mint cursor-not-allowed"
@@ -227,10 +271,10 @@ export default function MultisigApprovalModal({
                     aria-pressed={signer.hasSigned}
                   >
                     {signer.hasSigned ? "Signed" : isLoading ? "Signing..." : "Sign"}
-                  </button>
-                </li>
+                  </motion.button>
+                </motion.li>
               ))}
-            </ul>
+            </motion.ul>
           </div>
 
           {/* Time Remaining */}
@@ -245,13 +289,15 @@ export default function MultisigApprovalModal({
 
           {/* Submit Button */}
           {canSubmit && (
-            <button
+            <motion.button
               onClick={handleSubmit}
               disabled={isLoading}
+              whileHover={!prefersReducedMotion && !isLoading ? { scale: 1.02 } : undefined}
+              whileTap={!prefersReducedMotion && !isLoading ? { scale: 0.98 } : undefined}
               className="w-full py-3 bg-mint text-black font-semibold rounded-xl hover:bg-glow transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isLoading ? "Submitting..." : "Submit Transaction"}
-            </button>
+            </motion.button>
           )}
         </div>
       )}
@@ -295,12 +341,14 @@ export default function MultisigApprovalModal({
           </div>
         </div>
       )}
-      <button
+      <motion.button
         onClick={handleClose}
+        whileHover={!prefersReducedMotion ? { scale: 1.02 } : undefined}
+        whileTap={!prefersReducedMotion ? { scale: 0.98 } : undefined}
         className="px-6 py-2 bg-mint text-black font-semibold rounded-xl hover:bg-glow transition-colors"
       >
         Close
-      </button>
+      </motion.button>
     </div>
   );
 
@@ -318,18 +366,22 @@ export default function MultisigApprovalModal({
         </p>
       </div>
       <div className="flex gap-3 justify-center">
-        <button
+        <motion.button
           onClick={handleRetry}
+          whileHover={!prefersReducedMotion ? { scale: 1.02 } : undefined}
+          whileTap={!prefersReducedMotion ? { scale: 0.98 } : undefined}
           className="px-6 py-2 bg-white/10 text-white font-semibold rounded-xl hover:bg-white/20 transition-colors"
         >
           Try Again
-        </button>
-        <button
+        </motion.button>
+        <motion.button
           onClick={handleClose}
+          whileHover={!prefersReducedMotion ? { scale: 1.02 } : undefined}
+          whileTap={!prefersReducedMotion ? { scale: 0.98 } : undefined}
           className="px-6 py-2 bg-slate-600 text-white font-semibold rounded-xl hover:bg-slate-500 transition-colors"
         >
           Close
-        </button>
+        </motion.button>
       </div>
     </div>
   );
@@ -349,18 +401,16 @@ export default function MultisigApprovalModal({
     }
   };
 
-  if (!mounted) return null;
-
   return (
     <AnimatePresence>
       {isOpen && (
         <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
           {/* Backdrop */}
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
+            variants={backdropVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
             onClick={handleClose}
             className="absolute inset-0 bg-black/80 backdrop-blur-sm"
           />
@@ -368,16 +418,10 @@ export default function MultisigApprovalModal({
           {/* Modal */}
           <motion.div
             ref={modalRef}
-            initial={{ scale: 0.85, opacity: 0, y: 30 }}
-            animate={{ scale: 1, opacity: 1, y: 0 }}
-            exit={{ scale: 0.85, opacity: 0, y: 30 }}
-            transition={{
-              duration: 0.4,
-              ease: [0.32, 0.72, 0.0, 1.0], // Custom cubic-bezier for smooth easing
-              type: "spring",
-              stiffness: 300,
-              damping: 30,
-            }}
+            variants={!prefersReducedMotion ? modalVariants : undefined}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
             className="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-white/10 bg-[#050608] shadow-2xl backdrop-blur-xl outline-none"
             tabIndex={-1}
             role="dialog"
@@ -395,16 +439,18 @@ export default function MultisigApprovalModal({
                   {isExpired ? "Transaction Expired" : `Step ${currentStep === "review" ? "1" : currentStep === "processing" ? "2" : currentStep === "confirm" ? "3" : "1"} of 3`}
                 </p>
               </div>
-              <button
+              <motion.button
                 onClick={handleClose}
                 disabled={isLoading}
+                whileHover={!prefersReducedMotion && !isLoading ? { scale: 1.1, backgroundColor: "rgba(255,255,255,0.1)" } : undefined}
+                whileTap={!prefersReducedMotion && !isLoading ? { scale: 0.9 } : undefined}
                 className="rounded-lg p-2 text-slate-400 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed"
                 aria-label="Close modal"
               >
                 <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
-              </button>
+              </motion.button>
             </div>
 
             {/* Content */}
@@ -412,10 +458,10 @@ export default function MultisigApprovalModal({
               className="p-6 max-h-[70vh] overflow-y-auto"
               aria-live="polite"
               key={currentStep}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.2 }}
+              variants={stepVariants}
+              initial="hidden"
+              animate="visible"
+              exit="exit"
             >
               {isExpired ? (
                 <div className="text-center space-y-6">
@@ -430,12 +476,14 @@ export default function MultisigApprovalModal({
                       This transaction has expired and can no longer be signed or submitted.
                     </p>
                   </div>
-                  <button
+                  <motion.button
                     onClick={handleClose}
+                    whileHover={!prefersReducedMotion ? { scale: 1.02 } : undefined}
+                    whileTap={!prefersReducedMotion ? { scale: 0.98 } : undefined}
                     className="px-6 py-2 bg-slate-600 text-white font-semibold rounded-xl hover:bg-slate-500 transition-colors"
                   >
                     Close
-                  </button>
+                  </motion.button>
                 </div>
               ) : (
                 renderStep()
@@ -443,28 +491,40 @@ export default function MultisigApprovalModal({
             </motion.div>
 
             {/* Error Display */}
-            {error && currentStep !== "error" && (
-              <div className="mx-6 mb-6 rounded-xl border border-red-500/30 bg-red-500/10 p-4" role="alert">
-                <div className="flex items-start gap-3">
-                  <svg className="w-5 h-5 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                  </svg>
-                  <div className="flex-1">
-                    <p className="text-sm font-medium text-red-400">Error</p>
-                    <p className="text-sm text-red-300 mt-1">{error}</p>
-                  </div>
-                  <button
-                    onClick={clearError}
-                    className="text-red-400 hover:text-red-300 transition-colors"
-                    aria-label="Clear error"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            <AnimatePresence>
+              {error && currentStep !== "error" && (
+                <motion.div
+                  key="error-banner"
+                  variants={!prefersReducedMotion ? errorMessageVariants : undefined}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                  className="mx-6 mb-6 rounded-xl border border-red-500/30 bg-red-500/10 p-4"
+                  role="alert"
+                >
+                  <div className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                     </svg>
-                  </button>
-                </div>
-              </div>
-            )}
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-red-400">Error</p>
+                      <p className="text-sm text-red-300 mt-1">{error}</p>
+                    </div>
+                    <motion.button
+                      onClick={clearError}
+                      whileHover={!prefersReducedMotion ? { scale: 1.1 } : undefined}
+                      whileTap={!prefersReducedMotion ? { scale: 0.9 } : undefined}
+                      className="text-red-400 hover:text-red-300 transition-colors"
+                      aria-label="Clear error"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </motion.button>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
           </motion.div>
         </div>
       )}