diff --git a/dist/css/themes/beagle.css b/dist/css/themes/beagle.css
index edab17ee9..557b6eda0 100644
--- a/dist/css/themes/beagle.css
+++ b/dist/css/themes/beagle.css
@@ -1,81 +1,140 @@
-.medium-toolbar-arrow-under:after {
-  border-color: #000 transparent transparent transparent;
-  top: 40px; }
-
-.medium-toolbar-arrow-over:before {
-  border-color: transparent transparent #000 transparent; }
+:root {
+    --medit-background: #000;
+    --medit-border:     #000;
+    --medit-separator:          #444;
+    --medit-anchor-color:       #aaa;
+    --medit-anchor-background:  #000;
+    --medit-button-color:       #aaa;
+    --medit-button-background:  #000;
+    --medit-button-active-color:        #fff;
+    --medit-button-active-background:   #333;
+    --medit-form-color:        #ddd;
+    --medit-form-background:   #000;
+}
 
+.medium-editor-anchor-preview,
 .medium-editor-toolbar {
-  background-color: #000;
-  border: none;
-  border-radius: 50px; }
-  .medium-editor-toolbar li button {
-    background-color: transparent;
-    border: none;
-    box-sizing: border-box;
-    color: #ccc;
-    height: 40px;
-    min-width: 40px;
-    padding: 5px 12px;
-    -webkit-transition: background-color .2s ease-in, color .2s ease-in;
-            transition: background-color .2s ease-in, color .2s ease-in; }
-    .medium-editor-toolbar li button:hover {
-      background-color: #000;
-      color: #a2d7c7; }
-  .medium-editor-toolbar li .medium-editor-button-first {
-    border-bottom-left-radius: 50px;
-    border-top-left-radius: 50px;
-    padding-left: 24px; }
-  .medium-editor-toolbar li .medium-editor-button-last {
-    border-bottom-right-radius: 50px;
-    border-right: none;
-    border-top-right-radius: 50px;
-    padding-right: 24px; }
-  .medium-editor-toolbar li .medium-editor-button-active {
-    background-color: #000;
-    color: #a2d7c7; }
+    font-size:      1rem;
+    text-align:     center;
+}
+.medium-editor-toolbar * {
+    margin:     0;
+    padding:    0;
+    border:     0;
+    background: transparent;
+    -webkit-box-sizing: border-box;
+    box-sizing:         border-box;
+}
+
+    .medium-toolbar-arrow-over:before, .medium-toolbar-arrow-under:after {
+        left:           auto;
+        margin:         0 auto;
+        position:       static;
+    }
+    .medium-toolbar-arrow-under:after {
+        top:            2.1em;
+        border-width:   .5em .5em 0;
+        border-color:   var(--medit-border) transparent transparent transparent;
+    }
+
+    .medium-toolbar-arrow-over:before {
+        top:            0;
+        border-width:   0 .5em .5em;
+        border-color: transparent transparent var(--medit-background) transparent;
+    }
+
+    .medium-editor-toolbar-actions {
+        text-align:         left;
+        border:             .2em solid var(--medit-background);
+        border-radius:      1.5em;
+        background:         var(--medit-background);
+        overflow:           hidden;
+    }
+    .medium-editor-toolbar-actions li {
+        display:    inline-flex;
+        float:      none;
+    }
+        .medium-editor-toolbar li button {
+            display:        flex;
+            align-items:    center;
+            justify-content: center;
+            padding:    .7em 1em;
+            color:      var(--medit-button-color);
+            background: var(--medit-button-background);
+        }
+        .medium-editor-toolbar li button:hover {
+            color:      var(--medit-button-active-color);
+        }
+        .medium-editor-toolbar li .medium-editor-button-active {
+            color:      var(--medit-button-active-color);
+            background: var(--medit-button-active-background);
+        }
+
 
 .medium-editor-toolbar-form {
-  background: #000;
-  border-radius: 50px;
-  color: #ccc;
-  overflow: hidden; }
-  .medium-editor-toolbar-form .medium-editor-toolbar-input {
-    background: #000;
-    box-sizing: border-box;
-    color: #ccc;
-    height: 40px;
-    padding-left: 16px;
-    width: 220px; }
-    .medium-editor-toolbar-form .medium-editor-toolbar-input::-webkit-input-placeholder {
-      color: #f8f5f3;
-      color: rgba(248, 245, 243, 0.8); }
-    .medium-editor-toolbar-form .medium-editor-toolbar-input:-moz-placeholder {
-      /* Firefox 18- */
-      color: #f8f5f3;
-      color: rgba(248, 245, 243, 0.8); }
-    .medium-editor-toolbar-form .medium-editor-toolbar-input::-moz-placeholder {
-      /* Firefox 19+ */
-      color: #f8f5f3;
-      color: rgba(248, 245, 243, 0.8); }
-    .medium-editor-toolbar-form .medium-editor-toolbar-input:-ms-input-placeholder {
-      color: #f8f5f3;
-      color: rgba(248, 245, 243, 0.8); }
-  .medium-editor-toolbar-form a {
-    color: #ccc;
-    -webkit-transform: translateY(2px);
-            transform: translateY(2px); }
-  .medium-editor-toolbar-form .medium-editor-toolbar-close {
-    margin-right: 16px; }
+    position:       relative;
+    align-items:    center;
+    width:          500px;
+    text-align:     left;
+    color:          var(--medit-form-color);
+    overflow:       hidden;
+    border-radius:  2em;
+    background:     var(--medit-form-background);
+}
+@media (max-width:500px){
+    .medium-editor-toolbar-form {
+        width:      100%;
+    }
+}
+.medium-editor-toolbar-form-active {
+    display:        inline-flex;
+}
+    .medium-editor-toolbar-form .medium-editor-toolbar-input {
+        padding:        .2em 6em .2em 1em;
+        width:          100%;
+        font-size:      inherit;
+        color:          var(--medit-form-color);
+        background:     var(--medit-form-background);
+    }
+        .medium-editor-toolbar-form .medium-editor-toolbar-input::-webkit-input-placeholder {
+            color: var(--medit-form-color);
+        }
+        .medium-editor-toolbar-form a {
+            position:       absolute;
+            top:            50%;
+            right:          .5em;
+            display:        flex;
+            align-items:    center;
+            justify-content: center;
+            margin:         -1.5em 0 0 0;
+            width:          2em;
+            height:         2em;
+            font-size:      inherit;
+            color:          var(--medit-button-active-color);
+            background:     var(--medit-button-active-background);
+            border-radius:  2em;
+        }
+        .medium-editor-toolbar-form .medium-editor-toolbar-save {
+            right:          3em;
+        }
+
 
-.medium-editor-toolbar-anchor-preview {
-  background: #000;
-  border-radius: 50px;
-  padding: 5px 12px; }
+.medium-editor-anchor-preview {
+    padding-top:    1em;
+    width:          80%;
+    max-width:      500px;
+}
+    .medium-editor-anchor-preview a {
+        margin:             0;
+        padding:            .75em;
+        color:              var(--medit-anchor-color);
+        font-size:          .85em;
+        text-decoration:    none;
+        background:         var(--medit-anchor-background);
+        border-radius:      1em;
+    }
 
-.medium-editor-anchor-preview a {
-  color: #ccc;
-  text-decoration: none; }
 
-.medium-editor-toolbar-actions li, .medium-editor-toolbar-actions button {
-  border-radius: 50px; }
+.medium-editor-toolbar-actions:after {
+    content:        none;
+}