diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index 14d98656..512231b0 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -11,6 +11,7 @@
   </div>
   <new-toot-modal></new-toot-modal>
   <jump-modal></jump-modal>
+  <image-viewer></image-viewer>
 </div>
 </template>
 
@@ -19,10 +20,11 @@ import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import NewTootModal from './TimelineSpace/NewTootModal'
 import JumpModal from './TimelineSpace/JumpModal'
+import ImageViewer from './TimelineSpace/Modals/ImageViewer'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu, HeaderMenu, NewTootModal, JumpModal },
+  components: { SideMenu, HeaderMenu, NewTootModal, JumpModal, ImageViewer },
   created () {
     const loading = this.$loading({
       lock: true,
diff --git a/src/renderer/components/TimelineSpace/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Cards/Toot.vue
index 8c3addd5..9fe01945 100644
--- a/src/renderer/components/TimelineSpace/Cards/Toot.vue
+++ b/src/renderer/components/TimelineSpace/Cards/Toot.vue
@@ -15,7 +15,7 @@
       <div class="content" v-html="message.content" @click.capture.prevent="tootClick"></div>
       <div class="attachments">
         <div class="media" v-for="media in originalMessage(message).media_attachments">
-          <img :src="media.preview_url" />
+          <img :src="media.preview_url" @click="openImage(media.url)"/>
         </div>
       </div>
       <div class="reblogger" v-if="message.reblog !== null">
@@ -127,6 +127,9 @@ export default {
             })
           })
       }
+    },
+    openImage (url) {
+      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
     }
   }
 }
@@ -195,6 +198,7 @@ function findLink (target) {
     .attachments {
       .media {
         img {
+          cursor: zoom-in;
           width: 200px;
           max-width: 100%;
           border-radius: 8px;
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
new file mode 100644
index 00000000..86a439de
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -0,0 +1,74 @@
+<template>
+<div id="image" v-if="modalOpen">
+  <div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper">
+    <div class="image-header">
+      <i class="el-icon-close" @click="close"></i>
+    </div>
+    <div class="image-content">
+      <img :src="imageURL">
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'image-viewer',
+  computed: {
+    ...mapState({
+      modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen,
+      imageURL: state => state.TimelineSpace.Modals.ImageViewer.imageURL
+    })
+  },
+  updated () {
+    if (this.modalOpen) {
+      this.$refs.wrapper.focus()
+    }
+  },
+  methods: {
+    close () {
+      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image-wrapper {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+
+  .image-header {
+    width: 100%;
+    text-align: right;
+    padding: 8px 8px 0 0 ;
+    color: #409eff;
+    box-sizing: border-box;
+    font-size: 18px;
+
+    i {
+      font-weight: 800;
+      cursor: pointer;
+    }
+  }
+
+  .image-content {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      max-width: 80%;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/store/TimelineSpace.js b/src/renderer/store/TimelineSpace.js
index fdfafba5..ef7d57dd 100644
--- a/src/renderer/store/TimelineSpace.js
+++ b/src/renderer/store/TimelineSpace.js
@@ -9,6 +9,7 @@ import Public from './TimelineSpace/Public'
 import Cards from './TimelineSpace/Cards'
 import NewTootModal from './TimelineSpace/NewTootModal'
 import JumpModal from './TimelineSpace/JumpModal'
+import Modals from './TimelineSpace/Modals'
 import router from '../router'
 
 const TimelineSpace = {
@@ -22,7 +23,8 @@ const TimelineSpace = {
     Public,
     Cards,
     NewTootModal,
-    JumpModal
+    JumpModal,
+    Modals
   },
   state: {
     account: {
diff --git a/src/renderer/store/TimelineSpace/Modals.js b/src/renderer/store/TimelineSpace/Modals.js
new file mode 100644
index 00000000..c4e66087
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Modals.js
@@ -0,0 +1,10 @@
+import ImageViewer from './Modals/ImageViewer'
+
+const Modals = {
+  namespaced: true,
+  modules: {
+    ImageViewer
+  }
+}
+
+export default Modals
diff --git a/src/renderer/store/TimelineSpace/Modals/ImageViewer.js b/src/renderer/store/TimelineSpace/Modals/ImageViewer.js
new file mode 100644
index 00000000..016d3d47
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Modals/ImageViewer.js
@@ -0,0 +1,27 @@
+const ImageViewer = {
+  namespaced: true,
+  state: {
+    modalOpen: false,
+    imageURL: ''
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    },
+    changeImageURL (state, url) {
+      state.imageURL = url
+    }
+  },
+  actions: {
+    openModal ({ commit }, url) {
+      commit('changeModal', true)
+      commit('changeImageURL', url)
+    },
+    closeModal ({ commit }) {
+      commit('changeModal', false)
+      commit('changeImageURL', '')
+    }
+  }
+}
+
+export default ImageViewer