diff --git a/handlers/account.py b/handlers/account.py
index cbc1c9b..d61e7cc 100644
--- a/handlers/account.py
+++ b/handlers/account.py
@@ -81,6 +81,12 @@ def get(self, user_name=None, page=None):
 
         if not images and page != 1:
             raise tornado.web.HTTPError(404)
+
+        # Annotate each file with page position to facilitate navigation.
+        for i, file in enumerate(images):
+            file.first_on_page = (i == 0)
+            file.last_on_page = (i == len(images) - 1)
+            
         return self.render("account/index.html", images=images, user=user,
             current_user_obj=current_user, count=count, page=page,
             url_format=url_format, can_follow=can_follow,
@@ -149,7 +155,15 @@ def get(self, user_name=None, before_or_after=None, favorite_id=None):
         followers = shake.subscribers(page=1)
         follower_count = shake.subscriber_count()
 
-        return self.render("account/likes.html", sharedfiles=sharedfiles[0:10],
+        # Trim to presentation length
+        sharedfiles = sharedfiles[0:10]
+
+        # Annotate each file with page position to facilitate navigation.
+        for i, file in enumerate(sharedfiles):
+            file.first_on_page = (i == 0)
+            file.last_on_page = (i == len(sharedfiles) - 1)
+
+        return self.render("account/likes.html", sharedfiles=sharedfiles,
             current_user_obj=current_user_obj,
             following_shakes=following_shakes[:10],
             following_shakes_count=following_shakes_count,
diff --git a/handlers/incoming.py b/handlers/incoming.py
index 7269faf..a96f5c5 100644
--- a/handlers/incoming.py
+++ b/handlers/incoming.py
@@ -54,7 +54,15 @@ def get(self, before_or_after=None, base36_id=None):
             if len(sharedfiles) > 10:
                 older_link = "/incoming/before/%s" % sharedfiles[9].share_key
 
-        return self.render("incoming/index.html", sharedfiles=sharedfiles[0:10],
+        # Trim to presentation length
+        sharedfiles = sharedfiles[0:10]
+
+        # Annotate each file with page position to facilitate navigation.
+        for i, file in enumerate(sharedfiles):
+            file.first_on_page = (i == 0)
+            file.last_on_page = (i == len(sharedfiles) - 1)
+
+        return self.render("incoming/index.html", sharedfiles=sharedfiles,
             current_user_obj=current_user_obj,
             older_link=older_link, newer_link=newer_link,
             notifications_count=notifications_count)
diff --git a/handlers/popular.py b/handlers/popular.py
index 7ca08b6..049b4e7 100644
--- a/handlers/popular.py
+++ b/handlers/popular.py
@@ -35,6 +35,12 @@ def get(self):
 
         best_of_user = user.User.get("name=%s", options.best_of_user_name)
         best_of_shake = best_of_user.shake()
+
+        # Annotate each file with page position to facilitate navigation.
+        for i, file in enumerate(sharedfiles):
+            file.first_on_page = (i == 0)
+            file.last_on_page = (i == len(sharedfiles) - 1)
+
         return self.render("popular/index.html", 
             sharedfiles=sharedfiles, 
             notifications_count=notifications_count,
diff --git a/handlers/search.py b/handlers/search.py
index 00412db..e973614 100644
--- a/handlers/search.py
+++ b/handlers/search.py
@@ -136,6 +136,11 @@ def get(self, base36_id=None):
                     older_link = "/search?q=%s&offset=%d" % (escape.url_escape(q), offset + MAX_PER_PAGE)
                     sharedfiles = sharedfiles[0:MAX_PER_PAGE]
 
+        # Annotate each file with page position to facilitate navigation.
+        for i, file in enumerate(sharedfiles):
+            file.first_on_page = (i == 0)
+            file.last_on_page = (i == len(sharedfiles) - 1)
+
         return self.render("search/search.html",
             current_user_obj=current_user_obj,
             sharedfiles=sharedfiles, q=q,
diff --git a/static/js/paging_keys.js b/static/js/paging_keys.js
index 9db5c46..b9c432f 100755
--- a/static/js/paging_keys.js
+++ b/static/js/paging_keys.js
@@ -83,9 +83,9 @@ HotKey.prototype.remove = function (key) {
 var pagingKeys = (function () {
     // settings
     var config = {
-        nodeSelector: ".image-title", // used to select each item on the page and place in the map (must be a link)
-        prevPageSelector: ".newer a", // link on this element should always jump to prev page a.prev_page (must be a link)
-        nextPageSelector: ".older a", // link on this element should always jump to next page a.next_page (must be a link)
+        nodeSelector: "article.shared-file", // used to select each item on the page and place in the map (must be a link)
+        prevPageSelector: "a.newer", // link on this element should always jump to prev page a.prev_page (must be a link)
+        nextPageSelector: "a.older", // link on this element should always jump to next page a.next_page (must be a link)
         pagingNavId: "paging-nav", // dom id of the floating page navigation element
         keyNext: "j", // hot keys used
         keyPrev: "k",
diff --git a/templates/incoming/index.html b/templates/incoming/index.html
index 0f23e7d..44b1320 100644
--- a/templates/incoming/index.html
+++ b/templates/incoming/index.html
@@ -55,18 +55,21 @@ <h3>Did You Know?</h3>
         {% for sharedfile in sharedfiles %}
           {{modules.Image(sharedfile, current_user=current_user_obj, list_view=True, show_attribution_in_title=True)}}
         {% end %}
-      </div>
-      <div class="linear-navigation">
-        <div class="older">
+
+        <nav class="linear-navigation timeline-navigation" aria-label="Timeline">
           {% if older_link %}
-          <a class="btn btn-secondary btn-shadow" href="{{ older_link }}">&laquo; Older</a>
+            <a class="older btn btn-secondary btn-shadow" href="{{ older_link }}">&laquo; Older</a>
+          {% else %}
+            {# Simplify container layout #}
+            <div></div>
           {% end %}
-        </div>
-        <div class="newer">
           {% if newer_link %}
-          <a class="btn btn-secondary btn-shadow" href="{{ newer_link }}">Newer &raquo;</a>
+            <a class="newer btn btn-secondary btn-shadow" href="{{ newer_link }}">Newer &raquo;</a>
+          {% else %}
+            {# Simplify container layout #}
+            <div></div>
           {% end %}
-        </div>
+        </nav>
       </div>
     </div>
   </div>
diff --git a/templates/uimodules/image.html b/templates/uimodules/image.html
index ad0226c..2f0002d 100644
--- a/templates/uimodules/image.html
+++ b/templates/uimodules/image.html
@@ -1,233 +1,236 @@
-<div class="image-title {% if show_attribution_in_title %}image-title-with-poster{% end %}">
-    {% if can_edit and not site_is_readonly %}
-        {% if list_view %}
-            {% if sharedfile.get_title() == "" %}
-                <h3 class="image-edit-title the-title the-title-blank">click here to edit title</h3>
-            {% else %}
-                <h3 class="image-edit-title the-title">{{escape(sharedfile.get_title())}}</h3>
-            {% end %}
-        {% else %}
-            {% if sharedfile.get_title() == "" %}
-                <h1 class="image-edit-title the-title the-title-blank">click here to edit title</h1>
+<article id="shared-file-{{sharedfile.share_key}}" class="shared-file{{ " first-on-page" if sharedfile.first_on_page else "" }}{{ " last-on-page" if sharedfile.last_on_page else "" }}">  
+    <header class="image-title {% if show_attribution_in_title %}image-title-with-poster{% end %}">
+        {% if can_edit and not site_is_readonly %}
+            {% if list_view %}
+                {% if sharedfile.get_title() == "" %}
+                    <h3 class="image-edit-title the-title the-title-blank">click here to edit title</h3>
+                {% else %}
+                    <h3 class="image-edit-title the-title">{{escape(sharedfile.get_title())}}</h3>
+                {% end %}
             {% else %}
-                <h1 class="image-edit-title the-title">{{escape(sharedfile.get_title())}}</h1>
-            {% end %}
-        {% end %}
-        <form method="post" class="image-edit-title-form" action="/p/{{sharedfile.share_key}}/quick-edit-title">
-            {{ xsrf_form_html() }}
-            <input type="text" class="title-input" name="title"  autocomplete="off" value="">
-            <div class="buttons">
-                <input type="submit" class="save btn btn-primary" value="Save">
-                <span class="or">or</span>
-                <a href="" class="cancel btn btn-secondary">Cancel</a>
-            </div>
-        </form>
-    {% else %}
-        {% if show_attribution_in_title %}
-            <div class="image-poster">
-                <a href="{{attribution['path']}}" title="{{escape(attribution['name'])}}">
-                    <img class="avatar--img" src="{{attribution['thumbnail_url']}}" width="48" height="48" alt="{{escape(attribution['name'])}}" loading="lazy" decoding="async">
-                </a>
-            </div>
-        {% end %}
-        {% if list_view %}
-            {% if sharedfile.get_title() == "" and show_attribution_in_title %}
-            <h3>&nbsp;</h3>
-            {% elif sharedfile.get_title() != "" %}
-            <h3>{{escape(sharedfile.get_title())}}</h3>
-            {% end %}
-        {% else %}
-            {% if sharedfile.get_title() == "" and show_attribution_in_title %}
-            <h1>&nbsp;</h1>
-            {% elif sharedfile.get_title() != "" %}
-            <h1>{{escape(sharedfile.get_title())}}</h1>
+                {% if sharedfile.get_title() == "" %}
+                    <h1 class="image-edit-title the-title the-title-blank">click here to edit title</h1>
+                {% else %}
+                    <h1 class="image-edit-title the-title">{{escape(sharedfile.get_title())}}</h1>
+                {% end %}
             {% end %}
-        {% end %}
-        <div class="clear"><!-- --></div>
-    {% end %}
-    {% if list_view and can_remove_from_shake and not site_is_readonly %}
-        <div class="remove-from-shake">
-            <form method="post" action="/p/{{sharedfile.share_key}}/shakes/{{shake.id}}/delete">
-                <input type="hidden" name="redirect_to" value="{{ request.path }}">
+            <form method="post" class="image-edit-title-form" action="/p/{{sharedfile.share_key}}/quick-edit-title">
                 {{ xsrf_form_html() }}
-                <button title="Delete from shake" class="btn btn-warning btn-pastel btn-icon btn-tiny">✕</button>
+                <input type="text" class="title-input" name="title"  autocomplete="off" value="">
+                <div class="buttons">
+                    <input type="submit" class="save btn btn-primary" value="Save">
+                    <span class="or">or</span>
+                    <a href="" class="cancel btn btn-secondary">Cancel</a>
+                </div>
             </form>
-        </div>
-    {% end %}
-</div>
-<div class="image-content">
-    <div class="the-image">
-        {% if is_nsfw and hide_nsfw %}
-            <div class="nsfw-cover" style="min-height: {{min_height}}px;">
-            <p>This may not be safe for viewing at work.</p>
-            <p><a href="/p/{{sharedfile.share_key}}">Click here to view</a></p>
-            </div>
         {% else %}
-            {% if sharedfile.type() == 'link' %}
-                <div class="data-wrapper">
-                {{sharedfile.render_data(user=current_user)}}
+            {% if show_attribution_in_title %}
+                <div class="image-poster">
+                    <a href="{{attribution['path']}}" title="{{escape(attribution['name'])}}">
+                        <img class="avatar--img" src="{{attribution['thumbnail_url']}}" width="48" height="48" alt="{{escape(attribution['name'])}}" loading="lazy" decoding="async">
+                    </a>
                 </div>
-            {% else %}
-                {% if sourcefile.mp4_flag or sourcefile.webm_flag %}
-                    <video{% if can_autoplay %} class="autoplay" autoplay muted playsinline webkit-playsinline{% else %} controls{% end %} loop="loop" width="{{sized_width}}" height="{{sized_height}}" data-alt="{{escape(sharedfile.get_title())}}" data-src="//s.{{app_host}}/r/{{sharedfile.share_key}}" aria-description="Video embed: {{escape(sharedfile.get_alt_text(raw=True) or 'No alt provided')}}">
-                        {% if sourcefile.webm_flag %}<source src="//s.{{app_host}}/r/{{sharedfile.share_key}}.webm" type="video/webm" onerror="fallbackImage(this)" />{% end %}
-                        {% if sourcefile.mp4_flag %}<source src="//s.{{app_host}}/r/{{sharedfile.share_key}}.mp4" type="video/mp4" onerror="fallbackImage(this)" />{% end %}
-                    </video>
-                {% else %}
-                    {% if list_view %}
-                        <a href="/p/{{sharedfile.share_key}}"><img
-                            srcset="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=1 1x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2 2x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2.5 2.5x"
-                            src="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}"
-                            height="{{sized_height}}"
-                            width="{{sized_width}}"
-                            loading="lazy"
-                            decoding="async"
-                            alt="{{escape(sharedfile.get_alt_text(raw=True) or 'No alt provided')}}"></a>
-                    {% else %}
-                        <a href="//{{cdn_host}}/r/{{sharedfile.share_key}}"><img
-                            srcset="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=1 1x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2 2x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2.5 2.5x"
-                            src="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}"
-                            height="{{sized_height}}"
-                            width="{{sized_width}}"
-                            loading="lazy"
-                            decoding="async"
-                            alt="{{escape(sharedfile.get_alt_text(raw=True) or 'No alt provided')}}"></a>
-                    {% end %}
-                {% end %}
             {% end %}
-        {% end %}
-    </div>
-    <div id="image-content-footer-{{sharedfile.share_key}}" class="image-content-footer">
-        <div class="alt-text {% if can_edit %}alt-text-edit{%end%}{% if sharedfile.get_alt_text() == "" %} alt-text--blank{%else%} alt-text--hidden{%end%}">
-            <div class="alt-text-toggle link link--primary">alt text</div>
-            {% if can_edit and not site_is_readonly %}
-                {% if sharedfile.get_alt_text() == "" %}
-                    <div class="the-alt-text" role="button">add some alt text</div>
-                {% else %}
-                    <div class="the-alt-text" role="button">{{sharedfile.get_alt_text()}}</div>
+            {% if list_view %}
+                {% if sharedfile.get_title() == "" and show_attribution_in_title %}
+                <h3>&nbsp;</h3>
+                {% elif sharedfile.get_title() != "" %}
+                <h3>{{escape(sharedfile.get_title())}}</h3>
                 {% end %}
-                <form method="post" class="alt-text-edit-form" action="/p/{{sharedfile.share_key}}/quick-edit-alt-text">
-                    {{ xsrf_form_html() }}
-                    <h3>Edit alt text</h3>
-                    <p class="alt-text-learn">
-                      Alt text describes images for blind and low-vision users, and helps give context to everyone. <a href="/faq/#alt-text">Learn more</a>.
-                    </p>
-                    <textarea name="alt_text" class="alt-text-edit-textarea"></textarea>
-                    <div class="buttons">
-                        <input type="submit" class="save btn btn-primary btn-small" value="Save">
-                        <span class="or">or</span>
-                        <a href="" class="cancel btn btn-secondary btn-small">Cancel</a>
-                    </div>
-                </form>
             {% else %}
-                {% if sharedfile.get_alt_text() != "" %}
-                    <div class="the-alt-text">{{sharedfile.get_alt_text()}}</div>
+                {% if sharedfile.get_title() == "" and show_attribution_in_title %}
+                <h1>&nbsp;</h1>
+                {% elif sharedfile.get_title() != "" %}
+                <h1>{{escape(sharedfile.get_title())}}</h1>
                 {% end %}
             {% end %}
-        </div>
-        <div class="description {% if can_edit %}description-edit{%end%}">
-            {% if can_edit and not site_is_readonly %}
-                {% if sharedfile.get_description() == "" %}
-                    <div class="the-description the-description-blank">click here to edit description</div>
-                {% else %}
-                    <div class="the-description">{{sharedfile.get_description()}}</div>
-                {% end %}
-                <form method="post" class="description-edit-form" action="/p/{{sharedfile.share_key}}/quick-edit-description">
+            <div class="clear"><!-- --></div>
+        {% end %}
+        {% if list_view and can_remove_from_shake and not site_is_readonly %}
+            <div class="remove-from-shake">
+                <form method="post" action="/p/{{sharedfile.share_key}}/shakes/{{shake.id}}/delete">
+                    <input type="hidden" name="redirect_to" value="{{ request.path }}">
                     {{ xsrf_form_html() }}
-                    <h3>Edit description</h3>
-                    <textarea name="description" class="description-edit-textarea"></textarea>
-                    <div class="buttons">
-                        <input type="submit" class="save btn btn-primary btn-small" value="Save">
-                        <span class="or">or</span>
-                        <a href="" class="cancel btn btn-secondary btn-small">Cancel</a>
-                    </div>
+                    <button title="Delete from shake" class="btn btn-warning btn-pastel btn-icon btn-tiny">✕</button>
                 </form>
+            </div>
+        {% end %}
+    </header>
+    
+    <div class="image-content">
+        <div class="the-image">
+            {% if is_nsfw and hide_nsfw %}
+                <div class="nsfw-cover" style="min-height: {{min_height}}px;">
+                    <p>This may not be safe for viewing at work.</p>
+                    <p><a href="/p/{{sharedfile.share_key}}">Click here to view</a></p>
+                </div>
             {% else %}
-                {% if sharedfile.get_description() %}
-                    <div class="the-description">{{sharedfile.get_description()}}</div>
+                {% if sharedfile.type() == 'link' %}
+                    <div class="data-wrapper">
+                    {{sharedfile.render_data(user=current_user)}}
+                    </div>
+                {% else %}
+                    {% if sourcefile.mp4_flag or sourcefile.webm_flag %}
+                        <video{% if can_autoplay %} class="autoplay" autoplay muted playsinline webkit-playsinline{% else %} controls{% end %} loop="loop" width="{{sized_width}}" height="{{sized_height}}" data-alt="{{escape(sharedfile.get_title())}}" data-src="//s.{{app_host}}/r/{{sharedfile.share_key}}" aria-description="Video embed: {{escape(sharedfile.get_alt_text(raw=True) or 'No alt provided')}}">
+                            {% if sourcefile.webm_flag %}<source src="//s.{{app_host}}/r/{{sharedfile.share_key}}.webm" type="video/webm" onerror="fallbackImage(this)" />{% end %}
+                            {% if sourcefile.mp4_flag %}<source src="//s.{{app_host}}/r/{{sharedfile.share_key}}.mp4" type="video/mp4" onerror="fallbackImage(this)" />{% end %}
+                        </video>
+                    {% else %}
+                        {% if list_view %}
+                            <a href="/p/{{sharedfile.share_key}}"><img
+                                srcset="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=1 1x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2 2x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2.5 2.5x"
+                                src="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}"
+                                height="{{sized_height}}"
+                                width="{{sized_width}}"
+                                loading="lazy"
+                                decoding="async"
+                                alt="{{escape(sharedfile.get_alt_text(raw=True) or 'No alt provided')}}"></a>
+                        {% else %}
+                            <a href="//{{cdn_host}}/r/{{sharedfile.share_key}}"><img
+                                srcset="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=1 1x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2 2x, //s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}&dpr=2.5 2.5x"
+                                src="//s.{{app_host}}/r/{{sharedfile.share_key}}?width={{sized_width}}"
+                                height="{{sized_height}}"
+                                width="{{sized_width}}"
+                                loading="lazy"
+                                decoding="async"
+                                alt="{{escape(sharedfile.get_alt_text(raw=True) or 'No alt provided')}}"></a>
+                        {% end %}
+                    {% end %}
                 {% end %}
             {% end %}
         </div>
-        <div class="image-interactions">
-            {% if (can_favor or can_unfavor) and not site_is_readonly %}
-                <div class="like-this">
-                    <form id="like-form-{{sharedfile.share_key}}"  method="POST" action="/p/{{sharedfile.share_key}}/{% if can_unfavor %}un{% end %}like">
+        <div id="image-content-footer-{{sharedfile.share_key}}" class="image-content-footer">
+            <div class="alt-text {% if can_edit %}alt-text-edit{%end%}{% if sharedfile.get_alt_text() == "" %} alt-text--blank{%else%} alt-text--hidden{%end%}">
+                <div class="alt-text-toggle link link--primary">alt text</div>
+                {% if can_edit and not site_is_readonly %}
+                    {% if sharedfile.get_alt_text() == "" %}
+                        <div class="the-alt-text" role="button">add some alt text</div>
+                    {% else %}
+                        <div class="the-alt-text" role="button">{{sharedfile.get_alt_text()}}</div>
+                    {% end %}
+                    <form method="post" class="alt-text-edit-form" action="/p/{{sharedfile.share_key}}/quick-edit-alt-text">
                         {{ xsrf_form_html() }}
-                        <button type="button" class="like-button btn btn-danger btn-small {% if can_favor %}is-active{% end %}">
-                            <div class="btn--content">
-                                <img class="btn--icon" src="{{ static_url("images/like-this.svg") }}" alt="">
-                                <span class="btn--text">Like</span>
-                            </div>
-                        </button>
-                        <button type="button" class="unlike-button {% if can_unfavor %}is-active{% end %}" title="Unlike This" aria-label="Unlike This">
-                            <img src="{{ static_url("images/liked-this.svg") }}" height="22" width="25" alt="Unlike This">
-                        </button>
+                        <h3>Edit alt text</h3>
+                        <p class="alt-text-learn">
+                        Alt text describes images for blind and low-vision users, and helps give context to everyone. <a href="/faq/#alt-text">Learn more</a>.
+                        </p>
+                        <textarea name="alt_text" class="alt-text-edit-textarea"></textarea>
+                        <div class="buttons">
+                            <input type="submit" class="save btn btn-primary btn-small" value="Save">
+                            <span class="or">or</span>
+                            <a href="" class="cancel btn btn-secondary btn-small">Cancel</a>
+                        </div>
                     </form>
-                </div>
-            {% end %}
-            {% if can_save and not site_is_readonly %}
-                <div class="save-this">
-                    {% if has_saved %}
-                        <a href="/p/{{has_saved.share_key}}" title="Already saved!"><img height="22" width="29" src="{{ static_url("images/saved-this.svg") }}" alt="Saved"></a>
+                {% else %}
+                    {% if sharedfile.get_alt_text() != "" %}
+                        <div class="the-alt-text">{{sharedfile.get_alt_text()}}</div>
+                    {% end %}
+                {% end %}
+            </div>
+            <div class="description {% if can_edit %}description-edit{%end%}">
+                {% if can_edit and not site_is_readonly %}
+                    {% if sharedfile.get_description() == "" %}
+                        <div class="the-description the-description-blank">click here to edit description</div>
                     {% else %}
-                        <form method="post" action="/p/{{sharedfile.share_key}}/save">
-                            <input type="hidden" name="shake_id" class="shake-id-input" value="">
-                            <input type="hidden" name="json" value="1">
+                        <div class="the-description">{{sharedfile.get_description()}}</div>
+                    {% end %}
+                    <form method="post" class="description-edit-form" action="/p/{{sharedfile.share_key}}/quick-edit-description">
+                        {{ xsrf_form_html() }}
+                        <h3>Edit description</h3>
+                        <textarea name="description" class="description-edit-textarea"></textarea>
+                        <div class="buttons">
+                            <input type="submit" class="save btn btn-primary btn-small" value="Save">
+                            <span class="or">or</span>
+                            <a href="" class="cancel btn btn-secondary btn-small">Cancel</a>
+                        </div>
+                    </form>
+                {% else %}
+                    {% if sharedfile.get_description() %}
+                        <div class="the-description">{{sharedfile.get_description()}}</div>
+                    {% end %}
+                {% end %}
+            </div>
+            <div class="image-interactions">
+                {% if (can_favor or can_unfavor) and not site_is_readonly %}
+                    <div class="like-this">
+                        <form id="like-form-{{sharedfile.share_key}}"  method="POST" action="/p/{{sharedfile.share_key}}/{% if can_unfavor %}un{% end %}like">
                             {{ xsrf_form_html() }}
-                            <button type="button" class="save-this-link {% if has_multiple_shakes %}save-this-link-multiple{% end %} btn btn-warning btn-small">
+                            <button type="button" class="like-button btn btn-danger btn-small {% if can_favor %}is-active{% end %}">
                                 <div class="btn--content">
-                                    <img class="btn--icon" src="{{ static_url("images/save-this.svg") }}" alt="">
-                                    <span class="btn--text">Save</span>
-                                    {% if has_multiple_shakes %}
-                                        <span class="btn--caret">▼</span>
-                                    {% end %}
+                                    <img class="btn--icon" src="{{ static_url("images/like-this.svg") }}" alt="">
+                                    <span class="btn--text">Like</span>
                                 </div>
                             </button>
+                            <button type="button" class="unlike-button {% if can_unfavor %}is-active{% end %}" title="Unlike This" aria-label="Unlike This">
+                                <img src="{{ static_url("images/liked-this.svg") }}" height="22" width="25" alt="Unlike This">
+                            </button>
                         </form>
+                    </div>
+                {% end %}
+                {% if can_save and not site_is_readonly %}
+                    <div class="save-this">
+                        {% if has_saved %}
+                            <a href="/p/{{has_saved.share_key}}" title="Already saved!"><img height="22" width="29" src="{{ static_url("images/saved-this.svg") }}" alt="Saved"></a>
+                        {% else %}
+                            <form method="post" action="/p/{{sharedfile.share_key}}/save">
+                                <input type="hidden" name="shake_id" class="shake-id-input" value="">
+                                <input type="hidden" name="json" value="1">
+                                {{ xsrf_form_html() }}
+                                <button type="button" class="save-this-link {% if has_multiple_shakes %}save-this-link-multiple{% end %} btn btn-warning btn-small">
+                                    <div class="btn--content">
+                                        <img class="btn--icon" src="{{ static_url("images/save-this.svg") }}" alt="">
+                                        <span class="btn--text">Save</span>
+                                        {% if has_multiple_shakes %}
+                                            <span class="btn--caret">▼</span>
+                                        {% end %}
+                                    </div>
+                                </button>
+                            </form>
+                        {% end %}
+                    </div>
+                {% end %}
+            </div>
+            {% if sharedfile.original() or sharedfile.original_id > 0 %}
+                <div class="originally-posted-by">
+                    {% set original_user = sharedfile.original_user() %}
+                    originally
+                    {% if original_user %}
+                    <a class="the-post" href="/p/{{sharedfile.original().share_key}}">posted</a> by
+                    <a class="avatar--link" href="/user/{{original_user.name}}">
+                        <img class="avatar--img" valign="bottom" width="20" height="20" src="{{original_user.profile_image_url()}}" alt="" loading="lazy" decoding="async">
+                    </a>
+                    <a class="user-name" href="/user/{{original_user.name}}">{{ original_user.name }}</a>
+                    {% else %}
+                    posted by someone else
                     {% end %}
                 </div>
             {% end %}
-        </div>
-        {% if sharedfile.original() or sharedfile.original_id > 0 %}
-            <div class="originally-posted-by">
-                {% set original_user = sharedfile.original_user() %}
-                originally
-                {% if original_user %}
-                <a class="the-post" href="/p/{{sharedfile.original().share_key}}">posted</a> by
-                <a class="avatar--link" href="/user/{{original_user.name}}">
-                    <img class="avatar--img" valign="bottom" width="20" height="20" src="{{original_user.profile_image_url()}}" alt="" loading="lazy" decoding="async">
-                </a>
-                <a class="user-name" href="/user/{{original_user.name}}">{{ original_user.name }}</a>
-                {% else %}
-                posted by someone else
+            <div class="inline-meta">
+                <span class="created-at">
+                    <a href="/p/{{sharedfile.share_key}}">
+                        <time datetime="{{sharedfile.created_at}}" title="{{sharedfile.feed_date()}}">{{sharedfile.pretty_created_at()}}</time>
+                    </a>
+                </span>
+                {% if list_view %}
+                    <ul class="stats">
+                        {% set view_count = sharedfile.livish_view_count() %}
+                        <li class="views">{{view_count }} View{% if view_count != 1 %}s{% end %}</li>
+                        <li class="saves"><a href="/p/{{sharedfile.share_key}}" id="save-count-amount-{{sharedfile.share_key}}">{{sharedfile.save_count }}</a></li>
+                        <li class="likes"><a href="/p/{{sharedfile.share_key}}" id="like-count-amount-{{sharedfile.share_key}}">{{sharedfile.like_count }}</a></li>
+                        <li class="comments {% if len(comments) > 0 %}selected{% end %}"><a href="/p/{{sharedfile.share_key}}#comments">{{sharedfile.comment_count() }}</a></li>
+                    </ul>
                 {% end %}
             </div>
-        {% end %}
-        <div class="inline-meta">
-            <span class="created-at">
-                <a href="/p/{{sharedfile.share_key}}">
-                    <time datetime="{{sharedfile.created_at}}" title="{{sharedfile.feed_date()}}">{{sharedfile.pretty_created_at()}}</time>
-                </a>
-            </span>
             {% if list_view %}
-                <ul class="stats">
-                    {% set view_count = sharedfile.livish_view_count() %}
-                    <li class="views">{{view_count }} View{% if view_count != 1 %}s{% end %}</li>
-                    <li class="saves"><a href="/p/{{sharedfile.share_key}}" id="save-count-amount-{{sharedfile.share_key}}">{{sharedfile.save_count }}</a></li>
-                    <li class="likes"><a href="/p/{{sharedfile.share_key}}" id="like-count-amount-{{sharedfile.share_key}}">{{sharedfile.like_count }}</a></li>
-                    <li class="comments {% if len(comments) > 0 %}selected{% end %}"><a href="/p/{{sharedfile.share_key}}#comments">{{sharedfile.comment_count() }}</a></li>
-                </ul>
+                {% if len(comments) > 0 %}
+                    <div class="inline-details">
+                        {% include '../image/quick-comments.html' %}
+                    </div>
+                {% else %}
+                    <div class="inline-details" style="display:none;"></div>
+                {% end %}
             {% end %}
+            <div class="clear"><!-- --></div>
         </div>
-        {% if list_view %}
-            {% if len(comments) > 0 %}
-                <div class="inline-details">
-                    {% include '../image/quick-comments.html' %}
-                </div>
-            {% else %}
-                <div class="inline-details" style="display:none;"></div>
-            {% end %}
-        {% end %}
-        <div class="clear"><!-- --></div>
     </div>
-</div>
+</article>