diff --git a/package-lock.json b/package-lock.json
index bd6db2eb..10b9b04e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
         "json2csv": "^6.0.0-alpha.2",
+        "jspdf": "^2.5.2",
         "prettier": "^3.3.3",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
@@ -1965,6 +1966,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
@@ -2342,6 +2349,17 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2386,6 +2404,15 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2427,6 +2454,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -2481,6 +2519,31 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
     "node_modules/chai": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
@@ -2587,6 +2650,17 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
+    "node_modules/core-js": {
+      "version": "3.39.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+      "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+      "hasInstallScript": true,
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -2615,6 +2689,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -2861,6 +2944,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz",
+      "integrity": "sha512-2q4bEI+coQM8f5ez7kt2xclg1XsecaV9ASJk/54vwlfRRNQfDqJz2pzQ8t0Ix/ToBpXlVjrRIx7pFC/o8itG2Q==",
+      "optional": true
+    },
     "node_modules/dotenv": {
       "version": "16.4.5",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
@@ -3532,6 +3621,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3926,6 +4020,19 @@
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -4636,6 +4743,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5201,6 +5325,12 @@
         "node": ">= 14.16"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -5362,6 +5492,15 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -5582,6 +5721,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -5832,6 +5980,15 @@
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
@@ -6077,6 +6234,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6152,6 +6318,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6393,6 +6568,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",
diff --git a/package.json b/package.json
index 1abf048d..7af1d7b5 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "json2csv": "^6.0.0-alpha.2",
+    "jspdf": "^2.5.2",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
diff --git a/src/Components/SideBar/index.jsx b/src/Components/SideBar/index.jsx
index 265e96bb..134a83a7 100644
--- a/src/Components/SideBar/index.jsx
+++ b/src/Components/SideBar/index.jsx
@@ -97,6 +97,15 @@ export default function SideBar({ fullHeight = true }) {
         setIsSideBarOpen(false);
       }}
     />,
+    <SideButton
+      hidden={checkModule(permissions, "users") ? "flex" : "none"}
+      key="carteirinha"
+      text="CARTEIRINHA"
+      onClick={() => {
+        navigate("/carteirinha");
+        setIsSideBarOpen(false);
+      }}
+    />
   ];
 
   return (
diff --git a/src/Pages/Protected/Carteirinha/index.css b/src/Pages/Protected/Carteirinha/index.css
new file mode 100644
index 00000000..9fccce5f
--- /dev/null
+++ b/src/Pages/Protected/Carteirinha/index.css
@@ -0,0 +1,223 @@
+.carteirinha-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #fff;
+    min-height: 100vh;
+    gap: 15px;
+}
+
+.carteirinha {
+    background: #eae3d7;
+    height: 420px;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 650px;
+    padding: 20px 30px;
+    text-align: left;
+    font-family: Arial, sans-serif, 'Noto Sans';
+}
+
+
+.carteirinha-header {
+    margin-bottom: 20px;
+}
+
+.carteirinha-header h1 {
+    font-family: 'Noto Sans';
+    font-weight: 900;
+    letter-spacing: -2.5px;
+    line-height: 123.5%;
+    font-size: 70px;
+    color: #AE883C !important;
+    margin: -12px;
+    margin-top: 10px;
+    margin-left: -12px;
+    text-shadow: 0px 100px 80px rgba(226, 183, 61, 0.25);
+}
+.carteirinha-header p {
+    color: #341F14;
+    font-size: 15px;
+    margin-top: 3px;
+    margin-left: -10px;
+    font-weight: bold !important;
+    font-weight: 500;
+}
+.Sind{
+    font-family: 'Noto Sans' !important;
+    color: #AE883C !important;
+    font-size: 20px !important;
+    font-weight: 900 !important;
+    text-shadow: 0px 4px 4px rgba(226, 183, 61, 0.25);
+}
+.info-and-badge {
+    margin-left: -10px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.carteirinha-info {
+    flex: 2;
+}
+
+.info-line {
+    display: flex;
+    gap:  60px;
+    margin-bottom: 10px;
+    
+}
+
+.info-block {
+    text-align: left;
+    font-size: 11px;
+    margin-top: 15px;
+}
+
+.info-block strong {
+    font-weight: 900;
+    color: #341F14;
+}
+
+.info-block span {
+    font-size: 13px;
+    color: #333;
+}
+
+.badge-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;            
+    position: relative;
+    top:-10px;
+
+}
+
+.badge-logo {
+    width: 170px;
+    margin-bottom: 10px;
+}
+
+.badge-section p {
+    margin-top: -5px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #555;
+}
+
+.qr-section {
+    margin: 20px 0;
+    text-align: center;
+}
+
+.qr-code {
+    width: 200px;
+    margin-bottom: 10px;
+    border: 7px solid #d49a3c; 
+    border-radius: 5px; 
+    padding: 5px; 
+    background-color: #fff;
+}
+.qr-code-numero{
+    font-weight: 900;
+    line-height: 123.5%;
+    font-size: 25px;
+    color: #341F14 !important;
+    margin: -12px;
+    text-shadow: 0px 4px 4px rgba(226, 183, 61, 0.25);
+
+}
+
+.carteirinha-footer {
+    color: #341F14;
+    font-size: 12px;
+    margin-top: 10px;
+    font-weight:900;
+    text-align: center;
+}
+
+.social-media {
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.social-icon {
+    font-size: 20px; 
+    color: #333;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.social-icon:hover {
+    color: #d49a3c; 
+}
+
+.download-button {
+    padding: 12px 75px; 
+    background-color: #EAE3D7; 
+    color: #7F5539; 
+    font-size: 16px; 
+    font-weight: bold; 
+    border: none; 
+    border: 3px solid #7F5539; 
+    border-radius: 30px; 
+    cursor: pointer; 
+    transition: background-color 0.3s ease, transform 0.3s ease; 
+    text-transform: uppercase;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: inline-block; 
+}
+
+.download-button:hover {
+    background-color: #EAE3D7; 
+    transform: scale(1.05); 
+}
+
+.download-button:focus {
+    outline: none; /* Remove o contorno padrão do foco */
+}
+
+.info-color{
+    background-color: white;
+    border-radius: 4px;
+    padding: 5px 28px;
+    padding-left: 5px;
+    width: 150px;
+    margin-top: 5px;
+
+}
+
+.info-color-titular{
+    background-color: white;
+    border-radius: 4px;
+    padding: 5px 28px;
+    padding-left: 5px;
+    width: 360px;
+    margin-top: 5px;
+
+}
+.social-icon {
+    width: 20px; 
+    height: 20px;
+}
+
+.footer-logos {
+    display: flex;
+    justify-content: center;
+    margin-left: 500px;
+    margin-top: -50px;
+    
+}
+
+.footer-logo {
+    width: 50px; 
+    height: auto;
+   
+
+}
diff --git a/src/Pages/Protected/Carteirinha/index.jsx b/src/Pages/Protected/Carteirinha/index.jsx
new file mode 100644
index 00000000..6db231e0
--- /dev/null
+++ b/src/Pages/Protected/Carteirinha/index.jsx
@@ -0,0 +1,162 @@
+import React, { useRef, useState, useEffect } from "react";
+import "./index.css";
+
+import { jsPDF } from "jspdf";
+import html2canvas from "html2canvas";
+
+import badgeLogo from "../../../assets/sindpol-logo.png";
+import penalLogo from "../../../assets/penal_df-min.png.png";
+import qrCode from "../../../assets/qr-code.png";
+import { FaFacebook, FaInstagram, FaTwitter, FaYoutube } from "react-icons/fa";
+
+const Carteirinha = () => {
+  const cardRef = useRef(null);
+  const [membershipData, setMembershipData] = useState(null);
+
+  // Fetch Membership data
+  useEffect(() => {
+    const fetchMembership = async () => {
+      try {
+        const response = await fetch("http://localhost:3001/membership");
+        const data = await response.json();
+        setMembershipData(data[0]);
+        console.log('alohaa', data)
+      } catch (error) {
+        console.error("Erro ao buscar os dados do membership:", error);
+      }
+    };
+
+    fetchMembership();
+  }, []);
+
+  const downloadPDF = async () => {
+    const element = cardRef.current;
+
+    if (!element) {
+      console.error("Elemento não encontrado!");
+      return;
+    }
+
+    const button = element.querySelector(".download-button");
+    if (button) {
+      button.style.display = "none"; // Oculta o botão
+    }
+
+    const scale = 3;
+    const canvas = await html2canvas(element, {
+      scale,
+      useCORS: true,
+      logging: true,
+      allowTaint: true,
+      scrollX: 0,
+      scrollY: -window.scrollY,
+    });
+
+    const imgData = canvas.toDataURL("image/png");
+
+    const pdf = new jsPDF("p", "mm", "a4");
+    const cardWidth = 210;
+    const cardHeight = (canvas.height * cardWidth) / canvas.width;
+
+    pdf.addImage(imgData, "PNG", 10, 10, cardWidth, cardHeight);
+    pdf.save("carteirinha.pdf");
+
+    button.style.display = ""; // Mostra o botão novamente
+  };
+
+  // Render loading state
+  if (!membershipData) {
+    return <div>Carregando dados...</div>;
+  }
+
+  const {
+    name,
+    birthDate,
+    cpf,
+    expeditionDate,
+    hiringDate
+  } = membershipData;
+
+  return (
+    <div className="carteirinha-container" ref={cardRef}>
+      <div className="carteirinha">
+        <header className="carteirinha-header">
+          <h1>SINDPOL-DF</h1>
+          <p>SINDICATO DOS POLICIAIS PENAIS DO DISTRITO FEDERAL</p>
+        </header>
+
+        {/* Informações e Badge */}
+        <div className="info-and-badge">
+          <div className="carteirinha-info">
+            <div className="info-line">
+              <div className="info-block">
+                <strong>TITULAR:</strong><br />
+                <p className="info-color-titular"><span>{name}</span></p>
+              </div>
+            </div>
+            <div className="info-line">
+              <div className="info-block">
+                <strong>DATA DE NASCIMENTO:</strong><br />
+                <p className="info-color"><span>{new Date(birthDate).toLocaleDateString()}</span></p>
+              </div>
+              <div className="info-block">
+                <strong>DATA DE EXPEDIÇÃO:</strong><br />
+                <p className="info-color"><span>{new Date(expeditionDate).toLocaleDateString()}</span></p>
+              </div>
+            </div>
+            <div className="info-line">
+              <div className="info-block">
+                <strong>CPF:</strong><br />
+                <p className="info-color"><span>{cpf}</span></p>
+              </div>
+              <div className="info-block">
+                <strong>CONTRATAÇÃO:</strong><br />
+                <p className="info-color"><span>{new Date(hiringDate).toLocaleDateString()}</span></p>
+              </div>
+            </div>
+          </div>
+
+          {/* Badge Section */}
+          <div className="badge-section">
+            <img src={badgeLogo} alt="Sindicalizado Badge" className="badge-logo" />
+            <p className="Sind">SINDICALIZADO</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Segunda Parte da Carteirinha */}
+      <div className="carteirinha">
+        <footer className="carteirinha-footer">
+          <p>
+            Setor de Diversões Sul (SDS), Conjunto Baracat, Bloco F, 27, Salas 313/315,
+            Asa Sul, Brasília/DF, CEP 70392-900
+          </p>
+        </footer>
+        <div className="qr-section">
+          <img src={qrCode} alt="QR Code" className="qr-code" />
+          <p className="qr-code-numero">(61) 3321-1949</p>
+        </div>
+
+        <footer className="carteirinha-footer">
+          <p>sindpol.org.br / contato@sindpol.org.br</p>
+          <div className="social-media">
+            <FaInstagram className="social-icon" />
+            <FaYoutube className="social-icon" />
+            <FaFacebook className="social-icon" />
+            <FaTwitter className="social-icon" />
+          </div>
+          <span>@sindpoldf</span>
+          <div className="footer-logos">
+            <img src={badgeLogo} alt="Logo 1" className="footer-logo" />
+            <img src={penalLogo} alt="Logo 2" className="footer-logo" />
+          </div>
+        </footer>
+      </div>
+
+      {/* Botão */}
+      <button onClick={downloadPDF} className="download-button">BAIXAR CARTEIRINHA</button>
+    </div>
+  );
+};
+
+export default Carteirinha;
diff --git a/src/Pages/Protected/Carteirinha/index.teste.jsx b/src/Pages/Protected/Carteirinha/index.teste.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Routes/protectedRoutes.jsx b/src/Routes/protectedRoutes.jsx
index 7bde377e..a188cdc0 100644
--- a/src/Routes/protectedRoutes.jsx
+++ b/src/Routes/protectedRoutes.jsx
@@ -17,6 +17,7 @@ import Benefits from "../Pages/Protected/Benefit/Benefits";
 import BenefitsList from "../Pages/Protected/Benefit/BenefitsList";
 import BenefitsCreate from "../Pages/Protected/Benefit/BenefitsCreate";
 import BenefitsUpdate from "../Pages/Protected/Benefit/BenefitsUpdate";
+import CarteirinhaPage from "../Pages/Protected/Carteirinha/index.jsx";
 import ViewMembershipPage from "../Pages/Protected/Users/ViewMembershipPage";
 import FinanceHubPage from "../Pages/Protected/Finance/FinanceHubPage";
 import FinanceBankAccount from "../Pages/Protected/Finance/BankAccountCreate";
@@ -171,6 +172,16 @@ const ProtectedRoutes = () => {
           />
         }
       />
+      <Route
+       path="/carteirinha"
+       element={
+         <PermissionProtect
+           element={<CarteirinhaPage />}
+           moduleName="users"
+           actions={["read", "create"]}
+           />
+         }
+        />
       <Route
         path="/beneficios/editar/:id"
         element={
diff --git a/src/assets/penal_df-min.png.png b/src/assets/penal_df-min.png.png
new file mode 100644
index 00000000..6d242193
Binary files /dev/null and b/src/assets/penal_df-min.png.png differ
diff --git a/src/assets/qr-code.png b/src/assets/qr-code.png
new file mode 100644
index 00000000..e380a5e2
Binary files /dev/null and b/src/assets/qr-code.png differ