diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index 6148923d30..ffbfb17d21 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -277,6 +277,7 @@ ul input[type=radio]:checked + label + div {
 /* hide radio buttons */
 input[type=radio] {
       position: absolute;
+      z-index: 1;
       height: 1px;
       width: 1px;
       overflow: hidden;
@@ -286,37 +287,40 @@ input[type=radio] {
 
 #form-tabs {
       order: 2;
-      margin-top: var(--unit-size);
+      margin-top: var(--side-margin);
+      margin-left: var(--side-margin);
+      margin-right: var(--side-margin);
+      width: 100%;
+      font-size: var(--medium-size);
 }
 #form-tabs ul {
       display: flex;
       flex-wrap: wrap;
-      align-items: stretch;
-      justify-content: space-evenly;
-      padding: 0;
-      width: 100%;
       border-radius: var(--unit-size);
       box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
       background-color: #00000050;
+      justify-content: space-evenly;
+      width: 100%;
 }
 #form-tabs ul label {
       order: 1;
-      flex: 1;
+      flex: 0;
 }
+
 #tabs {
       padding: var(--unit-size);
-      display: inline-flex;
-      font-size: var(--medium-size);
+      text-transform: capitalize;
 }
+
 #form-tabs ul .form {
       order: 2;
       padding: calc(2*var(--unit-size));
       background-color: #00000000 !important;
-      font-size: var(--medium-size);
       height: 100%;
       margin-left: 0;
       margin-right: 0;
       margin-top: 0;
       box-shadow: 0;
       border-radius: 0 0 var(--unit-size) var(--unit-size);
+      font-size: var(--unit-size);
 }
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css
index 61b27a9a2e..38c5fc606d 100644
--- a/public/assets/css/settings/settings_mid.css
+++ b/public/assets/css/settings/settings_mid.css
@@ -237,4 +237,76 @@ button {
       padding: var(--small-size);
       border: none;
       border-radius: var(--small-size);
+}
+
+/* NOTIFICATIONS TABS */
+/* visual feedback */
+ul input[type=radio] + label {
+      color: #91B9D0;
+}
+ul input[type=radio]:checked + label {
+      color: #F6F6F6;
+}
+ul input[type=radio]:focus + label {
+      color: #F6F6F6;
+}
+
+/* show/hide each tab */
+ul input[type=radio]:not(:checked) + label + div {
+      display: none;
+}
+ul input[type=radio]:checked + label + div {
+      display: flex;
+}
+
+/* hide radio buttons */
+input[type=radio] {
+      position: absolute;
+      z-index: 1;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+
+#form-tabs {
+      order: 2;
+      margin-top: var(--unit-size);
+      margin-left: var(--side-margin);
+      margin-right: var(--side-margin);
+      width: 100%;
+      font-size: var(--medium-size);
+}
+#form-tabs ul {
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: var(--unit-size);
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      background-color: #00000050;
+      justify-content: space-evenly;
+      width: 100%;
+}
+#form-tabs ul label {
+      order: 1;
+      flex: 0;
+}
+
+#tabs {
+      padding: var(--unit-size);
+      text-transform: capitalize;
+      font-size: var(--medium-size);
+}
+
+#form-tabs ul .form {
+      order: 2;
+      padding: calc(2*var(--unit-size));
+      background-color: #00000000 !important;
+      height: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: 0;
+      box-shadow: 0;
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      font-size: var(--unit-size);
 }
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css
index e700d135aa..2d44a83c6a 100644
--- a/public/assets/css/settings/settings_small.css
+++ b/public/assets/css/settings/settings_small.css
@@ -238,4 +238,75 @@ button {
       padding: var(--small-size);
       border: none;
       border-radius: var(--small-size);
+}
+
+/* NOTIFICATIONS TABS */
+/* visual feedback */
+ul input[type=radio] + label {
+      color: #91B9D0;
+}
+ul input[type=radio]:checked + label {
+      color: #F6F6F6;
+}
+ul input[type=radio]:focus + label {
+      color: #F6F6F6;
+}
+
+/* show/hide each tab */
+ul input[type=radio]:not(:checked) + label + div {
+      display: none;
+}
+ul input[type=radio]:checked + label + div {
+      display: flex;
+}
+
+/* hide radio buttons */
+input[type=radio] {
+      position: absolute;
+      z-index: 1;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+
+#form-tabs {
+      order: 2;
+      margin-top: var(--main-size);
+      margin-left: 1%;
+      margin-right: 1%;
+      width: 100%;
+      font-size: var(--medium-size);
+}
+#form-tabs ul {
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: var(--unit-size);
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      background-color: #00000050;
+      justify-content: space-evenly;
+      width: 100%;
+}
+#form-tabs ul label {
+      order: 1;
+      flex: 0;
+}
+
+#tabs {
+      padding: var(--unit-size);
+      text-transform: capitalize;
+}
+
+#form-tabs ul .form {
+      order: 2;
+      padding: calc(2*var(--unit-size));
+      background-color: #00000000 !important;
+      height: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: 0;
+      box-shadow: 0;
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      font-size: var(--unit-size);
 }
\ No newline at end of file
diff --git a/templates/settings/notifications.html.twig b/templates/settings/notifications.html.twig
index 38ba0e57eb..02f08c22d7 100644
--- a/templates/settings/notifications.html.twig
+++ b/templates/settings/notifications.html.twig
@@ -12,8 +12,8 @@
             <div id='form-tabs'>
                 <ul>
                     {% for transport, form in tabbed_forms %}
-                        <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}">
-                        <label for="toggle-{{ transport }}" id='tabs' style = "text-transform:capitalize;">
+                        <input type="radio" id="toggle-{{ transport }}" name="tabs" value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
+                        <label for="toggle-{{ transport }}" id='tabs'>
                             {{ transport }}
                         </label>
                         <div id="form_{{ transport }}" class='form'>