diff --git a/package-lock.json b/package-lock.json
index fd217bf8..01805e0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
         "prettier": "^3.0.3",
         "typescript": "^5.0.2",
         "vite": "^4.4.5",
+        "vite-bundle-visualizer": "^1.0.1",
         "vitest": "^0.34.6",
         "wrangler": "^3.10.1"
       }
@@ -2485,6 +2486,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/cmd-shim": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.2.tgz",
@@ -2670,6 +2685,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -2786,6 +2810,12 @@
       "integrity": "sha512-W1+g9qs9hviII0HAwOdehGYkr+zt7KKdmCcJcjH0mYg6oL8+ioT3Skjmt7BLoAQqXhjf40AXd+HlR4oAWMlXjA==",
       "dev": true
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -3664,6 +3694,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-func-name": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
@@ -3976,6 +4015,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-from-esm": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/import-from-esm/-/import-from-esm-1.3.3.tgz",
+      "integrity": "sha512-U3Qt/CyfFpTUv6LOP2jRTLYjphH6zg3okMfHbyqRa/W2w6hr8OsJWVggNlR4jxuojQy81TgTJTxgSkyoteRGMQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "import-meta-resolve": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.20"
+      }
+    },
+    "node_modules/import-meta-resolve": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
+      "integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -4126,6 +4188,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4147,6 +4224,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -4357,6 +4443,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -5118,6 +5216,23 @@
         "wrappy": "1"
       }
     },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -5679,6 +5794,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.6",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
@@ -5765,6 +5889,41 @@
         "rollup-plugin-inject": "^3.0.0"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz",
+      "integrity": "sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==",
+      "dev": true,
+      "dependencies": {
+        "open": "^8.4.0",
+        "picomatch": "^2.3.1",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/rollup-pluginutils": {
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
@@ -6116,6 +6275,20 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
@@ -6352,6 +6525,18 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -6703,6 +6888,21 @@
         }
       }
     },
+    "node_modules/vite-bundle-visualizer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vite-bundle-visualizer/-/vite-bundle-visualizer-1.0.1.tgz",
+      "integrity": "sha512-JdUu5viGyw7K1HMstqaAN7y1rnNz93srGeF7FJgFCzM7NL1nH/QlpywDA296qv/KjPPPsq60mOJhtXddikVKSA==",
+      "dev": true,
+      "dependencies": {
+        "cac": "^6.7.14",
+        "import-from-esm": "^1.3.3",
+        "rollup-plugin-visualizer": "^5.11.0",
+        "tmp": "^0.2.1"
+      },
+      "bin": {
+        "vite-bundle-visualizer": "bin.js"
+      }
+    },
     "node_modules/vite-node": {
       "version": "0.34.6",
       "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.6.tgz",
@@ -7432,6 +7632,56 @@
         "@esbuild/win32-x64": "0.17.19"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -7477,6 +7727,15 @@
       "integrity": "sha512-ibF0Or+FivM9lNrg+HGJfVX8WJqgo+kCLDc4vx6xMeTce7Aj+DLttKbxxRR/gNLSAelRc1omAPlJ77N/Jem07A==",
       "dev": true
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaeti": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
@@ -7499,6 +7758,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index a5558c2b..eb9dd7a5 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "prod:api:logs": "npx wrangler pages deployment tail",
     "prod:deploy": "npx wrangler pages publish functions --project-name=memo-card",
     "dev:botfather:description": "export $(cat .dev.vars) && node botfather/update.js",
+    "bundle-visualize": "npx vite-bundle-visualizer",
     "export-public-code": "[[ $(git symbolic-ref --short HEAD 2>/dev/null) == \"main\" ]] && npm run __export-public-code || echo \"Current branch is not 'main'\"",
     "__export-public-code": "npx betterplace-gitexporter gitexporter.config.json && cd ../memocard-public && git checkout -b main && git remote add origin git@github.com:kubk/memo-card.git && git push",
     "generate-db-types": "docker info > /dev/null 2>&1 && export $(cat .dev.vars | xargs) && npx supabase gen types typescript --db-url $DB_URL >./functions/db/databaseTypes.ts"
@@ -77,6 +78,7 @@
     "prettier": "^3.0.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
+    "vite-bundle-visualizer": "^1.0.1",
     "vitest": "^0.34.6",
     "wrangler": "^3.10.1"
   }
diff --git a/src/lib/animations/tap-scale.ts b/src/lib/animations/tap-scale.ts
new file mode 100644
index 00000000..80659187
--- /dev/null
+++ b/src/lib/animations/tap-scale.ts
@@ -0,0 +1,7 @@
+export const tapScale = {
+  ":active": {
+    transform: "scale(0.98)",
+    transition: "transform 0.3s",
+    transformOrigin: "center center",
+  },
+};
diff --git a/src/lib/framer-motion/features.ts b/src/lib/framer-motion/features.ts
new file mode 100644
index 00000000..525ee311
--- /dev/null
+++ b/src/lib/framer-motion/features.ts
@@ -0,0 +1 @@
+export { domAnimation } from "framer-motion";
diff --git a/src/lib/framer-motion/lazy-load-framer-motion.tsx b/src/lib/framer-motion/lazy-load-framer-motion.tsx
new file mode 100644
index 00000000..a01ea2d0
--- /dev/null
+++ b/src/lib/framer-motion/lazy-load-framer-motion.tsx
@@ -0,0 +1,20 @@
+import { LazyMotion } from "framer-motion";
+import { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+const loadFeatures = () => {
+  return import("./features.ts").then((res) => res.domAnimation);
+};
+
+export const LazyLoadFramerMotion = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
+};
diff --git a/src/screens/deck-form/card-list.tsx b/src/screens/deck-form/card-list.tsx
index 6010f0c8..3f8a31cc 100644
--- a/src/screens/deck-form/card-list.tsx
+++ b/src/screens/deck-form/card-list.tsx
@@ -11,9 +11,8 @@ import React from "react";
 import { reset } from "../../ui/reset.ts";
 import { t } from "../../translations/t.ts";
 import { Screen } from "../shared/screen.tsx";
-import { motion } from "framer-motion";
-import { whileTap } from "../../ui/animations.ts";
 import { removeAllTags } from "../../lib/sanitize-html/remove-all-tags.ts";
+import { tapScale } from "../../lib/animations/tap-scale.ts";
 
 export const CardList = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -85,8 +84,7 @@ export const CardList = observer(() => {
         </>
       )}
       {deckFormStore.filteredCards.map((cardForm, i) => (
-        <motion.div
-          whileTap={whileTap}
+        <div
           onClick={() => {
             deckFormStore.editCardFormById(cardForm.id);
           }}
@@ -99,13 +97,14 @@ export const CardList = observer(() => {
             // If the card content is too big then hide it
             maxHeight: 120,
             overflow: 'hidden',
+            ...tapScale,
           })}
         >
           <div>{removeAllTags(cardForm.front.value)}</div>
           <div className={css({ color: theme.hintColor })}>
             {removeAllTags(cardForm.back.value)}
           </div>
-        </motion.div>
+        </div>
       ))}
       <Button
         onClick={() => {
diff --git a/src/screens/deck-review/deck-finished-modal.tsx b/src/screens/deck-review/deck-finished-modal.tsx
index 20de8a00..a18accbc 100644
--- a/src/screens/deck-review/deck-finished-modal.tsx
+++ b/src/screens/deck-review/deck-finished-modal.tsx
@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
+import { LazyLoadFramerMotion } from "../../lib/framer-motion/lazy-load-framer-motion.tsx";
 
 type Props = {
   children: ReactNode;
@@ -25,20 +26,22 @@ export const DeckFinishedModal = (props: Props) => {
   };
 
   return (
-    <motion.div
-      className={css({
-        maxWidth: 290,
-        margin: "0 auto",
-        padding: 24,
-        background: theme.secondaryBgColor,
-        borderRadius: theme.borderRadius,
-      })}
-      initial={"hidden"}
-      animate={"visible"}
-      exit={"hidden"}
-      variants={modal}
-    >
-      {children}
-    </motion.div>
+    <LazyLoadFramerMotion>
+      <m.div
+        className={css({
+          maxWidth: 290,
+          margin: "0 auto",
+          padding: 24,
+          background: theme.secondaryBgColor,
+          borderRadius: theme.borderRadius,
+        })}
+        initial={"hidden"}
+        animate={"visible"}
+        exit={"hidden"}
+        variants={modal}
+      >
+        {children}
+      </m.div>
+    </LazyLoadFramerMotion>
   );
 };
diff --git a/src/screens/deck-review/review-deck-name.tsx b/src/screens/deck-review/review-deck-name.tsx
index d2a555d2..3e70a16a 100644
--- a/src/screens/deck-review/review-deck-name.tsx
+++ b/src/screens/deck-review/review-deck-name.tsx
@@ -2,8 +2,9 @@ import { useReviewStore } from "./store/review-store-context.tsx";
 import { css } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
 import React from "react";
-import { AnimatePresence, motion } from "framer-motion";
+import { m, AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react-lite";
+import { LazyLoadFramerMotion } from "../../lib/framer-motion/lazy-load-framer-motion.tsx";
 
 export const ReviewDeckName = observer(() => {
   const reviewStore = useReviewStore();
@@ -11,22 +12,24 @@ export const ReviewDeckName = observer(() => {
   const deckName = reviewStore.currentCard?.deckName;
 
   return (
-    <AnimatePresence initial={false}>
-      <motion.div
-        key={deckName}
-        exit={{ y: 50, opacity: 0, position: "absolute" }}
-        animate={{ y: 0, opacity: 1 }}
-        initial={{ y: -50, opacity: 0 }}
-        className={css({
-          position: "absolute",
-          top: 41,
-          fontSize: 14,
-          whiteSpace: "nowrap",
-          color: theme.hintColor,
-        })}
-      >
-        {deckName}
-      </motion.div>
-    </AnimatePresence>
+    <LazyLoadFramerMotion>
+      <AnimatePresence initial={false}>
+        <m.div
+          key={deckName}
+          exit={{ y: 50, opacity: 0, position: "absolute" }}
+          animate={{ y: 0, opacity: 1 }}
+          initial={{ y: -50, opacity: 0 }}
+          className={css({
+            position: "absolute",
+            top: 41,
+            fontSize: 14,
+            whiteSpace: "nowrap",
+            color: theme.hintColor,
+          })}
+        >
+          {deckName}
+        </m.div>
+      </AnimatePresence>
+    </LazyLoadFramerMotion>
   );
 });
diff --git a/src/screens/deck-review/store/card-under-review-store.ts b/src/screens/deck-review/store/card-under-review-store.ts
index 678ad8ae..41a38a97 100644
--- a/src/screens/deck-review/store/card-under-review-store.ts
+++ b/src/screens/deck-review/store/card-under-review-store.ts
@@ -67,13 +67,9 @@ export class CardUnderReviewStore {
     this.state = state;
   }
 
-  get isSpeakingCardsEnabledSettings() {
-    return userStore.isSpeakingCardsEnabled;
-  }
-
   speak() {
     if (
-      !this.isSpeakingCardsEnabledSettings ||
+      !userStore.isSpeakingCardsEnabled ||
       !this.deckSpeakLocale ||
       !this.deckSpeakField
     ) {
diff --git a/src/screens/shared/card/card-speaker.tsx b/src/screens/shared/card/card-speaker.tsx
index ff407058..95ebcb26 100644
--- a/src/screens/shared/card/card-speaker.tsx
+++ b/src/screens/shared/card/card-speaker.tsx
@@ -5,6 +5,7 @@ import { theme } from "../../../ui/theme.tsx";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { LimitedCardUnderReviewStore } from "./card.tsx";
+import { userStore } from "../../../store/user-store.ts";
 
 type Props = {
   card: LimitedCardUnderReviewStore;
@@ -17,7 +18,7 @@ export const CardSpeaker = observer((props: Props) => {
     !isSpeechSynthesisSupported ||
     !card.isOpened ||
     type !== card.deckSpeakField ||
-    !card.isSpeakingCardsEnabledSettings
+    !userStore.isSpeakingCardsEnabled
   ) {
     return null;
   }
diff --git a/src/screens/shared/card/card.tsx b/src/screens/shared/card/card.tsx
index 22397b7a..ff6ded66 100644
--- a/src/screens/shared/card/card.tsx
+++ b/src/screens/shared/card/card.tsx
@@ -1,5 +1,4 @@
-import { motion } from "framer-motion";
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import React from "react";
 import { theme } from "../../../ui/theme.tsx";
 import { observer } from "mobx-react-lite";
@@ -15,7 +14,6 @@ export type LimitedCardUnderReviewStore = Pick<
   CardUnderReviewStore,
   | "isOpened"
   | "deckSpeakField"
-  | "isSpeakingCardsEnabledSettings"
   | "speak"
   | "front"
   | "back"
@@ -33,7 +31,7 @@ type Props = {
 
 export const Card = observer(({ card }: Props) => {
   return (
-    <motion.div
+    <div
       className={
         card.answerType === "remember"
           ? css({
@@ -49,13 +47,27 @@ export const Card = observer(({ card }: Props) => {
               display: "grid",
               placeItems: "center center",
               padding: 10,
-              background: theme.secondaryBgColorComputed,
+              background: theme.secondaryBgColor,
             })
           : css({
               color: theme.textColor,
             })
       }
     >
+      {false && (
+        <div
+          className={css({
+            position: "absolute",
+            top: 0,
+            right: 12,
+            transform: "scale(0.8)",
+            cursor: "pointer",
+          })}
+          onClick={() => {}}
+        >
+          <i className={cx("mdi mdi-dots-horizontal mdi-24px")} />
+        </div>
+      )}
       <span
         className={css({
           textAlign: "center",
@@ -117,6 +129,6 @@ export const Card = observer(({ card }: Props) => {
           </>
         ) : null}
       </span>
-    </motion.div>
+    </div>
   );
 });
diff --git a/src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx b/src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx
index e11663be..a9408861 100644
--- a/src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx
+++ b/src/screens/shared/deck-row-with-cards-to-review/deck-row-with-cards-to-review.tsx
@@ -2,10 +2,9 @@ import { observer } from "mobx-react-lite";
 import { css } from "@emotion/css";
 import { theme } from "../../../ui/theme.tsx";
 import React from "react";
-import { motion } from "framer-motion";
-import { whileTap } from "../../../ui/animations.ts";
 import { DeckCardDbTypeWithType } from "../../../store/deck-list-store.ts";
 import { CardsToReviewCount } from "./cards-to-review-count.tsx";
+import { tapScale } from "../../../lib/animations/tap-scale.ts";
 
 type Props = {
   item: {
@@ -20,8 +19,7 @@ export const DeckRowWithCardsToReview = observer((props: Props) => {
   const { item, onClick } = props;
 
   return (
-    <motion.div
-      whileTap={whileTap}
+    <div
       onClick={onClick}
       className={css({
         display: "flex",
@@ -32,6 +30,7 @@ export const DeckRowWithCardsToReview = observer((props: Props) => {
         borderRadius: theme.borderRadius,
         padding: 12,
         background: theme.secondaryBgColor,
+        ...tapScale,
       })}
     >
       <div
@@ -59,6 +58,6 @@ export const DeckRowWithCardsToReview = observer((props: Props) => {
           color={theme.success}
         />
       </div>
-    </motion.div>
+    </div>
   );
 });
diff --git a/src/screens/user-settings/store/user-settings-store.tsx b/src/screens/user-settings/store/user-settings-store.tsx
index 0dc897cd..a2323e67 100644
--- a/src/screens/user-settings/store/user-settings-store.tsx
+++ b/src/screens/user-settings/store/user-settings-store.tsx
@@ -26,7 +26,6 @@ export class UserSettingsStore {
   }
 
   load() {
-    console.log("load", !!userStore.userInfo);
     when(() => !!userStore.userInfo).then(
       action(() => {
         assert(userStore.userInfo);
diff --git a/src/store/user-store.ts b/src/store/user-store.ts
index bd406231..6d228477 100644
--- a/src/store/user-store.ts
+++ b/src/store/user-store.ts
@@ -12,6 +12,7 @@ export class UserStore {
   plans?: PlansForUser;
   isCardFormattingOn = new BooleanToggle(false);
   defaultCardType: CardAnswerType = "remember";
+  isSpeakingCardsMuted = new BooleanToggle(false);
 
   constructor() {
     makeAutoObservable(this, {}, { autoBind: true });
@@ -51,6 +52,9 @@ export class UserStore {
   }
 
   get isSpeakingCardsEnabled() {
+    if (this.isSpeakingCardsMuted.value) {
+      return false;
+    }
     return this.user?.is_speaking_card_enabled ?? false;
   }
 
diff --git a/src/ui/chevron-icon.tsx b/src/ui/chevron-icon.tsx
index 6bb16b88..62adf02c 100644
--- a/src/ui/chevron-icon.tsx
+++ b/src/ui/chevron-icon.tsx
@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import React, { SVGProps } from "react";
 
 type Direction = "top" | "bottom";
@@ -19,7 +19,7 @@ type Props = Pick<SVGProps<SVGSVGElement>, "onClick" | "className"> & {
 export const ChevronIcon = (props: Props) => {
   const { direction, ...restProps } = props;
   return (
-    <motion.svg
+    <m.svg
       width="16"
       height="16"
       viewBox="0 0 16 16"
@@ -38,6 +38,6 @@ export const ChevronIcon = (props: Props) => {
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </motion.svg>
+    </m.svg>
   );
 };
diff --git a/src/ui/deck-list-item-with-description.tsx b/src/ui/deck-list-item-with-description.tsx
index f31f8ff0..f1fd955b 100644
--- a/src/ui/deck-list-item-with-description.tsx
+++ b/src/ui/deck-list-item-with-description.tsx
@@ -1,11 +1,10 @@
 import { observer } from "mobx-react-lite";
-import { motion } from "framer-motion";
-import { whileTap } from "./animations.ts";
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
 import LinesEllipsis from "react-lines-ellipsis";
 import React from "react";
 import { DeckCategoryLogo } from "./deck-category-logo.tsx";
+import { tapScale } from "../lib/animations/tap-scale.ts";
 
 type Props = {
   deck: {
@@ -23,8 +22,7 @@ export const DeckListItemWithDescription = observer((props: Props) => {
   const { deck, onClick, titleRightSlot } = props;
 
   return (
-    <motion.div
-      whileTap={whileTap}
+    <div
       className={css({
         display: "flex",
         flexDirection: "column",
@@ -33,6 +31,7 @@ export const DeckListItemWithDescription = observer((props: Props) => {
         padding: 12,
         cursor: "pointer",
         background: theme.secondaryBgColor,
+        ...tapScale,
       })}
       onClick={onClick}
     >
@@ -67,6 +66,6 @@ export const DeckListItemWithDescription = observer((props: Props) => {
           basedOn="words"
         />
       </div>
-    </motion.div>
+    </div>
   );
 });
diff --git a/src/ui/progress-bar.tsx b/src/ui/progress-bar.tsx
index b30d90a8..53e73340 100644
--- a/src/ui/progress-bar.tsx
+++ b/src/ui/progress-bar.tsx
@@ -1,7 +1,8 @@
 import { css } from "@emotion/css";
 import { theme } from "./theme.tsx";
-import { motion } from "framer-motion";
+import { m } from "framer-motion";
 import React from "react";
+import { LazyLoadFramerMotion } from "../lib/framer-motion/lazy-load-framer-motion.tsx";
 
 type Props = { value: number; max: number };
 
@@ -16,14 +17,16 @@ export const ProgressBar = ({ value, max }: Props) => {
         overflow: "hidden",
       })}
     >
-      <motion.div
-        initial={false}
-        animate={{ width: `${(value / max) * 100}%` }}
-        className={css({
-          backgroundColor: theme.success,
-          height: 30,
-        })}
-      />
+      <LazyLoadFramerMotion>
+        <m.div
+          initial={false}
+          animate={{ width: `${(value / max) * 100}%` }}
+          className={css({
+            backgroundColor: theme.success,
+            height: 30,
+          })}
+        />
+      </LazyLoadFramerMotion>
       <div
         className={css({
           position: "absolute",
diff --git a/src/ui/theme.tsx b/src/ui/theme.tsx
index be6165f8..b0811125 100644
--- a/src/ui/theme.tsx
+++ b/src/ui/theme.tsx
@@ -32,8 +32,6 @@ export const theme = {
   buttonTextColor,
   secondaryBgColor,
 
-  // Needed for framer-motion library
-  secondaryBgColorComputed: cssVarToValue(secondaryBgColor),
   buttonColorComputed: buttonColorComputed,
   buttonColorLighter: colord(buttonColorComputed).lighten(0.4).toHex(),
   buttonTextColorComputed: cssVarToValue(buttonTextColor),