diff --git a/assets/less/mio/classes/input/button.less b/assets/less/mio/classes/input/button.less
index 80d8676f..3064a75a 100644
--- a/assets/less/mio/classes/input/button.less
+++ b/assets/less/mio/classes/input/button.less
@@ -26,4 +26,8 @@
         border-color: #306;
         background: #8364a1;
     }
+
+    &--small {
+        font-size: 15px;
+    }
 }
diff --git a/assets/less/mio/classes/settings/content.less b/assets/less/mio/classes/settings/content.less
index 70ca7989..15ec69f6 100644
--- a/assets/less/mio/classes/settings/content.less
+++ b/assets/less/mio/classes/settings/content.less
@@ -1,5 +1,7 @@
 .mio__settings__content {
-    &--account {
+    &--account,
+    &--sessions,
+    &--login-history {
         margin: 1px;
     }
 
diff --git a/assets/less/mio/classes/settings/sessions.less b/assets/less/mio/classes/settings/sessions.less
new file mode 100644
index 00000000..8201310f
--- /dev/null
+++ b/assets/less/mio/classes/settings/sessions.less
@@ -0,0 +1,65 @@
+@mio-settings-sessions-mobile: 1000px;
+
+.mio__settings__sessions {
+    &__country {
+        vertical-align: middle;
+    }
+
+    @media (max-width: @mio-settings-sessions-mobile) {
+        &__button {
+            width: 100%;
+            text-align: center;
+        }
+    }
+
+    &__entry {
+        display: flex;
+        border: 1px solid #9475b2;
+        justify-content: space-between;
+        padding: 1px;
+        flex-wrap: wrap;
+
+        &:not(:last-child) {
+            margin-bottom: 1px;
+        }
+    }
+
+    &__column {
+        flex-grow: 1;
+
+        &:not(:last-child) {
+            margin-left: 5px;
+            margin-right: 1px;
+        }
+
+        &--ip,
+        &--created,
+        &--expires,
+        &--options {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+
+        @media (max-width: @mio-settings-sessions-mobile) {
+            &--options {
+                text-align: center;
+                flex-grow: 1;
+                width: 100%;
+            }
+        }
+
+        &--user-agent {
+            flex-shrink: 1;
+            flex-grow: 1;
+        }
+
+        &--created,
+        &--expires {
+            min-width: 120px;
+        }
+
+        &__name {
+            font-weight: 700;
+        }
+    }
+}
diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less
index 0c4e79ad..9a60fa77 100644
--- a/assets/less/mio/main.less
+++ b/assets/less/mio/main.less
@@ -54,6 +54,7 @@ body {
 @import "classes/settings/errors";
 @import "classes/settings/account";
 @import "classes/settings/avatar";
+@import "classes/settings/sessions";
 
 // Forums
 @import "classes/forum/listing";
diff --git a/views/mio/settings/sessions.twig b/views/mio/settings/sessions.twig
index 3242e1bb..aa2d4ba2 100644
--- a/views/mio/settings/sessions.twig
+++ b/views/mio/settings/sessions.twig
@@ -1,7 +1,47 @@
 {% extends '@mio/settings/master.twig' %}
 
 {% block settings_content %}
-    {% for session in user_sessions %}
-        <p>{{ session.session_id }}, {{ session.session_ip.string }}, {{ session.user_agent|default('-') }}, {{ session.session_country }}, {{ session.created_at }}, {{ session.expires_on }}</p>
-    {% endfor %}
+    <div class="mio__settings__sessions">
+        {% for session in user_sessions %}
+            <div class="mio__settings__sessions__entry" id="session-{{ session.session_id }}">
+                <div class="mio__settings__sessions__column mio__settings__sessions__column--ip">
+                    <div class="mio__settings__sessions__column__name">
+                        IP
+                    </div>
+                    <div class="mio__settings__sessions__column__value">
+                        {{ session.session_ip.string }} <img class="mio__settings__sessions__country" src="https://static.flash.moe/flags/fff/{{ session.session_country|lower }}.png" alt="{{ session.session_country }}" title="{{ session.session_country|country_name }}">
+                    </div>
+                </div>
+                <div class="mio__settings__sessions__column mio__settings__sessions__column--created" onmouseenter="this.children[1].textContent = '{{ session.created_at }}';" onmouseleave="this.children[1].textContent = '{{ session.created_at.diffForHumans }}';">
+                    <div class="mio__settings__sessions__column__name">
+                        Created
+                    </div>
+                    <div class="mio__settings__sessions__column__value">
+                        {{ session.created_at.diffForHumans }}
+                    </div>
+                </div>
+                <div class="mio__settings__sessions__column mio__settings__sessions__column--expires" onmouseenter="this.children[1].textContent = '{{ session.expires_on }}';" onmouseleave="this.children[1].textContent = '{{ session.expires_on.diffForHumans }}';">
+                    <div class="mio__settings__sessions__column__name">
+                        Expires
+                    </div>
+                    <div class="mio__settings__sessions__column__value">
+                        {{ session.expires_on.diffForHumans }}
+                    </div>
+                </div>
+                {% if session.user_agent|length > 0 %}
+                    <div class="mio__settings__sessions__column mio__settings__sessions__column--user_agent">
+                        <div class="mio__settings__sessions__column__name">
+                            User Agent
+                        </div>
+                        <div class="mio__settings__sessions__column__value">
+                            {{ session.user_agent }}
+                        </div>
+                    </div>
+                {% endif %}
+                <div class="mio__settings__sessions__column mio__settings__sessions__column--options">
+                    <button class="mio__input__button mio__settings__sessions__button">Kill</button>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
 {% endblock %}