diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index b3b04ccfff..a86adba3f3 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -39,21 +39,6 @@
       box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
 }
 
-#form-tabs ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: calc(2 * var(--side-margin));
-      margin-right: calc(2 * var(--side-margin));
-      padding: 0;
-}
-#form-tabs li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
-}
 #form-content {
       order: 3;
       background-color: #00000050;
@@ -265,7 +250,14 @@ select {
       margin-left: var(--unit-size);
 }
 
-/* JS Cropping */
+button {
+      background-color: #f6f6f6;
+      padding: var(--small-size);
+      border: none;
+      border-radius: var(--small-size);
+}
+
+/* JS CROPPING */
 #img-cropped {
       display: block;
       max-width: 100%;
@@ -279,9 +271,32 @@ select {
       border-radius: 50%;
 }
 
-button {
-      background-color: #f6f6f6;
-      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;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
 }
\ No newline at end of file
diff --git a/templates/settings/notifications.html.twig b/templates/settings/notifications.html.twig
index 71edf7370a..38ba0e57eb 100644
--- a/templates/settings/notifications.html.twig
+++ b/templates/settings/notifications.html.twig
@@ -3,29 +3,26 @@
 {% block title %}Notification Settings{% endblock %}
 
 {% block body %}
-  <div class='content'>
-    {% block primary_nav %}
-      {{ parent() }}
-    {% endblock primary_nav %}
+    <div class='content'>
+        {% block primary_nav %}
+            {{ parent() }}
+        {% endblock primary_nav %}
 
-    {% block form %}
-      <div id='form-tabs'>
-        <ul>
-          {% for transport, form in tabbed_forms %}
-            <li class='hover-effect'>
-              {{ transport }}
-            </li>
-          {% endfor %}
-        </ul>
-      </div>
-      <div id='form-content'>
-        {% for transport, form in tabbed_forms %}
-          <div id="form_{{ transport }}" class='form'>
-            {{ form(form) }}
-          </div>
-        {% endfor %}
-      </div>
-    {% endblock form %}
-  </div>
+        {% block form %}
+            <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;">
+                            {{ transport }}
+                        </label>
+                        <div id="form_{{ transport }}" class='form'>
+                            {{ form(form) }}
+                        </div>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endblock form %}
+    </div>
 
 {% endblock body %}