diff --git a/data/resources/ui/content-media-history-viewer-item.ui b/data/resources/ui/content-media-history-viewer-item.ui
index 482f3971..969fb28e 100644
--- a/data/resources/ui/content-media-history-viewer-item.ui
+++ b/data/resources/ui/content-media-history-viewer-item.ui
@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <template class="ContentMediaHistoryViewerItem" parent="GtkWidget">
+    <child>
+      <object class="GtkGestureClick">
+        <signal name="released" handler="handle_release" swapped="true"/>
+      </object>
+    </child>
     <child>
       <object class="GtkOverlay" id="overlay">
         <child>
diff --git a/data/resources/ui/content-media-history-viewer.ui b/data/resources/ui/content-media-history-viewer.ui
index 1ab66e74..78c42218 100644
--- a/data/resources/ui/content-media-history-viewer.ui
+++ b/data/resources/ui/content-media-history-viewer.ui
@@ -2,45 +2,52 @@
 <interface>
   <template class="ContentMediaHistoryViewer" parent="AdwBin">
     <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
-        <child>
-          <object class="GtkHeaderBar">
-            <style>
-              <class name="osd"/>
-            </style>
-            <property name="title-widget">
-              <object class="AdwWindowTitle">
-                <property name="title" translatable="yes">Media</property>
-              </object>
-            </property>
-            <child type="start">
-              <object class="GtkButton">
-                <property name="action-name">details.previous-page</property>
-                <property name="icon-name">go-previous-symbolic</property>
-              </object>
-            </child>
+      <object class="GtkOverlay">
+        <child type="overlay">
+          <object class="MediaViewer" id="media_viewer">
+            <property name="visible">False</property>
           </object>
         </child>
         <child>
-          <object class="GtkScrolledWindow">
-            <property name="hscrollbar-policy">never</property>
-            <property name="vexpand">True</property>
-            <style>
-              <class name="osd"/>
-            </style>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkHeaderBar">
+                <style>
+                  <class name="osd"/>
+                </style>
+                <property name="title-widget">
+                  <object class="AdwWindowTitle">
+                    <property name="title" translatable="yes">Media</property>
+                  </object>
+                </property>
+                <child type="start">
+                  <object class="GtkButton">
+                    <property name="action-name">details.previous-page</property>
+                    <property name="icon-name">go-previous-symbolic</property>
+                  </object>
+                </child>
+              </object>
+            </child>
             <child>
-              <object class="AdwClampScrollable">
-                <property name="maximum-size">1000</property>
-                <property name="tightening-threshold">800</property>
-                <property name="vscroll-policy">natural</property>
+              <object class="GtkScrolledWindow">
+                <property name="hscrollbar-policy">never</property>
+                <property name="vexpand">True</property>
+                <style>
+                  <class name="osd"/>
+                </style>
                 <child>
-                  <object class="GtkGridView" id="grid_view">
-                    <property name="min-columns">2</property>
-                    <property name="max-columns">5</property>
-                    <property name="factory">
-                      <object class="GtkBuilderListItemFactory">
-                        <property name="bytes"><![CDATA[
+                  <object class="AdwClampScrollable">
+                    <property name="maximum-size">1000</property>
+                    <property name="tightening-threshold">800</property>
+                    <property name="vscroll-policy">natural</property>
+                    <child>
+                      <object class="GtkGridView" id="grid_view">
+                        <property name="min-columns">2</property>
+                        <property name="max-columns">5</property>
+                        <property name="factory">
+                          <object class="GtkBuilderListItemFactory">
+                            <property name="bytes"><![CDATA[
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <template class="GtkListItem">
@@ -55,9 +62,11 @@
     </property>
   </template>
 </interface>
-                        ]]></property>
+                            ]]></property>
+                          </object>
+                        </property>
                       </object>
-                    </property>
+                    </child>
                   </object>
                 </child>
               </object>
diff --git a/src/session/content/room_details/history_viewer/media.rs b/src/session/content/room_details/history_viewer/media.rs
index b931d6d6..dd2fd2eb 100644
--- a/src/session/content/room_details/history_viewer/media.rs
+++ b/src/session/content/room_details/history_viewer/media.rs
@@ -1,10 +1,12 @@
 use adw::{prelude::*, subclass::prelude::*};
 use gtk::{glib, glib::clone, CompositeTemplate};
+use log::error;
+use ruma::events::AnyMessageLikeEventContent;
 
 use crate::{
     session::{
         content::room_details::history_viewer::{MediaItem, Timeline, TimelineFilter},
-        Room,
+        MediaViewer, Room,
     },
     spawn,
 };
@@ -22,6 +24,8 @@ mod imp {
     pub struct MediaHistoryViewer {
         pub room_timeline: OnceCell<Timeline>,
         #[template_child]
+        pub media_viewer: TemplateChild<MediaViewer>,
+        #[template_child]
         pub grid_view: TemplateChild<gtk::GridView>,
     }
 
@@ -83,6 +87,23 @@ impl MediaHistoryViewer {
         glib::Object::builder().property("room", room).build()
     }
 
+    pub fn show_media(&self, item: &MediaItem) {
+        let imp = self.imp();
+        let event = item.event().unwrap();
+
+        let Some(AnyMessageLikeEventContent::RoomMessage(message)) = event.original_content() else {
+            error!("Trying to open the media viewer with an event that is not a message");
+            return;
+        };
+
+        imp.media_viewer.set_message(
+            &event.room().unwrap(),
+            event.matrix_event().0.event_id().into(),
+            message.msgtype,
+        );
+        imp.media_viewer.reveal(item);
+    }
+
     fn set_room(&self, room: &Room) {
         let imp = self.imp();
 
diff --git a/src/session/content/room_details/history_viewer/media_item.rs b/src/session/content/room_details/history_viewer/media_item.rs
index 3917b5c9..42bd634e 100644
--- a/src/session/content/room_details/history_viewer/media_item.rs
+++ b/src/session/content/room_details/history_viewer/media_item.rs
@@ -13,7 +13,8 @@ use matrix_sdk::{
 };
 
 use crate::{
-    session::content::room_details::history_viewer::HistoryViewerEvent, spawn, spawn_tokio, Session,
+    session::content::room_details::{history_viewer::HistoryViewerEvent, MediaHistoryViewer},
+    spawn, spawn_tokio, Session,
 };
 
 mod imp {
@@ -43,6 +44,7 @@ mod imp {
 
         fn class_init(klass: &mut Self::Class) {
             Self::bind_template(klass);
+            Self::Type::bind_template_callbacks(klass);
 
             klass.set_css_name("mediahistoryvieweritem");
         }
@@ -106,6 +108,7 @@ glib::wrapper! {
         @extends gtk::Widget;
 }
 
+#[gtk::template_callbacks]
 impl MediaItem {
     pub fn set_event(&self, event: Option<HistoryViewerEvent>) {
         if self.event() == event {
@@ -224,4 +227,14 @@ impl MediaItem {
             })
         );
     }
+
+    #[template_callback]
+    fn handle_release(&self) {
+        let media_history_viewer = self
+            .ancestor(MediaHistoryViewer::static_type())
+            .unwrap()
+            .downcast::<MediaHistoryViewer>()
+            .unwrap();
+        media_history_viewer.show_media(self);
+    }
 }