diff --git a/customize.dist/src/less/alertify.less b/customize.dist/src/less/alertify.less
deleted file mode 100644
index 7f6622522..000000000
--- a/customize.dist/src/less/alertify.less
+++ /dev/null
@@ -1,282 +0,0 @@
-@import "./variables.less";
-
-/*  Logs are shown to inform the user that something has happened
-    They are only displayed briefly
-*/
-.alertify-logs {
-    @media print {
-        visibility: hidden;
-    }
-    > * {
-        padding: @padding-base @padding-base * 4;
-        color: @alertify-fore;
-
-        font-weight: bold;
-        font-size: large;
-
-        box-shadow: @box-shadow;
-        border-radius: @border-radius;
-        &, &.default {
-            // FIXME
-            background: rgba(0, 0, 0, .8);
-        }
-        &.error {
-            background: @danger-color;
-        }
-        &.success {
-            background: @success-color;
-            color: @success-fore;
-        }
-    }
-}
-
-.alertify {
-    position: fixed;
-    background-color: @alertify-bg;
-    color: @alertify-fg;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-
-    &.hide {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &, &.show {
-        box-sizing: border-box;
-        transition: all .33s cubic-bezier(.25, .8, .25, 1);
-    }
-
-    &, * {
-        box-sizing: border-box;
-    }
-
-    .dialog {
-       padding: 12px;
-    }
-
-    .dialog, .alert {
-        .bright {
-            color: @light-base;
-        }
-
-        & > div {
-            background-color: @alertify-dialog-bg;
-            border-radius: 5px;
-            &.half {
-                width: 50%;
-                @media (max-width: @media-medium-screen) {
-                    width: 100%;
-                }
-            }
-        }
-
-        width: 100%;
-        margin: 0 auto;
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-
-        > * {
-            width: 30%;
-            width: 500px;
-            max-width: 95%;
-            margin: 0 auto;
-            text-align: center;
-            padding: @padding-base;
-            background: #fff;
-            // FIXME
-            box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
-        }
-
-        .msg {
-          padding: @padding-base;
-          margin-bottom: @padding-base;
-          margin: 0;
-          text-align: left;
-        }
-
-        input:not(.form-control){
-            background-color: @alertify-input-bg;
-            color: @alertify-input-fg;
-
-            border: 0px;
-            border-radius: 5px;
-
-            margin-bottom: 15px;
-            width: 100%;
-            font-size: 100%;
-            padding: @padding-base;
-            &:focus {
-                //outline-offset: -2px;
-            }
-        }
-        nav {
-
-            text-align: right;
-
-            button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
-
-                background-color: @alertify-btn-bg;
-                box-sizing: border-box;
-                position: relative;
-                outline: 0;
-                border: 0;
-                display: inline-block;
-                align-items: center;
-                padding: 0 6px;
-                margin: 6px 8px;
-                line-height: 36px;
-                min-height: 36px;
-                white-space: nowrap;
-                min-width: 88px;
-                text-align: center;
-                text-transform: uppercase;
-                font-size: 14px;
-                text-decoration: none;
-                cursor: pointer;
-
-                color: @alertify-btn-fg;
-                border: 1px solid @alertify-base;
-                border-radius: 5px;
-
-                &.safe, &.danger {
-                    color: @old-base;
-                    white-space: normal;
-                    font-weight: bold;
-                }
-                &.danger {
-                    background-color: @cp-red;
-                    &:hover, &:active {
-                        background-color: lighten(@cp-red, 5%);
-                    }
-                }
-
-                &.safe {
-                    background-color: @cp-green;
-                    &:hover, &:active {
-                        background-color: lighten(@cp-green, 10%);
-                    }
-                }
-
-                &:hover, &:active {
-                    background-color: @alertify-btn-bg-hover;
-                }
-
-                &:focus {
-                    border: 1px dotted @alertify-base;
-                }
-                &::-moz-focus-inner {
-                    border:0;
-                }
-            }
-
-            button.btn {
-                margin: 6px 4px;
-            }
-        }
-    }
-}
-
-.alertify-logs {
-
-    position: fixed;
-    z-index: 99999;
-
-    &.bottom, &:not(.top) {
-        bottom: 16px;
-        // Bottom left placement. Default. Use for transitions.
-        &.left, &:not(.right) {
-            > * {
-
-            }
-        }
-        // Top right placement
-        &.right {
-            > * {
-
-            }
-        }
-    }
-
-    // All left positions.
-    &.left, &:not(.right) {
-        left: 16px;
-        > * {
-            float: left;
-            transform: translate3d(0, 0, 0);
-            height: auto;
-
-            &.show {
-                left: 0;
-            }
-            &, &.hide {
-                left: -110%;
-            }
-        }
-    }
-
-    &.right {
-        right: 16px;
-        > * {
-            float: right;
-            transform: translate3d(0, 0, 0);
-            &.show {
-                right: 0;
-                opacity: 1;
-            }
-            &, &.hide {
-                right: -110%;
-                opacity: 0;
-            }
-        }
-    }
-
-    &.top {
-        top: 0;
-        // Top left placement, use for transitions.
-        &.left, &:not(.right) {
-            > * {
-
-            }
-        }
-        // Top right placement, use for transitions
-        &.right {
-            > * {
-
-            }
-        }
-    }
-
-    > * {
-        box-sizing: border-box;
-        transition: all .4s cubic-bezier(.25, .8, .25, 1);
-        position: relative;
-        clear: both;
-        backface-visibility: hidden;
-        perspective: 1000;
-
-        & {
-            max-height: 0;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        &.show {
-            margin-top: @padding-base;
-            opacity: 1;
-            max-height: 1000px;
-            padding: @padding-base;
-            pointer-events: auto;
-        }
-    }
-
-}
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index 3e08d9375..bed6c6eea 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -1,7 +1,7 @@
 @import "./variables.less";
 @import "./mixins.less";
 
-@import "./alertify.less";
+@import "../less2/include/alertify.less";
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
@@ -10,6 +10,8 @@
 
 @toolbar-green: #5cb85c;
 
+.alertify_main();
+
 html.cp, .cp body {
     font-size: .875em;
     background-color: @page-white; //@base;
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index ccd1f065f..87165c2b8 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -1,21 +1,21 @@
 @import (once) '../less2/include/colortheme.less';
+@import (once) '../less2/include/browser.less';
 
-@base: #fff; //#f5f5f5;
+@base: @colortheme_base;
 @dark-base: darken(@base, 20%);
 @less-dark-base: darken(@base, 10%);
-@light-base: lighten(@base, 20%);
+@light-base: @colortheme_light-base;
 @less-light-base: lighten(@base, 10%);
 @fore: #555;
-@old-base: #302B28;
-@old-fore: #fafafa;
+@old-base: @colortheme_old-base;
+@old-fore: @colortheme_old-fore;
 
 @main-font-size: 16px;
 
-@cp-green: #46E981;
+@cp-green: @colortheme_cp-green;
 @cp-accent: lighten(@cp-green, 20%);
 
-//@cp-red: #FF0073; // remove red
-@cp-red: #FA5858; // remove red
+@cp-red: @colortheme_cp-red;
 @cp-outline: #444;
 
 @cp-orange: #FE9A2E;
@@ -33,46 +33,18 @@
 @cp-link-visited: @cp-light-blue;
 @cp-link-hover: darken(@cp-light-blue, 10%);
 
-// alertify things
-
-@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
-@padding-base: 12px;
-
-@success-color: @cp-green;
-@success-fore: @base;
-@danger-color: @cp-red;
-
-@text-color: rgba(0, 0, 0, .8);
-@border-radius: 1px;
-
-@alertify-fore: @old-fore;
-@alertify-base: @old-base;
-
-@alertify-dialog-bg: #444;
-@alertify-dialog-fg: @old-fore;
-
-@alertify-btn-fg: @old-fore;
-
-@alertify-btn-bg: rgba(200, 200, 200, 0.05);
-@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
-
-@alertify-bg: rgba(0, 0, 0, .3);
-@alertify-fg: @old-fore;
-
-@alertify-input-bg: @old-base;
-@alertify-input-fg: @old-fore;
 
 @slide-default-bg: #000;
 
 @bg-loading: #222;
 @color-loading: @old-fore;
 
-@media-not-big: 800px;
-@media-not-small: 801px;
+@media-not-big: @browser_media-not-big;
+@media-not-small: @browser_media-not-small;
 
-@media-short-screen: 450px;
-@media-narrow-screen: 400px;
-@media-medium-screen: 600px;
+@media-short-screen: @browser_media-short-screen;
+@media-narrow-screen: @browser_media-narrow-screen;
+@media-medium-screen: @browser_media-medium-screen;
 
 
 // Dropdown
diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
new file mode 100644
index 000000000..cb3fd3621
--- /dev/null
+++ b/customize.dist/src/less2/include/alertify.less
@@ -0,0 +1,304 @@
+@import (once) "./colortheme.less";
+@import (once) "./browser.less";
+
+.alertify_main () {
+    @alertify-fore: @colortheme_old-fore;
+    @alertify-base: @colortheme_old-base;
+
+    @alertify-dialog-bg: #444;
+    @alertify-dialog-fg: @colortheme_old-fore;
+
+    @alertify-btn-fg: @colortheme_old-fore;
+
+    @alertify-btn-bg: rgba(200, 200, 200, 0.05);
+    @alertify-btn-bg-hover: rgba(200, 200, 200, .15);
+
+    @alertify-bg: rgba(0, 0, 0, .3);
+    @alertify-fg: @colortheme_old-fore;
+
+    @alertify-input-bg: @colortheme_old-base;
+    @alertify-input-fg: @colortheme_old-fore;
+
+    @alertify_padding-base: 12px;
+    @alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
+    @alertify_border-radius: 1px;
+
+    // Logs to show that something has happened
+    // These show only once
+
+    .alertify-logs {
+        @media print {
+            visibility: hidden;
+        }
+        > * {
+            padding: @alertify_padding-base @alertify_padding-base * 4;
+            color: @alertify-fore;
+
+            font-weight: bold;
+            font-size: large;
+
+            box-shadow: @alertify_box-shadow;
+            border-radius: @alertify_border-radius;
+            &, &.default {
+                // FIXME
+                background: rgba(0, 0, 0, .8);
+            }
+            &.error {
+                background: @colortheme_cp-red;
+            }
+            &.success {
+                background: @colortheme_cp-green;
+            }
+        }
+    }
+
+    .alertify {
+        position: fixed;
+        background-color: @alertify-bg;
+        color: @alertify-fg;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 99999;
+
+        &.hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &, &.show {
+            box-sizing: border-box;
+            transition: all .33s cubic-bezier(.25, .8, .25, 1);
+        }
+
+        &, * {
+            box-sizing: border-box;
+        }
+
+        .dialog {
+            padding: 12px;
+        }
+
+        .dialog, .alert {
+            .bright {
+                color: @colortheme_light-base;
+            }
+
+            & > div {
+                background-color: @alertify-dialog-bg;
+                border-radius: 5px;
+                &.half {
+                    width: 50%;
+                    @media (max-width: @browser_media-medium-screen) {
+                        width: 100%;
+                    }
+                }
+            }
+
+            width: 100%;
+            margin: 0 auto;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+
+            > * {
+                width: 30%;
+                width: 500px;
+                max-width: 95%;
+                margin: 0 auto;
+                text-align: center;
+                padding: @alertify_padding-base;
+                background: #fff;
+                // FIXME
+                box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
+            }
+
+            .msg {
+                padding: @alertify_padding-base;
+                margin-bottom: @alertify_padding-base;
+                margin: 0;
+                text-align: left;
+            }
+
+            input:not(.form-control){
+                background-color: @alertify-input-bg;
+                color: @alertify-input-fg; 
+                border: 0px;
+                border-radius: 5px;
+
+                margin-bottom: 15px;
+                width: 100%;
+                font-size: 100%;
+                padding: @alertify_padding-base;
+                &:focus {
+                    //outline-offset: -2px;
+                }
+            }
+            nav {
+
+                text-align: right;
+
+                button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+
+                    background-color: @alertify-btn-bg;
+                    box-sizing: border-box;
+                    position: relative;
+                    outline: 0;
+                    border: 0;
+                    display: inline-block;
+                    align-items: center;
+                    padding: 0 6px;
+                    margin: 6px 8px;
+                    line-height: 36px;
+                    min-height: 36px;
+                    white-space: nowrap;
+                    min-width: 88px;
+                    text-align: center;
+                    text-transform: uppercase;
+                    font-size: 14px;
+                    text-decoration: none;
+                    cursor: pointer;
+
+                    color: @alertify-btn-fg;
+                    border: 1px solid @alertify-base;
+                    border-radius: 5px;
+
+                    &.safe, &.danger {
+                        color: @colortheme_old-base;
+                        white-space: normal;
+                        font-weight: bold;
+                    }
+                    &.danger {
+                        background-color: @colortheme_cp-red;
+                        &:hover, &:active {
+                            background-color: lighten(@colortheme_cp-red, 5%);
+                        }
+                    }
+
+                    &.safe {
+                        background-color: @colortheme_cp-green;
+                        &:hover, &:active {
+                            background-color: lighten(@colortheme_cp-green, 10%);
+                        }
+                    }
+
+                    &:hover, &:active {
+                        background-color: @alertify-btn-bg-hover;
+                    }
+
+                    &:focus {
+                        border: 1px dotted @alertify-base;
+                    }
+                    &::-moz-focus-inner {
+                        border:0;
+                    }
+                }
+
+                button.btn {
+                    margin: 6px 4px;
+                }
+            }
+        }
+    }
+
+    .alertify-logs {
+
+        position: fixed;
+        z-index: 99999;
+
+        &.bottom, &:not(.top) {
+            bottom: 16px;
+            // Bottom left placement. Default. Use for transitions.
+            &.left, &:not(.right) {
+                > * {
+
+                }
+            }
+            // Top right placement
+            &.right {
+                > * {
+
+                }
+            }
+        }
+
+        // All left positions.
+        &.left, &:not(.right) {
+            left: 16px;
+            > * {
+                float: left;
+                transform: translate3d(0, 0, 0);
+                height: auto;
+
+                &.show {
+                    left: 0;
+                }
+                &, &.hide {
+                    left: -110%;
+                }
+            }
+        }
+
+        &.right {
+            right: 16px;
+            > * {
+                float: right;
+                transform: translate3d(0, 0, 0);
+                &.show {
+                    right: 0;
+                    opacity: 1;
+                }
+                &, &.hide {
+                    right: -110%;
+                    opacity: 0;
+                }
+            }
+        }
+
+        &.top {
+            top: 0;
+            // Top left placement, use for transitions.
+            &.left, &:not(.right) {
+                > * {
+
+                }
+            }
+            // Top right placement, use for transitions
+            &.right {
+                > * {
+
+                }
+            }
+        }
+
+        > * {
+            box-sizing: border-box;
+            transition: all .4s cubic-bezier(.25, .8, .25, 1);
+            position: relative;
+            clear: both;
+            backface-visibility: hidden;
+            perspective: 1000;
+
+            & {
+                max-height: 0;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            &.show {
+                margin-top: @alertify_padding-base;
+                opacity: 1;
+                max-height: 1000px;
+                padding: @alertify_padding-base;
+                pointer-events: auto;
+            }
+        }
+
+    }
+}
diff --git a/customize.dist/src/less2/include/browser.less b/customize.dist/src/less2/include/browser.less
new file mode 100644
index 000000000..449244387
--- /dev/null
+++ b/customize.dist/src/less2/include/browser.less
@@ -0,0 +1,9 @@
+// These things are not for design but rather for working in different browser
+// types and window sizes
+
+@browser_media-not-big: 800px;
+@browser_media-not-small: 801px;
+
+@browser_media-short-screen: 450px;
+@browser_media-narrow-screen: 400px;
+@browser_media-medium-screen: 600px;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 3ece30827..268a26922 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -2,6 +2,14 @@
 @colortheme_link-color-visited: #005999;
 @colortheme_info-background: #fafafa;
 
+@colortheme_old-base: #302B28;
+@colortheme_old-fore: #fafafa;
+
+@colortheme_base: #fff;
+@colortheme_light-base: lighten(@colortheme_base, 20%);
+
+@colortheme_cp-red: #FA5858; // remove red
+@colortheme_cp-green: #46E981;
 
 @colortheme_pad-bg: #1c4fa0;
 @colortheme_pad-color: #fff;
@@ -34,4 +42,4 @@
 @colortheme_settings-color: #fff;
 
 @colortheme_profile-bg: #0087ff;
-@colortheme_profile-color: #fff;
\ No newline at end of file
+@colortheme_profile-color: #fff;
diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less
index 6909ecdc7..8bfc79c5c 100644
--- a/customize.dist/src/less2/pages/page-login.less
+++ b/customize.dist/src/less2/pages/page-login.less
@@ -1,8 +1,10 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
+@import (once) "../include/alertify.less";
 
 .infopages_main();
 .infopages_topbar();
+.alertify_main();
 
 .form-group {
     .extra {
diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less
index e057e2b20..fc54a3073 100644
--- a/customize.dist/src/less2/pages/page-register.less
+++ b/customize.dist/src/less2/pages/page-register.less
@@ -1,8 +1,10 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
+@import (once) "../include/alertify.less";
 
 .infopages_main();
 .infopages_topbar();
+.alertify_main();
 
 .cp-container {
     .form-group {