diff --git a/onlylegs/models.py b/onlylegs/models.py
index ace0b67..21a1bca 100644
--- a/onlylegs/models.py
+++ b/onlylegs/models.py
@@ -87,9 +87,12 @@ class User(db.Model, UserMixin):  # pylint: disable=too-few-public-methods, C010
     id = db.Column(db.Integer, primary_key=True)
     alt_id = db.Column(db.String, unique=True, nullable=False, default=str(uuid4()))
 
-    profile_picture = db.Column(db.String, nullable=True, default=None)
+    picture = db.Column(db.String, nullable=True, default=None)
+    picture_colour = db.Column(db.String, nullable=True, default=None)
+    banner = db.Column(db.String, nullable=True, default=None)
+    bannner_colour = db.Column(db.String, nullable=True, default=None)
+    
     username = db.Column(db.String, unique=True, nullable=False)
-
     email = db.Column(db.String, unique=True, nullable=False)
     password = db.Column(db.String, nullable=False)
     joined_at = db.Column(
diff --git a/onlylegs/static/banner.png b/onlylegs/static/banner.png
new file mode 100644
index 0000000..179ed20
Binary files /dev/null and b/onlylegs/static/banner.png differ
diff --git a/onlylegs/static/sass/components/banner.sass b/onlylegs/static/sass/components/banner.sass
index f835868..9f1d1fd 100644
--- a/onlylegs/static/sass/components/banner.sass
+++ b/onlylegs/static/sass/components/banner.sass
@@ -36,6 +36,8 @@
 
 .banner
     height: 30rem
+    max-height: 69vh
+
     background-color: RGB($bg-300)
 
     img
@@ -72,9 +74,8 @@
         bottom: 0
 
         display: grid
-        grid-template-columns: 1fr auto
-        grid-template-rows: 1fr auto auto
-        grid-template-areas: 'info info' 'header header' 'subtitle options'
+        grid-template-columns: auto 1fr auto
+        grid-template-areas: 'info info info' 'image header header' 'subtitle subtitle options'
 
         z-index: +2
 
@@ -109,6 +110,19 @@
             margin-top: auto
             grid-area: options
 
+        .banner-picture
+            grid-area: image
+
+            margin: auto 1rem auto 0
+
+            position: relative
+
+            width: 6.9rem
+            height: 6.9rem
+
+            background-color: RGB($primary)
+            border-radius: $rad
+
 .banner-small
     height: 3.5rem
     background-color: RGB($bg-100)
@@ -165,8 +179,12 @@
             display: none
 
     .banner
-        min-height: 17rem
+        min-height: 15rem
         height: auto
+        max-height: 30vh
+
+        .banner-filter
+            background: linear-gradient(to bottom, RGB($bg-100), transparent)
 
         .banner-content
             padding: 0.5rem
@@ -178,7 +196,7 @@
             align-items: center
 
             .banner-header
-                margin: 1rem 0
+                margin: 0.5rem 0
                 text-align: center
                 font-size: 2.5rem
 
@@ -192,6 +210,14 @@
             .pill-row
                 margin-top: 0rem
 
+            .banner-picture
+                margin: 0 auto
+
+                width: 4rem
+                height: 4rem
+
+                display: flex
+
     .banner-small
         .banner-content
             .banner-info
diff --git a/onlylegs/static/sass/components/gallery.sass b/onlylegs/static/sass/components/gallery.sass
index e714e23..9b980ce 100644
--- a/onlylegs/static/sass/components/gallery.sass
+++ b/onlylegs/static/sass/components/gallery.sass
@@ -1,3 +1,16 @@
+.gallery-header
+    margin: 0.5rem
+    padding: 0
+
+    width: 100%
+
+    display: flex
+    flex-direction: row
+    justify-content: flex-start
+
+    font-size: 2rem
+    font-weight: 700
+    
 .gallery-grid
     margin: 0
     padding: 0.35rem
diff --git a/onlylegs/static/sass/components/pop-up.sass b/onlylegs/static/sass/components/pop-up.sass
index 6a7de6e..0e6974b 100644
--- a/onlylegs/static/sass/components/pop-up.sass
+++ b/onlylegs/static/sass/components/pop-up.sass
@@ -138,7 +138,7 @@
 @media (max-width: $breakpoint)
     .pop-up
         .pop-up-wrapper
-            width: calc(100% - 0.75rem)
+            max-width: calc(100% - 0.75rem)
             max-height: 95vh
 
         .pop-up-content
diff --git a/onlylegs/templates/profile.html b/onlylegs/templates/profile.html
index 2729cb8..c85c81d 100644
--- a/onlylegs/templates/profile.html
+++ b/onlylegs/templates/profile.html
@@ -2,13 +2,41 @@
 
 {% block nav_profile %}selected{% endblock %}
 {% block content %}
-    <div class="banner-small">
+    <div class="banner">
+        {% if user.banner %}
+            <img src="{{ url_for('static', filename='icon.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
+        {% else %}
+            <img src="{{ url_for('static', filename='banner.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
+        {% endif %}
+        <span class="banner-filter"></span>
         <div class="banner-content">
+            {% if user.picture %}
+                <img class="banner-picture" src="{{ url_for('static', filename='icon.png') }}" alt="Profile picture" onload="imgFade(this)" style="opacity:0;"/>
+            {% else %}
+                <img class="banner-picture" src="{{ url_for('static', filename='icon.png') }}" alt="Profile picture" onload="imgFade(this)" style="opacity:0;"/>
+            {% endif %}
             <h1 class="banner-header">{{ user.username }}</h1>
-            <p class="banner-info">Member since <span class="time">{{ user.joined_at }}</span></p>
+            <p class="banner-subtitle">{{ images|length }} Images · {{ groups|length }} Groups</p>
+            <div class="pill-row">
+                <div>
+                    <button class="pill-item" onclick="groupShare()">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"></path></svg>
+                    </button>
+                    <button class="pill-item" onclick="moreInfo()">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
+                    </button>
+                </div>
+                <div>
+                    <a href="{{ url_for('settings.general') }}#profileSettings" class="pill-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M228.25,63.07l-4.66-2.69a23.6,23.6,0,0,0,0-8.76l4.66-2.69a8,8,0,0,0-8-13.86l-4.67,2.7A23.92,23.92,0,0,0,208,33.38V28a8,8,0,0,0-16,0v5.38a23.92,23.92,0,0,0-7.58,4.39l-4.67-2.7a8,8,0,1,0-8,13.86l4.66,2.69a23.6,23.6,0,0,0,0,8.76l-4.66,2.69a8,8,0,0,0,4,14.93,7.92,7.92,0,0,0,4-1.07l4.67-2.7A23.92,23.92,0,0,0,192,78.62V84a8,8,0,0,0,16,0V78.62a23.92,23.92,0,0,0,7.58-4.39l4.67,2.7a7.92,7.92,0,0,0,4,1.07,8,8,0,0,0,4-14.93ZM192,56a8,8,0,1,1,8,8A8,8,0,0,1,192,56Zm29.35,48.11a8,8,0,0,0-6.57,9.21A88.85,88.85,0,0,1,216,128a87.62,87.62,0,0,1-22.24,58.41,79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75A88,88,0,0,1,128,40a88.76,88.76,0,0,1,14.68,1.22,8,8,0,0,0,2.64-15.78,103.92,103.92,0,1,0,85.24,85.24A8,8,0,0,0,221.35,104.11ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0Z"></path></svg>
+                    </a>
+                </div>
+            </div>
         </div>
     </div>
+
     {% if images %}
+        <h1 class="gallery-header">Images</h1>
         <div class="gallery-grid">
             {% for image in images %}
                 <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }})">
diff --git a/onlylegs/views/profile.py b/onlylegs/views/profile.py
index bde1330..b83399f 100644
--- a/onlylegs/views/profile.py
+++ b/onlylegs/views/profile.py
@@ -5,7 +5,8 @@ from flask import Blueprint, render_template, request
 from werkzeug.exceptions import abort
 from flask_login import current_user
 
-from onlylegs.models import Post, User
+from onlylegs.models import Post, User, Group
+from onlylegs.extensions import db
 
 
 blueprint = Blueprint("profile", __name__, url_prefix="/profile")
@@ -26,11 +27,9 @@ def profile():
             abort(404, "You must be logged in to view your own profile!")
 
     # Get the user's data
-    user = User.query.filter(User.id == user_id).first()
-
-    if not user:
-        abort(404, "User not found :c")
+    user = db.get_or_404(User, user_id, description="User not found :<")
 
     images = Post.query.filter(Post.author_id == user_id).all()
+    groups = Group.query.filter(Group.author_id == user_id).all()
 
-    return render_template("profile.html", user=user, images=images)
+    return render_template("profile.html", user=user, images=images, groups=groups)