diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index fad4514..bad1b9d 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -110,6 +110,13 @@ jobs:
           echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
           echo "release version: $RELEASE_VERSION"
 
+      - name: Generate buildConfig
+        shell: bash
+        env:
+          ENABLE_LOGIN_WITH_PROTON: false
+        run: |
+          npm run generate:buildconfig
+
       - name: Build lite version
         if: ${{ matrix.variant }} == 'lite'
         shell: bash
diff --git a/package.json b/package.json
index fca5e0c..97b6eed 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "build:beta": "cross-env NODE_ENV=production BETA=1 webpack",
     "build:dev": "cross-env NODE_ENV=development BETA=1 webpack",
     "build-zip": "node scripts/build-zip.js",
+    "generate:buildconfig": "node scripts/generateBuildConfig.js",
     "watch": "npm run build -- --watch",
     "watch:dev": "cross-env HMR=true npm run build:dev -- --watch",
     "start": "cross-env HMR=true npm run build:dev -- --watch"
diff --git a/scripts/generateBuildConfig.js b/scripts/generateBuildConfig.js
new file mode 100644
index 0000000..bead752
--- /dev/null
+++ b/scripts/generateBuildConfig.js
@@ -0,0 +1,13 @@
+const fs = require('fs');
+const path = require('path');
+
+const PATH = path.join(__dirname, '../src', 'popup', 'buildConfig.json');
+
+const config = {
+  features: {
+    loginWithProtonEnabled: process.env.ENABLE_LOGIN_WITH_PROTON === 'true'
+  },
+  buildTime: new Date().getTime()
+};
+
+fs.writeFileSync(PATH, JSON.stringify(config, null, 2));
\ No newline at end of file
diff --git a/src/images/proton.svg b/src/images/proton.svg
new file mode 100644
index 0000000..1236b3f
--- /dev/null
+++ b/src/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/src/popup/Utils.js b/src/popup/Utils.js
index b4e2b94..f283dcc 100644
--- a/src/popup/Utils.js
+++ b/src/popup/Utils.js
@@ -1,4 +1,6 @@
 const browser = require("webextension-polyfill");
+const buildConfig = require("./buildConfig.json");
+
 let toasted = null;
 
 class Utils {
@@ -82,6 +84,10 @@ class Utils {
   static cloneObject(obj) {
     return JSON.parse(JSON.stringify(obj));
   }
+
+  static getBuildConfig() {
+    return buildConfig;
+  }
 }
 
 export default Utils;
diff --git a/src/popup/buildConfig.json b/src/popup/buildConfig.json
new file mode 100644
index 0000000..4516a4e
--- /dev/null
+++ b/src/popup/buildConfig.json
@@ -0,0 +1,6 @@
+{
+  "features": {
+    "loginWithProtonEnabled": false
+  },
+  "buildTime": 1655462531232
+}
\ No newline at end of file
diff --git a/src/popup/components/Login.vue b/src/popup/components/Login.vue
index a9e1f85..1656d5a 100644
--- a/src/popup/components/Login.vue
+++ b/src/popup/components/Login.vue
@@ -33,21 +33,35 @@
         <button class="btn btn-primary btn-block mt-2">Login</button>
       </form>
 
-      <div class="text-center">
+      <!-- Login with Proton -->
+      <div v-if="loginWithProtonEnabled">
+        <div class="text-center my-2 text-gray"><span>or</span></div>
+
         <a
-          :href="apiUrl + '/auth/register?next=%2Fdashboard%2Fsetup_done'"
+          class="btn btn-primary btn-block mt-2 proton-button"
           target="_blank"
-          class="mt-2 btn btn-outline-success btn-block"
+          :href="apiUrl + '/auth/proton/login?next=/onboarding/setup_done'"
         >
-          Sign Up <font-awesome-icon icon="external-link-alt" />
+          <img class="mr-2" src="/images/proton.svg" />
+          Login with Proton
         </a>
       </div>
 
-      <div class="text-center">
+      <div class="text-center mt-2">
         <button @click="showApiKeySetup" class="mt-2 btn btn-link text-center">
           Sign in with API Key
         </button>
       </div>
+
+      <div class="text-center">
+        Don't have an account yet?
+        <a
+          :href="apiUrl + '/auth/register?next=%2Fdashboard%2Fsetup_done'"
+          target="_blank"
+        >
+          Sign Up
+        </a>
+      </div>
     </div>
     <!-- END Login/register screen -->
 
@@ -97,6 +111,8 @@ export default {
       mfaCode: "",
       isShowMfa: false,
       apiUrl: "",
+      loginWithProtonEnabled:
+        Utils.getBuildConfig().features.loginWithProtonEnabled,
     };
   },
   async mounted() {
@@ -171,3 +187,17 @@ export default {
   computed: {},
 };
 </script>
+
+<style lang="css">
+.proton-button {
+  border-color: #6d4aff;
+  background-color: white;
+  color: #6d4aff;
+}
+.proton-button:hover {
+  background-color: #1b1340;
+}
+.text-gray {
+  color: #868e96;
+}
+</style>