diff --git a/static/images/proton.svg b/static/images/proton.svg
new file mode 100644
index 00000000..1236b3f8
--- /dev/null
+++ b/static/images/proton.svg
@@ -0,0 +1,19 @@
+<svg width="12" height="16" viewBox="0 0 317 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4917_2728)">
+<path d="M-7.51553e-05 295.38V399.38H72.9999V299.89C72.9999 290.21 76.8455 280.925 83.6906 274.08C90.5357 267.235 99.8195 263.39 109.5 263.39H184.35C201.643 263.39 218.767 259.984 234.744 253.365C250.721 246.747 265.238 237.047 277.466 224.818C289.693 212.589 299.393 198.072 306.009 182.095C312.626 166.118 316.031 148.993 316.03 131.7C316.033 114.406 312.629 97.2805 306.012 81.302C299.396 65.3235 289.697 50.8052 277.469 38.5754C265.241 26.3457 250.724 16.6444 234.747 10.0256C218.769 3.40684 201.644 -0.00024434 184.35 -0.000244141H-7.51553e-05V130H72.9999V68.7H179.41C195.934 68.7 211.781 75.2633 223.466 86.9465C235.151 98.6298 241.717 114.476 241.72 131C241.72 147.525 235.155 163.374 223.47 175.06C211.785 186.745 195.936 193.31 179.41 193.31H102.04C88.6359 193.305 75.3623 195.942 62.978 201.07C50.5936 206.198 39.3412 213.716 29.8644 223.196C20.3877 232.675 12.8723 243.93 7.74797 256.316C2.62361 268.702 -0.00927507 281.976 -7.51553e-05 295.38Z" fill="url(#paint0_radial_4917_2728)"/>
+<path d="M109.48 263.38C95.1024 263.379 80.8655 266.21 67.5822 271.711C54.2989 277.213 42.2296 285.277 32.0631 295.443C21.8967 305.61 13.8324 317.679 8.33096 330.962C2.82954 344.245 -0.00141216 358.483 -9.87253e-05 372.86V399.37H72.9999V299.88C72.9999 290.203 76.8427 280.922 83.6835 274.077C90.5242 267.233 99.8029 263.385 109.48 263.38Z" fill="url(#paint1_linear_4917_2728)"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_4917_2728" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(317.15 -55.4503) scale(401.97 401.97)">
+<stop stop-color="#A995FF"/>
+<stop offset="1" stop-color="#6652F5"/>
+</radialGradient>
+<linearGradient id="paint1_linear_4917_2728" x1="54.7399" y1="379.7" x2="54.7399" y2="226.88" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D4BFD"/>
+<stop offset="1" stop-color="#1C0554"/>
+</linearGradient>
+<clipPath id="clip0_4917_2728">
+<rect width="316.02" height="399.37" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/templates/auth/login.html b/templates/auth/login.html
index b1f03811..bf31bd0e 100644
--- a/templates/auth/login.html
+++ b/templates/auth/login.html
@@ -45,7 +45,11 @@
       </form>
       {% if connect_with_proton %}
         <div class="text-center my-2 text-gray"><span>or</span></div>
-        <a class="btn btn-primary btn-block mt-2 proton-button" href="{{ url_for("auth.proton_login", next=next_url) }}">Log in with Proton</a>
+        <a class="btn btn-primary btn-block mt-2 proton-button"
+           href="{{ url_for("auth.proton_login", next=next_url) }}">
+          <img class="mr-2" src="/static/images/proton.svg">
+          Login with Proton
+        </a>
       {% endif %}
     </div>
 
diff --git a/templates/dashboard/setting.html b/templates/dashboard/setting.html
index 86e2eb38..cab04f8d 100644
--- a/templates/dashboard/setting.html
+++ b/templates/dashboard/setting.html
@@ -220,14 +220,15 @@
               You have linked your Proton account: {{ proton_linked_account }} <br>
             </div>
             <a
-                class="btn btn-primary mt-2 proton-button"
-                href="{{ url_for('dashboard.unlink_proton_account') }}"
-            >Unlink account</a>
+              class="btn btn-primary mt-2 proton-button"
+              href="{{ url_for('dashboard.unlink_proton_account') }}"
+            ><img class="mr-2" src="/static/images/proton.svg">Unlink account</a>
           {% else %}
             <div class="mb-3">
               You can connect your Proton account with your SimpleLogin one. <br>
             </div>
-            <a class="btn btn-primary mt-2 proton-button" href="{{ url_for("auth.proton_login", action="link") }}">Connect
+            <a class="btn btn-primary mt-2 proton-button" href="{{ url_for("auth.proton_login", action="link") }}"><img
+              class="mr-2" src="/static/images/proton.svg">Connect
               with Proton</a>
           {% endif %}
         </div>
@@ -262,10 +263,10 @@
           <input type="hidden" name="form-name" value="change-alias-generator">
           <select class="form-control mr-sm-2" name="alias-generator-scheme">
             <option value="{{ AliasGeneratorEnum.word.value }}"
-                {% if current_user.alias_generator == AliasGeneratorEnum.word.value %} selected {% endif %} >Based on
+              {% if current_user.alias_generator == AliasGeneratorEnum.word.value %} selected {% endif %} >Based on
               Random {{ AliasGeneratorEnum.word.name.capitalize() }}</option>
             <option value="{{ AliasGeneratorEnum.uuid.value }}"
-                {% if current_user.alias_generator == AliasGeneratorEnum.uuid.value %} selected {% endif %} >Based
+              {% if current_user.alias_generator == AliasGeneratorEnum.uuid.value %} selected {% endif %} >Based
               on {{ AliasGeneratorEnum.uuid.name.upper() }}</option>
           </select>
           <button class="btn btn-outline-primary">Update</button>
@@ -278,9 +279,9 @@
             <option value="">Not Selected</option>
             {% for is_public, domain in current_user.available_domains_for_random_alias() %}
               <option value="{{ domain }}"
-                  {% if current_user.default_alias_custom_domain_id or current_user.default_alias_public_domain_id %}
-                    {% if current_user.default_random_alias_domain() == domain %} selected {% endif %}
-                  {% endif %}
+                {% if current_user.default_alias_custom_domain_id or current_user.default_alias_public_domain_id %}
+                  {% if current_user.default_random_alias_domain() == domain %} selected {% endif %}
+                {% endif %}
               >
                 {{ domain }} ({% if is_public %} SimpleLogin domain {% else %} your domain {% endif %})
               </option>
@@ -325,27 +326,27 @@
 
           <select class="form-control mr-sm-2" name="sender-format">
             <option value="{{ SenderFormatEnum.AT.value }}"
-                {% if current_user.sender_format == SenderFormatEnum.AT.value %} selected {% endif %}>
+              {% if current_user.sender_format == SenderFormatEnum.AT.value %} selected {% endif %}>
               John Wick - john at wick.com
             </option>
 
             <option value="{{ SenderFormatEnum.A.value }}"
-                {% if current_user.sender_format == SenderFormatEnum.A.value %} selected {% endif %}>
+              {% if current_user.sender_format == SenderFormatEnum.A.value %} selected {% endif %}>
               John Wick - john(a)wick.com
             </option>
 
             <option value="{{ SenderFormatEnum.NAME_ONLY.value }}"
-                {% if current_user.sender_format == SenderFormatEnum.NAME_ONLY.value %} selected {% endif %}>
+              {% if current_user.sender_format == SenderFormatEnum.NAME_ONLY.value %} selected {% endif %}>
               John Wick
             </option>
 
             <option value="{{ SenderFormatEnum.AT_ONLY.value }}"
-                {% if current_user.sender_format == SenderFormatEnum.AT_ONLY.value %} selected {% endif %}>
+              {% if current_user.sender_format == SenderFormatEnum.AT_ONLY.value %} selected {% endif %}>
               john at wick.com
             </option>
 
             <option value="{{ SenderFormatEnum.NO_NAME.value }}"
-                {% if current_user.sender_format == SenderFormatEnum.NO_NAME.value %} selected {% endif %}>
+              {% if current_user.sender_format == SenderFormatEnum.NO_NAME.value %} selected {% endif %}>
               No Name (i.e. only reverse-alias)
             </option>
 
@@ -373,7 +374,7 @@
           <input type="hidden" name="form-name" value="replace-ra">
           <div class="form-check">
             <input type="checkbox" id="replace-ra" name="replace-ra"
-                {% if current_user.replace_reverse_alias %} checked {% endif %} class="form-check-input">
+              {% if current_user.replace_reverse_alias %} checked {% endif %} class="form-check-input">
             <label for="replace-ra">Enable replacing reverse alias</label>
           </div>
           <button type="submit" class="btn btn-outline-primary">Update</button>
@@ -399,8 +400,8 @@
           <input type="hidden" name="form-name" value="sender-in-ra">
           <div class="form-check">
             <input type="checkbox" id="include-sender-ra" name="enable"
-                {#                   todo: remove current_user.include_sender_in_reverse_alias is none condition #}
-                {% if current_user.include_sender_in_reverse_alias is none or current_user.include_sender_in_reverse_alias %}
+              {#                   todo: remove current_user.include_sender_in_reverse_alias is none condition #}
+              {% if current_user.include_sender_in_reverse_alias is none or current_user.include_sender_in_reverse_alias %}
                    checked {% endif %} class="form-check-input">
             <label for="include-sender-ra">Include sender address in reverse-alias</label>
           </div>
@@ -422,7 +423,7 @@
           <input type="hidden" name="form-name" value="expand-alias-info">
           <div class="form-check">
             <input type="checkbox" id="expand-alias-info" name="enable"
-                {% if current_user.expand_alias_info %} checked {% endif %} class="form-check-input">
+              {% if current_user.expand_alias_info %} checked {% endif %} class="form-check-input">
             <label for="expand-alias-info">Automatically expand alias info</label>
           </div>
           <button type="submit" class="btn btn-outline-primary">Update</button>
@@ -447,7 +448,7 @@
           <input type="hidden" name="form-name" value="include_website_in_one_click_alias">
           <div class="form-check">
             <input type="checkbox" id="include-website-in-alias" name="enable"
-                {% if current_user.include_website_in_one_click_alias %} checked {% endif %} class="form-check-input">
+              {% if current_user.include_website_in_one_click_alias %} checked {% endif %} class="form-check-input">
             <label for="include-website-in-alias">Include website address in alias</label>
           </div>
           <button type="submit" class="btn btn-outline-primary">Update</button>
@@ -494,7 +495,7 @@
           <input type="hidden" name="form-name" value="one-click-unsubscribe">
           <div class="form-check">
             <input type="checkbox" id="one-click-unsubscribe" name="enable"
-                {% if current_user.one_click_unsubscribe_block_sender %} checked {% endif %} class="form-check-input">
+              {% if current_user.one_click_unsubscribe_block_sender %} checked {% endif %} class="form-check-input">
             <label for="one-click-unsubscribe">Block sender instead</label>
           </div>
           <button type="submit" class="btn btn-outline-primary">Update</button>
@@ -537,12 +538,12 @@
 
           <select class="form-control mr-sm-2" name="blocked-behaviour">
             <option value="{{ BlockBehaviourEnum.return_2xx.value }}"
-                {% if current_user.block_behaviour.value == BlockBehaviourEnum.return_2xx.value %}
+              {% if current_user.block_behaviour.value == BlockBehaviourEnum.return_2xx.value %}
                     selected="selected" {% endif %}>
               Ignore (the sender will see the email as delivered, but you won't receive anything).
             </option>
             <option value="{{ BlockBehaviourEnum.return_5xx.value }}"
-                {% if current_user.block_behaviour.value == BlockBehaviourEnum.return_5xx.value %}
+              {% if current_user.block_behaviour.value == BlockBehaviourEnum.return_5xx.value %}
                     selected="selected" {% endif %}>
               Reject (the sender will be told that your alias does not exist).
             </option>
@@ -570,7 +571,7 @@
 
           <div class="form-check">
             <input type="checkbox" id="include-sender-header" name="enable"
-                {% if current_user.include_header_email_header %} checked {% endif %} class="form-check-input">
+              {% if current_user.include_header_email_header %} checked {% endif %} class="form-check-input">
             <label for="include-sender-header">Include sender address in email headers</label>
           </div>