diff --git a/src/App.vue b/src/App.vue
index 89bb503..7e386a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,8 @@
         <div id="items" class="fbox-v">
             <router-link class="router-link" ref="others" to="/others">{{ $t('nav.others') }}</router-link>
             <div class="dot">·</div>
+            <router-link class="router-link" ref="photo" to="/photo">{{ $t('nav.photo') }}</router-link>
+            <div class="dot">·</div>
             <router-link class="router-link" ref="blog" to="/blog">{{ $t('nav.blog') }}</router-link>
             <div class="dot">·</div>
             <router-link class="router-link" ref="life" to="/life">{{ $t('nav.life') }}</router-link>
@@ -14,8 +16,7 @@
             <router-link class="router-link" ref="about" to="/about">{{ $t('nav.about') }}</router-link>
             <div class="dot">·</div>
             <router-link class="router-link" ref="home" to="/">
-                <svg focusable="false" data-prefix="fal" data-icon="house-night" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-house-night fa-w-20"><path fill="currentColor" d="M112,224a111.5,111.5,0,0,0,87-41.45,20.51,20.51,0,0,0-19.75-33.08A59.2,59.2,0,0,1,138.84,39.85a20.3,20.3,0,0,0,10.07-21.27,20.26,20.26,0,0,0-16.47-16.7A136,136,0,0,0,112,0a112,112,0,0,0,0,224ZM97.78,33.27a91.21,91.21,0,0,0,54.47,147.9A80,80,0,1,1,97.78,33.27Zm97.15,35.51,39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L317,68.78a5.33,5.33,0,0,0,0-9.54L277.32,42.68,260.76,3a5.33,5.33,0,0,0-9.55,0L234.65,42.68,194.93,59.24a5.34,5.34,0,0,0,0,9.54ZM157,379.24l-39.72-16.57L100.76,323a5.34,5.34,0,0,0-9.55,0L74.65,362.67,34.93,379.24a5.34,5.34,0,0,0,0,9.54l39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L157,388.78a5.33,5.33,0,0,0,0-9.54Zm179-101.9v85.33A21.39,21.39,0,0,0,357.36,384h85.31A21.39,21.39,0,0,0,464,362.67V277.34A21.4,21.4,0,0,0,442.67,256H357.36A21.4,21.4,0,0,0,336,277.34ZM368,288H432v64H368Zm266.49,8L576,244.75V144a16,16,0,0,0-32,0v72.75L410.53,100a16,16,0,0,0-21.07,0l-224,196a16,16,0,0,0,21.07,24.09L224,287.28V464a48.05,48.05,0,0,0,48,48H528a48.06,48.06,0,0,0,48-48V287.28l37.46,32.78A16,16,0,0,0,634.53,296ZM544,464a16,16,0,0,1-16,16H272a16,16,0,0,1-16-16V264a15.94,15.94,0,0,0-.81-4L400,133.27l144,126Z" class=""></path></svg></router-link>
-            <div class="dot">·</div>
+              <svg focusable="false" data-prefix="fal" data-icon="house-night" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-house-night fa-w-20"><path fill="currentColor" d="M112,224a111.5,111.5,0,0,0,87-41.45,20.51,20.51,0,0,0-19.75-33.08A59.2,59.2,0,0,1,138.84,39.85a20.3,20.3,0,0,0,10.07-21.27,20.26,20.26,0,0,0-16.47-16.7A136,136,0,0,0,112,0a112,112,0,0,0,0,224ZM97.78,33.27a91.21,91.21,0,0,0,54.47,147.9A80,80,0,1,1,97.78,33.27Zm97.15,35.51,39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L317,68.78a5.33,5.33,0,0,0,0-9.54L277.32,42.68,260.76,3a5.33,5.33,0,0,0-9.55,0L234.65,42.68,194.93,59.24a5.34,5.34,0,0,0,0,9.54ZM157,379.24l-39.72-16.57L100.76,323a5.34,5.34,0,0,0-9.55,0L74.65,362.67,34.93,379.24a5.34,5.34,0,0,0,0,9.54l39.72,16.56,16.56,39.72a5.33,5.33,0,0,0,9.55,0l16.56-39.72L157,388.78a5.33,5.33,0,0,0,0-9.54Zm179-101.9v85.33A21.39,21.39,0,0,0,357.36,384h85.31A21.39,21.39,0,0,0,464,362.67V277.34A21.4,21.4,0,0,0,442.67,256H357.36A21.4,21.4,0,0,0,336,277.34ZM368,288H432v64H368Zm266.49,8L576,244.75V144a16,16,0,0,0-32,0v72.75L410.53,100a16,16,0,0,0-21.07,0l-224,196a16,16,0,0,0,21.07,24.09L224,287.28V464a48.05,48.05,0,0,0,48,48H528a48.06,48.06,0,0,0,48-48V287.28l37.46,32.78A16,16,0,0,0,634.53,296ZM544,464a16,16,0,0,1-16,16H272a16,16,0,0,1-16-16V264a15.94,15.94,0,0,0-.81-4L400,133.27l144,126Z" class=""></path></svg></router-link>
         </div>
 
         <div id="nav-bookmark" ref="bookmark" :style="bookmarkCss"></div>
@@ -95,6 +96,7 @@ class App extends Vue
 
     calculateBookmarkCss(): void
     {
+      console.log('CalculateBookmarkCss called', this.currentRoute, this.$refs)
         if (this.currentRoute in this.$refs)
             this.currentLink = (this.$refs[this.currentRoute] as ComponentPublicInstance).$el
         else return
diff --git a/src/scripts/messages.ts b/src/scripts/messages.ts
index a43227d..0cc2949 100644
--- a/src/scripts/messages.ts
+++ b/src/scripts/messages.ts
@@ -8,7 +8,8 @@ export const messages = {
             blog: '记事本',
             life: '生活',
             projects: 'Projects',
-            others: '更多'
+            others: '更多',
+            photo: '相册'
         }
     },
     zh: {
diff --git a/src/scripts/router.ts b/src/scripts/router.ts
index 2a32bae..1e4b5e1 100644
--- a/src/scripts/router.ts
+++ b/src/scripts/router.ts
@@ -27,6 +27,12 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('../views/Blog.vue'),
         props: route => (route.query)
     },
+    {
+        path: '/photo',
+        name: 'Photo',
+        meta: {title: '相册', nav: true},
+        component: () => import('../views/Photo.vue')
+    },
     {
         path: '/others',
         name: 'Others',
@@ -51,12 +57,6 @@ const routes: Array<RouteRecordRaw> = [
         meta: {title: '我做的', navBookmark: 'Others'},
         component: () => import('../views/others/Projects.vue')
     },
-    {
-        path: '/photo',
-        name: 'Photo',
-        meta: {title: '摄影', navBookmark: 'Others'},
-        component: () => import('../views/Photo.vue')
-    },
 ]
 
 export const router = createRouter({
diff --git a/src/views/Photo.vue b/src/views/Photo.vue
index 0a1c6fc..9660875 100644
--- a/src/views/Photo.vue
+++ b/src/views/Photo.vue
@@ -24,10 +24,10 @@ export default class Photos extends Vue {
 
   async created() {
     this.photos = await (await fetch('https://p.aza.moe/photos')).json()
-    this.photos.sort((a, b) => (b.upload_time < a.upload_time ? 1 : -1))
+    this.photos.sort((a, b) => (a.exif.DateTime < b.exif.DateTime ? 1 : -1))
 
     let rowProbabilityTable = {
-      1: 0, 2: 0.5, 3: 0.5
+      1: 0, 2: 0.3, 3: 0.5
     }
 
     // Generate photo rows: there is a 10% chance that a photo will be the only photo in its row
@@ -65,7 +65,7 @@ export default class Photos extends Vue {
 <template>
   <div class="title">
     <div class="font-script-en bold">The Wandering Gallery</div>
-<!--    <div class="subtitle">Here I post pictures of the wonderful scenes I encounter during my trips.</div>-->
+    <div class="subtitle <sm:hidden">想要把旅行中用相机拍到好看照片时的喜悦分享给照片里出现的路人，所以买了便携照片打印机、搭了这个网页！</div>
   </div>
   <div class="outer-grid">
     <div v-for="row in photoRows" :key="row[0].id" flex justify-center :class="`grid-cols-${row.length}`">
@@ -96,7 +96,7 @@ export default class Photos extends Vue {
 
 .img-container
   filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3))
-  margin: -15px
+  margin: -0.5rem
   max-width: 50%
 
 img.photo