diff --git a/app/graphql/graphql_query_collection.rb b/app/graphql/graphql_query_collection.rb
index 5cf3991e..d47c4133 100644
--- a/app/graphql/graphql_query_collection.rb
+++ b/app/graphql/graphql_query_collection.rb
@@ -133,6 +133,7 @@ class GraphqlQueryCollection
           name
           description
           largeImageUrl: imageUrl(type: "large")
+          extralargeImageUrl: imageUrl(type: "extralarge")
           dateTaken
           importedAt
           previousPhoto {
diff --git a/app/graphql/types/photo_type.rb b/app/graphql/types/photo_type.rb
index 23990591..9672e47f 100644
--- a/app/graphql/types/photo_type.rb
+++ b/app/graphql/types/photo_type.rb
@@ -16,9 +16,12 @@ class PhotoType < Types::BaseObject
     field :machine_tags, [TagType], 'Machine (Rekognition) tags', null: true
     field :name, String, 'Title of the photo', null: false
     field :next_photo, PhotoType, 'Next photo', null: true
+    field :width, Integer, 'Width of the photo in pixels', null: true
+    field :height, Integer, 'Height of the photo in pixels', null: true
     field :previous_photo, PhotoType, 'Previous photo', null: true
-    field :user_tags, [TagType], 'User (non-Rekognition) tags', null: true
+    field :ratio, Float, 'Ratio of the photo', null: true
     field :rekognition_label_model_version, String, 'Rekognition label model version', null: true
+    field :user_tags, [TagType], 'User (non-Rekognition) tags', null: true
 
     field :image_url, String, null: false do
       description 'URL of the image'
@@ -67,5 +70,13 @@ def image_url(type:)
     def rekognition_label_model_version
       @object.rekognition_response['label_model_version'].presence || ''
     end
+
+    def width
+      @object.pixel_width
+    end
+
+    def height
+      @object.pixel_height
+    end
   end
 end
diff --git a/app/javascript/albums/index.vue b/app/javascript/albums/index.vue
index 67ab727f..b83e4555 100644
--- a/app/javascript/albums/index.vue
+++ b/app/javascript/albums/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Albums</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Albums</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <AlbumItem
diff --git a/app/javascript/albums/show.vue b/app/javascript/albums/show.vue
index 15104f67..85773edb 100644
--- a/app/javascript/albums/show.vue
+++ b/app/javascript/albums/show.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Album: {{ album.title }}</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Album: {{ album.title }}</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <PhotoItem
diff --git a/app/javascript/app.vue b/app/javascript/app.vue
index 2f877ae1..33d6240f 100644
--- a/app/javascript/app.vue
+++ b/app/javascript/app.vue
@@ -1,11 +1,7 @@
 <template>
   <div>
     <Navigation></Navigation>
-    <section class="section pt-5">
-      <div class="container is-dark">
-        <RouterView></RouterView>
-      </div>
-    </section>
+    <RouterView></RouterView>
     <Footer></Footer>
   </div>
 </template>
diff --git a/app/javascript/footer.vue b/app/javascript/footer.vue
index 1ab7fbbb..7c89bf48 100644
--- a/app/javascript/footer.vue
+++ b/app/javascript/footer.vue
@@ -1,10 +1,25 @@
 <template>
-  <footer class="footer">
+  <footer class="footer mt-5">
     <div class="content has-text-centered">
       <p>
         Photos &copy; <a href="https://www.rusiczki.net">János Rusiczki</a>
       </p>
       <p>
+        <router-link :to="{ name: 'tags-index' }">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-tags"></i></span>
+            <span>Tags</span>
+          </span>
+        </router-link>
+        &middot;
+        <a>
+          About
+        </a>
+        &middot;
+        <a>
+          Contact
+        </a>
+        &middot;
         Powered by <a href="https://github.com/janosrusiczki/photonia">Photonia</a>
       </p>
     </div>
diff --git a/app/javascript/homepage/index.vue b/app/javascript/homepage/index.vue
index 9542a23e..6a947af9 100644
--- a/app/javascript/homepage/index.vue
+++ b/app/javascript/homepage/index.vue
@@ -1,10 +1,30 @@
 <template>
   <div>
-    <div class="block">
-      <LatestPhoto
-        v-if="result && result.latestPhoto"
-        :photo="result.latestPhoto"
-      />
+    <div class="container">
+      <h1 class="title mt-5 mb-1"></h1>
+    </div>
+    <DisplayHero
+      v-if="!loading"
+      :photo="result.latestPhoto"
+    />
+    <div class="container">
+      <div
+      v-if="!loading"
+      class="level mt-3"
+    >
+      <div class="level-left">
+        <span class="title is-5">
+          Latest photo:
+          <router-link :to="{ name: 'photos-show', params: { id: result.latestPhoto.id } }">
+            {{ result.latestPhoto.name }}
+          </router-link>          
+        </span>
+      </div>
+      <div class="level-right">
+        <router-link :to="{ name: 'photos-index' }" class="button">
+          See all photos...
+        </router-link>
+      </div>
     </div>
     <hr class="is-hidden-touch mt-1 mb-4">
     <div class="block">
@@ -23,6 +43,8 @@
         </div>
       </div>
     </div>
+      
+    </div>
   </div>
 </template>
 
@@ -32,11 +54,11 @@
   import { useTitle } from 'vue-page-title'
 
   // components
-  import LatestPhoto from './latest-photo.vue'
+  import DisplayHero from '../photos/display-hero.vue'  
   import RandomPhoto from './random-photo.vue'
   import MostUsedTags from './most-used-tags.vue'
 
   useTitle('')
 
-  const { result } = useQuery(gql`${gql_queries.homepage_index}`)
+  const { result, loading } = useQuery(gql`${gql_queries.homepage_index}`)
 </script>
diff --git a/app/javascript/navigation.vue b/app/javascript/navigation.vue
index 6b6598b3..a59e01cc 100644
--- a/app/javascript/navigation.vue
+++ b/app/javascript/navigation.vue
@@ -23,18 +23,17 @@
       >
         <div class="navbar-start">
           <router-link :to="{ name: 'photos-index' }" class="navbar-item">
-            <span class="icon"><i class="fas fa-image"></i></span>
-            <span>Photos</span>
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-image"></i></span>
+              <span>Photos</span>
+            </span>
           </router-link>
 
           <router-link :to="{ name: 'albums-index' }" class="navbar-item">
-            <span class="icon"><i class="fas fa-book"></i></span>
-            <span>Albums</span>
-          </router-link>
-
-          <router-link :to="{ name: 'tags-index' }" class="navbar-item">
-            <span class="icon"><i class="fas fa-tag"></i></span>
-            <span>Tags</span>
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-book"></i></span>
+              <span>Albums</span>
+            </span>
           </router-link>
 
           <router-link
@@ -42,46 +41,44 @@
             :to="{ name: 'photos-upload' }"
             class="navbar-item"
           >
-            <span class="icon"><i class="fas fa-upload"></i></span>
-            <span>Upload</span>
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-upload"></i></span>
+              <span>Upload</span>
+            </span>
           </router-link>          
 
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link">
-              More
-            </a>
-            <div class="navbar-dropdown">
-              <a class="navbar-item">
-                About
-              </a>
-              <a class="navbar-item">
-                Contact
-              </a>
-              <hr class="navbar-divider">
-              <!-- <%= link_to 'Upload', new_photo_path, class: 'navbar-item' %> -->
-              <router-link
-                v-if="userStore.signedIn"
-                :to="{ name: 'users-settings' }"
-                class="navbar-item"
-              >
-                Settings
-              </router-link>
-              <router-link
-                v-if="userStore.signedIn"
-                :to="{ name: 'users-sign-out' }"
-                class="navbar-item"
-              >
-                Sign Out
-              </router-link>
-              <router-link
-                v-if="!userStore.signedIn"
-                :to="{ name: 'users-sign-in' }"
-                class="navbar-item"
-              >
-                Sign In
-              </router-link>
-            </div>
-          </div>
+          <router-link
+            v-if="userStore.signedIn"
+            :to="{ name: 'users-settings' }"
+            class="navbar-item"
+          >
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-cog"></i></span>
+              <span>Settings</span>
+            </span>
+          </router-link>
+
+          <router-link
+            v-if="userStore.signedIn"
+            :to="{ name: 'users-sign-out' }"
+            class="navbar-item"
+          >
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-sign-out-alt"></i></span>
+              <span>Sign Out</span>
+            </span>
+          </router-link>
+
+          <router-link
+            v-if="!userStore.signedIn"
+            :to="{ name: 'users-sign-in' }"
+            class="navbar-item"
+          >
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-sign-in-alt"></i></span>
+              <span>Sign In</span>
+            </span>
+          </router-link>
         </div>
 
         <div class="navbar-end">
diff --git a/app/javascript/photos/display-hero.vue b/app/javascript/photos/display-hero.vue
new file mode 100644
index 00000000..df081bf1
--- /dev/null
+++ b/app/javascript/photos/display-hero.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="hero is-dark mb-4">
+    <div class="hero-body pt-5 pb-4" style="text-align: center;">
+      <div id="image-wrapper">
+        <img :src="photo.extralargeImageUrl" />
+        <div
+          v-if="photo.labels"
+          class="labels"
+        >
+          <DisplayLabel
+            v-for="label in photo.labels"
+            :label="label"
+            :highlighted="labelHighlights[label.id]"
+            :key="label.id"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, onMounted, onUnmounted } from 'vue'
+  import DisplayLabel from './display-label.vue'
+
+  const props = defineProps({
+    photo: {
+      type: Object,
+      required: true
+    },
+    labelHighlights: {
+      type: Object,
+      required: false
+    }
+  })
+</script>
+
+<style scoped>
+  #image-wrapper {
+    margin: 0 auto;
+    display: inline-block;
+    position: relative;
+  }
+
+  #image-wrapper > img {
+    max-height: calc(100vh - 300px);
+    min-height: 400px;
+    width: 100%;
+    border-radius: 2px;
+    object-fit: contain;
+    display: block;
+  }
+  #image-wrapper > .labels {
+  }
+</style>
diff --git a/app/javascript/photos/display.vue b/app/javascript/photos/display.vue
deleted file mode 100644
index d04145a7..00000000
--- a/app/javascript/photos/display.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div
-    id="image-wrapper"
-    :style="'background: no-repeat url(' + photo.largeImageUrl + ') 50% / 100%'"
-  >
-    <img :src="photo.largeImageUrl" />
-    <div
-      v-if="photo.labels"
-      class="labels"
-    >
-      <DisplayLabel
-        v-for="label in photo.labels"
-        :label="label"
-        :highlighted="labelHighlights[label.id]"
-        :key="label.id"
-      />
-      <div v-if="photo.intelligentThumbnail">
-        <div :style="' \
-          border: 3px solid red; \
-          position: absolute; \
-          top: ' + photo.intelligentThumbnail.centerOfGravity.top * 100 + '%; \
-          left: ' + photo.intelligentThumbnail.centerOfGravity.left * 100 + '%; \
-          width: 2px; \
-          height: 2px; \
-          opacity: 0'
-        "/>
-        <div :style="' \
-          border: 1px solid blue; \
-          position: absolute; \
-          top: ' + photo.intelligentThumbnail.boundingBox.top * 100 + '%; \
-          left: ' + photo.intelligentThumbnail.boundingBox.left * 100 + '%; \
-          width: ' + photo.intelligentThumbnail.boundingBox.width * 100 + '%; \
-          height: ' + photo.intelligentThumbnail.boundingBox.height * 100 + '%; \
-          opacity: 0'
-        "/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import DisplayLabel from './display-label.vue'
-
-  const props = defineProps({
-    photo: {
-      type: Object,
-      required: true
-    },
-    labelHighlights: {
-      type: Object,
-      required: false
-    }
-  })
-</script>
-
-<style scoped>
-  #image-wrapper {
-    position: relative;
-  }
-  #image-wrapper > img {
-    vertical-align: top;
-    width: 100%;
-    opacity: 0;
-  }
-  #image-wrapper > .labels {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-</style>
diff --git a/app/javascript/photos/index.vue b/app/javascript/photos/index.vue
index d2d879a0..a8bc0907 100644
--- a/app/javascript/photos/index.vue
+++ b/app/javascript/photos/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Photos</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Photos</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <PhotoItem
diff --git a/app/javascript/photos/photo-info.vue b/app/javascript/photos/photo-info.vue
new file mode 100644
index 00000000..b14c7643
--- /dev/null
+++ b/app/javascript/photos/photo-info.vue
@@ -0,0 +1,47 @@
+<template>
+  <SidebarHeader
+    icon="fas fa-info-circle"
+    title="Info"
+  />
+  <div class="block">
+    <span class="icon-text is-size-7">
+      <span class="icon"><i class="fas fa-camera"></i></span>
+      <span class="has-text-weight-semibold">Date Taken:</span>
+      <span v-if="!loading" class="ml-1">{{ momentFormat(photo.dateTaken) }}</span>
+    </span>
+    <span class="icon-text is-size-7">
+      <span class="icon"><i class="fas fa-arrow-circle-up"></i></span>
+      <span class="has-text-weight-semibold">Date Posted:</span>
+      <span v-if="!loading" class="ml-1">{{ momentFormat(photo.importedAt) }}</span>
+    </span>
+    <span
+      v-if="!loading && photo.rekognitionLabelModelVersion !== ''"
+      class="icon-text is-size-7"
+    >
+      <span class="icon"><i class="fas fa-robot"></i></span>
+      <span class="has-text-weight-semibold">Rekognition Label Model Version:</span>
+      <span class="ml-1">{{ photo.rekognitionLabelModelVersion }}</span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+  import SidebarHeader from './sidebar-header.vue'
+  import moment from 'moment/min/moment-with-locales'
+
+  const props = defineProps({
+    photo: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: true
+    }
+  })
+
+  const format = 'dddd, MMMM Do YYYY, H:mm'
+  function momentFormat(date) {
+    return moment(date).format(format)
+  }
+</script>
\ No newline at end of file
diff --git a/app/javascript/photos/show.vue b/app/javascript/photos/show.vue
index 4ab6322a..9d6559ef 100644
--- a/app/javascript/photos/show.vue
+++ b/app/javascript/photos/show.vue
@@ -1,187 +1,168 @@
 <template>
   <div>
-    <div class="level mb-4">
-      <div class="level-left is-flex-grow-1" id="photo-title-container">
-        <PhotoTitleEditable
-          v-if="(userStore.signedIn && !loading)"
-          :id="photo.id"
-          :title="photoTitle()"
-          @update-title="updatePhotoTitle"
-        />
-        <h1
-          v-else
-          class="title level-item"
-        >
-          {{ photoTitle() }}
-        </h1>
-      </div>
-      <div class="level-right">
-        <SmallNavigationButton
-          v-if="photo.previousPhoto"
-          :photo="photo.previousPhoto"
-          :loading="loading"
-          direction="left"
-        />
-        <SmallNavigationButton
-          v-if="photo.nextPhoto"
-          :photo="photo.nextPhoto"
-          :loading="loading"
-          direction="right"
-        />
-      </div>
-    </div>
-    <hr class="is-hidden-touch mt-2 mb-4">
-    <div class="columns is-1">
-      <div class="column is-three-quarters">
-        <Display
-          :photo="photo"
-          :labelHighlights="labelHighlights"
-        />
-        <div class="block mt-2">
-          <PhotoDescriptionEditable
+    <DisplayHero
+      :photo="photo"
+      :labelHighlights="labelHighlights"
+    />
+    <div class="container">
+      <div class="level mb-4"> <!-- Photo title and navigation -->
+        <div class="level-left is-flex-grow-1" id="photo-title-container">
+          <PhotoTitleEditable
             v-if="(userStore.signedIn && !loading)"
             :id="photo.id"
-            :description="photoDescription()"
-            @update-description="updatePhotoDescription"
+            :title="photoTitle()"
+            @update-title="updatePhotoTitle"
           />
-          <div
+          <h1
             v-else
-            class="content"
+            class="title level-item"
           >
-            {{ photoDescription() }}
-          </div>
+            {{ photoTitle() }}
+          </h1>
         </div>
-      </div>
-      <div id="sidebar" class="column">
-        <SidebarHeader
-          v-if="showAlbumBrowser"
-          icon="fas fa-book"
-          title="Albums"
-        />
-        <ul
-          v-if="showAlbumBrowser"
-          class="block-list is-small has-radius pb-4"
-        >
-          <li
-            v-for="album in photo.albums"
-            :key="album.id"
-          >
-            <h4 class="is-size-6 mb-2">
-              <router-link :to="{ name: 'albums-show', params: { id: album.id } }">
-                {{ album.title }}
-              </router-link>
-            </h4>
-            <div class="columns is-variable is-1 is-mobile">
-              <div class="column is-half">
-                <router-link
-                  v-if="album.previousPhotoInAlbum"
-                  :to="{ name: 'photos-show', params: { id: album.previousPhotoInAlbum.id } }"
-                  class="button is-fullwidth is-image-button"
-                >
-                  <img :src="album.previousPhotoInAlbum.intelligentOrSquareThumbnailImageUrl" class="image is-fullwidth mb-2">
-                  <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
-                    <span class="icon"><i class="fas fa-chevron-left"></i></span>
-                    <span>Previous</span>
-                  </span>
-                </router-link>
-                <button v-else class="button is-fullwidth is-image-button" disabled>
-                  <Empty class="mb-2"/>
-                  <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
-                    <span class="icon"><i class="fas fa-chevron-left"></i></span>
-                    <span>Previous</span>
-                  </span>
-                </button>
-              </div>
-              <div class="column is-half">
-                <router-link
-                  v-if="album.nextPhotoInAlbum"
-                  :to="{ name: 'photos-show', params: { id: album.nextPhotoInAlbum.id } }"
-                  class="button is-fullwidth is-image-button"
-                >
-                  <img :src="album.nextPhotoInAlbum.intelligentOrSquareThumbnailImageUrl" class="image is-fullwidth mb-2">
-                  <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
-                    <span>Next</span>
-                    <span class="icon"><i class="fas fa-chevron-right"></i></span>
-                  </span>
-                </router-link>
-                <button v-else class="button is-fullwidth is-image-button" disabled>
-                  <Empty class="mb-2"/>
-                  <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
-                    <span>Next</span>
-                    <span class="icon"><i class="fas fa-chevron-right"></i></span>
-                  </span>
-                </button>
-              </div>
+        <div class="level-right">
+          <SmallNavigationButton
+            v-if="photo.previousPhoto"
+            :photo="photo.previousPhoto"
+            :loading="loading"
+            direction="left"
+          />
+          <SmallNavigationButton
+            v-if="photo.nextPhoto"
+            :photo="photo.nextPhoto"
+            :loading="loading"
+            direction="right"
+          />
+        </div>
+      </div> <!-- End photo title and navigation -->
+      <div class="block mt-2">
+        <div class="columns">
+          <div class="column is-three-quarters">
+            <PhotoDescriptionEditable
+              v-if="(userStore.signedIn && !loading)"
+              :id="photo.id"
+              :description="photoDescription()"
+              @update-description="updatePhotoDescription"
+            />
+            <div
+              v-else
+              class="content"
+            >
+              {{ photoDescription() }}
             </div>
-          </li>
-        </ul>
 
-        <SidebarHeader
-          icon="fas fa-info-circle"
-          title="Info"
-        />
-        <div class="block">
-          <span class="icon-text is-size-7">
-            <span class="icon"><i class="fas fa-camera"></i></span>
-            <span class="has-text-weight-semibold">Date Taken:</span>
-            <span v-if="!loading" class="ml-1">{{ momentFormat(photo.dateTaken) }}</span>
-          </span>
-          <span class="icon-text is-size-7">
-            <span class="icon"><i class="fas fa-arrow-circle-up"></i></span>
-            <span class="has-text-weight-semibold">Date Posted:</span>
-            <span v-if="!loading" class="ml-1">{{ momentFormat(photo.importedAt) }}</span>
-          </span>
-          <span
-            v-if="!loading && photo.rekognitionLabelModelVersion !== ''"
-            class="icon-text is-size-7"
-          >
-            <span class="icon"><i class="fas fa-robot"></i></span>
-            <span class="has-text-weight-semibold">Rekognition Label Model Version:</span>
-            <span class="ml-1">{{ photo.rekognitionLabelModelVersion }}</span>
-          </span>
-        </div>
+            <PhotoInfo
+              :photo="photo"
+              :loading="loading"
+            />
 
-        <SidebarHeader
-          v-if="photo.labels?.length > 0"
-          icon="far fa-square"
-          title="Labels"
-        />
-        <div
-          v-if="photo.labels?.length > 0"
-          class="tags"
-        >
-          <SidebarLabel
-            v-for="label in photo.labels"
-            @highlight-label="highlightLabel"
-            @un-highlight-label="unHighlightLabel"
-            :label="label"
-            :key="label.id"
-          />
-        </div>
+            <SidebarHeader
+              v-if="photo.labels?.length > 0"
+              icon="far fa-square"
+              title="Labels"
+            />
+            <div
+              v-if="photo.labels?.length > 0"
+              class="tags"
+            >
+              <SidebarLabel
+                v-for="label in photo.labels"
+                @highlight-label="highlightLabel"
+                @un-highlight-label="unHighlightLabel"
+                :label="label"
+                :key="label.id"
+              />
+            </div>
 
-        <SidebarHeader
-          icon="fas fa-tag"
-          title="Tags"
-        />
-        <div class="tags">
-          <Tag
-            v-for="tag in photo.userTags"
-            :key="tag.id"
-            :tag="tag"
-          />
-        </div>
+            <SidebarHeader
+              icon="fas fa-tag"
+              title="Tags"
+            />
+            <div class="tags">
+              <Tag
+                v-for="tag in photo.userTags"
+                :key="tag.id"
+                :tag="tag"
+              />
+            </div>
 
-        <SidebarHeader
-          icon="fas fa-robot"
-          title="Machine Tags"
-        />
-        <div class="tags">
-          <Tag
-            v-for="tag in photo.machineTags"
-            :key="tag.id"
-            :tag="tag"
-            type="machine"
-          />
+            <SidebarHeader
+              icon="fas fa-robot"
+              title="Machine Tags"
+            />
+            <div class="tags">
+              <Tag
+                v-for="tag in photo.machineTags"
+                :key="tag.id"
+                :tag="tag"
+                type="machine"
+              />
+            </div>
+          </div>
+          <div class="column is-one-quarter">
+            <SidebarHeader
+              v-if="showAlbumBrowser"
+              icon="fas fa-book"
+              title="Albums"
+            />
+            <ul
+              v-if="showAlbumBrowser"
+              class="block-list is-small has-radius pb-4"
+            >
+              <li
+                v-for="album in photo.albums"
+                :key="album.id"
+              >
+                <h4 class="is-size-6 mb-2">
+                  <router-link :to="{ name: 'albums-show', params: { id: album.id } }">
+                    {{ album.title }}
+                  </router-link>
+                </h4>
+                <div class="columns is-variable is-1 is-mobile">
+                  <div class="column is-half">
+                    <router-link
+                      v-if="album.previousPhotoInAlbum"
+                      :to="{ name: 'photos-show', params: { id: album.previousPhotoInAlbum.id } }"
+                      class="button is-fullwidth is-image-button"
+                    >
+                      <img :src="album.previousPhotoInAlbum.intelligentOrSquareThumbnailImageUrl" class="image is-fullwidth mb-2">
+                      <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
+                        <span class="icon"><i class="fas fa-chevron-left"></i></span>
+                        <span>Previous</span>
+                      </span>
+                    </router-link>
+                    <button v-else class="button is-fullwidth is-image-button" disabled>
+                      <Empty class="mb-2"/>
+                      <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
+                        <span class="icon"><i class="fas fa-chevron-left"></i></span>
+                        <span>Previous</span>
+                      </span>
+                    </button>
+                  </div>
+                  <div class="column is-half">
+                    <router-link
+                      v-if="album.nextPhotoInAlbum"
+                      :to="{ name: 'photos-show', params: { id: album.nextPhotoInAlbum.id } }"
+                      class="button is-fullwidth is-image-button"
+                    >
+                      <img :src="album.nextPhotoInAlbum.intelligentOrSquareThumbnailImageUrl" class="image is-fullwidth mb-2">
+                      <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
+                        <span>Next</span>
+                        <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                      </span>
+                    </router-link>
+                    <button v-else class="button is-fullwidth is-image-button" disabled>
+                      <Empty class="mb-2"/>
+                      <span class="icon-text is-hidden-desktop-only is-hidden-tablet-only">
+                        <span>Next</span>
+                        <span class="icon"><i class="fas fa-chevron-right"></i></span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -194,14 +175,14 @@
   import gql from 'graphql-tag'
   import { useQuery, useMutation } from '@vue/apollo-composable'
   import { useTitle } from 'vue-page-title'
-  import moment from 'moment/min/moment-with-locales'
   import { useUserStore } from '../stores/user'
 
   // components
   import PhotoTitleEditable from './photo-title-editable.vue'
   import PhotoDescriptionEditable from './photo-description-editable.vue'
+  import PhotoInfo from './photo-info.vue'
   import SmallNavigationButton from '@/photos/small-navigation-button.vue'
-  import Display from './display.vue'
+  import DisplayHero from './display-hero.vue'
   import SidebarHeader from './sidebar-header.vue'
   import SidebarLabel from '@/photos/sidebar-label.vue'
   import Tag from '@/tags/tag.vue'
@@ -223,11 +204,6 @@
           intelligentThumbnail: null
         }
 
-  const format = 'dddd, MMMM Do YYYY, H:mm'
-  function momentFormat(date) {
-    return moment(date).format(format)
-  }
-
   const id = computed(() => route.params.id)
   const { result, loading } = useQuery(gql`${gql_queries.photos_show}`, { id: id })
   const labelHighlights = ref({})
diff --git a/app/javascript/photos/upload.vue b/app/javascript/photos/upload.vue
index ae53cc5e..15a8be18 100644
--- a/app/javascript/photos/upload.vue
+++ b/app/javascript/photos/upload.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Upload Photos</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Upload Photos</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
 		  <h3>Drop files here to upload</h3>
@@ -44,22 +44,30 @@
         <div class="column is-10">
           <div class="columns">
             <div class="column is-half">
-              <label class="label is-small">
-                Name
-                <input
-                  type="text"
-                  class="input is-small"
-                  v-model="file.data['photo[name]']"
-                >
-              </label>
-              <label class="label is-small">
-                Description
-                <textarea
-                  class="textarea is-small"
-                  v-model="file.data['photo[description]']"
-                >
-                </textarea>
-              </label>
+              <div class="field">
+                <label class="label is-small">
+                  Name
+                  <div class="control">
+                    <input
+                      type="text"
+                      class="input is-small"
+                      v-model="file.data['photo[name]']"
+                    >
+                  </div>
+                </label>
+              </div>
+              <div class="field">
+                <label class="label is-small">
+                  Description
+                  <div class="control">
+                    <textarea
+                      class="textarea is-small"
+                      v-model="file.data['photo[description]']"
+                    >
+                    </textarea>
+                  </div>
+                </label>
+              </div>
             </div>
             <div class="column is-half">
               <p>
diff --git a/app/javascript/tags/index.vue b/app/javascript/tags/index.vue
index 42d12e4f..1b212e80 100644
--- a/app/javascript/tags/index.vue
+++ b/app/javascript/tags/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Tags</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Tags</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <h2 class="title is-4">Most used</h2>
     <div class="field is-grouped is-grouped-multiline mb-2">
diff --git a/app/javascript/tags/show.vue b/app/javascript/tags/show.vue
index 1aad75d7..e5c31e66 100644
--- a/app/javascript/tags/show.vue
+++ b/app/javascript/tags/show.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Tag: {{ tag.name }}</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Tag: {{ tag.name }}</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <PhotoItem
diff --git a/app/javascript/users/settings.vue b/app/javascript/users/settings.vue
index 25a48821..f357b1dd 100644
--- a/app/javascript/users/settings.vue
+++ b/app/javascript/users/settings.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">User Settings</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">User Settings</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <p v-if="result">{{ result.userSettings.email }}</p>
   </div>
diff --git a/app/javascript/users/sign-in.vue b/app/javascript/users/sign-in.vue
index 4db47c9a..2c23dd3a 100644
--- a/app/javascript/users/sign-in.vue
+++ b/app/javascript/users/sign-in.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="columns is-centered">
+    <div class="columns is-centered mt-5 mb-0">
       <div class="column is-5-tablet is-5-desktop is-5-widescreen">
         <form
           @submit.prevent="submit"
diff --git a/app/javascript/users/sign-out.vue b/app/javascript/users/sign-out.vue
index 1797911c..f1f18802 100644
--- a/app/javascript/users/sign-out.vue
+++ b/app/javascript/users/sign-out.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    Signing out...
+    <p class="mt-5 mb-0">Signing out...</p>
   </div>
 </template>