diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css
index 03cbf82..a0e4f6b 100644
--- a/app/static/css/homepage.css
+++ b/app/static/css/homepage.css
@@ -132,15 +132,15 @@ tr:nth-child(even) {
 }
 /* for popup in my_cases */
 .overlay {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: rgba(102, 36, 132, 0.8);
-	transition: opacity 500ms;
-	visibility: hidden;
-	opacity: 0;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(102, 36, 132, 0.8);
+    transition: opacity 500ms;
+    visibility: hidden;
+    opacity: 0;
     z-index:100;
 }
 
@@ -151,11 +151,11 @@ tr:nth-child(even) {
 
 .wrapper {
     z-index:100;
-	margin: 70px auto;
-	padding: 20px;
-	background: #e7e7e7;
-	border-radius: 5px;
-	width: 30%;
+    margin: 70px auto;
+    padding: 20px;
+    background: #e7e7e7;
+    border-radius: 5px;
+    width: 30%;
     height: 100%;
     position: relative;
     transition: all 5s ease-in-out;
@@ -187,3 +187,36 @@ tr:nth-child(even) {
     background-color: #e7e7e7;
     padding: 20px 0;
 }
+
+/* for mycases edit button */
+.wrapper2 {
+    z-index:101;
+    margin: 70px auto;
+    padding: 20px;
+    background: #e7e7e7;
+    border-radius: 5px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: all 5s ease-in-out;
+}
+.wrapper2 h2 {
+    margin-top: 0;
+}
+.wrapper2 .close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    transition: all 200ms;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #662484;
+}
+.wrapper2 .close:hover {
+    color: yellow;
+}
+.wrapper2 .content {
+    height: 70%;
+    overflow-y: scroll;
+}
diff --git a/app/templates/my_cases.html b/app/templates/my_cases.html
index 1a1dfcb..329ce02 100644
--- a/app/templates/my_cases.html
+++ b/app/templates/my_cases.html
@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% block addhead %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/cases.css') }}"/>
 {% endblock %}
 
@@ -90,11 +90,11 @@ <h3>Case Number: {{ case.customer_id }}</h3>
                         <br>
                             <label>Not Enrolled Reason: </label>
                             <br>
-                            {{ case.not_enrolled_reason }}     
+                            {{ case.not_enrolled_reason }}
                         </div>
                     </div>
                 </div>
-            </div>              
+            </div>
         {% endfor %}
         </tbody>
     </table>
@@ -109,14 +109,14 @@ <h5 class="modal-title" id="assignModalLabel">Edit Case</h5>
                     </button>
                 </div>
             <div class="form-group">
-                <div class="wrapper">
-                    <h5 id="editIdHeader"></h5>                    
+                <div class="wrapper2">
+                    <h5 id="editIdHeader"></h5>
                     <label for="editFirstName">First Name:</label><span id="editFirstName"></span><br/>
                     <label for="editLastName">Last Name:</label> <span  id="editLastName"></span><br/>
                     <label for="editNumChildren">No. of Children:</label><span id="editNumChildren"></span><br/>
                     <label for="editOutreachDate">Outreach Date:</label><span id="editOutreachDate"></span><br/>
                     <label for="editPacketReturnStatus">Packet Return Status:</label>
-                    <select class="form-control" id="editPacketReturnStatus"></select>        
+                    <select class="form-control" id="editPacketReturnStatus"></select>
                     <div class="edit-group-user">
                         <label for="editDecision">Decision:</label>
                         <select class="form-control" id="editDecision"></select>
@@ -138,11 +138,11 @@ <h5 id="editIdHeader"></h5>
                                 <i class="fas fa-calendar-alt"></i>
                                 </span>
                             </div>
-                        </div>               
+                        </div>
                         <input type="hidden" id="editCaseId" name="case_id" value="">
                         <label for="editNotEnrolledReason">Not Enrolled Reason</label>
                         <br>
-                        <input id="editNotEnrolledReason" value=""/>    
+                        <input id="editNotEnrolledReason" value=""/>
                     </div>
                     <div class="modal-footer">
                         <div id="errorBox" class="alert alert-danger" style="display: none;"></div>
@@ -244,7 +244,7 @@ <h5 id="editIdHeader"></h5>
                 });
             });
 
-            $('#casesTable').on('click', '.edit-button', function() {                
+            $('#casesTable').on('click', '.edit-button', function() {
                 var case_id = this.getAttribute('data-case-id');
                 $('.edit-group-user').show();
                 // Populate the modal with case details
@@ -259,7 +259,7 @@ <h5 id="editIdHeader"></h5>
 
                 var days_since_outreach = calculateDaysSinceOutreach($('#outreachDate_' + case_id).text());
                 console.log(packageReturnStatus, packageReturnStatus !== "RETURNED", days_since_outreach, days_since_outreach > 15);
-                
+
                 if (packageReturnStatus !== "RETURNED" && days_since_outreach > 15) {
                     $('.edit-group-user').hide();
                     $("#editPacketReturnStatus option[value='" + "RETURNED" + "']").hide();
@@ -278,7 +278,7 @@ <h5 id="editIdHeader"></h5>
 
                 $('#editModal').modal('show');
             });
-            
+
             $('#editSubmit').on('click', function() {
                 // Get all input values
                 var caseId = $('#editCaseId').val();
@@ -370,4 +370,3 @@ <h5 id="editIdHeader"></h5>
         });
     </script>
 {% endblock %}
-