diff --git a/src/components/Elements/MainModal/scss/settings/_main.scss b/src/components/Elements/MainModal/scss/settings/_main.scss
index d8c8e34a..e1e6e5d3 100644
--- a/src/components/Elements/MainModal/scss/settings/_main.scss
+++ b/src/components/Elements/MainModal/scss/settings/_main.scss
@@ -55,7 +55,7 @@ input {
 
     @include themed {
       background: t($modal-sidebar);
-      border: 3px solid t($modal-sidebarActive);
+      border: 1px solid t($modal-sidebarActive);
       color: t($color);
     }
 
diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss
index 1366f541..6891a0d0 100644
--- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss
@@ -1,15 +1,8 @@
 .updateChangelog {
   max-width: 75%;
+  margin-top: 15px;
   white-space: pre-wrap;
 
-  li {
-    cursor: initial;
-    font-size: 1rem;
-    list-style-type: disc;
-    padding: 0;
-    margin-left: 20px;
-  }
-
   a {
     color: var(--modal-link);
 
@@ -20,14 +13,8 @@
 }
 
 .changelogtab {
-  h1 {
-    max-width: 85%;
-    font-size: 2rem;
-    margin-bottom: -10px !important;
-  }
-
-  h5 {
-    line-height: 0 !important;
+  .mainTitle {
+    margin: 0 !important;
   }
 
   img {
diff --git a/src/features/misc/sections/Changelog.jsx b/src/features/misc/sections/Changelog.jsx
index 01a039c6..6f4c2a78 100644
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -19,13 +19,24 @@ class Changelog extends PureComponent {
   }
 
   parseMarkdown = (text) => {
-    text = text.replace(/^\* /gm, '<li>').replace(/\n/g, '</li>');
-    text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-    text = text.replace(/^## (.*$)/gm, '<h3>$1</h3>');
-    text = text.replace(
-      /((http|https):\/\/[^\s]+)/g,
-      '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
-    );
+    if (typeof text !== 'string') {
+      throw new Error('Input must be a string');
+    }
+
+    // Replace list items
+    text = text.replace(/^\* (.*$)/gm, '<li>$1</li>');
+
+    // Wrap list items in <ul></ul>
+    text = text.replace(/((<li>.*<\/li>\s*)+)/g, '<ul>$1</ul>');
+
+    // Replace other markdown syntax
+    text = text
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/^## (.*$)/gm, '<span class="title">$1</span>')
+      .replace(
+        /((http|https):\/\/[^\s]+)/g,
+        '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
+      );
 
     return text;
   };
@@ -123,8 +134,8 @@ class Changelog extends PureComponent {
 
     return (
       <div className="changelogtab" ref={this.changelog}>
-        <h1>{this.state.title}</h1>
-        <h5>Released on {this.state.date}</h5>
+        <span className="mainTitle">{this.state.title}</span>
+        <span className="subtitle">Released on {this.state.date}</span>
         {this.state.image && (
           <img
             draggable={false}
diff --git a/src/utils/data/default_settings.json b/src/utils/data/default_settings.json
index 1fbefb6c..e5369532 100644
--- a/src/utils/data/default_settings.json
+++ b/src/utils/data/default_settings.json
@@ -273,6 +273,6 @@
   },
   {
     "name": "customEvents",
-    "value": "[{\"id\":\"widgets.greeting.christmas\",\"name\":\"Merry Christmas\",\"month\":12,\"date\":25},{\"id\":\"widgets.greeting.newyear\",\"name\":\"Happy New Year\",\"month\":1,\"date\":1},{\"id\":\"widgets.greeting.halloween\",\"name\":\"Happy Halloween\",\"month\":10,\"date\":31},{\"id\":\"widgets.greeting.halloween\",\"name\":\"\",\"month\":10,\"date\":31}]"
+    "value": "[{\"id\":\"widgets.greeting.christmas\",\"name\":\"Merry Christmas\",\"month\":12,\"date\":25},{\"id\":\"widgets.greeting.newyear\",\"name\":\"Happy New Year\",\"month\":1,\"date\":1},{\"id\":\"widgets.greeting.halloween\",\"name\":\"Happy Halloween\",\"month\":10,\"date\":31}]"
   }
 ]