diff --git a/onlylegs/templates/layout.html b/onlylegs/templates/base.html
similarity index 58%
rename from onlylegs/templates/layout.html
rename to onlylegs/templates/base.html
index 890c792..59c3b06 100644
--- a/onlylegs/templates/layout.html
+++ b/onlylegs/templates/base.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <title>{{ config.WEBSITE_CONF.name }}</title>
 
-    <meta charset="UTF-8">
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="{{ config.WEBSITE_CONF.motto }}"/>
     <meta name="author" content="{{ config.WEBSITE_CONF.author }}"/>
 
@@ -16,8 +16,6 @@
     <meta name="twitter:title" content="{{ config.WEBSITE_CONF.name }}"/>
     <meta name="twitter:description" content="{{ config.WEBSITE_CONF.motto }}"/>
 
-    <link rel="manifest" href="static/manifest.json"/>
-
     <!-- phosphor icons!!! -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     
@@ -32,26 +30,15 @@
         type="image/svg+xml"
         media="(prefers-color-scheme: dark)"/>
 
-    <link
-        rel="prefetch"
-        href="{{url_for('static', filename='fonts/font.css')}}"
-        type="stylesheet"/>
-
-    {% assets "scripts" %}
-        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-    {% endassets %}
-
-    {% assets "styles" %}
-        <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer>
-    {% endassets %}
-    
+    <link rel="manifest" href="static/manifest.json"/>
+    <link rel="prefetch" href="{{url_for('static', filename='fonts/font.css')}}" type="stylesheet"/>
+    {% assets "scripts" %} <script type="text/javascript" src="{{ ASSET_URL }}"></script> {% endassets %}
+    {% assets "styles" %} <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer> {% endassets %}
     {% block head %}{% endblock %}
 </head>
 <body>
     <div class="notifications"></div>
-
     <button class="top-of-page" aria-label="Jump to top of page"><i class="ph ph-arrow-up"></i></button>
-    {% if request.path == "/" %}<button class="info-button" aria-label="Show info on gallery"><i class="ph ph-question"></i></button>{% endif %}
 
     <div class="pop-up">
         <span class="pop-up__click-off" onclick="popupDissmiss()"></span>
@@ -61,63 +48,56 @@
         </div>
     </div>
 
-    <div class="wrapper">
+    <nav>
+        <a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page">
+            <i class="ph-fill ph-images-square"></i>
+        </a>
 
-        <div class="navigation">
-            <!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
+        <a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups">
+            <i class="ph-fill ph-package"></i>
+        </a>
 
-            <a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page">
-                <i class="ph-fill ph-images-square"></i>
-                <span class="tool-tip">Home<i class="ph-fill ph-caret-left"></i></span>
+        {% if current_user.is_authenticated %}
+            <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo">
+                <i class="ph-fill ph-upload"></i>
+            </button>
+        {% endif %}
+
+        <span class="navigation-spacer"></span>
+
+        {% if current_user.is_authenticated %}
+            <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page">
+                {% if current_user.picture %}
+                    <span class="nav-pfp">
+                        <picture>
+                            <source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
+                            <source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
+                            <img
+                                src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
+                                alt="Profile picture"
+                                onload="imgFade(this)"
+                                style="opacity:0;"
+                            />
+                        </picture>
+                    </span>
+                {% else %}
+                    <i class="ph-fill ph-folder-simple-user"></i>
+                {% endif %}
             </a>
 
-            <a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups">
-                <i class="ph-fill ph-package"></i>
-                <span class="tool-tip">Groups<i class="ph-fill ph-caret-left"></i></span>
+            <a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings">
+                <i class="ph-fill ph-gear-fine"></i>
             </a>
+        {% else %}
+            <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login">
+                <i class="ph-fill ph-sign-in"></i>
+            </button>
+        {% endif %}
+    </nav>
 
-            {% if current_user.is_authenticated %}
-                <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo">
-                    <i class="ph-fill ph-upload"></i>
-                    <span class="tool-tip">Upload<i class="ph-fill ph-caret-left"></i></span>
-                </button>
-            {% endif %}
-
-            <span class="navigation-spacer"></span>
-
-            {% if current_user.is_authenticated %}
-                <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page">
-                    {% if current_user.picture %}
-                        <span class="nav-pfp">
-                            <picture>
-                                <source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
-                                <source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
-                                <img
-                                    src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
-                                    alt="Profile picture"
-                                    onload="imgFade(this)"
-                                    style="opacity:0;"
-                                />
-                            </picture>
-                        </span>
-                    {% else %}
-                        <i class="ph-fill ph-folder-simple-user"></i>
-                    {% endif %}
-                    <span class="tool-tip">Profile<i class="ph-fill ph-caret-left"></i></span>
-                </a>
-            
-                <a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings">
-                    <i class="ph-fill ph-gear-fine"></i>
-                    <span class="tool-tip">Settings<i class="ph-fill ph-caret-left"></i></span>
-                </a>
-            {% else %}
-                <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login">
-                    <i class="ph-fill ph-sign-in"></i>
-                    <span class="tool-tip">Login<i class="ph-fill ph-caret-left"></i></span>
-                </button>
-            {% endif %}
-        </div>
+    <header>{% block header %}{% endblock %}</header>
 
+    <main>
         {% if current_user.is_authenticated %}
             <div class="upload-panel">
                 <span class="click-off" onclick="closeUploadTab()"></span>
@@ -142,20 +122,8 @@
             </div>
         {% endif %}
 
-        <div class="content">
-            {% block content %}
-            {% endblock %}
-        </div>
-    </div>
-
-    <script type="text/javascript">
-        // Show notifications on page load
-        {% for message in get_flashed_messages() %}
-            addNotification('{{ message[0] }}', {{ message[1] }});
-        {% endfor %}
-    </script>
-
-    {% block script %}{% endblock %}
+        {% block content %}{% endblock %}
+    </main>
 
     <script type="text/javascript">
         keepSquare();
@@ -204,10 +172,8 @@
             }
         }
 
-        window.onresize = () => {
-            keepSquare();
-            makeGrid();
-        }
+        window.onload = () => { keepSquare(); }
+        window.onresize = () => { keepSquare(); }
         window.onscroll = () => {
             if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
                 topOfPage.classList.add('show');
@@ -223,6 +189,12 @@
                 }
             }
         }
+
+        {% for message in get_flashed_messages() %}
+            addNotification('{{ message[0] }}', {{ message[1] }});
+        {% endfor %}
     </script>
+
+    {% block script %}{% endblock %}
 </body>
 </html>
\ No newline at end of file
diff --git a/onlylegs/templates/error.html b/onlylegs/templates/error.html
index 9d76c79..7e9c20c 100644
--- a/onlylegs/templates/error.html
+++ b/onlylegs/templates/error.html
@@ -1,7 +1,7 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 {% block content %}
-    <span class="error-page">
+    <div class="error-page">
         <h1>{{error}}</h1>
         <p>{{msg}}</p>
-    </span>
+    </div>
 {% endblock %}
diff --git a/onlylegs/templates/group.html b/onlylegs/templates/group.html
index c7c3827..211c1b5 100644
--- a/onlylegs/templates/group.html
+++ b/onlylegs/templates/group.html
@@ -1,5 +1,7 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
+{% from 'macros/image.html' import gallery_item %}
 {% block nav_groups %}selected{% endblock %}
+
 {% block head %}
     {% if images %}
         <meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}"/>
@@ -170,16 +172,21 @@
 
     <style>
         {% if images %}
-            .banner::after {
-                box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb{{ images.0.colours.0 }};
-            }
-            .banner-content p {
+            :root { --bg-100: {{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }} }
+
+            body {
+                background: rgb{{ images.0.colours.0 }} !important;
                 color: {{ text_colour }} !important;
             }
-            .banner-content h1 {
-                color: {{ text_colour }} !important;
+            main {
+                background: rgba(var(--white), 0.6) !important;
             }
 
+            .banner-header,
+            .banner-info,
+            .banner-subtitle {
+                color: {{ text_colour }} !important;
+            }
             .banner-content .link {
                 background-color: {{ text_colour }} !important;
                 color: rgb{{ images.0.colours.0 }} !important;
@@ -189,28 +196,22 @@
                 color: {{ text_colour }} !important;
             }
 
-            .banner-filter {
-                background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
+
+            @media (min-width: 800px) {
+                .banner-filter {
+                    background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
+                }
             }
             @media (max-width: 800px) {
                 .banner-filter {
-                    background: linear-gradient(180deg, rgba{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.5)) !important;
+                    background: linear-gradient(180deg, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.4), rgba({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}, 0.3)) !important;
                 }
             }
-
-            .navigation {
-                background-color: rgb{{ images.0.colours.0 }} !important;
-            }
-            .navigation-item > i {
-                color: {{ text_colour }} !important;
-            }
-            .navigation-item.selected::before {
-                background-color: {{ text_colour }} !important;
-            }
         {% endif %}
     </style>
 {% endblock %}
-{% block content %}
+
+{% block header %}
     {% if images %}
         <div class="banner">
             <picture>
@@ -219,9 +220,7 @@
                 <img
                     src="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}?r=prev"
                     alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
-                    onload="imgFade(this)"
-                    style="opacity:0;"
-                    fetchpriority="low"
+                    onload="imgFade(this)" style="opacity:0;"
                 />
             </picture>
             <span class="banner-filter"></span>
@@ -261,27 +260,12 @@
             </div>
         </div>
     {% endif %}
+{% endblock %}
 
+{% block content %}
     {% if images %}
         <div class="gallery-grid">
-            {% for image in images %}
-                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('group.group_post', group_id=group.id, image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
-                    <div class="image-filter">
-                        <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
-                    </div>
-                    <picture>
-                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
-                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
-                        <img
-                            src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
-                            alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
-                            onload="imgFade(this)"
-                            style="opacity:0;"
-                            fetchpriority="low"
-                        />
-                    </picture>
-                </a>
-            {% endfor %}
+            {% for image in images %}{{ gallery_item(image) }}{% endfor %}
         </div>
     {% else %}
         <div class="big-text">
diff --git a/onlylegs/templates/image.html b/onlylegs/templates/image.html
index e8b0f8b..b747708 100644
--- a/onlylegs/templates/image.html
+++ b/onlylegs/templates/image.html
@@ -1,6 +1,7 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 {% block page_index %}
 {% if return_page %}?page={{ return_page }}{% endif %}{% endblock %}
+
 {% block head %}
     <meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}"/>
     <meta name="twitter:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}">
@@ -10,14 +11,16 @@
     <script type="text/javascript">
         function fullscreen() {
             let info = document.querySelector('.info-container');
-            let wrapper = document.querySelector('.image-grid');
+            let image = document.querySelector('.image-container');
 
             if (info.classList.contains('collapsed')) {
                 info.classList.remove('collapsed');
-                wrapper.classList.remove('collapsed');
+                image.classList.remove('collapsed');
+                document.cookie = "image-info=0"
             } else {
                 info.classList.add('collapsed');
-                wrapper.classList.add('collapsed');
+                image.classList.add('collapsed');
+                document.cookie = "image-info=1"
             }
         }
 
@@ -68,45 +71,17 @@
     </script>
 
     <style>
-        .background span {
+        .background::after {
             background-image: linear-gradient(to top, rgba({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }}, 0.8),
                                                       rgba({{ image.colours.1.0 }}, {{ image.colours.1.1 }}, {{ image.colours.1.2 }}, 0.2));
         }
     </style>
 {% endblock %}
-{% block content %}
-    <div class="background">
-        <picture>
-            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
-            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
-            <img
-                src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
-                alt="{{ image.alt }}"
-                onload="imgFade(this)"
-                style="opacity:0;"
-            />
-        </picture>
-        <span></span>
-    </div>
-    <div class="image-grid">
-        <div class="image-block">
-            <div class="image-container">
-                <picture>
-                    <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
-                    <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
-                    <img
-                        src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
-                        alt="{{ image.alt }}"
-                        onload="imgFade(this)"
-                        style="opacity:0;"
-                        onerror="this.src='{{ url_for('static', filename='error.png')}}'"
-                        {% if "File" in image.exif %}
-                            width="{{ image.exif.File.Width.raw }}"
-                            height="{{ image.exif.File.Height.raw }}"
-                        {% endif %}
-                    />
-                </picture>
-            </div>
+
+{% block header %}
+    <div class="banner-small">
+        <div class="banner-content">
+            <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
             <div class="pill-row">
                 {% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}
                 <div>
@@ -123,61 +98,78 @@
                 {% if prev_url %}<div><a class="pill-item" href="{{ prev_url }}"><i class="ph ph-arrow-right"></i></a></div>{% endif %}
             </div>
         </div>
-        <div class="info-container">
-            <div class="info-tab">
-                <div class="info-header">
-                    <i class="ph ph-info"></i>
-                    <h2>Info</h2>
-                    <button class="collapse-indicator"><i class="ph ph-caret-down"></i></button>
-                </div>
-                <div class="info-table">
-                    <table>
-                        <tr>
-                            <td>Author</td>
-                            <td>
-                                <img
-                                    src="{{ url_for('media_api.media', path='pfp/' + image.author.picture) }}"
-                                    alt="Profile Picture"
-                                    class="pfp"
-                                    onload="imgFade(this)"
-                                    style="opacity: 0;"
-                                />
-                                <a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>Upload date</td>
-                            <td><span class="time">{{ image.created_at }}</span></td>
-                        </tr>
-                        {% if image.description %}
-                            <tr>
-                                <td>Description</td>
-                                <td>{{ image.description }}</td>
-                            </tr>
-                        {% endif %}
-                    </table>
-                    <div class="img-colours">
-                        {% for col in image.colours %}
-                            <button style="background-color: rgb{{ col }}" onclick="copyToClipboard('rgb{{ col }}')">
-                                <i class="ph-fill ph-paint-bucket" style="{{ col|colour_contrast }}"></i>
-                            </button>
-                        {% endfor %}
-                    </div>
-                    {% if image.groups %}
-                        <div class="img-groups">
-                            {% for group in image.groups %}
-                                <a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon">
-                                    <i class="ph ph-package"></i>{{ group['name'] }}
-                                </a>
-                            {% endfor %}
-                        </div>
-                    {% endif %}
-                </div>
+    </div>
+{% endblock %}
+
+{% block content %}
+    <div class="background">
+        <picture>
+            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
+            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
+            <img src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev" alt="{{ image.alt }}" onload="imgFade(this)" style="opacity:0;"/>
+        </picture>
+    </div>
+
+    <div class="image-container {% if close_tab %}collapsed{% endif %}">
+        <picture>
+            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
+            <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
+            <img
+                src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
+                alt="{{ image.alt }}"
+                onload="imgFade(this)"
+                style="opacity:0;"
+                {% if "File" in image.exif %}
+                    width="{{ image.exif.File.Width.raw }}"
+                    height="{{ image.exif.File.Height.raw }}"
+                {% endif %}
+            />
+        </picture>
+    </div>
+
+    <div class="info-container {% if close_tab %}collapsed{% endif %}">
+        <details open>
+            <summary>
+                <i class="ph ph-info"></i><h2>Info</h2><span style="width: 100%"></span>
+                <i class="ph ph-caret-down collapse-indicator"></i>
+            </summary>
+
+            <table>
+                <tr>
+                    <td>Author</td>
+                    <td>
+                        <img src="{{ url_for('media_api.media', path='pfp/' + image.author.picture) }}" alt="Profile Picture" class="pfp" onload="imgFade(this)" style="opacity: 0;"/>
+                        <a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Upload date</td>
+                    <td><span class="time">{{ image.created_at }}</span></td>
+                </tr>
+                {% if image.description %}
+                    <tr>
+                        <td>Description</td>
+                        <td>{{ image.description }}</td>
+                    </tr>
+                {% endif %}
+            </table>
+            <div class="img-colours">
+                {% for col in image.colours %}
+                    <button style="background-color: rgb{{ col }}" onclick="copyToClipboard('rgb{{ col }}')"><i class="ph-fill ph-paint-bucket" style="{{ col|colour_contrast }}"></i></button>
+                {% endfor %}
             </div>
-            {% for tag in image.exif %}
-                <div class="info-tab">
-                    <div class="info-header">
-                        {% if tag == 'Photographer' %}
+            {% if image.groups %}
+                <div class="img-groups">
+                    {% for group in image.groups %}
+                        <a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon"><i class="ph ph-package"></i>{{ group['name'] }}</a>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </details>
+        {% for tag in image.exif %}
+            <details open>
+                <summary>
+                    {% if tag == 'Photographer' %}
                             <i class="ph ph-person"></i><h2>Photographer</h2>
                         {% elif tag == 'Camera' %}
                             <i class="ph ph-camera"></i><h2>Camera</h2>
@@ -188,63 +180,55 @@
                         {% else %}
                             <i class="ph ph-file-image"></i><h2>{{ tag }}</h2>
                         {% endif %}
-                        <button class="collapse-indicator"><i class="ph ph-caret-down"></i></button>
-                    </div>
-                    <div class="info-table">
-                        <table>
-                            {% for subtag in image.exif[tag] %}
-                                <tr>
-                                    <td>{{ subtag }}</td>
-                                    {% if image.exif[tag][subtag]['formatted'] %}
-                                        {% if image.exif[tag][subtag]['type'] == 'date' %}
-                                            <td><span class="time">{{ image.exif[tag][subtag]['formatted'] }}</span></td>
-                                        {% else %}
-                                            <td>{{ image.exif[tag][subtag]['formatted'] }}</td>
-                                        {% endif %}
-                                    {% elif image.exif[tag][subtag]['raw'] %}
-                                        <td>{{ image.exif[tag][subtag]['raw'] }}</td>
-                                    {% else %}
-                                        <td class="empty-table">Oops, an error</td>
-                                    {% endif %}
-                                </tr>
-                            {% endfor %}
-                        </table>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
+                        <span style="width: 100%"></span>
+                        <i class="ph ph-caret-down collapse-indicator"></i>
+                </summary>
+                <table>
+                    {% for subtag in image.exif[tag] %}
+                        <tr>
+                            <td>{{ subtag }}</td>
+                            {% if image.exif[tag][subtag]['formatted'] %}
+                                {% if image.exif[tag][subtag]['type'] == 'date' %}
+                                    <td><span class="time">{{ image.exif[tag][subtag]['formatted'] }}</span></td>
+                                {% else %}
+                                    <td>{{ image.exif[tag][subtag]['formatted'] }}</td>
+                                {% endif %}
+                            {% elif image.exif[tag][subtag]['raw'] %}
+                                <td>{{ image.exif[tag][subtag]['raw'] }}</td>
+                            {% else %}
+                                <td class="empty-table">Oops, an error</td>
+                            {% endif %}
+                        </tr>
+                    {% endfor %}
+                </table>
+            </details>
+        {% endfor %}
     </div>
 {% endblock %}
 
 {% block script %}
     <script type="text/javascript">
-        let infoTab = document.querySelectorAll('.info-tab');
-
-        for (let i = 0; i < infoTab.length; i++) {
-            const tab = infoTab[i];
-
-            tab.querySelector('.collapse-indicator').addEventListener('click', function() {
-                tab.classList.toggle('collapsed');
-            });
-            
-            /*
-            const tabHeader = tab.querySelector('.info-header');
-            const tabContent = tab.querySelector('.info-table');
-
-            const tabHeight = tabHeader.offsetHeight + tabContent.offsetHeight;
-
-            tab.style.height = tabHeight + 'px';
-
-            tab.querySelector('.collapse-indicator').addEventListener('click', function() {
-                if (tab.classList.contains('collapsed')) {
-                    tab.style.height = tabHeight + 'px';
-                    tab.classList.remove('collapsed');
-                } else {
-                    tab.style.height = tabHeader.offsetHeight + 'px';
-                    tab.classList.add('collapsed');
+        function getCookie(cname) {
+            let name = cname + "=";
+            let ca = document.cookie.split(';');
+            for(let i = 0; i < ca.length; i++) {
+                let c = ca[i];
+                while (c.charAt(0) == ' ') {
+                    c = c.substring(1);
                 }
-            });
-            */
+                if (c.indexOf(name) == 0) {
+                    return c.substring(name.length, c.length);
+                }
+            }
+            return "";
         }
+
+        /*
+        if (getCookie("image-info")) {
+            document.querySelector('.info-container').classList.add('collapsed');
+            document.querySelector('.image-container').classList.add('collapsed');
+        }
+        */
+         */
     </script>
 {% endblock %}
\ No newline at end of file
diff --git a/onlylegs/templates/index.html b/onlylegs/templates/index.html
index e85cafb..eead3a8 100644
--- a/onlylegs/templates/index.html
+++ b/onlylegs/templates/index.html
@@ -1,16 +1,17 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
+{% from 'macros/image.html' import gallery_item %}
 {% block head %}
     <meta property="og:image" content="{{ url_for('static', filename='icon.png') }}"/>
     <meta name="twitter:image" content="{{ url_for('static', filename='icon.png') }}"/>
     <meta name="twitter:card" content="summary"/>
 {% endblock %}
-{% block nav_home %}selected{% endblock %}
-{% block content %}
+
+{% block header %}
     <div class="banner-small">
         <div class="banner-content">
             <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
-            {% if total_images == 0 %}
-                <p class="banner-info">0 images D:</p>
+            {% if not total_images %}
+                <p class="banner-info">0 images!</p>
             {% elif total_images == 69 %}
                 <p class="banner-info">{{ total_images }} images, nice</p>
             {% else %}
@@ -20,39 +21,33 @@
             {% if pages > 1 %}
                 <div class="pill-row">
                     <div>
-                        {% if pages > 4 %}<a class="pill-item" href="{{ url_for('gallery.index') }}"><i class="ph ph-arrow-line-left"></i></a>{% endif %}
-                        <a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page-1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}"><i class="ph ph-arrow-left"></i></a>
+                        {% if pages > 4 %}
+                            <a class="pill-item" href="{{ url_for('gallery.index') }}"><i class="ph ph-caret-double-left"></i></a>
+                        {% else %}
+                            <button class="pill-item disabled"><i class="ph ph-caret-double-left"></i></button>
+                        {% endif %}
+                        <a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page - 1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}"><i class="ph ph-caret-left"></i></a>
                     </div>
                     <span class="pill-text">{{ page }} / {{ pages }}</span>
                     <div>
-                        <a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page+1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}"><i class="ph ph-arrow-right"></i></a>
-                        {% if pages > 4 %}<a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}"><i class="ph ph-arrow-line-right"></i></a>{% endif %}
+                        <a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page + 1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}"><i class="ph ph-caret-right"></i></a>
+                        {% if pages > 4 %}
+                            <a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}"><i class="ph ph-caret-double-right"></i></a>
+                        {% else %}
+                            <button class="pill-item disabled"><i class="ph ph-caret-double-right"></i></button>
+                        {% endif %}
                     </div>
                 </div>
             {% endif %}
         </div>
     </div>
+{% endblock %}
 
+{% block nav_home %}selected{% endblock %}
+{% block content %}
     {% if images %}
-        <div class="gallery-grid" style="position: relative;">
-            {% for image in images %}
-                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}; position: absolute; margin: 0;">
-                    <div class="image-filter">
-                        <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
-                    </div>
-                    <picture>
-                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
-                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
-                        <img
-                            src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
-                            alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
-                            onload="imgFade(this)"
-                            style="opacity:0;"
-                            fetchpriority="low"
-                        />
-                    </picture>
-                </a>
-            {% endfor %}
+        <div class="gallery-grid">
+            {% for image in images %}{{ gallery_item(image) }}{% endfor %}
         </div>
     {% else %}
         <div class="big-text">
diff --git a/onlylegs/templates/list.html b/onlylegs/templates/list.html
index 7ada8f9..8d8eb2e 100644
--- a/onlylegs/templates/list.html
+++ b/onlylegs/templates/list.html
@@ -1,5 +1,6 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 {% block nav_groups %}selected{% endblock %}
+
 {% block head %}
     {% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
 
@@ -92,7 +93,8 @@
         </script>
     {% endif %}
 {% endblock %}
-{% block content %}
+
+{% block header %}
     <div class="banner-small">
         <div class="banner-content">
             <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
@@ -112,11 +114,18 @@
             {% endif %}
         </div>
     </div>
+{% endblock %}
 
+{% block content %}
     {% if groups %}
         <div class="gallery-grid">
             {% for group in groups %}
-                <a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}" {% if group.images|length > 0 %} style="background-color: rgba{{ group.images.0.colours.0 }};" {% endif %}>
+                <a
+                        class="group-item square"
+                        id="group-{{ group.id }}"
+                        href="{{ url_for('group.group', group_id=group.id) }}"
+                        {% if group.images|length > 0 %} style="background-color: rgba{{ group.images.0.colours.0 }};"{% endif %}
+                >
                     <div class="image-filter">
                         <p class="image-subtitle">By {{ group.author.username }}</p>
                         <p class="image-title">{{ group.name }}</p>
diff --git a/onlylegs/templates/profile.html b/onlylegs/templates/profile.html
index 9dd8dff..4fbf9ca 100644
--- a/onlylegs/templates/profile.html
+++ b/onlylegs/templates/profile.html
@@ -1,4 +1,7 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
+{% from 'macros/image.html' import gallery_item %}
+{% block nav_profile %}{% if user.id == current_user.id %}selected{% endif %}{% endblock %}
+
 {% block head %}
     {% if user.picture %}
         <meta property="og:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}"/>
@@ -22,8 +25,8 @@
         }
     </style>
 {% endblock %}
-{% block nav_profile %}{% if user.id == current_user.id %}selected{% endif %}{% endblock %}
-{% block content %}
+
+{% block header %}
     <div class="banner">
         {% if user.banner %}
             <img src="{{ url_for('static', filename='icon.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
@@ -67,28 +70,13 @@
             </div>
         </div>
     </div>
+{% endblock %}
 
+{% block content %}
     {% if images %}
         <h1 class="gallery-header">Images</h1>
         <div class="gallery-grid">
-            {% for image in images %}
-                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
-                    <div class="image-filter">
-                        <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
-                    </div>
-                    <picture>
-                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
-                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
-                        <img
-                            src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
-                            alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
-                            onload="imgFade(this)"
-                            style="opacity:0;"
-                            fetchpriority="low"
-                        />
-                    </picture>
-                </a>
-            {% endfor %}
+            {% for image in images %}{{ gallery_item(image) }}{% endfor %}
         </div>
     {% else %}
         <div class="big-text">
@@ -97,4 +85,3 @@
         </div>
     {% endif %}
 {% endblock %}
-
diff --git a/onlylegs/templates/settings.html b/onlylegs/templates/settings.html
index 271911b..c68695a 100644
--- a/onlylegs/templates/settings.html
+++ b/onlylegs/templates/settings.html
@@ -1,7 +1,7 @@
-{% extends 'layout.html' %}
-
+{% extends 'base.html' %}
 {% block nav_settings %}selected{% endblock %}
-{% block content %}
+
+{% block header %}
     <div class="banner-small">
         <div class="banner-content">
             <h1 class="banner-header">Settings</h1>
@@ -13,7 +13,9 @@
             </div>
         </div>
     </div>
+{% endblock %}
 
+{% block content %}
     <div class="info-tab" id="profileSettings" style="margin: 0.5rem 0.5rem 0 0.5rem">
         <div class="info-header">
             <i class="ph ph-info"></i>