diff --git a/package.json b/package.json
index 87719ad7..e106dcd4 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lints": "eslint --fix './**/*.{ts,tsx,js,jsx}'",
     "prepare": "husky install",
     "lint-front": "lint-staged",
-    "svgr": "npx @svgr/cli -d src/assets/svgs --ignore-existing --typescript --no-dimensions public/svgs"
+    "svgr": "node svgr-generate.cjs"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -32,6 +32,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
+    "shelljs": "^0.8.5",
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",
     "supports-color": "^9.4.0",
@@ -54,6 +55,7 @@
     "@types/prettier-linter-helpers": "^1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/shelljs": "^0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
diff --git a/public/svgs/icon_eye_off.svg b/public/svgs/icon_eye_off.svg
new file mode 100644
index 00000000..79705901
--- /dev/null
+++ b/public/svgs/icon_eye_off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.81818 6.05833L4.86545 5L18.5455 18.9333L17.5064 20L14.9864 17.4333C14.0455 17.75 13.0473 17.9167 12 17.9167C7.90909 17.9167 4.41545 15.325 3 11.6667C3.56455 10.2 4.46455 8.90833 5.61 7.88333L3.81818 6.05833ZM12 9.16667C12.651 9.16667 13.2753 9.43006 13.7356 9.8989C14.1959 10.3677 14.4545 11.0036 14.4545 11.6667C14.455 11.9505 14.4079 12.2323 14.3155 12.5L11.1818 9.30833C11.4447 9.21415 11.7214 9.16625 12 9.16667ZM12 5.41667C16.0909 5.41667 19.5845 8.00833 21 11.6667C20.3319 13.3941 19.1972 14.8936 17.7273 15.9917L16.5655 14.8C17.697 14.0029 18.6095 12.9243 19.2164 11.6667C18.555 10.2916 17.5281 9.13303 16.2524 8.32279C14.9767 7.51256 13.5034 7.08314 12 7.08333C11.1082 7.08333 10.2327 7.23333 9.41455 7.5L8.15455 6.225C9.33273 5.70833 10.6336 5.41667 12 5.41667ZM4.78364 11.6667C5.44501 13.0418 6.47192 14.2003 7.74761 15.0105C9.0233 15.8208 10.4966 16.2502 12 16.25C12.5645 16.25 13.1209 16.1917 13.6364 16.075L11.7709 14.1667C11.2016 14.1045 10.6703 13.8457 10.2654 13.4334C9.86056 13.021 9.60648 12.4799 9.54545 11.9L6.76364 9.05833C5.95364 9.76667 5.27455 10.65 4.78364 11.6667Z" fill="#939393"/>
+</svg>
diff --git a/src/assets/svgs/IcHamburgar.tsx b/src/assets/svgs/IcHamburgar.tsx
index 2b2414e9..d5af5195 100644
--- a/src/assets/svgs/IcHamburgar.tsx
+++ b/src/assets/svgs/IcHamburgar.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIcHamburgar = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
diff --git a/src/assets/svgs/IconArrowLeft.tsx b/src/assets/svgs/IconArrowLeft.tsx
index 0d66fd69..ef51c35a 100644
--- a/src/assets/svgs/IconArrowLeft.tsx
+++ b/src/assets/svgs/IconArrowLeft.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconArrowLeft = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
diff --git a/src/assets/svgs/IconEyeOff.tsx b/src/assets/svgs/IconEyeOff.tsx
new file mode 100644
index 00000000..128707fe
--- /dev/null
+++ b/src/assets/svgs/IconEyeOff.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconEyeOff = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="#939393"
+      d="M3.818 6.058 4.865 5l13.68 13.933L17.507 20l-2.52-2.567c-.94.317-1.939.484-2.986.484-4.09 0-7.585-2.592-9-6.25a9.8 9.8 0 0 1 2.61-3.784zM12 9.167c.651 0 1.275.263 1.736.732.46.469.718 1.105.718 1.768.001.284-.046.565-.139.833l-3.133-3.192c.263-.094.54-.142.818-.141m0-3.75c4.09 0 7.584 2.591 9 6.25a9.8 9.8 0 0 1-3.273 4.325L16.565 14.8a8.2 8.2 0 0 0 2.651-3.133 8.13 8.13 0 0 0-2.964-3.344A7.93 7.93 0 0 0 12 7.083c-.892 0-1.767.15-2.585.417l-1.26-1.275A9.6 9.6 0 0 1 12 5.417m-7.216 6.25a8.13 8.13 0 0 0 2.964 3.344A7.93 7.93 0 0 0 12 16.25c.565 0 1.12-.058 1.636-.175l-1.865-1.908a2.5 2.5 0 0 1-1.506-.734 2.57 2.57 0 0 1-.72-1.533L6.764 9.058a8.2 8.2 0 0 0-1.98 2.609"
+    />
+  </svg>
+);
+export default SvgIconEyeOff;
diff --git a/src/assets/svgs/IconLogo.tsx b/src/assets/svgs/IconLogo.tsx
index 7d7956d0..07b72796 100644
--- a/src/assets/svgs/IconLogo.tsx
+++ b/src/assets/svgs/IconLogo.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconLogo = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 73 30" {...props}>
diff --git a/src/assets/svgs/IconMinus.tsx b/src/assets/svgs/IconMinus.tsx
index 30a9a62e..0ff5bfc8 100644
--- a/src/assets/svgs/IconMinus.tsx
+++ b/src/assets/svgs/IconMinus.tsx
@@ -1,7 +1,8 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconMinus = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
-    <path stroke="currentColor" strokeMiterlimit={10} strokeWidth={1.2} d="M17 12H7" />
+    <path stroke="#fff" strokeMiterlimit={10} strokeWidth={1.2} d="M17 12H7" />
   </svg>
 );
 export default SvgIconMinus;
diff --git a/src/assets/svgs/IconPlus.tsx b/src/assets/svgs/IconPlus.tsx
index 8297b858..5a2172e0 100644
--- a/src/assets/svgs/IconPlus.tsx
+++ b/src/assets/svgs/IconPlus.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconPlus = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
-    <path stroke="currentColor" strokeMiterlimit={10} strokeWidth={1.2} d="M12 7v10M17 12H7" />
+    <path stroke="#fff" strokeMiterlimit={10} strokeWidth={1.2} d="M12 7v10M17 12H7" />
   </svg>
 );
 export default SvgIconPlus;
diff --git a/src/assets/svgs/IconTextfiedlDelete.tsx b/src/assets/svgs/IconTextfiedlDelete.tsx
index fee61872..4a78a0fa 100644
--- a/src/assets/svgs/IconTextfiedlDelete.tsx
+++ b/src/assets/svgs/IconTextfiedlDelete.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconTextfiedlDelete = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index bd7bf2f4..0aac050d 100644
--- a/src/assets/svgs/index.tsx
+++ b/src/assets/svgs/index.tsx
@@ -1,8 +1,9 @@
-export { default as IcomCopy } from "./IcomCopy";
 export { default as IcHamburgar } from "./IcHamburgar";
+export { default as IcomCopy } from "./IcomCopy";
 export { default as IconArrowLeft } from "./IconArrowLeft";
 export { default as IconArrowRight } from "./IconArrowRight";
 export { default as IconCheck } from "./IconCheck";
+export { default as IconEyeOff } from "./IconEyeOff";
 export { default as IconLogo } from "./IconLogo";
 export { default as IconMinus } from "./IconMinus";
 export { default as IconPlus } from "./IconPlus";
diff --git a/svgr-generate.cjs b/svgr-generate.cjs
new file mode 100644
index 00000000..82259e08
--- /dev/null
+++ b/svgr-generate.cjs
@@ -0,0 +1,54 @@
+const { exec } = require("shelljs");
+const fs = require("fs");
+const path = require("path");
+
+const SVG_DIR = path.resolve(__dirname, "public/svgs");
+const OUTPUT_DIR = path.resolve(__dirname, "src/assets/svgs");
+const INDEX_FILE = path.join(OUTPUT_DIR, "index.tsx");
+
+// Run SVGR
+exec(
+  `npx @svgr/cli -d ${OUTPUT_DIR} --ignore-existing --typescript --no-dimensions ${SVG_DIR}`,
+  (code, stdout, stderr) => {
+    if (code !== 0) {
+      console.error("SVGR command failed:", stderr);
+      process.exit(code);
+    }
+    deleteIndexTs();
+    generateIndexFile();
+  }
+);
+
+// Delete index.ts if it exists
+function deleteIndexTs() {
+  const indexTsPath = path.join(OUTPUT_DIR, "index.ts");
+  if (fs.existsSync(indexTsPath)) {
+    fs.unlinkSync(indexTsPath);
+  }
+}
+
+// Generate index.tsx
+function generateIndexFile() {
+  fs.readdir(OUTPUT_DIR, (err, files) => {
+    if (err) {
+      console.error("Failed to read directory:", err);
+      process.exit(1);
+    }
+
+    const exportStatements = files
+      .filter((file) => file.endsWith(".tsx"))
+      .map((file) => {
+        const name = path.basename(file, ".tsx");
+        return `export { default as ${name} } from "./${name}";`;
+      })
+      .join("\n");
+
+    fs.writeFile(INDEX_FILE, exportStatements, (writeErr) => {
+      if (writeErr) {
+        console.error("Failed to write index.tsx:", writeErr);
+        process.exit(1);
+      }
+      console.log("index.tsx generated successfully");
+    });
+  });
+}
diff --git a/yarn.lock b/yarn.lock
index bc1cbc01..1e55cbd8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4095,7 +4095,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob@npm:^7.1.3":
+"@types/glob@npm:^7.1.3, @types/glob@npm:~7.2.0":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
   dependencies:
@@ -4309,6 +4309,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/shelljs@npm:^0":
+  version: 0.8.15
+  resolution: "@types/shelljs@npm:0.8.15"
+  dependencies:
+    "@types/glob": "npm:~7.2.0"
+    "@types/node": "npm:*"
+  checksum: 10c0/8cee3c2cee993d4e4b534712dbf3b47000f22e14cbc4fff5c09fd774272e2bfb9b7dfc654d81349a11ade93a94f3a75771e403cd31509565102c33f518185da8
+  languageName: node
+  linkType: hard
+
 "@types/stylis@npm:4.2.5":
   version: 4.2.5
   resolution: "@types/stylis@npm:4.2.5"
@@ -5417,6 +5427,7 @@ __metadata:
     "@types/prettier-linter-helpers": "npm:^1"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
+    "@types/shelljs": "npm:^0"
     "@typescript-eslint/eslint-plugin": "npm:^7.13.1"
     "@typescript-eslint/parser": "npm:^7.13.1"
     "@vitejs/plugin-react-swc": "npm:^3.5.0"
@@ -5445,6 +5456,7 @@ __metadata:
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^6.24.0"
+    shelljs: "npm:^0.8.5"
     storybook: "npm:^8.1.11"
     storybook-addon-theme-provider: "npm:^0.2.2"
     styled-components: "npm:^6.1.11"
@@ -8075,7 +8087,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.1.3, glob@npm:^7.2.0":
+"glob@npm:^7.0.0, glob@npm:^7.1.3, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -8539,6 +8551,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"interpret@npm:^1.0.0":
+  version: 1.4.0
+  resolution: "interpret@npm:1.4.0"
+  checksum: 10c0/08c5ad30032edeec638485bc3f6db7d0094d9b3e85e0f950866600af3c52e9fd69715416d29564731c479d9f4d43ff3e4d302a178196bdc0e6837ec147640450
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
@@ -11076,6 +11095,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rechoir@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "rechoir@npm:0.6.2"
+  dependencies:
+    resolve: "npm:^1.1.6"
+  checksum: 10c0/22c4bb32f4934a9468468b608417194f7e3ceba9a508512125b16082c64f161915a28467562368eeb15dc16058eb5b7c13a20b9eb29ff9927d1ebb3b5aa83e84
+  languageName: node
+  linkType: hard
+
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -11239,7 +11267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
+"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -11265,7 +11293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -11602,6 +11630,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shelljs@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "shelljs@npm:0.8.5"
+  dependencies:
+    glob: "npm:^7.0.0"
+    interpret: "npm:^1.0.0"
+    rechoir: "npm:^0.6.2"
+  bin:
+    shjs: bin/shjs
+  checksum: 10c0/feb25289a12e4bcd04c40ddfab51aff98a3729f5c2602d5b1a1b95f6819ec7804ac8147ebd8d9a85dfab69d501bcf92d7acef03247320f51c1552cec8d8e2382
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
   version: 1.0.6
   resolution: "side-channel@npm:1.0.6"