diff --git a/src/renderer/store/TimelineSpace/Modals.ts b/src/renderer/store/TimelineSpace/Modals.ts
index 65ae9d9e..4fc079de 100644
--- a/src/renderer/store/TimelineSpace/Modals.ts
+++ b/src/renderer/store/TimelineSpace/Modals.ts
@@ -1,5 +1,5 @@
 import NewToot from './Modals/NewToot'
-import ImageViewer from './Modals/ImageViewer'
+import ImageViewer, { ImageViewerState } from './Modals/ImageViewer'
 import Jump, { JumpState } from './Modals/Jump'
 import ListMembership from './Modals/ListMembership'
 import AddListMember, { AddListMemberState } from './Modals/AddListMember'
@@ -13,7 +13,8 @@ export interface ModalsState {}
 
 export interface ModalsModuleState extends ModalsState {
   Jump: JumpState,
-  AddListMember: AddListMemberState
+  AddListMember: AddListMemberState,
+  ImageViewer: ImageViewerState
 }
 
 const state = (): ModalsState => ({})
diff --git a/src/renderer/store/TimelineSpace/Modals/ImageViewer.js b/src/renderer/store/TimelineSpace/Modals/ImageViewer.js
deleted file mode 100644
index d0cd2d7b..00000000
--- a/src/renderer/store/TimelineSpace/Modals/ImageViewer.js
+++ /dev/null
@@ -1,78 +0,0 @@
-const ImageViewer = {
-  namespaced: true,
-  state: {
-    modalOpen: false,
-    currentIndex: -1,
-    mediaList: [],
-    loading: false
-  },
-  mutations: {
-    changeModal (state, value) {
-      state.modalOpen = value
-    },
-    changeCurrentIndex (state, currentIndex) {
-      state.currentIndex = currentIndex
-    },
-    changeMedliaList (state, mediaList) {
-      state.mediaList = mediaList
-    },
-    incrementIndex (state) {
-      state.currentIndex++
-    },
-    decrementIndex (state) {
-      state.currentIndex--
-    },
-    loading (state, value) {
-      state.loading = value
-    }
-  },
-  actions: {
-    openModal ({ commit }, { currentIndex, mediaList }) {
-      commit('changeModal', true)
-      commit('changeCurrentIndex', currentIndex)
-      commit('changeMedliaList', mediaList)
-      commit('loading', true)
-    },
-    closeModal ({ commit }) {
-      commit('changeModal', false)
-      commit('changeCurrentIndex', -1)
-      commit('changeMedliaList', [])
-      commit('loading', false)
-    },
-    incrementIndex ({ commit }) {
-      commit('incrementIndex')
-      commit('loading', true)
-    },
-    decrementIndex ({ commit }) {
-      commit('decrementIndex')
-      commit('loading', true)
-    },
-    async loaded ({ commit }) {
-      commit('loading', false)
-    }
-  },
-  getters: {
-    imageURL (state) {
-      if (state.currentIndex >= 0) {
-        return state.mediaList[state.currentIndex].url
-      }
-    },
-    imageType (state) {
-      if (state.currentIndex >= 0) {
-        return state.mediaList[state.currentIndex].type
-      }
-    },
-    showLeft (state) {
-      const notFirst = (state.currentIndex > 0)
-      const isManyItem = (state.mediaList.length > 1)
-      return (notFirst && isManyItem)
-    },
-    showRight (state) {
-      const notLast = (state.currentIndex < (state.mediaList.length - 1))
-      const isManyItem = (state.mediaList.length > 1)
-      return (notLast && isManyItem)
-    }
-  }
-}
-
-export default ImageViewer
diff --git a/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts b/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
new file mode 100644
index 00000000..8fd7270b
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
@@ -0,0 +1,108 @@
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
+import { Attachment } from 'megalodon'
+import { RootState } from '@/store';
+
+export interface ImageViewerState {
+  modalOpen: boolean,
+  currentIndex: number,
+  mediaList: Array<Attachment>,
+  loading: boolean
+}
+
+const state = (): ImageViewerState => ({
+  modalOpen: false,
+  currentIndex: -1,
+  mediaList: [],
+  loading: false
+})
+
+export const MUTATION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  CHANGE_CURRENT_INDEX: 'changeCurrentIndex',
+  CHANGE_MEDIA_LIST: 'changeMediaList',
+  INCREMENT_INDEX: 'incrementIndex',
+  DECREMENT_INDEX: 'decrementIndex',
+  CHANGE_LOADING: 'changeLoading'
+}
+
+const mutations: MutationTree<ImageViewerState> = {
+  [MUTATION_TYPES.CHANGE_MODAL]: (state, value: boolean) => {
+    state.modalOpen = value
+  },
+  [MUTATION_TYPES.CHANGE_CURRENT_INDEX]: (state, currentIndex: number) => {
+    state.currentIndex = currentIndex
+  },
+  [MUTATION_TYPES.CHANGE_MEDIA_LIST]: (state, mediaList: Array<Attachment>) => {
+    state.mediaList = mediaList
+  },
+  [MUTATION_TYPES.INCREMENT_INDEX]: (state) => {
+    state.currentIndex++
+  },
+  [MUTATION_TYPES.DECREMENT_INDEX]: (state) => {
+    state.currentIndex--
+  },
+  [MUTATION_TYPES.CHANGE_LOADING]: (state, value: boolean) => {
+    state.loading = value
+  }
+}
+
+const actions: ActionTree<ImageViewerState, RootState> = {
+  openModal: ({ commit }, { currentIndex, mediaList }) => {
+    commit(MUTATION_TYPES.CHANGE_MODAL, true)
+    commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, currentIndex as number)
+    commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, mediaList as Array<Attachment>)
+    commit(MUTATION_TYPES.CHANGE_LOADING, true)
+  },
+  closeModal: ({ commit }) => {
+    commit(MUTATION_TYPES.CHANGE_MODAL, false)
+    commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, -1)
+    commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, [])
+    commit(MUTATION_TYPES.CHANGE_LOADING, false)
+  },
+  incrementIndex: ({ commit }) => {
+    commit(MUTATION_TYPES.INCREMENT_INDEX)
+    commit(MUTATION_TYPES.CHANGE_LOADING, true)
+  },
+  decrementIndex: ({ commit }) => {
+    commit(MUTATION_TYPES.DECREMENT_INDEX)
+    commit(MUTATION_TYPES.CHANGE_LOADING, true)
+  },
+  loaded: ({ commit }) => {
+    commit(MUTATION_TYPES.CHANGE_LOADING, false)
+  }
+}
+
+const getters: GetterTree<ImageViewerState, RootState> = {
+  imageURL: (state): string | null => {
+    if (state.currentIndex >= 0) {
+      return state.mediaList[state.currentIndex].url
+    }
+    return null
+  },
+  imageType: (state): string | null => {
+    if (state.currentIndex >= 0) {
+      return state.mediaList[state.currentIndex].type
+    }
+    return null
+  },
+  showLeft: (state): boolean => {
+    const notFirst = (state.currentIndex > 0)
+    const isManyItem = (state.mediaList.length > 1)
+    return (notFirst && isManyItem)
+  },
+  showRight: (state): boolean => {
+    const notLast = (state.currentIndex < (state.mediaList.length - 1))
+    const isManyItem = (state.mediaList.length > 1)
+    return (notLast && isManyItem)
+  }
+}
+
+const ImageViewer: Module<ImageViewerState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions,
+  getters: getters
+}
+
+export default ImageViewer