From 56c82513ba812a715aa10e5bd37439d9166af1fd Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 8 Mar 2023 13:36:35 +0000
Subject: [PATCH] Fixing inconsistent sass files Removed useless styling Fixed
 date

---
 gallery/__init__.py                           |   2 +-
 gallery/routing.py                            |   7 +-
 gallery/templates/error.html                  |   7 +-
 gallery/templates/group.html                  |  16 +-
 gallery/templates/image.html                  | 323 ++++++++--------
 gallery/templates/index.html                  |  21 +-
 gallery/templates/layout.html                 |  41 +-
 gallery/templates/profile.html                |  27 +-
 .../templates/settings/settings_layout.html   |  11 +-
 gallery/themes/default/components/banner.sass |  96 +++++
 .../{ => components}/buttons/jumpUp.sass      |   0
 .../{ => components}/buttons/pill.sass        |   0
 .../elements}/notification.sass               |   0
 .../{ui => components/elements}/pop-up.sass   |   0
 .../elements}/upload-panel.sass               |   0
 .../themes/default/components/gallery.sass    | 112 ++++++
 .../image-view}/background.sass               |   8 +-
 .../components/image-view/fullscreen.sass     |  51 +++
 .../default/components/image-view/image.sass  |  21 ++
 .../components/image-view/info-tab.sass       | 185 +++++++++
 .../default/components/image-view/view.sass   |  66 ++++
 .../{ui => components}/navigation.sass        |   0
 gallery/themes/default/style.sass             |  70 +++-
 gallery/themes/default/ui/banner.sass         | 104 ------
 gallery/themes/default/ui/content.sass        |  16 -
 gallery/themes/default/ui/gallery.sass        | 115 ------
 gallery/themes/default/ui/wrappers/error.sass |  35 --
 gallery/themes/default/ui/wrappers/image.sass | 351 ------------------
 gallery/themes/default/ui/wrappers/index.sass |  12 -
 .../themes/default/ui/wrappers/settings.sass  | 115 ------
 pyproject.toml                                |   2 +-
 31 files changed, 805 insertions(+), 1009 deletions(-)
 create mode 100644 gallery/themes/default/components/banner.sass
 rename gallery/themes/default/{ => components}/buttons/jumpUp.sass (100%)
 rename gallery/themes/default/{ => components}/buttons/pill.sass (100%)
 rename gallery/themes/default/{ui => components/elements}/notification.sass (100%)
 rename gallery/themes/default/{ui => components/elements}/pop-up.sass (100%)
 rename gallery/themes/default/{ui => components/elements}/upload-panel.sass (100%)
 create mode 100644 gallery/themes/default/components/gallery.sass
 rename gallery/themes/default/{ui => components/image-view}/background.sass (91%)
 create mode 100644 gallery/themes/default/components/image-view/fullscreen.sass
 create mode 100644 gallery/themes/default/components/image-view/image.sass
 create mode 100644 gallery/themes/default/components/image-view/info-tab.sass
 create mode 100644 gallery/themes/default/components/image-view/view.sass
 rename gallery/themes/default/{ui => components}/navigation.sass (100%)
 delete mode 100644 gallery/themes/default/ui/banner.sass
 delete mode 100644 gallery/themes/default/ui/content.sass
 delete mode 100644 gallery/themes/default/ui/gallery.sass
 delete mode 100644 gallery/themes/default/ui/wrappers/error.sass
 delete mode 100644 gallery/themes/default/ui/wrappers/image.sass
 delete mode 100644 gallery/themes/default/ui/wrappers/index.sass
 delete mode 100644 gallery/themes/default/ui/wrappers/settings.sass

diff --git a/gallery/__init__.py b/gallery/__init__.py
index ccb3cec..501afd9 100644
--- a/gallery/__init__.py
+++ b/gallery/__init__.py
@@ -5,7 +5,7 @@
 | |_| | | | | | |_| | |__|  __/ (_| \__ \ 
  \___/|_| |_|_|\__, |_____\___|\__, |___/
                |___/           |___/
-Created by Fluffy Bean - Version 23.03.04
+Created by Fluffy Bean - Version 23.03.09
 """
 
 # Import system modules
diff --git a/gallery/routing.py b/gallery/routing.py
index 02b9f11..693ac17 100644
--- a/gallery/routing.py
+++ b/gallery/routing.py
@@ -41,12 +41,13 @@ def image(image_id):
     Image view, shows the image and its metadata
     """
     img = db_session.query(db.Posts).filter(db.Posts.id == image_id).first()
-    author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
-    img.author_username = author
-    
+
     if img is None:
         abort(404, 'Image not found')
 
+    author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
+    img.author_username = author
+
     return render_template('image.html', image=img, exif=img.image_exif)
 
 @blueprint.route('/group', methods=['GET', 'POST'])
diff --git a/gallery/templates/error.html b/gallery/templates/error.html
index 0d63473..72b570e 100644
--- a/gallery/templates/error.html
+++ b/gallery/templates/error.html
@@ -1,7 +1,8 @@
 {% extends 'layout.html' %}
 
-{% block wrapper_class %}error-wrapper{% endblock %}
 {% block content %}
-    <h1>{{error}}</h1>
-    <p>{{msg}}</p>
+    <span class="error-page">
+        <h1>{{error}}</h1>
+        <p>{{msg}}</p>
+    </span>
 {% endblock %}
\ No newline at end of file
diff --git a/gallery/templates/group.html b/gallery/templates/group.html
index 3503fd1..af7f60c 100644
--- a/gallery/templates/group.html
+++ b/gallery/templates/group.html
@@ -1,29 +1,27 @@
 {% extends 'layout.html' %}
 
-{% block header %}
+{% block nav_groups %}navigation-item__selected{% endblock %}
+
+{% block content %}
     <div class="banner">
         <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
         <span></span>
 
-        <div class="banner__content">
+        <div class="banner-content">
             {% block banner_subtitle%}{% endblock %}
             <h1>Groups</h1>
             <p>gwa gwa</p>
         </div>
     </div>
-{% endblock %}
-{% block nav_groups %}navigation-item__selected{% endblock %}
 
-{% block content %}
-    <div class="gallery">
+    <div class="gallery-grid">
         {% for group in groups %}
-            <a id="group-{{ group['id'] }}" class="gallery__item" href="/group/{{ group['id'] }}">
-                <span class="gallery__item-info">
+            <a id="group-{{ group['id'] }}" class="gallery-item" href="/group/{{ group['id'] }}">
+                <span>
                     <p>{{ group['id'] }}</p>
                     <h2><span class="time">{{ group['created_at'] }}</span></h2>
                 </span>
                 <img
-                    class="gallery__item-group"
                     data-src="{{ group['file_name'] }}"
                     onload="imgFade(this)"
                     style="opacity:0;"
diff --git a/gallery/templates/image.html b/gallery/templates/image.html
index d218f76..3649348 100644
--- a/gallery/templates/image.html
+++ b/gallery/templates/image.html
@@ -1,200 +1,181 @@
 {% extends 'layout.html' %}
 
-{% block header %}
-    <div class="background-decoration">
-        <img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
-        <span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
-    </div>
-{% endblock %}
 {% block wrapper_class %}image-wrapper{% endblock %}
 
 {% block content %}
+    <div class="background">
+        <img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
+        <span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
+    </div>
+
     <div class="image-fullscreen">
         <img src="" onload="imgFade(this);" style="opacity:0;" />
     </div>
 
-    <div class="image-container">
-        <img
-            src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
-            onload="imgFade(this)" style="opacity:0;"
-            onerror="this.src='/static/images/error.png'"
-            width="{{ exif['File']['Width']['raw'] }}"
-            height="{{ exif['File']['Height']['raw'] }}"
-        />
-    </div>
-
-    <div class="pill-row" id="image-tools">
-        <div>
-            <button class="pill-item" id="img-fullscreen">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
-                    <path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
-                </svg>
-                <span class="tool-tip">Fullscreen</span>
-            </button>
-            <button class="pill-item" id="img-share">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
-                    <path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
-                </svg>
-                <span class="tool-tip">Share</span>
-            </button>
-            <a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
-                    <path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
-                </svg>
-                <span class="tool-tip">Download</span>
-            </a>
+    <div class="image-grid">
+        <div class="image-container" id="image-container">
+            <img
+                src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
+                onload="imgFade(this)" style="opacity:0;"
+                onerror="this.src='/static/images/error.png'"
+                width="{{ exif['File']['Width']['raw'] }}"
+                height="{{ exif['File']['Height']['raw'] }}"
+            />
         </div>
-        {% if g.user['id'] == image['author_id'] %}
-            <div>
-                <button class="pill-item pill__critical" id="img-delete">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
-                        <path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
-                    </svg>
-                    <span class="tool-tip">Delete</span>
-                </button>
-                <button class="pill-item pill__critical" id="img-edit">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
-                        <path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
-                    </svg>
-                    <span class="tool-tip">Edit</span>
-                </button>
-            </div>
-        {% endif %}
-    </div>
 
-    <div class="image-info__container">
-        {% if image['post_description'] %}
-            <div class="image-info">
-                <span class="image-info__collapse" id="collapse-info">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
-                        <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
+        <div class="pill-row" id="image-tools">
+            <div>
+                <button class="pill-item" id="img-fullscreen">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
+                        <path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
                     </svg>
-                </span>
-                <div class="image-info__header">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
-                        <path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
+                    <span class="tool-tip">Fullscreen</span>
+                </button>
+                <button class="pill-item" id="img-share">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
+                        <path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
                     </svg>
-                    <h2>Description</h2>
-                </div>
-                <div class="image-info__content">
-                    <p>{{ image['post_description'] }}</p>
-                </div>
-            </div>
-        {% endif %}
-        <div class="image-info">
-            <span class="image-info__collapse" id="collapse-info">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
-                    <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
-                </svg>
-            </span>
-            <div class="image-info__header">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
-                    <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
-                </svg>
-                <h2>Info</h2>
-            </div>
-            <div class="image-info__content">
-                <table>
-                    <tr>
-                        <td>Image ID</td>
-                        <td>{{ image['id'] }}</td>
-                    </tr>
-                    <tr>
-                        <td>Author</td>
-                        <td>{{ image['author_username'] }}</td>
-                    </tr>
-                    <tr>
-                        <td>Upload date</td>
-                        <td><span class="time">{{ image['created_at'] }}</span></td>
-                    </tr>
-                </table>
-                <div class="img-colours">
-                    {% for col in image.image_colours %}
-                        <span style="background-color: rgb({{col[0]}}, {{col[1]}}, {{col[2]}})"></span>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>       
-        {% for tag in exif %}
-            <div class="image-info"> 
-                <span class="image-info__collapse" id="collapse-info">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
-                        <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
+                    <span class="tool-tip">Share</span>
+                </button>
+                <a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
+                        <path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
                     </svg>
-                </span>
-                {% if tag == 'Photographer' %}
-                    <div class="image-info__header">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
-                            <path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
+                    <span class="tool-tip">Download</span>
+                </a>
+            </div>
+            {% if g.user['id'] == image['author_id'] %}
+                <div>
+                    <button class="pill-item pill__critical" id="img-delete">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
+                            <path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
                         </svg>
-                        <h2>Photographer</h2>
-                    </div>
-                {% elif tag == 'Camera' %}
-                    <div class="image-info__header">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
-                            <path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
+                        <span class="tool-tip">Delete</span>
+                    </button>
+                    <button class="pill-item pill__critical" id="img-edit">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
+                            <path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
                         </svg>
-                        <h2>Camera</h2>
-                    </div>
-                {% elif tag == 'Software' %}
-                    <div class="image-info__header">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
-                            <path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
-                        </svg>
-                        <h2>Software</h2>
-                    </div>
-                {% elif tag == 'File' %}
-                    <div class="image-info__header">
+                        <span class="tool-tip">Edit</span>
+                    </button>
+                </div>
+            {% endif %}
+        </div>
+    
+        <div class="info-container" id="image-info">
+            {% if image['post_description'] %}
+                <div class="info-tab">
+                    <div class="info-header">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
-                            <path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
+                            <path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
                         </svg>
-                        <h2>File</h2>
-                    </div>
-                {% else %}
-                    <div class="image-info__header">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
-                            <path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
+                        <h2>Description</h2>
+                        <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
+                            <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                         </svg>
-                        <h2>{{tag}}</h2>
                     </div>
-                {% endif %}
-                <div class="image-info__content">
-                    <table>
-                        {% for subtag in exif[tag] %}
-                            <tr>
-                                <td>{{subtag}}</td>
-                                {% if exif[tag][subtag]['formatted'] %}
-                                    {% if exif[tag][subtag]['type'] == 'date' %}
-                                        <td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
-                                    {% else %}
-                                        <td>{{exif[tag][subtag]['formatted']}}</td>
-                                    {% endif %}
-                                {% elif exif[tag][subtag]['raw'] %}
-                                    <td>{{exif[tag][subtag]['raw']}}</td>
-                                {% else %}
-                                    <td class="empty-table">Oops, an error</td>
-                                {% endif %}
-                            </tr>
-                        {% endfor %}
-                    </table>
+                    <div class="info-table">
+                        <p>{{ image['post_description'] }}</p>
+                    </div>
                 </div>
-            </div>
-        {% endfor %}
+            {% endif %}
+            <div class="info-tab">
+                <div class="info-header">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
+                        <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
+                    </svg>
+                    <h2>Info</h2>
+                    <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
+                        <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
+                    </svg>
+                </div>
+                <div class="info-table">
+                    <table>
+                        <tr>
+                            <td>Image ID</td>
+                            <td>{{ image['id'] }}</td>
+                        </tr>
+                        <tr>
+                            <td>Author</td>
+                            <td>{{ image['author_username'] }}</td>
+                        </tr>
+                        <tr>
+                            <td>Upload date</td>
+                            <td><span class="time">{{ image['created_at'] }}</span></td>
+                        </tr>
+                    </table>
+                    <div class="img-colours">
+                        {% for col in image.image_colours %}
+                            <span style="background-color: rgb({{col[0]}}, {{col[1]}}, {{col[2]}})"></span>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>       
+            {% for tag in exif %}
+                <div class="info-tab">
+                    <div class="info-header">
+                        {% if tag == 'Photographer' %}
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
+                                <path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
+                            </svg>
+                            <h2>Photographer</h2>
+                        {% elif tag == 'Camera' %}
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
+                                <path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
+                            </svg>
+                            <h2>Camera</h2>
+                        {% elif tag == 'Software' %}
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
+                                <path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
+                            </svg>
+                            <h2>Software</h2>
+                        {% elif tag == 'File' %}
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
+                                <path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
+                            </svg>
+                            <h2>File</h2>
+                        {% else %}
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
+                                <path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
+                            </svg>
+                            <h2>{{tag}}</h2>
+                        {% endif %}
+                        <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
+                            <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
+                        </svg>
+                    </div>
+                    <div class="info-table">
+                        <table>
+                            {% for subtag in exif[tag] %}
+                                <tr>
+                                    <td>{{subtag}}</td>
+                                    {% if exif[tag][subtag]['formatted'] %}
+                                        {% if exif[tag][subtag]['type'] == 'date' %}
+                                            <td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
+                                        {% else %}
+                                            <td>{{exif[tag][subtag]['formatted']}}</td>
+                                        {% endif %}
+                                    {% elif exif[tag][subtag]['raw'] %}
+                                        <td>{{exif[tag][subtag]['raw']}}</td>
+                                    {% else %}
+                                        <td class="empty-table">Oops, an error</td>
+                                    {% endif %}
+                                </tr>
+                            {% endfor %}
+                        </table>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
     </div>
 {% endblock %}
 
 {% block script %}
     <script>
-        var infoCollapse = document.querySelectorAll('#collapse-info');
-        for (var i = 0; i < infoCollapse.length; i++) {
-            infoCollapse[i].addEventListener('click', function() {
-                this.parentNode.classList.toggle('image-info__collapsed');
-            });
-        }
-        var infoHeader = document.querySelectorAll('.image-info__header');
-        for (var i = 0; i < infoHeader.length; i++) {
-            infoHeader[i].addEventListener('click', function() {
-                this.parentNode.classList.toggle('image-info__collapsed');
+        var infoTab = document.querySelectorAll('.info-tab');
+        for (var i = 0; i < infoTab.length; i++) {
+            infoTab[i].querySelector('.info-header').addEventListener('click', function() {
+                this.parentNode.classList.toggle('collapsed');
             });
         }
 
diff --git a/gallery/templates/index.html b/gallery/templates/index.html
index aee36d0..8d5b249 100644
--- a/gallery/templates/index.html
+++ b/gallery/templates/index.html
@@ -1,31 +1,27 @@
 {% extends 'layout.html' %}
 
-{% block header %}
+{% block nav_home %}navigation-item__selected{% endblock %}
+
+{% block content %}
     <div class="banner">
         <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
         <span></span>
 
-        <div class="banner__content">
-            {% block banner_subtitle%}{% endblock %}
+        <div class="banner-content">
             <p>{{ motto }}</p>
             <h1>{{ name }}</h1>
             <p>Serving {{ image_count }} images</p>
         </div>
     </div>
-{% endblock %}
-{% block nav_home %}navigation-item__selected{% endblock %}
-{% block wrapper_class %}index-wrapper{% endblock %}
 
-{% block content %}
-    <div class="gallery">
+    <div class="gallery-grid">
         {% for image in images %}
-            <a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
-                <span class="gallery__item-info">
+            <a id="image-{{ image['id'] }}" class="gallery-item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
+                <span>
                     <p></p>
                     <h2><span class="time">{{ image['created_at'] }}</span></h2>
                 </span>
                 <img
-                    class="gallery__item-image"
                     data-src="{{ image['file_name'] }}"
                     onload="imgFade(this)"
                     style="opacity:0;"
@@ -38,7 +34,8 @@
 {% block script %}
     <script>
         function loadOnView() {
-            var images = document.querySelectorAll('.gallery__item-image');
+            var images = document.querySelectorAll('.gallery-item img');
+
             for (var i = 0; i < images.length; i++) {
                 var image = images[i];
                 if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html
index 8e5f75e..6f6c173 100644
--- a/gallery/templates/layout.html
+++ b/gallery/templates/layout.html
@@ -22,12 +22,26 @@
     <script src="{{ url_for('static', filename='js/ui/notifications.js') }}"></script>
 </head>
 <body>
-    <div class="wrapper">
-        <div class="notifications"></div>
+    <div class="notifications"></div>
 
-        <svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
-            <path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
-        </svg>
+    <svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
+        <path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
+    </svg>
+
+    <div class="pop-up">
+        <span class="pop-up__click-off" onclick="popupDissmiss()"></span>
+        <div class="pop-up-wrapper">
+            <div class="pop-up-content">
+                <h3>Title</h3>
+                <p>Very very very drawn out example description</p>
+            </div>
+            <div class="pop-up-controlls">
+                <button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="wrapper">
 
         <div class="navigation">
             <img src="{{url_for('static', filename='images/icon.png')}}" alt="Logo" class="logo" onload="imgFade(this)" style="opacity:0;">
@@ -81,26 +95,11 @@
             {% endif %}
         </div>
 
-        {% block header %}{% endblock %}
-
-        <div class="content {% block wrapper_class %}{% endblock %}">
+        <div class="content">
             {% block content %}
             {% endblock %}
         </div>
 
-        <div class="pop-up">
-            <span class="pop-up__click-off" onclick="popupDissmiss()"></span>
-            <div class="pop-up-wrapper">
-                <div class="pop-up-content">
-                    <h3>Title</h3>
-                    <p>Very very very drawn out example description</p>
-                </div>
-                <div class="pop-up-controlls">
-                    <button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
-                </div>
-            </div>
-        </div>
-
         <div class="upload-panel">
             <span class="click-off" onclick="closeUploadTab()"></span>
             <div class="container">
diff --git a/gallery/templates/profile.html b/gallery/templates/profile.html
index 96f9c31..1a3ca99 100644
--- a/gallery/templates/profile.html
+++ b/gallery/templates/profile.html
@@ -1,25 +1,18 @@
 {% extends 'layout.html' %}
 
-{% block header %}
-    <div class="background-decoration">
-        <img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
-        <span></span>
-    </div>
-{% endblock %}
-
 {% block nav_profile %}navigation-item__selected{% endblock %}
-
 {% block content %}
+    <div class="banner">
+        <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
+        <span></span>
+
+        <div class="banner-content">
+            <h1>Profile</h1>
+            <p>Hello {{ g.user['username'] }}</p>
+        </div>
+    </div>
+
     <h1>User</h1>
     <p>{{user_id}}</p>
-    <ul>
-        {% if g.user %}
-            <li><span>{{ g.user['username'] }}</span>
-            <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
-        {% else %}
-            <li><a href="{{ url_for('auth.register') }}">Register</a>
-            <li><a href="{{ url_for('auth.login') }}">Log In</a>
-        {% endif %}
-    </ul>
 {% endblock %}
 
diff --git a/gallery/templates/settings/settings_layout.html b/gallery/templates/settings/settings_layout.html
index c139695..bf4257c 100644
--- a/gallery/templates/settings/settings_layout.html
+++ b/gallery/templates/settings/settings_layout.html
@@ -1,21 +1,18 @@
 {% extends 'layout.html' %}
 
-{% block header %}
+{% block nav_settings %}navigation-item__selected{% endblock %}
+{% block content %}
     <div class="banner">
-        <img src="{{ url_for('static', filename='images/leaves.jpg') }}" onload="imgFade(this)" style="opacity:0;"/>
+        <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
         <span></span>
 
-        <div class="banner__content">
+        <div class="banner-content">
             {% block banner_subtitle%}{% endblock %}
             <h1>Settings</h1>
             <p>All the red buttons in one place, what could go wrong?</p>
         </div>
     </div>
-{% endblock %}
-{% block nav_settings %}navigation-item__selected{% endblock %}
-{% block wrapper_class %}settings-wrapper{% endblock %}
 
-{% block content %}
     <div class="settings-nav">
         <a href="{{ url_for('settings.general') }}" class="settings-nav__item {% block settings_general %}{% endblock %}">General</a>
         <a href="{{ url_for('settings.server') }}" class="settings-nav__item {% block settings_server %}{% endblock %}">Server</a>
diff --git a/gallery/themes/default/components/banner.sass b/gallery/themes/default/components/banner.sass
new file mode 100644
index 0000000..f10bbaf
--- /dev/null
+++ b/gallery/themes/default/components/banner.sass
@@ -0,0 +1,96 @@
+.banner
+    width: 100%
+    height: 40vh
+
+    position: relative
+
+    background-color: $black
+    color: $black
+
+    overflow: hidden
+    transition: opacity 0.3s ease-in-out
+
+    img
+        position: absolute
+        top: 0
+        left: 0
+
+        width: 100%
+        height: 100%
+
+        background-color: $black
+
+        object-fit: cover
+        object-position: center center
+
+    span
+        position: absolute
+        top: 0
+        left: 0
+
+        width: 100%
+        height: 100%
+
+        background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
+
+        z-index: +1
+
+    .banner-content
+        padding: 1rem
+
+        width: 100%
+        height: inherit
+
+        position: relative
+
+        display: flex
+        flex-direction: column
+        justify-content: flex-end
+        gap: 0.5rem
+
+        z-index: +2
+
+        h1
+            margin: 0
+            padding: 0
+
+            font-size: 6.9rem
+            font-weight: 700
+            line-height: 1
+            text-align: left
+
+            color: $black
+
+        p
+            margin: 0
+            padding: 0
+
+            font-size: 1rem
+            font-weight: 600
+            line-height: 1
+            text-align: left        
+
+            color: $black
+
+@media (max-width: $breakpoint)
+    .banner
+        width: 100vw
+        height: 25vh
+
+        span
+            background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
+
+        .banner-content
+            padding: 0.5rem
+
+            display: flex
+            justify-content: center
+            align-items: center
+
+            h1
+                font-size: 3.5rem
+                text-align: center
+
+            p
+                font-size: 1.1rem
+                text-align: center
\ No newline at end of file
diff --git a/gallery/themes/default/buttons/jumpUp.sass b/gallery/themes/default/components/buttons/jumpUp.sass
similarity index 100%
rename from gallery/themes/default/buttons/jumpUp.sass
rename to gallery/themes/default/components/buttons/jumpUp.sass
diff --git a/gallery/themes/default/buttons/pill.sass b/gallery/themes/default/components/buttons/pill.sass
similarity index 100%
rename from gallery/themes/default/buttons/pill.sass
rename to gallery/themes/default/components/buttons/pill.sass
diff --git a/gallery/themes/default/ui/notification.sass b/gallery/themes/default/components/elements/notification.sass
similarity index 100%
rename from gallery/themes/default/ui/notification.sass
rename to gallery/themes/default/components/elements/notification.sass
diff --git a/gallery/themes/default/ui/pop-up.sass b/gallery/themes/default/components/elements/pop-up.sass
similarity index 100%
rename from gallery/themes/default/ui/pop-up.sass
rename to gallery/themes/default/components/elements/pop-up.sass
diff --git a/gallery/themes/default/ui/upload-panel.sass b/gallery/themes/default/components/elements/upload-panel.sass
similarity index 100%
rename from gallery/themes/default/ui/upload-panel.sass
rename to gallery/themes/default/components/elements/upload-panel.sass
diff --git a/gallery/themes/default/components/gallery.sass b/gallery/themes/default/components/gallery.sass
new file mode 100644
index 0000000..d7ff471
--- /dev/null
+++ b/gallery/themes/default/components/gallery.sass
@@ -0,0 +1,112 @@
+.gallery-grid
+    margin: 0
+    padding: 0.5rem
+
+    width: 100%
+
+    display: grid
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
+    gap: 0.5rem
+
+.gallery-item
+    margin: 0
+    padding: 0
+
+    height: auto
+
+    position: relative
+
+    border-radius: $rad
+
+    box-sizing: border-box
+    overflow: hidden
+
+    span
+        margin: 0
+        padding: 0.5rem
+
+        width: 100%
+        height: 100%
+
+        position: absolute
+        left: 0
+        bottom: 0
+
+        display: flex
+        flex-direction: column
+        justify-content: flex-end
+
+        background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
+
+        z-index: +1
+
+        opacity: 0 // hide
+        transform: scale(1.05) // scale up
+        transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
+
+        h2
+            margin: 0
+            padding: 0
+
+            font-size: 1rem
+            font-weight: 600
+
+            color: $primary
+
+            text-overflow: ellipsis
+            overflow: hidden
+
+            opacity: 0 // hide
+            transition: all 0.2s ease-in-out
+
+        p
+            margin: 0
+            padding: 0
+
+            font-size: 0.8rem
+            font-weight: 500
+
+            color: $white
+
+            text-overflow: ellipsis
+            overflow: hidden
+
+            opacity: 0 // hide
+            transition: all 0.2s ease-in-out
+
+    img
+        width: 100%
+        height: 100%
+
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+
+        object-fit: cover
+        object-position: center
+
+        background-color: $white
+
+        transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
+
+    &:after
+        content: ""
+        display: block
+        padding-bottom: 100%
+
+    &:hover
+        span
+            opacity: 1
+            transform: scale(1)
+
+            h2, p
+                opacity: 1
+
+        img
+            transform: scale(1.1)
+            
+@media (max-width: 800px)
+    .gallery-grid
+        grid-template-columns: auto auto auto
diff --git a/gallery/themes/default/ui/background.sass b/gallery/themes/default/components/image-view/background.sass
similarity index 91%
rename from gallery/themes/default/ui/background.sass
rename to gallery/themes/default/components/image-view/background.sass
index 3a6b926..14d8c1b 100644
--- a/gallery/themes/default/ui/background.sass
+++ b/gallery/themes/default/components/image-view/background.sass
@@ -1,7 +1,4 @@
-.background-decoration
-    margin: 0
-    padding: 0
-
+.background
     width: 100%
     height: 100vh
 
@@ -17,6 +14,7 @@
 
     user-select: none
     overflow: hidden
+    z-index: 1
 
     img
         position: absolute
@@ -42,4 +40,4 @@
         width: 100%
         height: 100%
 
-        z-index: +1
+        z-index: +1
\ No newline at end of file
diff --git a/gallery/themes/default/components/image-view/fullscreen.sass b/gallery/themes/default/components/image-view/fullscreen.sass
new file mode 100644
index 0000000..46b11f6
--- /dev/null
+++ b/gallery/themes/default/components/image-view/fullscreen.sass
@@ -0,0 +1,51 @@
+.image-fullscreen
+    margin: 0
+    padding: 0 0 0 3.5rem
+
+    width: 100%
+    height: 100dvh
+
+    position: fixed
+    top: -100%
+    left: 0
+
+    display: flex
+    opacity: 0 // hide
+
+    background-color: rgba($black, 0.8)
+    z-index: 21
+
+    box-sizing: border-box
+
+    img
+        margin: auto
+        padding: 0
+
+        width: auto
+        height: auto
+        max-width: 100%
+        max-height: 100%
+
+        object-fit: contain
+        object-position: center
+
+        transform: scale(0.8)
+
+.image-fullscreen__active
+    top: 0
+
+    opacity: 1 // show
+
+    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
+
+    img
+        transform: scale(1)
+        transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
+.image-fullscreen__hide
+    opacity: 0 // hide
+
+    transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
+
+    img
+        transform: scaleY(0) // scale(0.8) 
+        transition: transform 0.2s ease
\ No newline at end of file
diff --git a/gallery/themes/default/components/image-view/image.sass b/gallery/themes/default/components/image-view/image.sass
new file mode 100644
index 0000000..6436e14
--- /dev/null
+++ b/gallery/themes/default/components/image-view/image.sass
@@ -0,0 +1,21 @@
+.image-container
+    margin: auto
+    padding: 0.5rem
+
+    width: 100%
+    height: 100%
+
+    display: flex
+    overflow: hidden
+
+    img
+        margin: auto
+        padding: 0
+
+        width: auto
+        height: auto
+        max-width: 100%
+        max-height: 100%
+
+        object-fit: contain
+        object-position: center
\ No newline at end of file
diff --git a/gallery/themes/default/components/image-view/info-tab.sass b/gallery/themes/default/components/image-view/info-tab.sass
new file mode 100644
index 0000000..31306e1
--- /dev/null
+++ b/gallery/themes/default/components/image-view/info-tab.sass
@@ -0,0 +1,185 @@
+.info-container
+    width: 100%
+    height: 100%
+
+    display: flex
+    flex-direction: column
+
+    background-color: $black
+
+    overflow-y: auto
+
+.info-tab
+    width: 100%
+    max-height: 100%
+
+    display: flex
+    flex-direction: column
+
+    position: relative
+
+    background-color: $black
+    border-radius: $rad
+
+    transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
+
+    &.collapsed
+        height: 2.5rem
+
+        .collapse-indicator
+            transform: rotate(90deg)
+
+        .info-table
+            padding: 0
+            opacity: 0
+
+.collapse-indicator
+    width: 1.25rem
+    height: 1.25rem
+
+    position: absolute
+    top: 0.6rem
+    right: 0.6rem
+
+    color: $primary
+
+    z-index: +2
+
+    transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
+    user-select: none
+
+.info-header
+    margin: 0
+    padding: 0.5rem
+
+    width: 100%
+    height: 2.5rem
+
+    display: flex
+    justify-content: start
+    align-items: center
+    gap: 0.5rem
+
+    position: sticky
+    top: 0
+    z-index: +1
+
+    background: $black2
+
+    svg
+        margin: 0
+        padding: 0
+
+        width: 1.25rem
+        height: 1.25rem
+
+        fill: $primary
+
+    h2
+        margin: 0
+        padding: 0
+
+        font-size: 1.25rem
+        font-weight: 600
+
+        color: $primary
+
+        text-overflow: ellipsis
+        overflow: hidden
+
+.info-table
+    margin: 0
+    padding: 0.5rem
+
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+    color: $white
+
+    overflow-x: hidden
+
+    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
+
+    p
+        margin: 0
+        padding: 0
+
+        font-size: 1rem
+        font-weight: 500
+
+        text-overflow: ellipsis
+        overflow: hidden
+
+    table
+        margin: 0
+        padding: 0
+
+        max-width: 100%
+
+        overflow-x: hidden
+        border-collapse: collapse
+
+        tr
+            margin: 0
+            padding: 0
+
+            width: 100%
+
+            white-space: nowrap
+
+            td
+                padding-bottom: 0.5rem
+
+            td:first-child
+                padding-right: 0.5rem
+
+                width: 50%
+                max-width: 0
+
+                overflow: hidden
+                text-overflow: ellipsis
+                white-space: nowrap
+
+                font-size: 1rem
+                font-weight: 500
+            td:last-child
+                padding: 0
+
+                width: 50%
+                max-width: 0
+
+                overflow: hidden
+                text-overflow: ellipsis
+                white-space: nowrap
+
+                font-size: 1rem
+                font-weight: 500
+
+            td.empty-table
+                opacity: 0.3
+
+        tr:last-of-type td
+            padding-bottom: 0
+
+.img-colours
+    margin: 0
+    padding: 0
+
+    width: 100%
+
+    display: flex
+    gap: 0.5rem
+
+    span
+        margin: 0
+        padding: 0
+
+        width: 100%
+        height: 2rem
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        border-radius: $rad
diff --git a/gallery/themes/default/components/image-view/view.sass b/gallery/themes/default/components/image-view/view.sass
new file mode 100644
index 0000000..a39645f
--- /dev/null
+++ b/gallery/themes/default/components/image-view/view.sass
@@ -0,0 +1,66 @@
+@import 'background'
+@import 'fullscreen'
+@import 'info-tab'
+@import 'image'
+
+
+.image-grid
+    padding: 0
+
+    position: relative
+
+    display: grid
+    grid-template-areas: 'info image' 'info tools'
+    grid-template-columns: 25rem 1fr
+    grid-template-rows: 1fr auto
+    gap: 0
+
+    height: 100vh
+
+    z-index: 3
+
+#image-info
+    grid-area: info
+#image-tools
+    grid-area: tools
+    padding: 0 0 0.5rem 0
+#image-container
+    grid-area: image
+
+
+@media (max-width: 1100px)
+    .image-grid
+        padding: 0.5rem
+
+        display: flex
+        flex-direction: column
+        gap: 0.5rem
+
+        height: auto
+
+    .image-container
+        margin: 0 auto
+        padding: 0
+
+        max-height: 69vh
+
+        img
+            max-height: 69vh
+
+    #image-tools
+        padding: 0
+
+    .info-container
+        gap: 0.5rem
+        background: transparent
+    
+    .info-header
+        border-radius: $rad $rad 0 0
+
+    .info-tab.collapsed .info-header
+        border-radius: $rad
+
+@media (max-width: $breakpoint)
+    .image-fullscreen
+        padding: 0 0 3.5rem 0
+        
\ No newline at end of file
diff --git a/gallery/themes/default/ui/navigation.sass b/gallery/themes/default/components/navigation.sass
similarity index 100%
rename from gallery/themes/default/ui/navigation.sass
rename to gallery/themes/default/components/navigation.sass
diff --git a/gallery/themes/default/style.sass b/gallery/themes/default/style.sass
index 2522d8e..bb00ce7 100644
--- a/gallery/themes/default/style.sass
+++ b/gallery/themes/default/style.sass
@@ -4,18 +4,18 @@
 @import "variables"
 @import "animations"
 
-@import "ui/notification"
-@import "ui/pop-up"
-@import "ui/upload-panel"
+@import "components/elements/notification"
+@import "components/elements/pop-up"
+@import "components/elements/upload-panel"
 
-@import "ui/navigation"
-@import "ui/content"
-@import "ui/background"
-@import "ui/banner"
-@import "ui/gallery"
+@import "components/navigation"
+@import "components/banner"
+@import "components/gallery"
 
-@import "buttons/jumpUp"
-@import "buttons/pill"
+@import "components/buttons/jumpUp"
+@import "components/buttons/pill"
+
+@import "components/image-view/view"
 
 // Reset
 *
@@ -36,9 +36,57 @@ html, body
 
 .wrapper
     margin: 0
-    padding: 0
+    padding: 0 0 0 3.5rem
 
     min-height: 100vh
 
+    display: flex
+    flex-direction: column
+
     background-color: $white
     color: $black
+
+
+.error-page
+    width: 100%
+    height: 100vh
+
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
+    background-color: $black
+
+    h1
+        margin: 0 2rem
+        
+        font-size: 6.9rem
+        font-weight: 900
+        text-align: center
+
+        color: $primary
+
+    p
+        margin: 0 2rem
+
+        max-width: 40rem
+        font-size: 1.25rem
+        font-weight: 400
+        text-align: center
+
+        color: $white
+
+@media (max-width: $breakpoint)
+    .wrapper
+        padding: 0 0 3.5rem 0
+
+    .error-page
+        height: calc(100vh - 3.5rem)
+
+        h1
+            font-size: 4.5rem
+
+        p
+            max-width: 100%
+            font-size: 1rem
\ No newline at end of file
diff --git a/gallery/themes/default/ui/banner.sass b/gallery/themes/default/ui/banner.sass
deleted file mode 100644
index 7f15403..0000000
--- a/gallery/themes/default/ui/banner.sass
+++ /dev/null
@@ -1,104 +0,0 @@
-.banner
-    margin: 0
-    padding: 0
-
-    width: calc(100vw - 3.5rem)
-    height: 40vh
-
-    position: relative
-    top: 0
-    left: 3.5rem
-
-    background-color: $black
-    color: $black
-
-    overflow: hidden
-    transition: opacity 0.3s ease-in-out
-
-    img
-        position: absolute
-        top: 0
-        left: 0
-
-        width: 100%
-        height: 100%
-
-        background-color: $black
-
-        object-fit: cover
-        object-position: center center
-
-    span
-        position: absolute
-        top: 0
-        left: 0
-
-        width: 100%
-        height: 100%
-
-        background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
-
-        z-index: +1
-
-.banner__content
-    margin: 0
-    padding: 1rem
-
-    width: 100%
-    height: 100%
-
-    position: relative
-
-    display: flex
-    flex-direction: column
-    justify-content: flex-end
-    gap: 0.5rem
-
-    z-index: +2
-
-    h1
-        margin: 0
-        padding: 0
-
-        font-size: 6.9rem
-        font-weight: 700
-        line-height: 1
-        text-align: left
-
-        color: $black
-
-    p
-        margin: 0
-        padding: 0
-
-        font-size: 1rem
-        font-weight: 600
-        line-height: 1
-        text-align: left        
-
-        color: $black
-
-@media (max-width: $breakpoint)
-    .banner
-        width: 100vw
-        height: 25vh
-
-        left: 0
-
-        span
-            background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
-
-    .banner__content
-        padding: 0.5rem
-
-        display: flex
-        justify-content: center
-        align-items: center
-
-        h1
-            font-size: 3.5rem
-            text-align: center
-
-        p
-            font-size: 1.1rem
-            text-align: center
\ No newline at end of file
diff --git a/gallery/themes/default/ui/content.sass b/gallery/themes/default/ui/content.sass
deleted file mode 100644
index 3f579a1..0000000
--- a/gallery/themes/default/ui/content.sass
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "wrappers/index"
-@import "wrappers/image"
-@import "wrappers/settings"
-@import "wrappers/error"
-
-.content
-    width: calc(100% - 3.5rem)
-    min-height: 100vh
-
-    position: relative
-    left: 3.5rem
-
-@media (max-width: $breakpoint)
-    .content
-        width: 100%
-        left: 0
diff --git a/gallery/themes/default/ui/gallery.sass b/gallery/themes/default/ui/gallery.sass
deleted file mode 100644
index 73159e4..0000000
--- a/gallery/themes/default/ui/gallery.sass
+++ /dev/null
@@ -1,115 +0,0 @@
-.gallery
-    margin: 0
-    padding: 0
-
-    width: 100%
-
-    display: grid
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
-    gap: 0.5rem
-
-@media (max-width: 800px)
-    .gallery
-        grid-template-columns: auto auto auto
-
-.gallery__item
-    margin: 0
-    padding: 0
-
-    height: auto
-
-    position: relative
-
-    // background: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
-    // background-size: 1000px 640px
-    // animation: imgLoading 1.8s linear infinite forwards
-    border-radius: $rad
-
-    box-sizing: border-box
-    overflow: hidden
-
-    &:after
-        content: ""
-        display: block
-        padding-bottom: 100%
-
-    &:hover
-        .gallery__item-info
-            opacity: 1
-            transform: scale(1)
-
-            h2, p
-                opacity: 1
-
-        .gallery__item-image
-            transform: scale(1.1)
-
-.gallery__item-info
-    margin: 0
-    padding: 0.5rem
-
-    width: 100%
-    height: 100%
-
-    position: absolute
-    left: 0
-    bottom: 0
-
-    display: flex
-    flex-direction: column
-    justify-content: flex-end
-
-    background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
-
-    z-index: +1
-
-    opacity: 0 // hide
-    transform: scale(1.05) // scale up
-    transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
-
-    h2
-        margin: 0
-        padding: 0
-
-        font-size: 1rem
-        font-weight: 600
-
-        color: $primary
-
-        text-overflow: ellipsis
-        overflow: hidden
-
-        opacity: 0 // hide
-        transition: all 0.2s ease-in-out
-
-    p
-        margin: 0
-        padding: 0
-
-        font-size: 0.8rem
-        font-weight: 500
-
-        color: $white
-
-        text-overflow: ellipsis
-        overflow: hidden
-
-        opacity: 0 // hide
-        transition: all 0.2s ease-in-out
-
-.gallery__item-image
-    width: 100%
-    height: 100%
-
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-
-    object-fit: cover
-    object-position: center
-
-    background-color: $white
-
-    transition: all 0.3s cubic-bezier(.79, .14, .15, .86) 
diff --git a/gallery/themes/default/ui/wrappers/error.sass b/gallery/themes/default/ui/wrappers/error.sass
deleted file mode 100644
index 4aca0df..0000000
--- a/gallery/themes/default/ui/wrappers/error.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-.error-wrapper
-    display: flex
-    flex-direction: column
-    justify-content: center
-    align-items: center
-
-    background-color: $black
-
-    h1
-        margin: 0 2rem
-        
-        font-size: 6.9rem
-        font-weight: 900
-        text-align: center
-
-        color: $primary
-
-    p
-        margin: 0 2rem
-
-        max-width: 40rem
-        font-size: 1.25rem
-        font-weight: 400
-        text-align: center
-
-        color: $white
-
-@media (max-width: $breakpoint)
-    .error-wrapper
-        h1
-            font-size: 4.5rem
-
-        p
-            max-width: 100%
-            font-size: 1rem
\ No newline at end of file
diff --git a/gallery/themes/default/ui/wrappers/image.sass b/gallery/themes/default/ui/wrappers/image.sass
deleted file mode 100644
index b5aa49f..0000000
--- a/gallery/themes/default/ui/wrappers/image.sass
+++ /dev/null
@@ -1,351 +0,0 @@
-.image-wrapper
-    padding: 0
-
-    display: grid
-    grid-template-areas: 'info image' 'info tools'
-    grid-template-columns: 25rem 1fr
-    grid-template-rows: 1fr auto
-    gap: 0
-
-    height: 100vh
-
-.image-fullscreen
-    margin: 0
-    padding: 0 0 0 3.5rem
-
-    width: 100%
-    height: 100dvh
-
-    position: fixed
-    top: -100%
-    left: 0
-
-    display: flex
-    opacity: 0 // hide
-
-    background-color: rgba($black, 0.8)
-    z-index: 21
-
-    box-sizing: border-box
-
-    img
-        margin: auto
-        padding: 0
-
-        width: auto
-        height: auto
-        max-width: 100%
-        max-height: 100%
-
-        object-fit: contain
-        object-position: center
-
-        transform: scale(0.8)
-
-.image-fullscreen__active
-    top: 0
-
-    opacity: 1 // show
-
-    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
-
-    img
-        transform: scale(1)
-        transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
-.image-fullscreen__hide
-    opacity: 0 // hide
-
-    transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
-
-    img
-        transform: scaleY(0) // scale(0.8) 
-        transition: transform 0.2s ease
-
-.image-container
-    margin: auto
-    padding: 0.5rem
-
-    width: 100%
-    height: 100%
-
-    display: flex
-    overflow: hidden
-
-    grid-area: image
-
-    img
-        margin: auto
-        padding: 0
-
-        width: auto
-        height: auto
-        max-width: 100%
-        max-height: 100%
-
-        object-fit: contain
-        object-position: center
-
-        // box-shadow: 0 0 0.5rem rgba($black, 0.5)
-
-.image-info__container
-    margin: 0
-    padding: 0
-
-    width: 100%
-    height: 100%
-
-    display: flex
-    flex-direction: column
-
-    background-color: $black
-
-    overflow-y: auto
-
-    grid-area: info
-
-.image-info
-    margin: 0
-    padding: 0
-
-    width: 100%
-
-    display: flex
-    flex-direction: column
-
-    position: relative
-
-    background-color: $black
-    border-radius: $rad
-
-.image-info__collapse
-    margin: 0
-    padding: 0
-
-    width: 1.25rem
-    height: 1.25rem
-
-    display: flex
-    justify-content: center
-    align-items: center
-
-    position: absolute
-    top: 0.6rem
-    right: 0.6rem
-
-    cursor: pointer
-    z-index: +2
-
-    transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
-
-    svg
-        margin: 0
-        padding: 0
-
-        fill: $primary
-
-.image-info__header
-    margin: 0
-    padding: 0.5rem
-
-    width: 100%
-    height: 2.5rem
-
-    display: flex
-    justify-content: start
-    align-items: center
-    gap: 0.5rem
-
-    position: sticky
-    top: 0
-    z-index: +1
-
-    background-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1))
-
-    svg
-        margin: 0
-        padding: 0
-
-        width: 1.25rem
-        height: 1.25rem
-
-        fill: $primary
-
-    h2
-        margin: 0
-        padding: 0
-
-        font-size: 1.25rem
-        font-weight: 600
-
-        color: $primary
-
-        text-overflow: ellipsis
-        overflow: hidden
-
-.image-info__content
-    margin: 0
-    padding: 0.5rem
-
-    display: flex
-    flex-direction: column
-    gap: 0.5rem
-
-    color: $white
-
-    overflow-x: hidden
-
-    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
-
-    p
-        margin: 0
-        padding: 0
-
-        font-size: 1rem
-        font-weight: 500
-
-        text-overflow: ellipsis
-        overflow: hidden
-
-    table
-        margin: 0
-        padding: 0
-
-        max-width: 100%
-
-        overflow-x: hidden
-        border-collapse: collapse
-
-        tr
-            margin: 0
-            padding: 0
-
-            width: 100%
-
-            white-space: nowrap
-
-            td
-                padding-bottom: 0.5rem
-
-            td:first-child
-                padding-right: 0.5rem
-
-                width: 50%
-                max-width: 0
-
-                overflow: hidden
-                text-overflow: ellipsis
-                white-space: nowrap
-
-                font-size: 1rem
-                font-weight: 500
-            td:last-child
-                padding: 0
-
-                width: 50%
-                max-width: 0
-
-                overflow: hidden
-                text-overflow: ellipsis
-                white-space: nowrap
-
-                font-size: 1rem
-                font-weight: 500
-
-            td.empty-table
-                opacity: 0.3
-
-        tr:last-of-type td
-            padding-bottom: 0
-    
-.img-colours
-    margin: 0
-    padding: 0
-
-    width: 100%
-
-    display: flex
-    gap: 0.5rem
-
-    span
-        margin: 0
-        padding: 0
-
-        width: 100%
-        height: 2rem
-
-        display: flex
-        justify-content: center
-        align-items: center
-
-        border-radius: $rad
-
-.image-info__collapsed
-    height: 2.5rem
-
-    .image-info__collapse
-        transform: rotate(90deg)
-
-    .image-info__content
-        padding: 0
-        opacity: 0
-
-#image-tools
-    margin-bottom: 0.5rem
-
-    grid-area: tools
-
-@media (max-width: 1100px)
-    .image-wrapper
-        padding: 0.5rem
-
-        display: flex !important
-        flex-direction: column
-        gap: 0.5rem
-
-        height: auto
-
-    .image-container
-        margin: 0 auto
-        padding: 0
-
-        max-height: 69vh
-
-        img
-            max-height: 69vh
-
-    #image-tools
-        margin: 0
-
-    .image-info__container
-        margin: 0
-        padding: 0
-
-        width: 100%
-        height: auto
-
-        display: flex
-        flex-direction: column
-        gap: 0.5rem
-
-        background: none
-
-    .image-info__container
-        border-radius: $rad
-
-    .image-info__header
-        border-radius: $rad $rad 0 0
-
-    .image-info__collapsed
-        .image-info__header
-            border-radius: $rad
-
-@media (max-width: $breakpoint)
-    .image-fullscreen
-        padding: 0 0 3.5rem 0
-
-    .image-wrapper
-        padding-bottom: 4rem
-
-    .image-info__header
-        background-image: none
-        background-color: $black2
\ No newline at end of file
diff --git a/gallery/themes/default/ui/wrappers/index.sass b/gallery/themes/default/ui/wrappers/index.sass
deleted file mode 100644
index 9533649..0000000
--- a/gallery/themes/default/ui/wrappers/index.sass
+++ /dev/null
@@ -1,12 +0,0 @@
-.index-wrapper
-    padding: 0.5rem
-
-    position: relative
-
-    display: flex
-    flex-direction: column
-    gap: 0.5rem
-
-@media (max-width: $breakpoint)
-    .index-wrapper
-        padding-bottom: 4rem
diff --git a/gallery/themes/default/ui/wrappers/settings.sass b/gallery/themes/default/ui/wrappers/settings.sass
deleted file mode 100644
index eea9523..0000000
--- a/gallery/themes/default/ui/wrappers/settings.sass
+++ /dev/null
@@ -1,115 +0,0 @@
-@mixin settings-btn($color, $fill: false)
-    @if $fill
-        color: $white
-        background-color: $color
-        border: 2px solid $color
-
-        &:hover
-            background-color: $white
-            color: $color
-    @else
-        color: $color
-        background-color: $white
-        border: 2px solid $color
-
-        &:hover
-            background-color: $color
-            color: $white
-
-@mixin settings-log($color)
-    font-size: 1rem
-    font-weight: 600
-
-    color: $white
-    background-color: $black
-    background-image: linear-gradient(120deg, rgba($color, 0.3), rgba($color, 0));
-    //border-left: 3px solid $color
-    
-    
-.settings-wrapper
-    margin: 0
-    padding: 0.5rem
-
-    display: flex
-    flex-direction: column
-    gap: 0
-
-.settings-nav
-    width: 100%
-    height: auto
-
-    position: sticky
-    top: 0
-    left: 0
-
-    display: flex
-    flex-direction: row
-    justify-content: center
-    gap: 0.5rem
-
-    background-color: $white
-
-.settings-nav__item
-    margin: 0
-    padding: 0.5rem
-
-    width: 100%
-    height: 2.5rem
-
-    display: flex
-    justify-content: center
-    align-items: center
-
-    font-size: 1rem
-    font-weight: 600
-    text-align: center
-    line-height: 1
-    text-decoration: none
-
-    border-radius: $rad
-
-    cursor: pointer
-    transition: background-color 0.2s ease, color 0.2s ease
-
-    @include settings-btn($black)
-
-    &:focus
-        outline: none
-
-.settings-nav__item-selected
-    @include settings-btn($black, true)
-
-.settings-list
-    margin: 0
-    padding: 0
-
-    width: 100%
-    height: auto
-
-    display: flex
-    flex-direction: column
-    gap: 0.5rem
-
-.log
-    margin: 0
-    padding: 1rem
-
-    height: auto
-
-    display: flex
-    flex-direction: column
-    gap: 0.5rem
-
-    border-radius: $rad
-
-    @include settings-log($critical)
-
-@media (max-width: 450px)
-    .settings-nav
-        position: relative
-
-        flex-direction: column
-        gap: 0.5rem
-
-    .settings-wrapper
-        padding-bottom: 4rem
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
index 0c48796..bc28c92 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "onlylegs"
-version = "23.03.03"
+version = "23.03.09"
 description = "Gallery built for fast and simple image management"
 authors = ["Fluffy-Bean <michal-gdula@protonmail.com>"]
 license = "MIT"