diff --git a/assets/less/classes/settings/login-attempt.less b/assets/less/classes/settings/login-attempt.less
new file mode 100644
index 00000000..2810e51d
--- /dev/null
+++ b/assets/less/classes/settings/login-attempt.less
@@ -0,0 +1,83 @@
+.settings__login-attempt {
+    border: 1px solid var(--accent-colour);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 4px;
+
+    &--failed {
+        --accent-colour: #a00;
+        background-color: var(--accent-colour);
+    }
+
+    &--failed &__container {
+        background-color: fade(#111, 80%);
+    }
+
+    &__container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    &__important {
+        display: flex;
+        align-items: center;
+        font-size: 1.4em;
+        z-index: 2;
+    }
+
+    &__flag {
+        flex: 0 0 auto;
+        margin: 10px;
+        margin-right: 0;
+    }
+
+    &__description {
+        flex: 1 1 auto;
+        margin: 10px;
+    }
+
+    &__actions {
+        flex: 0 0 auto;
+        display: flex;
+    }
+
+    &__action {
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        text-shadow: inherit;
+        padding: 10px;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover {
+            color: var(--accent-colour);
+        }
+    }
+
+    &__details {
+        z-index: 1;
+        margin: 10px;
+        margin-top: -5px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    &__detail {
+        display: inline-block;
+        margin-right: 2px;
+        min-width: 120px;
+
+        &__title {
+            border-bottom: 1px solid var(--accent-colour);
+            font-weight: 700;
+            padding: 1px 5px;
+        }
+
+        &__value {
+            padding: 1px 5px;
+        }
+    }
+}
diff --git a/assets/less/classes/settings/login-attempts.less b/assets/less/classes/settings/login-attempts.less
new file mode 100644
index 00000000..c3c15d48
--- /dev/null
+++ b/assets/less/classes/settings/login-attempts.less
@@ -0,0 +1,6 @@
+.settings__login-attempts {
+
+    &__pagination {
+        margin: 4px;
+    }
+}
diff --git a/assets/less/classes/settings/login-history.less b/assets/less/classes/settings/login-history.less
deleted file mode 100644
index dea4e43e..00000000
--- a/assets/less/classes/settings/login-history.less
+++ /dev/null
@@ -1,63 +0,0 @@
-.settings__login-history {
-    margin: 1px;
-
-    &__country {
-        vertical-align: middle;
-    }
-
-    &__entry {
-        display: flex;
-        border: 1px solid var(--accent-colour);
-        justify-content: space-between;
-        padding: 1px;
-        flex-wrap: wrap;
-
-        &:not(:last-child) {
-            margin-bottom: 1px;
-        }
-    }
-
-    &__column {
-        flex-grow: 1;
-        margin-left: 5px;
-        margin-right: 1px;
-
-        &--ip,
-        &--created,
-        &--success {
-            flex-shrink: 0;
-
-            &:not(:last-child) {
-                flex-grow: 0;
-            }
-        }
-
-        &--user-agent {
-            flex-shrink: 1;
-            flex-grow: 1;
-        }
-
-        &--ip {
-            min-width: 200px;
-        }
-
-        &--created,
-        &--success {
-            min-width: 120px;
-        }
-
-        &__name {
-            font-weight: 700;
-        }
-
-        &__value {
-            &--successful {
-                color: #0a0;
-            }
-
-            &--failed {
-                color: #c00;
-            }
-        }
-    }
-}
diff --git a/assets/less/classes/settings/session.less b/assets/less/classes/settings/session.less
index bb469e93..48f272af 100644
--- a/assets/less/classes/settings/session.less
+++ b/assets/less/classes/settings/session.less
@@ -1,15 +1,23 @@
 .settings__session {
-    margin: 4px;
     border: 1px solid var(--accent-colour);
     border-radius: 2px;
     overflow: hidden;
+    margin: 4px;
 
     &--current {
-        // todo: make this not bad
-        background-image: linear-gradient(0deg, #111c, #111c);
         background-color: var(--accent-colour);
     }
 
+    &--current &__container {
+        background-color: fade(#111, 80%);
+    }
+
+    &__container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
     &__important {
         display: flex;
         align-items: center;
diff --git a/assets/less/main.less b/assets/less/main.less
index 2be74ee5..f838d001 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -130,7 +130,8 @@ body {
 @import "classes/settings/pagination";
 @import "classes/settings/account";
 @import "classes/settings/log";
-@import "classes/settings/login-history";
+@import "classes/settings/login-attempt";
+@import "classes/settings/login-attempts";
 @import "classes/settings/session";
 @import "classes/settings/sessions";
 @import "classes/settings/role";
diff --git a/templates/user/macros.twig b/templates/user/macros.twig
index f7c697ac..230eb850 100644
--- a/templates/user/macros.twig
+++ b/templates/user/macros.twig
@@ -49,72 +49,128 @@
     {% set browser = get_browser(session.session_user_agent) %}
 
     <div class="settings__session{% if is_current_session %} settings__session--current{% endif %}" id="session-{{ session.session_id }}">
-        <div class="settings__session__important">
-            <div class="flag flag--{{ session.session_country|lower }} settings__session__flag"></div>
+        <div class="settings__session__container">
+            <div class="settings__session__important">
+                <div class="flag flag--{{ session.session_country|lower }} settings__session__flag"></div>
 
-            <div class="settings__session__description">
-                {{ browser.browser }} on {{ browser.platform }}
+                <div class="settings__session__description">
+                    {{ browser.browser }} on {{ browser.platform }}
+                </div>
+
+                <form class="settings__session__actions" method="post" action="/settings.php">
+                    {{ input_csrf('settings') }}
+                    {{ input_hidden('session[]', session.session_id) }}
+
+                    <button class="settings__session__action" title="{{ is_current_session ? 'Logout' : 'End Session' }}">
+                        {% if is_current_session %}
+                            <i class="fas fa-sign-out-alt"></i>
+                        {% else %}
+                            <i class="fas fa-times-circle"></i>
+                        {% endif %}
+                    </button>
+                </form>
             </div>
 
-            <form class="settings__session__actions" method="post" action="/settings.php">
-                {{ input_csrf('settings') }}
-                {{ input_hidden('session[]', session.session_id) }}
-
-                <button class="settings__session__action" title="{{ is_current_session ? 'Logout' : 'End Session' }}">
-                    {% if is_current_session %}
-                        <i class="fas fa-sign-out-alt"></i>
-                    {% else %}
-                        <i class="fas fa-times-circle"></i>
-                    {% endif %}
-                </button>
-            </form>
-        </div>
-
-        <div class="settings__session__details">
-            <div class="settings__session__detail">
-                <div class="settings__session__detail__title">
-                    IP Address
-                </div>
-                <div class="settings__session__detail__value">
-                    {{ session.session_ip }}
-                </div>
-            </div>
-
-            <div class="settings__session__detail" title="{{ session.session_created|date('r') }}">
-                <div class="settings__session__detail__title">
-                    Created
-                </div>
-                <time class="settings__session__detail__value" datetime="{{ session.session_created|date('c') }}">
-                    {{ session.session_created|time_diff }}
-                </time>
-            </div>
-
-            <div class="settings__session__detail" title="{{ session.session_expires|date('r') }}">
-                <div class="settings__session__detail__title">
-                    Expires
-                </div>
-                <time class="settings__session__detail__value" datetime="{{ session.session_expires|date('c') }}">
-                    {{ session.session_expires|time_diff }}
-                </time>
-            </div>
-
-            {% if session.session_active is not null %}
-                <div class="settings__session__detail" title="{{ session.session_active|date('r') }}">
+            <div class="settings__session__details">
+                <div class="settings__session__detail">
                     <div class="settings__session__detail__title">
-                        Last Active
+                        IP Address
                     </div>
-                    <time class="settings__session__detail__value" datetime="{{ session.session_active|date('c') }}">
-                        {{ session.session_active|time_diff }}
+                    <div class="settings__session__detail__value">
+                        {{ session.session_ip }}
+                    </div>
+                </div>
+
+                <div class="settings__session__detail" title="{{ session.session_created|date('r') }}">
+                    <div class="settings__session__detail__title">
+                        Created
+                    </div>
+                    <time class="settings__session__detail__value" datetime="{{ session.session_created|date('c') }}">
+                        {{ session.session_created|time_diff }}
                     </time>
                 </div>
-            {% endif %}
 
-            <div class="settings__session__detail">
-                <div class="settings__session__detail__title">
-                    User Agent
+                <div class="settings__session__detail" title="{{ session.session_expires|date('r') }}">
+                    <div class="settings__session__detail__title">
+                        Expires
+                    </div>
+                    <time class="settings__session__detail__value" datetime="{{ session.session_expires|date('c') }}">
+                        {{ session.session_expires|time_diff }}
+                    </time>
                 </div>
-                <div class="settings__session__detail__value">
-                    {{ session.session_user_agent|length > 0 ? session.session_user_agent : 'None' }}
+
+                {% if session.session_active is not null %}
+                    <div class="settings__session__detail" title="{{ session.session_active|date('r') }}">
+                        <div class="settings__session__detail__title">
+                            Last Active
+                        </div>
+                        <time class="settings__session__detail__value" datetime="{{ session.session_active|date('c') }}">
+                            {{ session.session_active|time_diff }}
+                        </time>
+                    </div>
+                {% endif %}
+
+                <div class="settings__session__detail">
+                    <div class="settings__session__detail__title">
+                        User Agent
+                    </div>
+                    <div class="settings__session__detail__value">
+                        {{ session.session_user_agent|length > 0 ? session.session_user_agent : 'None' }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro user_login_attempt(attempt) %}
+    {% set browser = get_browser(attempt.attempt_user_agent) %}
+
+    <div class="settings__login-attempt{% if not attempt.attempt_success %} settings__login-attempt--failed{% endif %}" id="login-attempt-{{ attempt.attempt_id }}">
+        <div class="settings__login-attempt__container">
+            <div class="settings__login-attempt__important">
+                <div class="flag flag--{{ attempt.attempt_country|lower }} settings__login-attempt__flag"></div>
+
+                <div class="settings__login-attempt__description">
+                    {{ browser.browser }} on {{ browser.platform }}
+                </div>
+            </div>
+
+            <div class="settings__login-attempt__details">
+                <div class="settings__login-attempt__detail">
+                    <div class="settings__login-attempt__detail__title">
+                        IP Address
+                    </div>
+                    <div class="settings__login-attempt__detail__value">
+                        {{ attempt.attempt_ip }}
+                    </div>
+                </div>
+
+                <div class="settings__login-attempt__detail">
+                    <div class="settings__login-attempt__detail__title">
+                        Succeeded
+                    </div>
+                    <div class="settings__login-attempt__detail__value">
+                        {{ attempt.attempt_success ? 'Yes' : 'No' }}
+                    </div>
+                </div>
+
+                <div class="settings__login-attempt__detail" title="{{ attempt.attempt_created|date('r') }}">
+                    <div class="settings__login-attempt__detail__title">
+                        Attempted
+                    </div>
+                    <time class="settings__login-attempt__detail__value" datetime="{{ attempt.attempt_created|date('c') }}">
+                        {{ attempt.attempt_created|time_diff }}
+                    </time>
+                </div>
+
+                <div class="settings__login-attempt__detail">
+                    <div class="settings__login-attempt__detail__title">
+                        User Agent
+                    </div>
+                    <div class="settings__login-attempt__detail__value">
+                        {{ attempt.attempt_user_agent|length > 0 ? attempt.attempt_user_agent : 'None' }}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/templates/user/settings.twig b/templates/user/settings.twig
index b49ff523..19077f3d 100644
--- a/templates/user/settings.twig
+++ b/templates/user/settings.twig
@@ -1,6 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import container_title, pagination %}
-{% from 'user/macros.twig' import user_session %}
+{% from 'user/macros.twig' import user_session, user_login_attempt %}
 {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
 
 {% set title = 'Settings' %}
@@ -198,55 +198,18 @@
             <p>These are all the login attempts to your account. If any attempt that you don't recognise is marked as successful your account may be compromised, ask a staff member for advice in this case.</p>
         </div>
 
-        <div class="settings__login-history">
-            {{ lhpagination }}
+        <div class="settings__login-attempts">
+            <div class="settings__login-attempts__pagination">
+                {{ lhpagination }}
+            </div>
 
             {% for attempt in logins.list %}
-                <div class="settings__login-history__entry" id="attempt-{{ attempt.attempt_id }}">
-                    <div class="settings__login-history__column settings__login-history__column--ip">
-                        <div class="settings__login-history__column__name">
-                            IP
-                        </div>
-                        <div class="settings__login-history__column__value">
-                            {{ attempt.attempt_ip }}
-                            {% if attempt.attempt_country != 'XX' %}
-                                <div class="flag flag--{{ attempt.attempt_country|lower }} settings__login-history__country" title="{{ attempt.attempt_country|country_name }}"></div>
-                            {% endif %}
-                        </div>
-                    </div>
-
-                    <div class="settings__login-history__column settings__login-history__column--success">
-                        <div class="settings__login-history__column__name">
-                            Was Successful?
-                        </div>
-                        <div class="settings__login-history__column__value settings__login-history__column__value--{{ attempt.attempt_success ? 'successful' : 'failed' }}">
-                            {{ attempt.attempt_success ? 'Yes' : 'No' }}
-                        </div>
-                    </div>
-
-                    <div class="settings__login-history__column settings__login-history__column--created" title="{{ attempt.attempt_created|date('r') }}">
-                        <div class="settings__login-history__column__name">
-                            Attempted
-                        </div>
-                        <time class="settings__login-history__column__value" datetime="{{ attempt.attempt_created|date('c') }}">
-                            {{ attempt.attempt_created|time_diff }}
-                        </time>
-                    </div>
-
-                    {% if attempt.attempt_user_agent|length > 0 %}
-                        <div class="settings__login-history__column settings__login-history__column--user_agent">
-                            <div class="settings__login-history__column__name">
-                                User Agent
-                            </div>
-                            <div class="settings__login-history__column__value">
-                                {{ attempt.attempt_user_agent }}
-                            </div>
-                        </div>
-                    {% endif %}
-                </div>
+                {{ user_login_attempt(attempt) }}
             {% endfor %}
 
-            {{ lhpagination }}
+            <div class="settings__login-attempts__pagination">
+                {{ lhpagination }}
+            </div>
         </div>
     </div>