diff --git a/public/css/app.css b/public/css/app.css
index 38f359f57..d91150dc6 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -35773,12 +35773,20 @@ html[dir='rtl'] .el-input__suffix {
     text-overflow: unset;
 }
 
-.disabled-link {
+.disabled-link{
   pointer-events: none;
   cursor: default;
   opacity: 0.5;
 }
 
+[dir="ltr"] .ltr\:-right-57 {
+    right: -14.5rem;
+}
+
+[dir="rtl"] .rtl\:-right-59 {
+    right: 16.5rem;
+}
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 450px;
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 2a2590f19..85aa67cf2 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -499,6 +499,14 @@ html[dir='rtl'] .el-input__suffix {
     @apply cursor-default pointer-events-none opacity-50;
 }
 
+[dir="ltr"] .ltr\:-right-57 {
+    right: -14.5rem;
+}
+
+[dir="rtl"] .rtl\:-right-59 {
+    right: 16.5rem;
+}
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 450px;
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 1efa0dbc8..8c56a0157 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -222,7 +222,7 @@
         <span class="material-icons text-lg text-purple transform ltr:rotate-90 rtl:-rotate-90">expand_circle_down</span>
     </button>
 
-    <span data-menu-close id="menu-cancel" class="material-icons absolute ltr:-right-2 rtl:right-12 top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
+    <span data-menu-close id="menu-cancel" class="material-icons absolute ltr:-right-2 rtl:right-12 transition-all top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
 
     <div class="fixed w-full h-full invisible lg:hidden js-menu-background" style="background-color: rgba(0, 0, 0, 0.5); z-index: -1;"></div>
 </div>
diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php
index 1c9e04666..8a18f3d56 100644
--- a/resources/views/components/layouts/admin/scripts.blade.php
+++ b/resources/views/components/layouts/admin/scripts.blade.php
@@ -156,8 +156,17 @@
                     toggleButton.classList.add("invisible");
                     menuClose.classList.remove("hidden");
 
-                    unHiddenSidebar();
-                    contentTransitionRight();
+                    //for hidden menu, show close icon scenario
+                    if (sideBar.classList.contains("menu-list-hidden")) {
+                        menuClose.classList.add("ltr:-right-57", "rtl:right-59");
+                        menuClose.classList.remove("ltr:-right-2", "rtl:right-12");
+                    } else {
+                        menuClose.classList.add("ltr:-right-2", "rtl:right-12");
+                    }
+                    
+                    sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
+                    sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
+                     //for hidden menu, show close icon scenario
 
                     if (menuRef === "notifications-menu") {
                         notificationCount("none");
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
index db8201d5d..7227ebd57 100644
--- a/resources/views/components/layouts/portal/menu.blade.php
+++ b/resources/views/components/layouts/portal/menu.blade.php
@@ -169,7 +169,7 @@
         <span class="material-icons text-lg text-purple transform ltr:rotate-90 rtl:-rotate-90">expand_circle_down</span>
     </button>
 
-    <span data-menu-close class="material-icons absolute ltr:-right-2 rtl:right-12 top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
+    <span data-menu-close class="material-icons absolute ltr:-right-2 rtl:right-12 transition-all top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
 
     <div class="fixed w-full h-full invisible lg:hidden js-menu-background" style="background-color: rgba(0, 0, 0, 0.5); z-index: -1;"></div>
 </div>
diff --git a/resources/views/components/layouts/portal/scripts.blade.php b/resources/views/components/layouts/portal/scripts.blade.php
index 3d83c74f5..576a2b9b9 100644
--- a/resources/views/components/layouts/portal/scripts.blade.php
+++ b/resources/views/components/layouts/portal/scripts.blade.php
@@ -137,8 +137,18 @@
                     mainContent.classList.add("hidden");
                     toggleButton.classList.add("invisible");
                     menuClose.classList.remove("hidden");
-                    unHiddenSidebar();
-                    contentTransitionRight();
+                    
+                    //for hidden menu, show close icon scenario
+                    if (sideBar.classList.contains("menu-list-hidden")) {
+                        menuClose.classList.add("ltr:-right-57", "rtl:right-59");
+                        menuClose.classList.remove("ltr:-right-2", "rtl:right-12");
+                    } else {
+                        menuClose.classList.add("ltr:-right-2", "rtl:right-12");
+                    }
+                    
+                    sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
+                    sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
+                     //for hidden menu, show close icon scenario
 
                 //remove active (cancel text) class form target icon
                 } else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") {