diff --git a/resources/icons/zoom_in.svg b/resources/icons/zoom_in.svg
new file mode 100644
index 00000000..12aa6d08
--- /dev/null
+++ b/resources/icons/zoom_in.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 6.5C11 5.94772 10.5523 5.5 10 5.5C9.44771 5.5 9 5.94772 9 6.5V9H6.5C5.94772 9 5.5 9.44771 5.5 10C5.5 10.5523 5.94772 11 6.5 11H9V13.5C9 14.0523 9.44771 14.5 10 14.5C10.5523 14.5 11 14.0523 11 13.5V11H13.5C14.0523 11 14.5 10.5523 14.5 10C14.5 9.44771 14.0523 9 13.5 9H11V6.5Z" fill="#000000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C12.125 19 14.078 18.2635 15.6177 17.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L17.0319 15.6177C18.2635 14.078 19 12.125 19 10C19 5.02944 14.9706 1 10 1ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/resources/icons/zoom_out.svg b/resources/icons/zoom_out.svg
new file mode 100644
index 00000000..39419cae
--- /dev/null
+++ b/resources/icons/zoom_out.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 10C5.5 9.44771 5.94772 9 6.5 9H13.5C14.0523 9 14.5 9.44771 14.5 10C14.5 10.5523 14.0523 11 13.5 11H6.5C5.94772 11 5.5 10.5523 5.5 10Z" fill="#000000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 12.125 18.2635 14.078 17.0319 15.6177L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L15.6177 17.0319C14.078 18.2635 12.125 19 10 19C5.02944 19 1 14.9706 1 10ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/src/app.rs b/src/app.rs
index 411feca3..714ee12a 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -461,10 +461,6 @@ fn clear_all_app_state(cx: &mut Cx) {
 
 impl AppMain for App {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
-        // if let Event::WindowGeomChange(geom) = event {
-        //     log!("App::handle_event(): Window geometry changed: {:?}", geom);
-        // }
-
         if let Event::Shutdown = event {
             let window_ref = self.ui.window(ids!(main_window));
             if let Err(e) = persistence::save_window_state(window_ref, cx) {
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 14c38660..01da2ded 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -181,8 +181,14 @@ impl AvatarRow {
             self.buttons.iter_mut().zip(receipts_map.iter().rev())
         {
             if !*drawn {
-                let (_, drawn_status) =
-                    avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id);
+                let (_, drawn_status) = avatar_ref.set_avatar_and_get_username(
+                    cx,
+                    room_id,
+                    user_id,
+                    None,
+                    event_id,
+                    true,
+                );
                 *drawn = drawn_status;
             }
         }
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 31aa813a..897288c5 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -2907,6 +2907,7 @@ fn populate_message_view(
                             event_tl_item.sender(),
                             Some(event_tl_item.sender_profile()),
                             event_tl_item.event_id(),
+                            true,
                         );
 
                         // Prepend a "* <username> " to the emote body, as suggested by the Matrix spec.
@@ -3195,6 +3196,7 @@ fn populate_message_view(
                     event_tl_item.sender(),
                     Some(event_tl_item.sender_profile()),
                     event_tl_item.event_id(),
+                    true,
                 )
             );
             if is_notice {
@@ -3664,6 +3666,7 @@ fn draw_replied_to_message(
                             &replied_to_event.sender,
                             Some(&replied_to_event.sender_profile),
                             Some(in_reply_to_details.event_id.as_ref()),
+                            true,
                         );
 
                 fully_drawn = is_avatar_fully_drawn;
@@ -3996,6 +3999,7 @@ fn populate_small_state_event(
             event_tl_item.sender(),
             Some(event_tl_item.sender_profile()),
             event_tl_item.event_id(),
+            true,
         );
         // Draw the timestamp as part of the profile.
         if let Some(dt) = unix_time_millis_to_datetime(event_tl_item.timestamp()) {
diff --git a/src/room/room_input_bar.rs b/src/room/room_input_bar.rs
index abf6ab4a..982f430e 100644
--- a/src/room/room_input_bar.rs
+++ b/src/room/room_input_bar.rs
@@ -371,6 +371,7 @@ impl RoomInputBar {
                 replying_to.0.sender(),
                 Some(replying_to.0.sender_profile()),
                 replying_to.0.event_id(),
+                true,
             );
 
         replying_preview
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index b6abafa4..f4cf2172 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -37,7 +37,6 @@ live_design! {
         align: { x: 0.5, y: 0.5 }
         // the text_view and img_view are overlaid on top of each other.
         flow: Overlay,
-        cursor: Hand,
 
         text_view = <View> {
             visible: true,
@@ -94,6 +93,8 @@ live_design! {
 pub struct Avatar {
     #[deref] view: View,
 
+    /// Information about the user profile being shown in this Avatar.
+    /// If `Some`, this Avatar will respond to clicks/taps.
     #[rust] info: Option<UserProfileAndRoomId>,
 }
 
@@ -101,9 +102,7 @@ impl Widget for Avatar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
 
-        let Some(info) = self.info.clone() else {
-            return;
-        };
+        let Some(info) = self.info.clone() else { return };
         let area = self.view.area();
         let widget_uid = self.widget_uid();
         match event.hits(cx, area) {
@@ -152,16 +151,19 @@ impl Avatar {
         info: Option<AvatarTextInfo>,
         username: T,
     ) {
-        self.info = info.map(|AvatarTextInfo { user_id, username, room_id }|
-            UserProfileAndRoomId {
+        if let Some(AvatarTextInfo { user_id, username, room_id }) = info {
+            self.info = Some(UserProfileAndRoomId {
                 user_profile: UserProfile {
                     user_id,
                     username,
                     avatar_state: AvatarState::Unknown,
                 },
                 room_id,
-            }
-        );
+            });
+            self.view.apply_over(cx, live!{ cursor: Hand });
+        } else {
+            self.view.apply_over(cx, live!{ cursor: Default });
+        }
         self.set_text(cx, username.as_ref());
 
         // Apply background color if provided
@@ -200,16 +202,19 @@ impl Avatar {
             self.view(ids!(img_view)).set_visible(cx, true);
             self.view(ids!(text_view)).set_visible(cx, false);
 
-            self.info = info.map(|AvatarImageInfo { user_id, username, room_id, img_data }|
-                UserProfileAndRoomId {
+            if let Some(AvatarImageInfo { user_id, username, room_id, img_data }) = info {
+                self.info = Some(UserProfileAndRoomId {
                     user_profile: UserProfile {
                         user_id,
                         username,
                         avatar_state: AvatarState::Loaded(img_data),
                     },
                     room_id,
-                }
-            );
+                });
+                self.view.apply_over(cx, live!{ cursor: Hand });
+            } else {
+                self.view.apply_over(cx, live!{ cursor: Default });
+            }
         }
         res
     }
@@ -244,6 +249,8 @@ impl Avatar {
     ///   our user profile cache , then the `username` and `avatar`  will be the user ID
     ///   and the first character of that user ID, respectively.
     ///
+    /// If `is_clickable` is `true`, this Avatar will respond to clicks.
+    ///
     /// ## Return
     /// Returns a tuple of:
     /// 1. The displayable username that should be used to populate the username field.
@@ -256,6 +263,7 @@ impl Avatar {
         avatar_user_id: &UserId,
         avatar_profile_opt: Option<&TimelineDetails<Profile>>,
         event_id: Option<&EventId>,
+        is_clickable: bool,
     ) -> (String, bool) {
         // Get the display name and avatar URL from the user's profile, if available,
         // or if the profile isn't ready, fall back to querying our user profile cache.
@@ -330,12 +338,12 @@ impl Avatar {
             .and_then(|data| {
                 self.show_image(
                     cx,
-                    Some((
+                    is_clickable.then(|| AvatarImageInfo::from((
                         avatar_user_id.to_owned(),
                         username_opt.clone(),
                         room_id.to_owned(),
-                        data.clone()).into(),
-                    ),
+                        data.clone()
+                    ))),
                     |cx, img| utils::load_png_or_jpg(&img, cx, &data),
                 )
                 .ok()
@@ -344,7 +352,11 @@ impl Avatar {
                 self.show_text(
                     cx,
                     None,
-                    Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
+                    is_clickable.then(|| AvatarTextInfo::from((
+                        avatar_user_id.to_owned(),
+                        username_opt,
+                        room_id.to_owned(),
+                    ))),
                     &username,
                 )
             });
@@ -399,9 +411,17 @@ impl AvatarRef {
         avatar_user_id: &UserId,
         avatar_profile_opt: Option<&TimelineDetails<Profile>>,
         event_id: Option<&EventId>,
+        is_clickable: bool,
     ) -> (String, bool) {
         if let Some(mut inner) = self.borrow_mut() {
-            inner.set_avatar_and_get_username(cx, room_id, avatar_user_id, avatar_profile_opt, event_id)
+            inner.set_avatar_and_get_username(
+                cx,
+                room_id,
+                avatar_user_id,
+                avatar_profile_opt,
+                event_id,
+                is_clickable,
+            )
         } else {
             (avatar_user_id.to_string(), false)
         }
diff --git a/src/shared/image_viewer.rs b/src/shared/image_viewer.rs
index e9fc7f13..68f6747b 100644
--- a/src/shared/image_viewer.rs
+++ b/src/shared/image_viewer.rs
@@ -16,6 +16,9 @@ use matrix_sdk_ui::timeline::EventTimelineItem;
 use thiserror::Error;
 use crate::shared::{avatar::AvatarWidgetExt, timestamp::TimestampWidgetRefExt};
 
+/// The timeout for hiding the UI overlays after no user mouse/tap activity.
+const SHOW_UI_DURATION: f64 = 3.0;
+
 /// Loads the given image `data` into an `ImageBuffer` as either a PNG or JPEG, using the `imghdr` library to determine which format it is.
 ///
 /// Returns an error if either load fails or if the image format is unknown.
@@ -36,15 +39,13 @@ pub fn get_png_or_jpg_image_buffer(data: Vec<u8>) -> Result<ImageBuffer, ImageEr
     }
 }
 
-/// Configuration for zoom and pan settings in the image viewer
+/// Configuration for zoom and pan settings in the image viewer.
 #[derive(Clone, Debug)]
 pub struct ImageViewerZoomConfig {
-    /// Minimum zoom level (default: 0.5)
-    pub min_zoom: f32,
-    /// Maximum zoom level (default: 4.0)
-    pub max_zoom: f32,
+    /// Minimum zoom level (default: 0.1)
+    pub min_zoom: f64,
     /// Zoom scale factor for zoom in/out operations (default: 1.2)
-    pub zoom_scale_factor: f32,
+    pub zoom_scale_factor: f64,
     /// Pan sensitivity multiplier for drag operations (default: 2.0)
     pub pan_sensitivity: f64,
 }
@@ -52,8 +53,7 @@ pub struct ImageViewerZoomConfig {
 impl Default for ImageViewerZoomConfig {
     fn default() -> Self {
         Self {
-            min_zoom: 0.5,
-            max_zoom: 4.0,
+            min_zoom: 0.1,
             zoom_scale_factor: 1.2,
             pan_sensitivity: 2.0,
         }
@@ -87,7 +87,7 @@ struct DragState {
     drag_start: DVec2,
     /// The zoom level of the image.
     /// The larger the value, the more zoomed in the image is.
-    zoom_level: f32,
+    zoom_level: f64,
     /// The pan offset of the image.
     pan_offset: Option<DVec2>,
 }
@@ -111,129 +111,43 @@ live_design! {
     use crate::shared::avatar::Avatar;
     use crate::shared::timestamp::Timestamp;
 
-    pub MagnifyingGlass = <View> {
-        width: Fit, height: Fit
-        flow: Overlay
-        visible: true
-
-        magnifying_glass_button = <RobrixIconButton> {
-            width: Fit, height: Fit,
-            spacing: 0,
-            margin: 8,
-            padding: 3
-            draw_bg: {
-                color: (COLOR_PRIMARY)
-            }
-            draw_icon: {
-                svg_file: (ICON_ZOOM),
-                fn get_color(self) -> vec4 {
-                    return #x0;
-                }
-            }
-            icon_walk: {width: 30, height: 30}
-        }
-    
-        sign_label = <View> {
-            width: Fill, height: Fill,
-            align: { x: 0.4, y: 0.35 }
+    UI_ANIMATION_DURATION_SECS = 0.5
+    ROTATION_ANIMATION_DURATION_SECS = 0.2
 
-            magnifying_glass_sign = <Label> {
-                text: "+",
-                draw_text: {
-                    text_style: <THEME_FONT_BOLD>{font_size: 15},
-                    color: #000000
-                }
-            }
-        }
-    }
-    pub RotationButton = <RobrixIconButton> {
-        width: Fit, height: Fit,
-        margin: 8,
-        padding: 3
-        align: {x: 0.5, y: 0.5}
+    ImageViewerButton = <RobrixIconButton> {
+        width: 44, height: 44
+        align: {x: 0.5, y: 0.5},
+        spacing: 0, 
+        padding: 0,
         draw_bg: {
-            color: (COLOR_PRIMARY)
+            color: (COLOR_SECONDARY * 0.9)
         }
         draw_icon: {
-            svg_file: (ICON_ROTATE_CW),
+            svg_file: (ICON_ZOOM_OUT),
             fn get_color(self) -> vec4 {
                 return #x0;
             }
         }
-        icon_walk: {width: 30, height: 30, margin: {right: -10} }
+        icon_walk: {width: 27, height: 27}
     }
+
     pub ImageViewer = {{ImageViewer}} {
         width: Fill, height: Fill,
         flow: Overlay
         show_bg: true
         draw_bg: {
-            color: (COLOR_PRIMARY)
+            color: (COLOR_IMAGE_VIEWER_BACKGROUND)
         }
 
         image_layer = <View> {
             width: Fill, height: Fill,
             align: {x: 0.5, y: 0.5}
-            show_bg: true
-            draw_bg: {
-                color: (COLOR_PRIMARY)
-            }
             flow: Down
-            
-            header = <View> {
-                width: Fill, height: 50
-                flow: Right
-                align: {x: 1.0, y: 0.5},
-    
-                zoom_button_minus = <MagnifyingGlass> {
-                    sign_label = <View> {
-                        width: Fill, height: Fill,
-                        align: { x: 0.4, y: 0.35 }
-
-                        magnifying_glass_sign = <Label> {
-                            text: "-",
-                            draw_text: {
-                                text_style: <THEME_FONT_BOLD>{font_size: 15},
-                                color: #000000
-                            }
-                        }
-                    }
-                }
-
-                zoom_button_plus = <MagnifyingGlass> { }
-
-                rotation_button_anti_clockwise = <RotationButton> {
-                    draw_icon: {
-                        svg_file: (ICON_ROTATE_CCW),
-                        fn get_color(self) -> vec4 {
-                            return #x0;
-                        }
-                    }
-                }
-
-                rotation_button_clockwise = <RotationButton> { }
-
-                close_button = <RobrixIconButton> {
-                    width: Fit, height: Fit,
-                    spacing: 0,
-                    padding: 5
-                    draw_bg: {
-                        color: (COLOR_PRIMARY)
-                    }
-                    draw_icon: {
-                        svg_file: (ICON_CLOSE),
-                        fn get_color(self) -> vec4 {
-                            return #x0;
-                        }
-                    }
-                    icon_walk: { width: 25, height: 25 }
-                }
-            }
 
             rotated_image_container = <View> {
                 width: Fill, height: Fill,
-                flow: Overlay
+                flow: Down
                 align: {x: 0.5, y: 0.5}
-
                 rotated_image = <RotatedImage> {
                     width: Fill, height: Fill,
                     draw_bg: {
@@ -286,63 +200,147 @@ live_design! {
         }
 
         metadata_view = <View> {
-            width: Fill, height: Fill
-            flow: RightWrap
-
-            top_left_container = <View> {
-                width: Fit, height: Fit,
-                flow: Right,
-                spacing: 10,
-                margin: {left: 20, top: 40}
-                align: { y: 0.5 }
-
-                avatar = <Avatar> {
-                    width: 40, height: 40,
+            width: Fill, height: Fill,
+            margin: 20,
+            align: {x: 0.0, y: 1.0},
+            metadata_rounded_view = <RoundedView> {
+                width: Fill, height: Fit
+                flow: Right
+                align: {y: 0.5, x: 0.0}
+                padding: 13
+                spacing: 8,
+
+                show_bg: true
+                draw_bg: {
+                    border_radius: 4.0
+                    color: (COLOR_IMAGE_VIEWER_META_BACKGROUND)
                 }
 
-                content = <View> {
-                    width: Fit, height: Fit,
-                    flow: Down,
-                    spacing: 4,
+                // Display user profile view below the button group when the width is not enough.
+                user_profile_view = <View> {
+                    width: Fit { max: 200 }
+                    height: Fit,
+                    flow: Right,
+                    spacing: 13,
+                    align: { y: 0.5 }
+                    
+                    avatar = <Avatar> {
+                        width: 45, height: 45,
+                        text_view = { text = { draw_text: {
+                            text_style: <TITLE_TEXT>{ font_size: 15.0 }
+                        }}}
+                    }
 
-                    username = <Label> {
-                        width: Fit, height: Fit,
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{font_size: 10},
-                            color: (COLOR_TEXT)
+                    content = <View> {
+                        width: Fit
+                        height: Fit,
+                        align: { y: 0.5 }
+                        spacing: 3
+                        flow: Down,
+
+                        username = <Label> {
+                            width: Fit
+                            height: Fit,
+                            padding: 0
+                            margin: 0
+                            flow: Right
+                            draw_text: {
+                                text_style: <REGULAR_TEXT>{font_size: 12},
+                                color: (COLOR_TEXT)
+                                wrap: Ellipsis
+                            }
                         }
-                    }
 
-                    timestamp_view = <View> {
-                        width: Fit, height: Fit
+                        timestamp_view = <View> {
+                            width: Fit
+                            height: Fit
+
+                            timestamp = <Timestamp> {
+                                width: Fit,
+                                height: Fit,
+                                ts_label = {
+                                    draw_text: {
+                                        text_style: {font_size: 9.5},
+                                        color: (COLOR_TEXT)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
 
-                        timestamp = <Timestamp> {
-                            width: Fit, height: Fit,
-                            margin: { left: 5 }
+                // Display image name and size below the user_profile_view if the width is not enough.
+                image_name_and_size_view = <View> {
+                    width: Fill
+                    height: Fit,
+                    align: {x: 0.5, y: 0.5}
+                    flow: Right
+                    image_name_and_size = <Label> {
+                        width: Fill,
+                        height: Fit,
+                        align: {x: 0.5, y: 0.5}
+                        draw_text: {
+                            text_style: <REGULAR_TEXT>{font_size: 13},
+                            color: (COLOR_TEXT),
+                            wrap: Word
                         }
                     }
                 }
             }
-            image_name_and_size_view = <View> {
-                width: 200, height: Fit,
-                image_name_and_size = <Label> {
-                    width: Fill, height: Fit,
-                    margin: {top: 40}
-                    align: { x: 0.5, }
-                    draw_text: {
-                        text_style: <REGULAR_TEXT>{font_size: 12},
-                        color: (COLOR_TEXT),
-                        wrap: Word
-                    }
+        }
+
+        button_group_view = <View> {
+            width: Fill, height: Fit
+            flow: Right
+            margin: {top: 20, right: 20}
+            align: {x: 1.0, y: 0.5},
+
+            button_group_rounded_view = <RoundedView> {
+                width: Fit, height: Fit
+                spacing: 10
+                show_bg: true
+                draw_bg: {
+                    color: (COLOR_IMAGE_VIEWER_META_BACKGROUND),
+                    border_radius: 4.0
+                }
+                padding: { left: 7, top: 4, bottom: 4, right: 7}
+
+                zoom_out_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ZOOM_OUT) }
+                    icon_walk: {width: 27, height: 27, margin: {left: 2}}
+                }
+
+                zoom_in_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ZOOM_IN) }
+                    icon_walk: {width: 27, height: 27, margin: {left: 2}}
+                }
+
+                rotation_button_anti_clockwise = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ROTATE_CCW) }
+                }
+
+                rotation_button_clockwise = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_ROTATE_CW) }
+                }
+
+                reset_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_JUMP) }
+                    icon_walk: {width: 25, height: 25, margin: {bottom: 2}}
+                }
+
+                close_button = <ImageViewerButton> {
+                    draw_icon: { svg_file: (ICON_CLOSE) }
+                    icon_walk: {width: 21, height: 21 }
                 }
             }
         }
+
         animator: {
             mode = {
                 default: upright,
                 degree_neg90 = {
                     redraw: false,
-                    from: {all: Forward {duration: 1.0}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
                         image_layer = {
                             rotated_image_container = {
@@ -355,7 +353,7 @@ live_design! {
                 }
                 upright = {
                     redraw: false,
-                    from: {all: Forward {duration: 1.0}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
                         image_layer = {
                             rotated_image_container = {
@@ -368,7 +366,7 @@ live_design! {
                 }
                 degree_90 = {
                     redraw: false,
-                    from: {all: Forward {duration: 1.0}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
                         image_layer = {
                             rotated_image_container = {
@@ -381,7 +379,7 @@ live_design! {
                 }
                 degree_180 = {
                     redraw: false,
-                    from: {all: Forward {duration: 1.0}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
                         image_layer = {
                             rotated_image_container = {
@@ -394,7 +392,7 @@ live_design! {
                 }
                 degree_270 = {
                     redraw: false,
-                    from: {all: Forward {duration: 1.0}}
+                    from: {all: Forward {duration: (ROTATION_ANIMATION_DURATION_SECS)}}
                     apply: {
                         image_layer = {
                             rotated_image_container = {
@@ -428,6 +426,33 @@ live_design! {
                     apply: { }
                 }
             }
+            ui_animator = {
+                default: hide,
+                show = {
+                    redraw: false,
+                    from: { all: Forward { duration: (UI_ANIMATION_DURATION_SECS) } }
+                    apply: {
+                        button_group_view = {
+                            margin: { top: 20 }
+                        }
+                        metadata_view = {
+                            margin: { bottom: 20 }
+                        }
+                    }
+                }
+                hide = {
+                    redraw: false,
+                    from: { all: Forward { duration: (UI_ANIMATION_DURATION_SECS) } }
+                    apply: {
+                        button_group_view = {
+                            margin: { top: -200 }
+                        }
+                        metadata_view = {
+                            margin: { bottom: -300 }
+                        }
+                    }
+                }
+            }
         }
     }
 }
@@ -441,64 +466,124 @@ pub enum ImageViewerAction {
     /// Display the ImageViewer widget based on the LoadState.
     Show(LoadState),
     /// Hide the ImageViewer widget.
-    Hide
+    Hide,
 }
 
-#[derive(Live, Widget)]
+#[derive(Live, LiveHook, Widget)]
 struct ImageViewer {
-    #[deref]
-    view: View,
-    #[rust]
-    drag_state: DragState,
+    #[deref] view: View,
+    #[rust] drag_state: DragState,
     /// The current rotation angle of the image. Max of 4, each step represents 90 degrees
-    #[rust]
-    rotation_step: i32,
+    #[rust] rotation_step: i8,
     /// A lock to prevent multiple rotation animations from running at the same time
-    #[rust]
-    is_animating_rotation: bool,
-    #[animator]
-    animator: Animator,
+    #[rust] is_animating_rotation: bool,
+    #[animator] animator: Animator,
     /// Zoom constraints for the image viewer
-    #[rust]
-    min_zoom: f32,
-    #[rust]
-    max_zoom: f32,
-    /// Zoom scale factor for zoom in/out operations
-    #[rust]
-    zoom_scale_factor: f32,
-    /// Pan sensitivity multiplier for drag operations
-    #[rust]
-    pan_sensitivity: f64,
+    #[rust] config: ImageViewerZoomConfig,
     /// Indicates if the mouse cursor is currently hovering over the image.
     /// If true, allows wheel scroll to zoom the image.
-    #[rust]
-    mouse_cursor_hover_over_image: bool,
+    #[rust] mouse_cursor_hover_over_image: bool,
     /// Distance between two touch points for pinch-to-zoom functionality
-    #[rust]
-    previous_pinch_distance: Option<f64>,
+    #[rust] previous_pinch_distance: Option<f64>,
     /// The ID of the background task that is currently running
-    #[rust]
-    background_task_id: u32,
+    #[rust] background_task_id: u32,
     /// The mpsc::Receiver used to receive the result of the background task
-    #[rust]
-    receiver: Option<(u32, Receiver<Result<ImageBuffer, ImageError>>)>,
+    #[rust] receiver: Option<(u32, Receiver<Result<ImageBuffer, ImageError>>)>,
     /// Whether the full image file has been loaded
-    #[rust]
-    is_loaded: bool,
-}
-
-impl LiveHook for ImageViewer {
-    fn after_new_from_doc(&mut self, _cx: &mut Cx) {
-        self.min_zoom = 0.5;
-        self.max_zoom = 4.0;
-        self.zoom_scale_factor = 1.2;
-        self.pan_sensitivity = 2.0;
-    }
+    #[rust] is_loaded: bool,
+    /// The size of the image container.
+    ///
+    /// Used to compute the necessary width and height for the full screen image.
+    #[rust] image_container_size: DVec2,
+    /// The texture containing the loaded image
+    #[rust] texture: Option<Texture>,
+    /// The event to trigger displaying with the loaded image after peek_walk_turtle of the widget.
+    #[rust] next_frame: NextFrame,
+    /// Whether to display the UI overlay, including buttons and metadata.
+    #[rust] ui_visible_toggle: bool,
+    /// Timer used to animate-out (hide) the UI view after the latest user input.
+    #[rust] hide_ui_timer: Timer,
+    #[rust] capped_dimension: DVec2,
 }
 
 impl Widget for ImageViewer {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.match_event(cx, event);
+
+        // Handle the app window being resized.
+        if matches!(event, Event::WindowGeomChange(_)) {
+            let image_container_rect = self.view.area().rect(cx);
+            self.image_container_size = image_container_rect.size;
+
+            // Save current drag state to retain zoom and pan
+            let saved_zoom_level = self.drag_state.zoom_level;
+            let saved_pan_offset = self.drag_state.pan_offset;
+
+            // Recalculate base dimensions for new container size
+            self.display_using_texture(cx);
+
+            // Restore drag state
+            self.drag_state.zoom_level = saved_zoom_level;
+            self.drag_state.pan_offset = saved_pan_offset;
+
+            // Reapply zoom and pan if they differ from defaults
+            if saved_zoom_level != 1.0 || saved_pan_offset.is_some() {
+                let rotated_image = self.view.rotated_image(ids!(rotated_image));
+                let width = self.capped_dimension.x * saved_zoom_level;
+                let height = self.capped_dimension.y * saved_zoom_level;
+
+                if let Some(offset) = saved_pan_offset {
+                    rotated_image.apply_over(
+                        cx,
+                        live! {
+                            margin: { top: (offset.y), left: (offset.x) },
+                            width: (width),
+                            height: (height),
+                        },
+                    );
+                } else {
+                    rotated_image.apply_over(
+                        cx,
+                        live! {
+                            width: (width),
+                            height: (height),
+                        },
+                    );
+                }
+            }
+        }
+
+        // Handle hover events for UI elements without consuming the main image events
+        // We'll track hover state in the FingerMove event within the image handling
         let rotated_image = self.view.rotated_image(ids!(rotated_image));
+        let button_group_rounded_view = self.view.view(ids!(button_group_rounded_view));
+        match event.hits(cx, button_group_rounded_view.area()) {
+            Hit::FingerHoverIn(_) if !self.ui_visible_toggle => {
+                cx.stop_timer(self.hide_ui_timer);
+                self.animator_cut(cx, ids!(ui_animator.show));
+            }
+            Hit::FingerHoverOut(fe) => {
+                // FingerHoverOut is triggered when the cursor enters into the button.
+                // Hence we need to check if the cursor is actually inside the button group.
+                if !self.ui_visible_toggle
+                    && !button_group_rounded_view.area().rect(cx).contains(fe.abs)
+                {
+                    self.hide_ui_timer = cx.start_timeout(SHOW_UI_DURATION);
+                }
+            }
+            _ => {}
+        }
+        match event.hits(cx, self.view.view(ids!(metadata_rounded_view)).area()) {
+            Hit::FingerHoverIn(_) if !self.ui_visible_toggle => {
+                cx.stop_timer(self.hide_ui_timer);
+                self.animator_cut(cx, ids!(ui_animator.show));
+            }
+            Hit::FingerHoverOut(_) if !self.ui_visible_toggle => {
+                self.hide_ui_timer = cx.start_timeout(SHOW_UI_DURATION);
+            }
+            _ => {}
+        }
         // Handle cursor changes on mouse hover
         match event.hits(cx, rotated_image.area()) {
             Hit::FingerDown(fe) => {
@@ -523,6 +608,13 @@ impl Widget for ImageViewer {
                     );
                     rotated_image_container.redraw(cx);
                 }
+                self.ui_visible_toggle = !self.ui_visible_toggle;
+                if self.ui_visible_toggle {
+                    self.animator_play(cx, ids!(ui_animator.show));
+                } else {
+                    self.animator_play(cx, ids!(ui_animator.hide));
+                }
+                cx.stop_timer(self.hide_ui_timer);
             }
             Hit::FingerHoverIn(_) => {
                 self.mouse_cursor_hover_over_image = true;
@@ -531,13 +623,15 @@ impl Widget for ImageViewer {
             Hit::FingerMove(fe) => {
                 if let Some(current_offset) = self.drag_state.pan_offset {
                     let drag_delta = fe.abs - self.drag_state.drag_start;
-                    let new_offset = current_offset + drag_delta * self.pan_sensitivity;
-
+                    let new_offset = current_offset + drag_delta * self.config.pan_sensitivity;
                     let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
+                    let size = rotated_image_container.area().rect(cx).size;
                     rotated_image_container.apply_over(
                         cx,
                         live! {
                             margin: { top: (new_offset.y), left: (new_offset.x) },
+                            width: (size.x),
+                            height: (size.y)
                         },
                     );
 
@@ -550,18 +644,27 @@ impl Widget for ImageViewer {
                 self.mouse_cursor_hover_over_image = false;
                 cx.set_cursor(MouseCursor::Default);
             }
+            Hit::FingerHoverOver(_) => {
+                if !self.ui_visible_toggle
+                    && !self.animator.animator_in_state(cx, ids!(ui_animator.show))
+                {
+                    self.animator_cut(cx, ids!(ui_animator.hide));
+                    self.animator_play(cx, ids!(ui_animator.show));
+                    cx.stop_timer(self.hide_ui_timer);
+                    self.hide_ui_timer = cx.start_timeout(SHOW_UI_DURATION);
+                }
+            }
             _ => {}
         }
         if let Event::Scroll(scroll_event) = event {
             if self.mouse_cursor_hover_over_image {
                 let scroll_delta = scroll_event.scroll.y;
-
                 if scroll_delta > 0.0 {
                     // Scroll up = Zoom in
-                    self.adjust_zoom(cx, self.zoom_scale_factor);
+                    self.adjust_zoom(cx, self.config.zoom_scale_factor);
                 } else if scroll_delta < 0.0 {
                     // Scroll down = Zoom out
-                    self.adjust_zoom(cx, 1.0 / self.zoom_scale_factor);
+                    self.adjust_zoom(cx, 1.0 / self.config.zoom_scale_factor);
                 }
             }
         }
@@ -569,11 +672,11 @@ impl Widget for ImageViewer {
             match &e.key_code {
                 KeyCode::Minus | KeyCode::NumpadSubtract => {
                     // Zoom out (make image smaller)
-                    self.adjust_zoom(cx, 1.0 / self.zoom_scale_factor);
+                    self.adjust_zoom(cx, 1.0 / self.config.zoom_scale_factor);
                 }
                 KeyCode::Equals | KeyCode::NumpadAdd => {
                     // Zoom in (make image larger)
-                    self.adjust_zoom(cx, self.zoom_scale_factor);
+                    self.adjust_zoom(cx, self.config.zoom_scale_factor);
                 }
                 KeyCode::Key0 | KeyCode::Numpad0 => {
                     self.reset_drag_state(cx);
@@ -615,8 +718,12 @@ impl Widget for ImageViewer {
                 self.receiver = None;
             }
         }
-        if let Event::NextFrame(_) = event {
-            let animator_action = self.animator_handle_event(cx, event);
+
+        let animator_action = self.animator_handle_event(cx, event);
+        if self.next_frame.is_event(event).is_some() {
+            self.display_using_texture(cx);
+        }
+        else if let Event::NextFrame(_) = event {
             let animation_id = match self.rotation_step {
                 0 => ids!(mode.upright),    // 0°
                 1 => ids!(mode.degree_90),  // 90°
@@ -628,12 +735,25 @@ impl Widget for ImageViewer {
                 self.is_animating_rotation = animator_action.is_animating();
             }
         }
-        
-        self.view.handle_event(cx, event, scope);
-        self.match_event(cx, event);
+
+        if event.back_pressed()
+            || matches!(event, Event::KeyDown(KeyEvent { key_code: KeyCode::Escape, .. }))
+        {
+            self.reset(cx);
+            cx.action(ImageViewerAction::Hide);
+        }
+
+        if self.hide_ui_timer.is_event(event).is_some() {
+            self.animator_play(cx, ids!(ui_animator.hide));
+        }
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        if self.image_container_size.length() == 0.0 {
+            let rect = cx.peek_walk_turtle(walk);
+            self.image_container_size = rect.size;
+            self.next_frame = cx.new_next_frame();
+        }
         self.view.draw_walk(cx, scope, walk)
     }
 }
@@ -642,22 +762,25 @@ impl MatchEvent for ImageViewer {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
         if self.view.button(ids!(close_button)).clicked(actions) {
             self.reset(cx);
-            cx.action(ImageViewerAction::Hide)
+            cx.action(ImageViewerAction::Hide);
+        }
+        if self.view.button(ids!(reset_button)).clicked(actions) {
+            self.reset(cx);
         }
         if self
             .view
-            .button(ids!(zoom_button_minus.magnifying_glass_button))
+            .button(ids!(zoom_out_button))
             .clicked(actions)
         {
-            self.adjust_zoom(cx, 1.0 / self.zoom_scale_factor);
+            self.adjust_zoom(cx, 1.0 / self.config.zoom_scale_factor);
         }
 
         if self
             .view
-            .button(ids!(zoom_button_plus.magnifying_glass_button))
+            .button(ids!(zoom_in_button))
             .clicked(actions)
         {
-            self.adjust_zoom(cx, self.zoom_scale_factor);
+            self.adjust_zoom(cx, self.config.zoom_scale_factor);
         }
 
         if self
@@ -690,11 +813,13 @@ impl MatchEvent for ImageViewer {
                 self.update_rotation_animation(cx);
             }
         }
+
         for action in actions.iter() {
             if let Some(ImageViewerAction::Show(state)) = action.downcast_ref() {
                 match state {
                     LoadState::Loading(texture, metadata) => {
-                        self.display_using_texture(cx, texture.clone());
+                        self.texture = texture.clone();
+                        self.next_frame = cx.new_next_frame();
                         if let Some(metadata) = metadata {
                             self.set_metadata(cx, metadata);
                         }
@@ -705,7 +830,7 @@ impl MatchEvent for ImageViewer {
                     }
                     LoadState::FinishedBackgroundDecoding => {
                         self.is_loaded = true;
-                        self.hide_loading(cx);
+                        self.hide_footer(cx);
                     },
                     LoadState::Error(error) => {
                         self.show_error(cx, error);
@@ -725,17 +850,19 @@ impl ImageViewer {
         self.mouse_cursor_hover_over_image = false; // Reset hover state
         self.receiver = None;
         self.is_loaded = false;
+        self.image_container_size = DVec2::new();
+        self.ui_visible_toggle = false;
+        cx.stop_timer(self.hide_ui_timer);
+        self.animator_cut(cx, ids!(ui_animator.show));
+        self.hide_ui_timer = Timer::empty();
         self.reset_drag_state(cx);
         self.animator_cut(cx, ids!(mode.upright));
         let rotated_image_ref = self
             .view
             .rotated_image(ids!(rotated_image_container.rotated_image));
-        rotated_image_ref.apply_over(
-            cx,
-            live! {
-                draw_bg: { scale: 1.0 }
-            },
-        );
+        rotated_image_ref.apply_over(cx, live! {
+            draw_bg: { scale: 1.0 }
+        });
         rotated_image_ref.set_texture(cx, None);
     }
 
@@ -790,69 +917,69 @@ impl ImageViewer {
             let _ = sender.send(get_png_or_jpg_image_buffer(image_bytes_clone));
             SignalToUI::set_ui_signal();
         });
+        cx.stop_timer(self.hide_ui_timer);
+        self.hide_ui_timer = cx.start_timeout(SHOW_UI_DURATION);
     }
 
     /// Displays an image in the image viewer widget using the provided texture.
     /// 
     /// `Texture` is an optional `Texture` that can be set to display an image. If `None`, the image is cleared.
-    pub fn display_using_texture(&mut self, cx: &mut Cx, texture: Option<Texture>) {
+    pub fn display_using_texture(&mut self, cx: &mut Cx) {
+        if self.image_container_size.length() == 0.0 {
+            return;
+        }
+        let texture = self.texture.clone();
         let rotated_image = self.rotated_image(ids!(rotated_image));
-        let (width, height) = texture
+        let (texture_width, texture_height) = texture
             .as_ref()
             .and_then(|texture| texture.get_format(cx).vec_width_height())
             .unwrap_or_default();
+        
+        // Calculate scaling factors for both dimensions
+        let scale_x = self.image_container_size.x / texture_width as f64;
+        let scale_y = self.image_container_size.y / texture_height as f64;
+        
+        // Use the smaller scale factor to ensure image fits within container
+        let scale = scale_x.min(scale_y);
+        
+        let capped_width = (texture_width as f64 * scale).floor();
+        let capped_height = (texture_height as f64 * scale).floor();
+        self.capped_dimension = DVec2{
+            x: capped_width,
+            y: capped_height
+        };
+        
         rotated_image.set_texture(cx, texture);
         rotated_image.apply_over(
             cx,
             live! {
-                width: (width as f64),
-                height: (height as f64),
+                width: (capped_width),
+                height: (capped_height),
             },
         );
     }
 
     /// Adjust the zoom level of the image viewer based on the provided zoom factor.
-    ///
-    /// The zoom factor is a value greater than 0.0, where 1.0 means no zoom change.
-    /// A value greater than 1.0 means zoom in, and a value less than 1.0 means zoom out.
-    /// The target zoom level is calculated by multiplying the current zoom level by the provided zoom factor.
-    /// The target zoom level is then clamped to the minimum and maximum zoom levels.
-    /// If the clamped zoom level is the same as the current zoom level, no change is made.
-    /// Otherwise, the actual zoom factor is calculated based on the clamped value, and the image is resized accordingly.
-    fn adjust_zoom(&mut self, cx: &mut Cx, zoom_factor: f32) {
-        let rotated_image_container = self.view.rotated_image(ids!(rotated_image));
-        let size = rotated_image_container.area().rect(cx).size;
-
-        // Calculate target zoom level and clamp it to bounds
+    fn adjust_zoom(&mut self, cx: &mut Cx, zoom_factor: f64) {
+        let rotated_image = self.view.rotated_image(ids!(rotated_image));
+        let size = rotated_image.area().rect(cx).size;
+        let capped_dimension = self.capped_dimension;
         let target_zoom = self.drag_state.zoom_level * zoom_factor;
-        let clamped_zoom = target_zoom.clamp(self.min_zoom, self.max_zoom);
-
-        // If the clamped zoom is the same as current zoom, no change needed
-        if (clamped_zoom - self.drag_state.zoom_level).abs() < 0.001 {
-            return;
-        }
-
-        // Calculate the actual zoom factor based on clamped value
-        let actual_zoom_factor = clamped_zoom / self.drag_state.zoom_level;
+        let (width, height) = if target_zoom < self.config.min_zoom {
+            (capped_dimension.x * self.config.min_zoom, capped_dimension.y * self.config.min_zoom)
+        } else {
+            let actual_zoom_factor = target_zoom / self.drag_state.zoom_level;
+            self.drag_state.zoom_level = target_zoom;
+            self.drag_state.zoom_level = (self.drag_state.zoom_level * 1000.0).round() / 1000.0;
+            let width = (size.x * actual_zoom_factor * 1000.0).round() / 1000.0;
+            let height = (size.y * actual_zoom_factor * 1000.0).round() / 1000.0;
+            (width, height)
+        };
 
-        self.drag_state.zoom_level = clamped_zoom;
-        self.drag_state.zoom_level = (self.drag_state.zoom_level * 1000.0).round() / 1000.0;
-        // Zoom level may not reach back to 1.0 when zooming in after zooming out because of floating point multiplication.
-        // In this case, zoom_level will be clamped to 1.0
-        if self.drag_state.zoom_level < 1.0 * zoom_factor
-            && self.drag_state.zoom_level > 1.0 / zoom_factor
-        {
-            self.drag_state.zoom_level = 1.0;
-        }
-        let width = (size.x as f32 * actual_zoom_factor * 1000.0).round() / 1000.0;
-        let height = (size.y as f32 * actual_zoom_factor * 1000.0).round() / 1000.0;
-        self.view.rotated_image(ids!(rotated_image)).apply_over(
-            cx,
-            live! {
-                width: (width),
-                height: (height),
-            },
-        );
+        rotated_image.apply_over(cx, live! {
+            width: (width),
+            height: (height),
+        });
     }
 
     /// Handle touch update events, specifically the pinch gesture to zoom in/out.
@@ -877,7 +1004,7 @@ impl ImageViewer {
 
             if let Some(previous_distance) = self.previous_pinch_distance {
                 let scale = current_distance / previous_distance;
-                self.adjust_zoom(cx, scale as f32);
+                self.adjust_zoom(cx, scale);
             }
 
             self.previous_pinch_distance = Some(current_distance);
@@ -902,6 +1029,9 @@ impl ImageViewer {
             .view(ids!(image_viewer_forbidden_view))
             .set_visible(cx, false);
         footer.set_visible(cx, true);
+        self.ui_visible_toggle = true;
+        cx.stop_timer(self.hide_ui_timer);
+        self.hide_ui_timer = cx.start_timeout(SHOW_UI_DURATION);
     }
 
     /// Shows an error message in the footer.
@@ -926,11 +1056,7 @@ impl ImageViewer {
     }
 
     /// Hides the footer of the image viewer.
-    ///
-    /// This method is used to hide the footer of the image viewer, which contains the status label and the loading spinner.
-    ///
-    /// The footer is hidden by setting its height to 0.
-    pub fn hide_loading(&mut self, cx: &mut Cx) {
+    pub fn hide_footer(&mut self, cx: &mut Cx) {
         let footer = self.view.view(ids!(image_layer.footer));
         footer.set_visible(cx, false);
     }
@@ -951,29 +1077,29 @@ impl ImageViewer {
             .set_text(cx, &display_text);
         if let Some(timestamp) = metadata.timestamp {
             meta_view
-                .view(ids!(top_left_container.content.timestamp_view))
+                .view(ids!(user_profile_view.content.timestamp_view))
                 .set_visible(cx, true);
             meta_view
-                .timestamp(ids!(top_left_container.content.timestamp_view.timestamp))
+                .timestamp(ids!(user_profile_view.content.timestamp_view.timestamp))
                 .set_date_time(cx, timestamp);
         }
 
         if let Some((room_id, event_timeline_item)) = &metadata.avatar_parameter {            
-            let (sender, _) =self.view.avatar(ids!(top_left_container.avatar))
-                .set_avatar_and_get_username(
-                    cx,
-                    room_id,
-                    event_timeline_item.sender(),
-                    Some(event_timeline_item.sender_profile()),
-                    event_timeline_item.event_id(),
-                );
+            let (sender, _) = self.view.avatar(ids!(user_profile_view.avatar)).set_avatar_and_get_username(
+                cx,
+                room_id,
+                event_timeline_item.sender(),
+                Some(event_timeline_item.sender_profile()),
+                event_timeline_item.event_id(),
+                false,
+            );
             if sender.len() > MAX_USERNAME_LENGTH {
                 meta_view
-                    .label(ids!(top_left_container.content.username))
+                    .label(ids!(user_profile_view.content.username))
                     .set_text(cx, &format!("{}...", &sender[..MAX_USERNAME_LENGTH - 3]));
             } else {
                 meta_view
-                    .label(ids!(top_left_container.content.username))
+                    .label(ids!(user_profile_view.content.username))
                     .set_text(cx, &sender);
             };
         }
@@ -983,20 +1109,13 @@ impl ImageViewer {
 impl ImageViewerRef {
     /// Configure zoom and pan settings for the image viewer
     pub fn configure_zoom(&mut self, config: ImageViewerZoomConfig) {
-        let Some(mut inner) = self.borrow_mut() else {
-            return;
-        };
-        inner.min_zoom = config.min_zoom;
-        inner.max_zoom = config.max_zoom;
-        inner.zoom_scale_factor = config.zoom_scale_factor;
-        inner.pan_sensitivity = config.pan_sensitivity;
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.config = config;
     }
 
     /// See [`ImageViewer::show_loaded()`].
     pub fn show_loaded(&mut self, cx: &mut Cx, image_bytes: &[u8]) {
-        let Some(mut inner) = self.borrow_mut() else {
-            return;
-        };
+        let Some(mut inner) = self.borrow_mut() else { return };
         inner.show_loaded(cx, image_bytes)
     }
 
@@ -1007,10 +1126,9 @@ impl ImageViewerRef {
         texture: Option<Texture>,
         metadata: &Option<ImageViewerMetaData>,
     ) {
-        let Some(mut inner) = self.borrow_mut() else {
-            return;
-        };
-        inner.display_using_texture(cx, texture);
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.texture = texture.clone();
+        inner.next_frame = cx.new_next_frame();
         if let Some(metadata) = metadata {
             inner.set_metadata(cx, metadata);
         }
@@ -1019,25 +1137,19 @@ impl ImageViewerRef {
 
     /// See [`ImageViewer::show_error()`].
     pub fn show_error(&mut self, cx: &mut Cx, error: &ImageViewerError) {
-        let Some(mut inner) = self.borrow_mut() else {
-            return;
-        };
+        let Some(mut inner) = self.borrow_mut() else { return };
         inner.show_error(cx, error);
     }
 
-    /// See [`ImageViewer::hide_loading()`].
-    pub fn hide_loading(&mut self, cx: &mut Cx) {
-        let Some(mut inner) = self.borrow_mut() else {
-            return;
-        };
-        inner.hide_loading(cx);
+    /// See [`ImageViewer::hide_footer()`].
+    pub fn hide_footer(&mut self, cx: &mut Cx) {
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.hide_footer(cx);
     }
 
     /// See [`ImageViewer::reset()`].
     pub fn reset(&mut self, cx: &mut Cx) {
-        let Some(mut inner) = self.borrow_mut() else {
-            return;
-        };
+        let Some(mut inner) = self.borrow_mut() else { return };
         inner.reset(cx);
     }
 }
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 50f2aea7..c7cb4905 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -28,7 +28,6 @@ live_design! {
     pub ICON_JUMP            = dep("crate://self/resources/icons/go_back.svg")
     pub ICON_LOGOUT          = dep("crate://self/resources/icons/logout.svg")
     pub ICON_LINK            = dep("crate://self/resources/icons/link.svg")
-    pub ICON_ZOOM            = dep("crate://self/resources/icons/search.svg")
     pub ICON_PIN             = dep("crate://self/resources/icons/pin.svg")
     pub ICON_REPLY           = dep("crate://self/resources/icons/reply.svg")
     pub ICON_SEARCH          = dep("crate://self/resources/icons/search.svg")
@@ -40,6 +39,8 @@ live_design! {
     pub ICON_UPLOAD          = dep("crate://self/resources/icons/upload.svg")
     pub ICON_VIEW_SOURCE     = dep("crate://self/resources/icons/view_source.svg")
     pub ICON_WARNING         = dep("crate://self/resources/icons/warning.svg")
+    pub ICON_ZOOM_IN         = dep("crate://self/resources/icons/zoom_in.svg")
+    pub ICON_ZOOM_OUT        = dep("crate://self/resources/icons/zoom_out.svg")
 
     pub TITLE_TEXT = <THEME_FONT_REGULAR>{
         font_size: (13),
@@ -139,7 +140,9 @@ live_design! {
     pub COLOR_NAVIGATION_TAB_BG_HOVER  = (COLOR_SECONDARY * 0.85)
     pub COLOR_NAVIGATION_TAB_BG_ACTIVE = #9
 
-    
+    pub COLOR_IMAGE_VIEWER_BACKGROUND = #333333CC // 80% Opacity
+    pub COLOR_IMAGE_VIEWER_META_BACKGROUND = #E0E0E0
+
     // An icon that can be rotated at a custom angle.
     pub IconRotated = <Icon> {
         draw_icon: {