diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 3285d6874..cc02e327a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -803,7 +803,7 @@ input[type="radio"]:checked + label + .tab {
 }
 
 .toasted-container .toasted {
-  justify-content: start !important;
+  justify-content: flex-start !important;
 }
 
 .toasted.info {
@@ -816,6 +816,10 @@ input[type="radio"]:checked + label + .tab {
   color: inherit !important;
 }
 
+.toasted .action {
+  margin-left: auto !important;
+}
+
 .page-columns {
   display: flex;
   flex: 1;
diff --git a/components/ace-editor.vue b/components/ace-editor.vue
index 5da155019..3f2745147 100644
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-const DEFAULT_THEME = "dracula";
+const DEFAULT_THEME = "twilight";
 
 import ace from "ace-builds";
 import "ace-builds/webpack-resolver";
diff --git a/pages/index.vue b/pages/index.vue
index e700927b8..03308febf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -682,10 +682,7 @@
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">{{ $t("history") }}</label>
           <div class="tab">
-            <history
-              @useHistory="handleUseHistory"
-              ref="historyComponent"
-            />
+            <history @useHistory="handleUseHistory" ref="historyComponent" />
           </div>
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>