diff --git a/public/script.js b/public/script.js
index 0dc5c3c0a..b00b5d86f 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5387,17 +5387,8 @@ $(document).ready(function () {
     });
 
     $(document).on('click', '.mes .avatar', function () {
-        let avPopperOrigin = $(this);
-        const avatarPopup = {
-            name: 'offset',
-            options: {
-                offset: [0, 8],
-            },
-        };
 
-        let avatarPopper = Popper.createPopper(document.getElementById('top-settings-holder'), document.getElementById('avatar_zoom_popup'), {
-            modifiers: [avatarPopup],
-        });
+
         let thumbURL = $(this).children('img').attr('src');
         let charsPath = '/characters/'
         let targetAvatarImg = thumbURL.substring(thumbURL.lastIndexOf("=") + 1);
@@ -5411,9 +5402,14 @@ $(document).ready(function () {
             $("#zoomed_avatar").attr('src', avatarSrc);
         }
 
-        $('#avatar_zoom_popup').toggle();
+        let avatarPopper = Popper.createPopper(document.getElementById('top-bar'), document.getElementById('avatar_zoom_popup'), {
+            placement: 'bottom',
+        });
         avatarPopper.update();
 
+        $('#avatar_zoom_popup').toggle();
+
+
 
 
     });
diff --git a/public/style.css b/public/style.css
index dc9d3b1db..7640ab55e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3682,23 +3682,19 @@ body.noShadows * {
 }
 
 #avatar_zoom_popup {
-    /*     height: 600px;
-    width: 400px; */
+    min-height: 0px;
+    min-width: 400px;
     max-height: 60svh;
     max-width: 40svh;
-    margin: 0 auto;
-    display: block;
-    position: absolute;
-    top: 60px;
     z-index: 999;
     display: none;
+
 }
 
 #zoomed_avatar {
     border: 1px solid var(--white50a);
     border-radius: 20px;
-    max-height: 60svh;
-    max-width: 40svh;
+    max-height: calc(60svh - 60px);
     box-shadow: 0 0 10px black;
 }