diff --git a/gallery/routes/groups.py b/gallery/routes/groups.py
index f28690c..bea8685 100644
--- a/gallery/routes/groups.py
+++ b/gallery/routes/groups.py
@@ -20,19 +20,31 @@ def groups():
     """
     Group overview, shows all image groups
     """
+    # Get all groups
     group_list = db_session.query(db.Groups).all()
 
+    # For each group, get the 3 most recent images
     for group_item in group_list:
-        thumbnail = db_session.query(db.GroupJunction.post_id)\
+        group_item.author_username = db_session.query(db.Users.username)\
+                                           .filter(db.Users.id == group_item.author_id)\
+                                           .first()[0]
+        
+        # Get the 3 most recent images
+        group_images = db_session.query(db.GroupJunction.post_id)\
                               .filter(db.GroupJunction.group_id == group_item.id)\
                               .order_by(db.GroupJunction.date_added.desc())\
-                              .first()
+                              .limit(3)
 
-        if thumbnail:
-            group_item.thumbnail = db_session.query(db.Posts.file_name, db.Posts.post_alt,
-                                               db.Posts.image_colours, db.Posts.id)\
-                                        .filter(db.Posts.id == thumbnail[0])\
-                                        .first()
+        # Add an empty list to the group item
+        group_item.images = []
+        # For each image, get the image data and add it to the group item
+        for image in group_images:
+            group_item.images.append(db_session.query(db.Posts.file_name,
+                                                      db.Posts.post_alt,
+                                                      db.Posts.image_colours,
+                                                      db.Posts.id)\
+                                                .filter(db.Posts.id == image[0])\
+                                                .first())
 
     return render_template('groups/list.html', groups=group_list)
 
@@ -88,14 +100,15 @@ def group_post(group_id, image_id):
                                     .filter(db.Users.id == img.author_id)\
                                     .first()[0]
 
-    group_list = db_session.query(db.GroupJunction.group_id)\
+    groups = db_session.query(db.GroupJunction.group_id)\
                        .filter(db.GroupJunction.post_id == image_id)\
                        .all()
 
-    img.group_list = []
-    for group_item in group_list:
-        group_item = db_session.query(db.Groups).filter(db.Groups.id == group_item[0]).first()
-        img.group_list.append(group_item)
+    img.groups = []
+    for group in groups:
+        group = db_session.query(db.Groups).filter(db.Groups.id == group[0]).first()
+        img.groups.append(group)
+
 
     next_url = db_session.query(db.GroupJunction.post_id)\
                          .filter(db.GroupJunction.group_id == group_id)\
diff --git a/gallery/templates/groups/group.html b/gallery/templates/groups/group.html
index db54a1d..9556124 100644
--- a/gallery/templates/groups/group.html
+++ b/gallery/templates/groups/group.html
@@ -11,11 +11,11 @@
             }
 
             .banner-filter {
-                background: linear-gradient(to right, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !important;
+                background: linear-gradient(90deg, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.3)) !important;
             }
             @media (max-width: 800px) {
                 .banner-filter {
-                    background: linear-gradient(to bottom, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !important;
+                    background: linear-gradient(180deg, rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.8), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.5)) !important;
                 }
             }
         {% endif %}
@@ -29,12 +29,8 @@
                 <p>By {{ group.author_username }}</p>
             </div>
         {% else %}
-            <img
-                src="/api/file/{{ images.0.file_name }}?r=prev"
-                onload="imgFade(this)"
-                style="opacity:0;"
-            />
-            <span class="banner-filter" ></span>
+            <img src="{{ url_for('api.file', file_name=images.0.file_name ) }}?r=prev" onload="imgFade(this)" style="opacity:0;"/>
+            <span class="banner-filter"></span>
             <div class="banner-content">
                 <p>By {{ group.author_username }} - {{ images|length }} Images</p>
                 <h1>{{ group.name }}</h1>
diff --git a/gallery/templates/groups/list.html b/gallery/templates/groups/list.html
index 0903893..62cb3e6 100644
--- a/gallery/templates/groups/list.html
+++ b/gallery/templates/groups/list.html
@@ -23,23 +23,21 @@
     {% if groups %}
         <div class="gallery-grid">
             {% for group in groups %}
-                {% if group.thumbnail %}
-                    <a id="group-{{ group.id }}" class="gallery-item" href="{{ url_for('group.group', group_id=group.id) }}" style="background-color: rgb({{ group.thumbnail.image_colours.0.0 }}, {{ group.thumbnail.image_colours.0.1 }}, {{ group.thumbnail.image_colours.0.2 }})">
-                        <div class="image-filter">
-                            <p class="image-subtitle"></p>
-                            <p class="image-title">{{ group.name }}</p>
-                        </div>
-                        <img data-src="{{ group.thumbnail.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/>
-                    </a>
-                {% else %}
-                    <a id="group-{{ group.id }}" class="gallery-item" href="{{ url_for('group.group', group_id=group.id) }}">
-                        <div class="image-filter">
-                            <p class="image-subtitle"></p>
-                            <p class="image-title">{{ group.name }}</p>
-                        </div>
-                        <img src="{{ url_for('static', filename='error.png') }}" onload="this.classList.add('loaded');"/>
-                    </a>
-                {% endif %}
+                <a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}">
+                    <div class="image-filter">
+                        <p class="image-subtitle">By {{ group.author_username }}</p>
+                        <p class="image-title">{{ group.name }}</p>
+                    </div>
+                    <div class="images size-{{ group.images|length }}">
+                        {% if group.images|length > 0 %}
+                            {% for image in group.images %}
+                                <img data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}"/>
+                            {% endfor %}
+                        {% else %}
+                            <img src="{{ url_for('static', filename='error.png') }}" class="loaded"/>
+                        {% endif %}
+                    </div>
+                </a>
             {% endfor %}
         </div>
     {% else %}
diff --git a/gallery/templates/image.html b/gallery/templates/image.html
index 45f4a1d..4fe1ed9 100644
--- a/gallery/templates/image.html
+++ b/gallery/templates/image.html
@@ -197,45 +197,29 @@
                     </svg>
                 </div>
                 <div class="info-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>
                     <table>
-                        <tr>
-                            <td>Image ID</td>
-                            <td>{{ image['id'] }}</td>
-                        </tr>
                         <tr>
                             <td>Author</td>
-                            <td>{{ image.author_username }}</td>
+                            <td><a href="{{ url_for('gallery.profile_id', user_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>
                     </table>
-                    {% if group and image.author_id == g.user.id %}
+                    <div class="img-colours">
+                        {% for col in image.image_colours %}
+                            <span style="background-color: rgb({{col.0}}, {{col.1}}, {{col.2}})"></span>
+                        {% endfor %}
+                    </div>
+                    {% if image.groups %}
                         <div class="img-groups">
                             {% for group in image.groups %}
-                                <a href="/group/{{ group.id }}" class="tag-icon">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88V200.89a7.11,7.11,0,0,1-7.11,7.11H40a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6l27.74,20.8a8,8,0,0,0,4.8,1.6H216A8,8,0,0,1,224,88Z" opacity="0.2"></path><path d="M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33l27.74,20.8a16.12,16.12,0,0,0,9.6,3.2H216Z"></path></svg>
+                                <a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
                                     {{ group['name'] }}
                                 </a>
                             {% endfor %}
-
-                            <button class="tag-icon" id="#img-group">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>
-                                Add
-                            </button>
-                        </div>
-                    {% elif image.author_id == g.user.id %}
-                        <div class="img-groups">
-                            <button class="tag-icon" id="#img-group">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>
-                                Add
-                            </button>
                         </div>
                     {% endif %}
                 </div>
diff --git a/gallery/themes/default/components/banner.sass b/gallery/themes/default/components/banner.sass
index d6e5e83..97aa3a7 100644
--- a/gallery/themes/default/components/banner.sass
+++ b/gallery/themes/default/components/banner.sass
@@ -70,7 +70,6 @@
 
     &.small
         height: 3.5rem
-
         background-color: RGB($bg-100)
 
         .banner-content
diff --git a/gallery/themes/default/components/elements/tags.sass b/gallery/themes/default/components/elements/tags.sass
index 8b4e42d..4901829 100644
--- a/gallery/themes/default/components/elements/tags.sass
+++ b/gallery/themes/default/components/elements/tags.sass
@@ -2,23 +2,26 @@
     margin: 0
     padding: 0.25rem 0.5rem
 
-
     display: flex
     align-items: center
     justify-content: center
     gap: 0.25rem
 
-    font-size: 1rem
+    font-size: 0.9rem
     font-weight: 500
     text-decoration: none
 
     border-radius: $rad-inner
-    background-color: RGB($primary)
-    color: RGB($bg-100)
     border: none
+    background-color: RGBA($primary, 0.1)
+    color: RGB($primary)
 
     cursor: pointer
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
 
     svg
         width: 1.15rem
-        height: 1.15rem
\ No newline at end of file
+        height: 1.15rem
+
+    &:hover
+        background-color: RGBA($primary, 0.3)
diff --git a/gallery/themes/default/components/elements/upload-panel.sass b/gallery/themes/default/components/elements/upload-panel.sass
index 07d257e..d92ad51 100644
--- a/gallery/themes/default/components/elements/upload-panel.sass
+++ b/gallery/themes/default/components/elements/upload-panel.sass
@@ -85,7 +85,7 @@
             left: 0
 
             width: 100%
-            height: 3rem
+            height: 5rem
 
             z-index: +1
 
diff --git a/gallery/themes/default/components/gallery.sass b/gallery/themes/default/components/gallery.sass
index cee4b58..4e42dd8 100644
--- a/gallery/themes/default/components/gallery.sass
+++ b/gallery/themes/default/components/gallery.sass
@@ -26,50 +26,40 @@
         padding: 0.5rem
 
         width: 100%
-        height: 100%
+        height: 30%
 
         position: absolute
         left: 0
-        bottom: -1rem
+        bottom: 0
 
         display: flex
         flex-direction: column
         justify-content: flex-end
 
-        background-image: linear-gradient(to top, $bg-transparent, transparent)
-
-        z-index: +1
-
+        background-image: linear-gradient(to top, rgba($bg-100, 0.5), transparent)
         opacity: 0 // hide
-        transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
 
-    .image-title
-        margin: 0
+        z-index: +4
+        transition: background-image 0.3s cubic-bezier(.79, .14, .15, .86), opacity 0.3s cubic-bezier(.79, .14, .15, .86)
 
-        font-size: 1rem
-        font-weight: 600
+        .image-title,
+        .image-subtitle
+            margin: 0
+            padding: 0
 
-        color: RGB($fg-white)
+            white-space: nowrap
+            text-overflow: ellipsis
+            overflow: hidden
 
-        text-overflow: ellipsis
-        overflow: hidden
+            color: RGB($fg-white)
 
-        opacity: 0 // hide
-        transition: all 0.2s ease-in-out
+        .image-title
+            font-size: 0.9rem
+            font-weight: 800
 
-    .image-subtitle
-        margin: 0
-
-        font-size: 0.8rem
-        font-weight: 500
-
-        color: RGB($fg-white)
-
-        text-overflow: ellipsis
-        overflow: hidden
-
-        opacity: 0 // hide
-        transition: all 0.2s ease-in-out
+        .image-subtitle
+            font-size: 0.8rem
+            font-weight: 600
 
     img
         width: 100%
@@ -99,15 +89,155 @@
 
     &:hover
         .image-filter
-            bottom: 0
-            opacity: 1
-
-        .image-title,
-        .image-subtitle
+            background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
             opacity: 1
 
         img
             transform: scale(1)
+
+.group-item
+    margin: 0
+    padding: 0
+
+    height: auto
+
+    position: relative
+
+    border-radius: $rad
+
+    box-sizing: border-box
+    overflow: hidden
+
+    .image-filter
+        margin: 0
+        padding: 0.5rem
+
+        width: 100%
+        height: 30%
+
+        position: absolute
+        left: 0
+        bottom: 0
+
+        display: flex
+        flex-direction: column
+        justify-content: flex-end
+
+        background-image: linear-gradient(to top, rgba($bg-100, 0.8), transparent)
+
+        z-index: +4
+
+        .image-title,
+        .image-subtitle
+            margin: 0
+            padding: 0
+
+            white-space: nowrap
+            text-overflow: ellipsis
+            overflow: hidden
+
+            color: RGB($fg-white)
+
+        .image-title
+            font-size: 0.9rem
+            font-weight: 800
+
+        .image-subtitle
+            font-size: 0.8rem
+            font-weight: 600
+
+    .images
+        margin: 0
+        padding: 0
+
+        width: 100%
+        height: 100%
+
+        position: absolute
+        inset: 0
+
+        display: block
+
+        background-color: RGB($fg-white)
+
+        img
+            width: 100%
+            height: 100%
+
+            position: absolute
+            top: 0
+            left: 0
+
+            object-fit: cover
+            object-position: center
+
+            background-color: RGB($fg-white)
+            border-radius: $rad-inner
+            box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.25)
+            filter: blur(0.5rem)
+            opacity: 0
+
+            transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
+
+            &.loaded
+                filter: blur(0)
+                opacity: 1
+
+        &.size-1
+            .data-1
+                transform: scale(0.8) rotate(3deg)
+
+        &.size-2
+            .data-1
+                transform: scale(0.7) rotate(-3deg) translate(10%, 10%)
+                z-index: +2
+            .data-2
+                transform: scale(0.7) rotate(3deg) translate(-10%, -10%)
+                z-index: +1
+
+        &.size-3
+            .data-1
+                transform: scale(0.6) rotate(3deg) translate(-25%, 25%)
+                z-index: +3
+            .data-2
+                transform: scale(0.6) rotate(-5deg) translate(25%, 10%)
+                z-index: +2
+            .data-3
+                transform: scale(0.6) rotate(-1deg) translate(-15%, -25%)
+                z-index: +1
+
+    &:after
+        content: ""
+        display: block
+        padding-bottom: 100%
+
+    &:hover
+        .images
+            img
+                box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
+
+            &.size-1
+                .data-1
+                    transform: scale(0.9) rotate(0deg)
+
+            &.size-2
+                .data-1
+                    transform: scale(0.75) rotate(-1deg) translate(12%, 14%)
+                    z-index: +2
+                .data-2
+                    transform: scale(0.75) rotate(1deg) translate(-12%, -10%)
+                    z-index: +1
+
+            &.size-3
+                .data-1
+                    transform: scale(0.65) rotate(1deg) translate(-24%, 24%)
+                    z-index: +3
+                .data-2
+                    transform: scale(0.65) rotate(-2deg) translate(24%, 10%)
+                    z-index: +2
+                .data-3
+                    transform: scale(0.65) rotate(0deg) translate(-15%, -25%)
+                    z-index: +1
             
 @media (max-width: 800px)
     .gallery-grid
diff --git a/gallery/themes/default/components/image-view/info-tab.sass b/gallery/themes/default/components/image-view/info-tab.sass
index c48037e..86fffca 100644
--- a/gallery/themes/default/components/image-view/info-tab.sass
+++ b/gallery/themes/default/components/image-view/info-tab.sass
@@ -109,6 +109,23 @@
         text-overflow: ellipsis
         overflow: hidden
 
+    .link
+        margin: 0
+        padding: 0
+        
+        font-size: 1rem
+        font-weight: 500
+        text-align: center
+        line-height: 1
+
+        color: RGB($primary)
+
+        cursor: pointer
+        text-decoration: none
+
+        &:hover
+            text-decoration: underline
+
     table
         margin: 0
         padding: 0
@@ -177,13 +194,13 @@
         justify-content: center
         align-items: center
 
-        border-radius: 50%
-        border: 1px solid RGB($white)
+        border-radius: $rad-inner
+        // border: 1px solid RGB($white)
 
 .img-groups
     width: 100%
-
     display: flex
+    flex-wrap: wrap
     gap: 0.5rem
 
 @media (max-width: 1100px)
diff --git a/gallery/themes/default/components/navigation.sass b/gallery/themes/default/components/navigation.sass
index 88cda84..07c8ce1 100644
--- a/gallery/themes/default/components/navigation.sass
+++ b/gallery/themes/default/components/navigation.sass
@@ -113,19 +113,23 @@
             opacity: 1
             left: 3.9rem
 
-    &.selected::before
-        content: ''
-        display: block
+    &.selected
+        > svg
+            color: RGB($primary)
 
-        position: absolute
-        top: 3px
-        left: 0
+        &::before
+            content: ''
+            display: block
 
-        width: 3px
-        height: calc(100% - 6px)
+            position: absolute
+            top: 3px
+            left: 0
 
-        background-color: RGB($primary)
-        border-radius: 0 $rad-inner $rad-inner 0
+            width: 3px
+            height: calc(100% - 6px)
+
+            background-color: RGB($primary)
+            border-radius: 0 $rad-inner $rad-inner 0
 
 @media (max-width: $breakpoint)
     .navigation