diff --git a/users/edit-kyc.css b/users/edit-kyc.css
index 8c9b2f3..c55e84d 100644
--- a/users/edit-kyc.css
+++ b/users/edit-kyc.css
@@ -1,80 +1,157 @@
 
-        body {
-            justify-content: space-between;
-            margin: 0;
-        }
+    body {
+        justify-content: space-between;
+        margin: 0;
+    }
 
-        h1 {
-            margin: 0;
-        }
+    h1 {
+        margin: 0;
+    }
 
-        .mainContainer {
-            display: flex;
-            justify-content: center;
-            padding-left: 10rem;
-            padding-right: 10rem;
-        }
+    .mainContainer {
+        display: flex;
+        justify-content: center;
+        padding-left: 10rem;
+        padding-right: 10rem;
+    }
 
-        .section {
-            width: 45%;
-            padding: 20px;
-            box-sizing: border-box;
-        }
+    .section {
+        width: 45%;
+        padding: 20px;
+        box-sizing: border-box;
+    }
 
-        .section h2 {
-            margin-bottom: 10px;
-        }
+    .section h2 {
+        margin-bottom: 10px;
+    }
 
-        .form-container {
-            margin-bottom: 20px;
-            padding-top: 0px;
-        }
+    .form-container {
+        margin-bottom: 20px;
+        padding-top: 0px;
+    }
 
-        form {
-            width: 100%;
-        }
+    form {
+        width: 100%;
+    }
 
-        label {
-            display: block;
-            margin-bottom: 5px;
-        }
+    label {
+        display: block;
+        margin-bottom: 5px;
+    }
 
-        input {
-            width: 100%;
-            padding: 8px;
-            box-sizing: border-box;
-            margin-bottom: 10px;
-        }
+    input {
+        width: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+    }
 
 
 
-        .image-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-        }
+    .image-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
 
-        img {
-            width: 48%;
-            height: auto;
-            max-height: 200px;
-            object-fit: cover;
-            margin-bottom: 10px;
-        }
+    img {
+        width: 48%;
+        height: auto;
+        max-height: 200px;
+        object-fit: cover;
+        margin-bottom: 10px;
+    }
 
-        .checkboxFormContainer {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
+    .checkboxFormContainer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
 
-        .checkbox-container {
-            margin-bottom: 10px;
-            /* Adjust the margin as needed */
-        }
+    .checkbox-container {
+        margin-bottom: 10px;
+        /* Adjust the margin as needed */
+    }
 
-        .checkbox-label {
-            display: block;
-        }
-    
\ No newline at end of file
+    .checkbox-label {
+        display: block;
+    }
+
+
+    .kycImg , .selfieImg{
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.3s;
+    
+    }
+
+    .kycImg:hover , .selfieImg:hover{
+        box-shadow: 5px 10px 5px lightblue;
+        opacity: 0.7;
+    }
+
+    .modal {
+    display: none; 
+    position: fixed; 
+    z-index: 1; 
+    padding-top: 100px; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.9); 
+    }
+
+    
+    .modal-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    height: auto;
+    max-width: 700px;
+    }
+
+    
+    .modal-content, #caption {  
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+    }
+
+    @-webkit-keyframes zoom {
+    from {-webkit-transform:scale(0)} 
+    to {-webkit-transform:scale(1)}
+    }
+
+    @keyframes zoom {
+    from {transform:scale(0)} 
+    to {transform:scale(1)}
+    }
+
+    
+    .close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+    }
+
+    .close:hover,
+    .close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+    }
+
+    @media only screen and (max-width: 700px){
+    .modal-content {
+        width: 100%;
+    }
+    }   
\ No newline at end of file
diff --git a/users/edit-kyc.php b/users/edit-kyc.php
index 920bcea..1f3e359 100644
--- a/users/edit-kyc.php
+++ b/users/edit-kyc.php
@@ -6,6 +6,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="edit-kyc.css">
+
+
 </head>
 
 <body>
@@ -32,12 +34,17 @@
                     <?php
                     // Display selfie image
                     if (!empty($array['selfie'])) {
-                        echo '<img src="' . $array['selfie'] . '" alt="Selfie Image">';
+                        echo '<img src="' . $array['selfie'] . '" alt="Selfie Image" id="kycImg" class="selfieImg" onclick="trigger(\'kycImg\', \'Selfie Image\');">';
                     } else {
                         echo '<p>No selfie available.</p>';
                     }
                     ?>
                 </div>
+                <div id="myModal" class="modal">
+                    <span class="close" onclick="closeModal()">&times;</span>
+                    <img class="modal-content" id="img01" style="max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: auto; display: block;">
+
+                </div>
                 <h3>User Information</h3>
                 <div class="form-container">
                     <fieldset disabled>
@@ -69,13 +76,19 @@
                 <?php
                 if (!empty($array['images'])) {
                     foreach ($array['images'] as $image) {
-                        echo '<img src="' . $image['link'] . '" alt="KYC Image">';
+
+                    $img =  $image['link']   ;
+                    echo '<img src="' . $img . '" alt="KYC Image" id="'. $img . '" class="kycImg" onclick="trigger(\''. $img . '\', \'KYC Image\');">';
                     }
                 } else {
                     echo '<p>No images available.</p>';
                 }
                 ?>
             </div>
+            <div id="myModal" class="modal">
+                <span class="close">&times;</span>
+                <img class="modal-content" id="img01">
+            </div>
             <h3>KYC Information</h3>
             <div class="form-container">
                 <form>
@@ -136,7 +149,7 @@
         </div>
     </div>
 
-    <script>
+    <script type="text/javascript">
         function handleCheckboxChange() {
             // Check the status of checkboxes and enable/disable the "Accept" button
             var areAllChecked = document.querySelectorAll('#checkboxForm input[type="checkbox"]:checked').length === 4;
@@ -178,6 +191,25 @@
                 alert("Please provide a valid reason for rejection.");
             }
         }
+
+    var captionText = document.getElementById("captionText");
+
+    function trigger(var1, caption) {
+        var modal = document.getElementById("myModal");
+        var modalImg = document.getElementById("img01");
+
+        modal.style.display = "block";
+        modalImg.src = document.getElementById(var1).src;
+        captionText.innerHTML = caption;
+    }
+
+    var span = document.getElementsByClassName("close")[0];
+
+
+    function closeModal() {
+        var modal = document.getElementById("myModal");
+        modal.style.display = "none";
+    }
     </script>
     <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">