diff --git a/configuration_sample.php b/configuration_sample.php
index 6e317a2..4971444 100644
--- a/configuration_sample.php
+++ b/configuration_sample.php
@@ -13,6 +13,8 @@ return [
         'upload_chunk_size' => 1 * 1024 * 1024, // 1MB
         'upload_simultaneous' => 3,
         'default_archive_name' => 'archive.zip',
+        'editable' => ['.txt', '.css', '.js', '.ts', '.html', '.php'],
+        'date_format' => 'YY/MM/DD hh:mm:ss',
     ],
 
     'services' => [
diff --git a/docs/configuration/basic.md b/docs/configuration/basic.md
index c621895..d854c97 100644
--- a/docs/configuration/basic.md
+++ b/docs/configuration/basic.md
@@ -21,6 +21,8 @@ Note: if you've made a mistake in configuration file (forgot to close a quote?)
         'upload_chunk_size' => 1 * 1024 * 1024, // 1MB
         'upload_simultaneous' => 3,
         'default_archive_name' => 'archive.zip',
+        'editable' => ['.txt', '.css', '.js', '.ts', '.html', '.php'],
+        'date_format' => 'YY/MM/DD hh:mm:ss',
     ],
 ```
 
diff --git a/frontend/App.vue b/frontend/App.vue
index 7bf127a..0e4fb87 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -84,6 +84,10 @@ html, body, #wrapper, #inner, .container {
   justify-content: flex-end;
 }
 
+.animation-content {
+  width: 100%;
+}
+
 @media all and (max-width: 1088px) {
   .container {
     padding: 20px;
diff --git a/frontend/mixins/shared.js b/frontend/mixins/shared.js
index 889c5e7..5405130 100644
--- a/frontend/mixins/shared.js
+++ b/frontend/mixins/shared.js
@@ -74,7 +74,7 @@ const funcs = {
       return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
     },
     formatDate(timestamp) {
-      return moment.unix(timestamp).format('YY/MM/DD hh:mm:ss')
+      return moment.unix(timestamp).format(store.state.config.date_format ? store.state.config.date_format : 'YY/MM/DD hh:mm:ss')
     },
     checkUser() {
       api.getUser()
@@ -126,10 +126,10 @@ const funcs = {
       return this.isText(name) || this.isImage(name)
     },
     isText(name) {
-      return this.hasExtension(name, ['.txt', '.html', '.css', '.js', '.ts', '.php'])
+      return this.hasExtension(name, store.state.config.editable ? store.state.config.editable : ['.txt'])
     },
     isImage(name) {
-      return this.hasExtension(name, ['.jpg', '.jpeg', '.gif', '.png'])
+      return this.hasExtension(name, ['.jpg', '.jpeg', '.gif', '.png', '.bmp', '.tiff'])
     },
     hasExtension(name, exts) {
       return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$', 'i')).test(name)
diff --git a/frontend/views/Browser.vue b/frontend/views/Browser.vue
index 670c42e..5b81266 100644
--- a/frontend/views/Browser.vue
+++ b/frontend/views/Browser.vue
@@ -154,7 +154,8 @@
 import Vue from 'vue'
 import Menu from './partials/Menu'
 import Tree from './partials/Tree'
-import Preview from './partials/Preview'
+import Editor from './partials/Editor'
+import Gallery from './partials/Gallery'
 import Pagination from './partials/Pagination'
 import Upload from './partials/Upload'
 import api from '../api/api'
@@ -347,11 +348,18 @@ export default {
       // TODO: create search logic
     },
     preview(item) {
+      let modal = null
+      if (this.isImage(item.path)) {
+        modal = Gallery
+      }
+      if (this.isText(item.path)) {
+        modal = Editor
+      }
       this.$modal.open({
         parent: this,
         props: { item: item },
         hasModalCard: true,
-        component: Preview,
+        component: modal,
       })
     },
     isArchive(item) {
diff --git a/frontend/views/partials/Editor.vue b/frontend/views/partials/Editor.vue
new file mode 100644
index 0000000..90a8833
--- /dev/null
+++ b/frontend/views/partials/Editor.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">
+          {{ currentItem.name }}
+        </p>
+      </header>
+      <section class="modal-card-body preview">
+        <template>
+          <prism-editor v-model="content" language="md" :readonly="!can('write')" :line-numbers="lineNumbers" />
+        </template>
+      </section>
+      <footer class="modal-card-foot">
+        <button v-if="can('write')" class="button" type="button" @click="saveFile()">
+          {{ lang('Save') }}
+        </button>
+        <button class="button" type="button" @click="$parent.close()">
+          {{ lang('Close') }}
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '../../api/api'
+import 'prismjs'
+import 'prismjs/themes/prism.css'
+import 'vue-prism-editor/dist/VuePrismEditor.css'
+import PrismEditor from 'vue-prism-editor'
+
+export default {
+  name: 'Editor',
+  components: { PrismEditor },
+  props: [ 'item' ],
+  data() {
+    return {
+      content: '',
+      currentItem: '',
+      lineNumbers: true,
+    }
+  },
+  mounted() {
+    this.currentItem = this.item
+    api.downloadItem({
+      path: this.item.path,
+    })
+      .then((res) => {
+        this.content = res
+      })
+      .catch(error => this.handleError(error))
+  },
+  methods: {
+    saveFile() {
+      api.saveContent({
+        name: this.item.name,
+        content: this.content,
+      })
+        .then(() => {
+          this.$toast.open({
+            message: this.lang('Updated'),
+            type: 'is-success',
+          })
+          this.$parent.close()
+        })
+        .catch(error => this.handleError(error))
+    }
+  },
+}
+</script>
+
+<style scoped>
+@media (min-width: 1100px) {
+  .modal-card {
+    width: 100%;
+    min-width: 640px;
+  }
+}
+
+.preview {
+  min-height: 450px;
+}
+</style>
diff --git a/frontend/views/partials/Gallery.vue b/frontend/views/partials/Gallery.vue
new file mode 100644
index 0000000..576d0cf
--- /dev/null
+++ b/frontend/views/partials/Gallery.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="modal-card">
+      <div class="modal-card-body preview">
+        <strong>{{ currentItem.name }}</strong>
+        <div class="columns is-mobile">
+          <div class="column mainbox">
+            <img :src="imageSrc(currentItem.path)" class="mainimg">
+          </div>
+          <div v-if="images.length > 1" class="column is-one-fifth sidebox">
+            <ul>
+              <li v-for="(image, index) in images" :key="index">
+                <img v-lazy="imageSrc(image.path)" @click="currentItem = image">
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  name: 'Gallery',
+  props: [ 'item' ],
+  data() {
+    return {
+      content: '',
+      currentItem: '',
+      lineNumbers: true,
+    }
+  },
+  computed: {
+    images() {
+      return _.filter(this.$store.state.cwd.content, o => this.isImage(o.name))
+    },
+  },
+  mounted() {
+    this.currentItem = this.item
+  },
+  methods: {
+    imageSrc(path) {
+      return this.getDownloadLink(path)
+    },
+  },
+}
+</script>
+
+<style scoped>
+@media (min-width: 1100px) {
+  .modal-card {
+    width: 100%;
+    min-width: 640px;
+  }
+}
+
+.mainbox {
+  height: 70vh;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+.mainimg {
+  max-width:100%;
+  max-height:100%;
+}
+
+.sidebox {
+  overflow-y:auto;
+  height: 70vh;
+}
+
+.sidebox {
+  border-left: 1px solid #dbdbdb;
+}
+
+.sidebox img {
+  padding: 5px 0 5px 0;
+}
+
+</style>
diff --git a/frontend/views/partials/Preview.vue b/frontend/views/partials/Preview.vue
deleted file mode 100644
index 1d83573..0000000
--- a/frontend/views/partials/Preview.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-/* eslint-disable */
-<template>
-  <div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">
-          {{ currentItem.name }}
-        </p>
-      </header>
-      <section :class="[isImage(item.path) ? 'overflowyh' : '', 'modal-card-body preview']">
-        <template v-if="isText(item.path)">
-          <prism-editor v-model="content" language="md" :readonly="!can('write')" :line-numbers="lineNumbers" />
-        </template>
-        <div v-if="isImage(item.path)">
-          <div class="columns is-mobile">
-            <div class="column mainbox">
-              <img :src="imageSrc(currentItem.path)" class="mainimg">
-            </div>
-            <div v-if="images.length > 1" class="column is-one-fifth sidebox">
-              <ul>
-                <li v-for="(image, index) in images" :key="index">
-                  <img v-lazy="imageSrc(image.path)" @click="currentItem = image">
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-      <footer class="modal-card-foot">
-        <button v-if="isText(item.path) && can('write')" class="button" type="button" @click="saveFile()">
-          {{ lang('Save') }}
-        </button>
-        <button class="button" type="button" @click="$parent.close()">
-          {{ lang('Close') }}
-        </button>
-      </footer>
-    </div>
-  </div>
-</template>
-
-<script>
-import api from '../../api/api'
-import 'prismjs'
-import 'prismjs/themes/prism.css'
-import 'vue-prism-editor/dist/VuePrismEditor.css'
-import PrismEditor from 'vue-prism-editor'
-import _ from 'lodash'
-
-export default {
-  name: 'Preview',
-  components: { PrismEditor },
-  props: [ 'item' ],
-  data() {
-    return {
-      content: '',
-      currentItem: '',
-      lineNumbers: true,
-    }
-  },
-  computed: {
-    images() {
-      return _.filter(this.$store.state.cwd.content, o => this.isImage(o.name))
-    },
-  },
-  mounted() {
-    this.currentItem = this.item
-    if (this.isText(this.item.path)) {
-      api.downloadItem({
-        path: this.item.path,
-      })
-        .then((res) => {
-          this.content = res
-        })
-        .catch(error => this.handleError(error))
-    }
-  },
-  methods: {
-    imageSrc(path) {
-      return this.getDownloadLink(path)
-    },
-    saveFile() {
-      api.saveContent({
-        name: this.item.name,
-        content: this.content,
-      })
-        .then(() => {
-          this.$toast.open({
-            message: this.lang('Updated'),
-            type: 'is-success',
-          })
-          this.$parent.close()
-        })
-        .catch(error => this.handleError(error))
-    }
-  },
-}
-</script>
-
-<style scoped>
-@media (min-width: 1100px) {
-  .modal-card {
-    width: 100%;
-    min-width: 640px;
-  }
-}
-
-.mainbox {
-  height: 70vh;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-}
-
-.mainimg {
-  max-width:100%;
-  max-height:100%;
-}
-
-.sidebox {
-  overflow-y:auto;
-  height: 70vh;
-}
-
-.sidebox {
-  border-left: 1px solid #dbdbdb;
-}
-
-.sidebox img {
-  padding: 5px 0 5px 0;
-}
-
-.preview {
-  min-height: 450px;
-}
-
-.overflowyh {
-  overflow-y: hidden;
-}
-</style>
diff --git a/tests/backend/configuration.php b/tests/backend/configuration.php
index b05392d..6758a1a 100644
--- a/tests/backend/configuration.php
+++ b/tests/backend/configuration.php
@@ -12,6 +12,8 @@ return [
         'upload_chunk_size' => 1 * 1024 * 1024,
         'upload_simultaneous' => 3,
         'default_archive_name' => 'archive.zip',
+        'editable' => ['.txt', '.css', '.js', '.ts', '.html', '.php'],
+        'date_format' => 'YY/MM/DD hh:mm:ss',
     ],
 
     'services' => [