diff --git a/static/styles.css b/static/styles.css
index f3465e7..0a964dd 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -123,4 +123,54 @@ form button {
   margin: 0 auto;
 }
 
+.profile-title {
+  display: block;
+  border-bottom: 1px solid grey;
+  width: 100%;
+}
+.profile-title .profile-username {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+.profile-title .profile-timestamp {
+  padding-left: 1em;
+  font-size: 0.9em;
+}
+.profile-title .profile-timestamp.offline {
+  color: dimgrey;
+}
+.profile-title .profile-timestamp.online {
+  color: #0C8C00;
+  font-weight: 600;
+}
+
+.profile-left {
+  padding: 0.8em;
+  width: fit-content;
+  border-right: 1px solid grey;
+}
+.profile-left .profile-details {
+  font-size: 0.7em;
+  text-align: center;
+}
+.profile-left .profile-picture {
+  margin: 0.8em;
+  max-width: 10em;
+  max-height: 10em;
+  filter: drop-shadow(5px 7px 6px rgba(0, 0, 0, 0.1));
+}
+
+.profile-bio, .profile-left {
+  display: inline-block;
+}
+
+.profile-lower {
+  display: flex;
+  white-space: nowrap;
+}
+.profile-lower .profile-bio {
+  margin: 0.5em 1em;
+  white-space: normal;
+}
+
 /*# sourceMappingURL=styles.css.map */
diff --git a/static/styles.css.map b/static/styles.css.map
index 85fe31a..8023b89 100644
--- a/static/styles.css.map
+++ b/static/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGJ;EACE;EACA;;AAEA;EACE;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/static/styles.scss b/static/styles.scss
index 42bf0fe..be0b38c 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -140,3 +140,60 @@ form {
     margin: 0 auto;
   }
 }
+
+  .profile-title {
+    display: block;
+    border-bottom: 1px solid grey;
+    width: 100%;
+
+    .profile-username {
+      font-size: 1.5em;
+      font-weight: bold;
+    }
+
+    .profile-timestamp {
+      padding-left: 1em;
+      font-size: 0.9em;
+
+      &.offline {
+        color: dimgrey;
+      }
+
+      &.online {
+        color: #0C8C00;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .profile-left {
+    padding: 0.8em;
+    width: fit-content;
+    border-right: 1px solid grey;
+
+    .profile-details {
+      font-size: 0.7em;
+      text-align: center;
+    }
+
+    .profile-picture {
+      margin: 0.8em;
+      max-width: 10em;
+      max-height: 10em;
+      filter: drop-shadow(5px 7px 6px rgb(0 0 0 / 0.1));;
+    }
+  }
+
+  .profile-bio, .profile-left {
+    display: inline-block;
+  }
+
+.profile-lower {
+  display: flex;
+  white-space: nowrap;
+
+  .profile-bio {
+    margin: 0.5em 1em;
+    white-space: normal;
+  }
+}
diff --git a/templates/pages/user.html b/templates/pages/user.html
index 3fd01ed..ff07d04 100644
--- a/templates/pages/user.html
+++ b/templates/pages/user.html
@@ -1 +1,26 @@
 {% extends 'layouts/index.html' %}
+
+{% block content %}
+    <div class="content-inner">
+        <div class="profile-title">
+            <span class="profile-username">{{ user.username }}</span>
+            <span class="profile-timestamp online">Online Now!</span>
+        </div>
+        <div class="profile-lower">
+            <div class="profile-left">
+                <img class="profile-picture" src="{{ url_for('static', filename='default_photo.png') }}" alt="{{ user.username }}'s Profile Picture">
+                <div class="profile-details">
+                    Registered 33 days ago<br>
+                    67 likes<br>
+                    14 posts<br>
+
+                </div>
+            </div>
+            <div class="profile-bio">
+                <p>
+                    This user hasn't written a bio yet.
+                </p>
+            </div>
+        </div>
+    </div>
+{% endblock %}