diff --git a/README.md b/README.md
index f8f39d8..1f50ff6 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,11 @@ Add `FaceLogin` to your component:
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import FaceLogin from 'face-guardian';
+import { FaceLogin, useUserData } from 'face-guardian';
 
 const App = () => {
+  const userData = useUserData();
+
   return (
     <React.StrictMode>
       <FaceLogin
@@ -36,6 +38,7 @@ const App = () => {
         buttonStyles={{ background: 'red', fontSize: '20px' }}
         buttonText="Custom Button Text"
       />
+      {userData && <div>Welcome, {userData.name}!</div>}
     </React.StrictMode>
   );
 };
@@ -44,6 +47,18 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(<App />);
 ```
 
+## Contributing
+
+We welcome contributions to the Face Guardian package! Please refer to our [Contributing Guidelines](https://github.com/Cyvid7-Darus10/face-guardian-npm/blob/main/CONTRIBUTING.md) for detailed information on how you can contribute.
+
+## Support
+
+If you're having trouble with the package, please open an issue on the [GitHub repository](https://github.com/Cyvid7-Darus10/face-guardian-npm/issues). We'll do our best to help you out.
+
+## License
+
+The Face Guardian package is open source software [licensed as MIT](https://github.com/Cyvid7-Darus10/face-guardian-npm/blob/main/LICENSE).
+
 [npm-url]: https://www.npmjs.com/package/face-guardian
 [npm-image]: https://img.shields.io/npm/v/face-guardian
 [github-license]: https://img.shields.io/github/license/Cyvid7-Darus10/face-guardian-npm
diff --git a/dist/cjs/components/FaceLogin/index.d.ts b/dist/cjs/components/FaceLogin/index.d.ts
index 75fe447..cf697b1 100644
--- a/dist/cjs/components/FaceLogin/index.d.ts
+++ b/dist/cjs/components/FaceLogin/index.d.ts
@@ -1,6 +1,8 @@
-import React from 'react';
-declare const FaceLogin: React.FC<{
+import React, { CSSProperties } from 'react';
+type FaceLoginProps = {
     appId: string;
-    clientSecret: string;
-}>;
+    buttonStyles?: CSSProperties;
+    buttonText?: string;
+};
+declare const FaceLogin: React.FC<FaceLoginProps>;
 export default FaceLogin;
diff --git a/dist/cjs/components/FaceLogin/index.js b/dist/cjs/components/FaceLogin/index.js
index 7bc9187..cf44fbf 100644
--- a/dist/cjs/components/FaceLogin/index.js
+++ b/dist/cjs/components/FaceLogin/index.js
@@ -1,26 +1,54 @@
 "use strict";
 exports.__esModule = true;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
 var FaceLogin = function (_a) {
-    var appId = _a.appId;
+    var appId = _a.appId, buttonStyles = _a.buttonStyles, _b = _a.buttonText, buttonText = _b === void 0 ? 'Face Guardian' : _b;
+    var currentUrl = window.location.href;
     var handleButtonClick = function () {
-        window.location.href = "https://www.face-guardian.com/login?appId=".concat(appId);
+        window.location.href = "https://www.face-guardian.com/login?appId=".concat(appId, "&redirectUrl=").concat(currentUrl);
     };
-    return (react_1["default"].createElement("button", { onClick: handleButtonClick, style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: '#9fdbfd',
-            border: '1px solid #5f9cbf',
-            borderRadius: '5px',
-            padding: '10px',
-            color: '#ddf3ff',
-            fontSize: '16px',
-            fontWeight: '600',
-            cursor: 'pointer'
-        } }, "Face Guardian"));
+    (0, react_1.useEffect)(function () {
+        // Check for authorization code in URL
+        var urlParams = new URLSearchParams(window.location.search);
+        var authorizationCode = urlParams.get('authorizationCode');
+        var redirectUrl = urlParams.get('redirectUrl');
+        if (authorizationCode) {
+            // Call API with authorization code
+            fetch('https://www.face-guardian.com/api/request-token', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ authorizationCode: authorizationCode })
+            })
+                .then(function (response) { return response.json(); })
+                .then(function (data) {
+                // Save token in cookie
+                js_cookie_1["default"].set('token', data.token);
+            })["catch"](function (err) { return console.error(err); });
+        }
+        if (redirectUrl) {
+            window.location.href = redirectUrl;
+        }
+    }, []);
+    var defaultStyles = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#9fdbfd',
+        border: '1px solid #5f9cbf',
+        borderRadius: '5px',
+        padding: '10px',
+        color: '#ddf3ff',
+        fontSize: '16px',
+        fontWeight: 600,
+        cursor: 'pointer'
+    };
+    var combinedStyles = tslib_1.__assign(tslib_1.__assign({}, defaultStyles), buttonStyles);
+    return (react_1["default"].createElement("button", { onClick: handleButtonClick, style: combinedStyles }, buttonText));
 };
 exports["default"] = FaceLogin;
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/cjs/components/FaceLogin/index.js.map b/dist/cjs/components/FaceLogin/index.js.map
index 2b3c103..15a998e 100644
--- a/dist/cjs/components/FaceLogin/index.js.map
+++ b/dist/cjs/components/FaceLogin/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FaceLogin/index.tsx"],"names":[],"mappings":";;;AAAA,wDAA0B;AAE1B,IAAM,SAAS,GAAsD,UAAC,EAErE;QADC,KAAK,WAAA;IAEL,IAAM,iBAAiB,GAAG;QACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,oDAA6C,KAAK,CAAE,CAAC;IAC9E,CAAC,CAAC;IAEF,OAAO,CACL,6CACE,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,mBAAmB;YAC3B,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,MAAM,EAAE,SAAS;SAClB,oBAGM,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAe,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FaceLogin/index.tsx"],"names":[],"mappings":";;;AAAA,qDAAwD;AACxD,gEAAgC;AAQhC,IAAM,SAAS,GAA6B,UAAC,EAI5C;QAHC,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,kBAA4B,EAA5B,UAAU,mBAAG,eAAe,KAAA;IAE5B,IAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAExC,IAAM,iBAAiB,GAAG;QACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,oDAA6C,KAAK,0BAAgB,UAAU,CAAE,CAAC;IACxG,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,sCAAsC;QACtC,IAAM,SAAS,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC9D,IAAM,iBAAiB,GAAG,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC7D,IAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAEjD,IAAI,iBAAiB,EAAE;YACrB,mCAAmC;YACnC,KAAK,CAAC,iDAAiD,EAAE;gBACvD,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,cAAc,EAAE,kBAAkB;iBACnC;gBACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,iBAAiB,mBAAA,EAAE,CAAC;aAC5C,CAAC;iBACC,IAAI,CAAC,UAAC,QAAQ,IAAK,OAAA,QAAQ,CAAC,IAAI,EAAE,EAAf,CAAe,CAAC;iBACnC,IAAI,CAAC,UAAC,IAAI;gBACT,uBAAuB;gBACvB,sBAAO,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC,CAAC,CACD,OAAK,CAAA,CAAC,UAAC,GAAG,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlB,CAAkB,CAAC,CAAC;SACvC;QAED,IAAI,WAAW,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;SACpC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,aAAa,GAAkB;QACnC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,mBAAmB;QAC3B,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,SAAS;KAClB,CAAC;IAEF,IAAM,cAAc,yCAAQ,aAAa,GAAK,YAAY,CAAE,CAAC;IAE7D,OAAO,CACL,6CAAQ,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,IACtD,UAAU,CACJ,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAe,SAAS,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/components/useUserData/index.d.ts b/dist/cjs/components/useUserData/index.d.ts
new file mode 100644
index 0000000..890a0d7
--- /dev/null
+++ b/dist/cjs/components/useUserData/index.d.ts
@@ -0,0 +1,2 @@
+declare const useUserData: () => any;
+export default useUserData;
diff --git a/dist/cjs/components/useUserData/index.js b/dist/cjs/components/useUserData/index.js
new file mode 100644
index 0000000..f7144af
--- /dev/null
+++ b/dist/cjs/components/useUserData/index.js
@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var js_cookie_1 = tslib_1.__importDefault(require("js-cookie"));
+var useUserData = function () {
+    var _a = (0, react_1.useState)(null), userData = _a[0], setUserData = _a[1];
+    (0, react_1.useEffect)(function () {
+        // Check if user data already exists in cookie
+        var existingUserData = js_cookie_1["default"].get('userData');
+        if (existingUserData) {
+            setUserData(existingUserData);
+            return;
+        }
+        // Get token from cookie
+        var token = js_cookie_1["default"].get('token');
+        // Fetch user data if token exists
+        if (token) {
+            fetch('/api/get-user', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': "Bearer ".concat(token)
+                }
+            })
+                .then(function (response) { return response.json(); })
+                .then(function (data) {
+                // Save user data to cookie and state
+                js_cookie_1["default"].set('userData', JSON.stringify(data));
+                setUserData(data);
+            })["catch"](function (err) { return console.error(err); });
+        }
+    }, []);
+    return userData;
+};
+exports["default"] = useUserData;
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/cjs/components/useUserData/index.js.map b/dist/cjs/components/useUserData/index.js.map
new file mode 100644
index 0000000..8ed32d1
--- /dev/null
+++ b/dist/cjs/components/useUserData/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/useUserData/index.tsx"],"names":[],"mappings":";;;AAAA,+BAA4C;AAC5C,gEAAgC;AAEhC,IAAM,WAAW,GAAG;IACZ,IAAA,KAA0B,IAAA,gBAAQ,EAAM,IAAI,CAAC,EAA5C,QAAQ,QAAA,EAAE,WAAW,QAAuB,CAAC;IAEpD,IAAA,iBAAS,EAAC;QACR,8CAA8C;QAC9C,IAAM,gBAAgB,GAAG,sBAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACjD,IAAI,gBAAgB,EAAE;YACpB,WAAW,CAAC,gBAAgB,CAAC,CAAC;YAC9B,OAAO;SACR;QAED,wBAAwB;QACxB,IAAM,KAAK,GAAG,sBAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEnC,kCAAkC;QAClC,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,eAAe,EAAE;gBACrB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,cAAc,EAAE,kBAAkB;oBAClC,eAAe,EAAE,iBAAU,KAAK,CAAE;iBACnC;aACF,CAAC;iBACC,IAAI,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,IAAI,EAAE,EAAf,CAAe,CAAC;iBACjC,IAAI,CAAC,UAAA,IAAI;gBACR,qCAAqC;gBACrC,sBAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC9C,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC,CAAC,CACD,OAAK,CAAA,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlB,CAAkB,CAAC,CAAC;SACrC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,qBAAe,WAAW,CAAC"}
\ No newline at end of file
diff --git a/dist/cjs/index.d.ts b/dist/cjs/index.d.ts
index 0094edf..25df792 100644
--- a/dist/cjs/index.d.ts
+++ b/dist/cjs/index.d.ts
@@ -1,2 +1,3 @@
 import FaceLogin from './components/FaceLogin';
-export default FaceLogin;
+import useUserData from './components/useUserData';
+export { FaceLogin, useUserData };
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index c2f24fa..0e2b37c 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -1,6 +1,9 @@
 "use strict";
 exports.__esModule = true;
+exports.useUserData = exports.FaceLogin = void 0;
 var tslib_1 = require("tslib");
 var FaceLogin_1 = tslib_1.__importDefault(require("./components/FaceLogin"));
-exports["default"] = FaceLogin_1["default"];
+exports.FaceLogin = FaceLogin_1["default"];
+var useUserData_1 = tslib_1.__importDefault(require("./components/useUserData"));
+exports.useUserData = useUserData_1["default"];
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/cjs/index.js.map b/dist/cjs/index.js.map
index 9a3efc0..2a5c60d 100644
--- a/dist/cjs/index.js.map
+++ b/dist/cjs/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,6EAA+C;AAE/C,qBAAe,sBAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,6EAA+C;AAGtC,oBAHF,sBAAS,CAGE;AAFlB,iFAAmD;AAE/B,sBAFb,wBAAW,CAEa"}
\ No newline at end of file
diff --git a/dist/esm/components/FaceLogin/index.d.ts b/dist/esm/components/FaceLogin/index.d.ts
index 75fe447..cf697b1 100644
--- a/dist/esm/components/FaceLogin/index.d.ts
+++ b/dist/esm/components/FaceLogin/index.d.ts
@@ -1,6 +1,8 @@
-import React from 'react';
-declare const FaceLogin: React.FC<{
+import React, { CSSProperties } from 'react';
+type FaceLoginProps = {
     appId: string;
-    clientSecret: string;
-}>;
+    buttonStyles?: CSSProperties;
+    buttonText?: string;
+};
+declare const FaceLogin: React.FC<FaceLoginProps>;
 export default FaceLogin;
diff --git a/dist/esm/components/FaceLogin/index.js b/dist/esm/components/FaceLogin/index.js
index 320c6bc..a373506 100644
--- a/dist/esm/components/FaceLogin/index.js
+++ b/dist/esm/components/FaceLogin/index.js
@@ -1,23 +1,52 @@
-import React from 'react';
+import { __assign } from "tslib";
+import React, { useEffect } from 'react';
+import Cookies from 'js-cookie';
 var FaceLogin = function (_a) {
-    var appId = _a.appId;
+    var appId = _a.appId, buttonStyles = _a.buttonStyles, _b = _a.buttonText, buttonText = _b === void 0 ? 'Face Guardian' : _b;
+    var currentUrl = window.location.href;
     var handleButtonClick = function () {
-        window.location.href = "https://www.face-guardian.com/login?appId=".concat(appId);
+        window.location.href = "https://www.face-guardian.com/login?appId=".concat(appId, "&redirectUrl=").concat(currentUrl);
     };
-    return (React.createElement("button", { onClick: handleButtonClick, style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: '#9fdbfd',
-            border: '1px solid #5f9cbf',
-            borderRadius: '5px',
-            padding: '10px',
-            color: '#ddf3ff',
-            fontSize: '16px',
-            fontWeight: '600',
-            cursor: 'pointer'
-        } }, "Face Guardian"));
+    useEffect(function () {
+        // Check for authorization code in URL
+        var urlParams = new URLSearchParams(window.location.search);
+        var authorizationCode = urlParams.get('authorizationCode');
+        var redirectUrl = urlParams.get('redirectUrl');
+        if (authorizationCode) {
+            // Call API with authorization code
+            fetch('https://www.face-guardian.com/api/request-token', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ authorizationCode: authorizationCode })
+            })
+                .then(function (response) { return response.json(); })
+                .then(function (data) {
+                // Save token in cookie
+                Cookies.set('token', data.token);
+            })["catch"](function (err) { return console.error(err); });
+        }
+        if (redirectUrl) {
+            window.location.href = redirectUrl;
+        }
+    }, []);
+    var defaultStyles = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#9fdbfd',
+        border: '1px solid #5f9cbf',
+        borderRadius: '5px',
+        padding: '10px',
+        color: '#ddf3ff',
+        fontSize: '16px',
+        fontWeight: 600,
+        cursor: 'pointer'
+    };
+    var combinedStyles = __assign(__assign({}, defaultStyles), buttonStyles);
+    return (React.createElement("button", { onClick: handleButtonClick, style: combinedStyles }, buttonText));
 };
 export default FaceLogin;
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/esm/components/FaceLogin/index.js.map b/dist/esm/components/FaceLogin/index.js.map
index e3d51df..0d437d3 100644
--- a/dist/esm/components/FaceLogin/index.js.map
+++ b/dist/esm/components/FaceLogin/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FaceLogin/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,IAAM,SAAS,GAAsD,UAAC,EAErE;QADC,KAAK,WAAA;IAEL,IAAM,iBAAiB,GAAG;QACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,oDAA6C,KAAK,CAAE,CAAC;IAC9E,CAAC,CAAC;IAEF,OAAO,CACL,gCACE,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,mBAAmB;YAC3B,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,MAAM,EAAE,SAAS;SAClB,oBAGM,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FaceLogin/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,IAAM,SAAS,GAA6B,UAAC,EAI5C;QAHC,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,kBAA4B,EAA5B,UAAU,mBAAG,eAAe,KAAA;IAE5B,IAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAExC,IAAM,iBAAiB,GAAG;QACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,oDAA6C,KAAK,0BAAgB,UAAU,CAAE,CAAC;IACxG,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,sCAAsC;QACtC,IAAM,SAAS,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC9D,IAAM,iBAAiB,GAAG,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC7D,IAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAEjD,IAAI,iBAAiB,EAAE;YACrB,mCAAmC;YACnC,KAAK,CAAC,iDAAiD,EAAE;gBACvD,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,cAAc,EAAE,kBAAkB;iBACnC;gBACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,iBAAiB,mBAAA,EAAE,CAAC;aAC5C,CAAC;iBACC,IAAI,CAAC,UAAC,QAAQ,IAAK,OAAA,QAAQ,CAAC,IAAI,EAAE,EAAf,CAAe,CAAC;iBACnC,IAAI,CAAC,UAAC,IAAI;gBACT,uBAAuB;gBACvB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC,CAAC,CACD,OAAK,CAAA,CAAC,UAAC,GAAG,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlB,CAAkB,CAAC,CAAC;SACvC;QAED,IAAI,WAAW,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;SACpC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,aAAa,GAAkB;QACnC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,mBAAmB;QAC3B,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,SAAS;KAClB,CAAC;IAEF,IAAM,cAAc,yBAAQ,aAAa,GAAK,YAAY,CAAE,CAAC;IAE7D,OAAO,CACL,gCAAQ,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,IACtD,UAAU,CACJ,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/components/useUserData/index.d.ts b/dist/esm/components/useUserData/index.d.ts
new file mode 100644
index 0000000..890a0d7
--- /dev/null
+++ b/dist/esm/components/useUserData/index.d.ts
@@ -0,0 +1,2 @@
+declare const useUserData: () => any;
+export default useUserData;
diff --git a/dist/esm/components/useUserData/index.js b/dist/esm/components/useUserData/index.js
new file mode 100644
index 0000000..5a7b8a4
--- /dev/null
+++ b/dist/esm/components/useUserData/index.js
@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import Cookies from 'js-cookie';
+var useUserData = function () {
+    var _a = useState(null), userData = _a[0], setUserData = _a[1];
+    useEffect(function () {
+        // Check if user data already exists in cookie
+        var existingUserData = Cookies.get('userData');
+        if (existingUserData) {
+            setUserData(existingUserData);
+            return;
+        }
+        // Get token from cookie
+        var token = Cookies.get('token');
+        // Fetch user data if token exists
+        if (token) {
+            fetch('/api/get-user', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': "Bearer ".concat(token)
+                }
+            })
+                .then(function (response) { return response.json(); })
+                .then(function (data) {
+                // Save user data to cookie and state
+                Cookies.set('userData', JSON.stringify(data));
+                setUserData(data);
+            })["catch"](function (err) { return console.error(err); });
+        }
+    }, []);
+    return userData;
+};
+export default useUserData;
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/esm/components/useUserData/index.js.map b/dist/esm/components/useUserData/index.js.map
new file mode 100644
index 0000000..aeee792
--- /dev/null
+++ b/dist/esm/components/useUserData/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/useUserData/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,IAAM,WAAW,GAAG;IACZ,IAAA,KAA0B,QAAQ,CAAM,IAAI,CAAC,EAA5C,QAAQ,QAAA,EAAE,WAAW,QAAuB,CAAC;IAEpD,SAAS,CAAC;QACR,8CAA8C;QAC9C,IAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACjD,IAAI,gBAAgB,EAAE;YACpB,WAAW,CAAC,gBAAgB,CAAC,CAAC;YAC9B,OAAO;SACR;QAED,wBAAwB;QACxB,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEnC,kCAAkC;QAClC,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,eAAe,EAAE;gBACrB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,cAAc,EAAE,kBAAkB;oBAClC,eAAe,EAAE,iBAAU,KAAK,CAAE;iBACnC;aACF,CAAC;iBACC,IAAI,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,IAAI,EAAE,EAAf,CAAe,CAAC;iBACjC,IAAI,CAAC,UAAA,IAAI;gBACR,qCAAqC;gBACrC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC9C,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC,CAAC,CACD,OAAK,CAAA,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlB,CAAkB,CAAC,CAAC;SACrC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
\ No newline at end of file
diff --git a/dist/esm/index.d.ts b/dist/esm/index.d.ts
index 0094edf..25df792 100644
--- a/dist/esm/index.d.ts
+++ b/dist/esm/index.d.ts
@@ -1,2 +1,3 @@
 import FaceLogin from './components/FaceLogin';
-export default FaceLogin;
+import useUserData from './components/useUserData';
+export { FaceLogin, useUserData };
diff --git a/dist/esm/index.js b/dist/esm/index.js
index 17a66a3..9435f81 100644
--- a/dist/esm/index.js
+++ b/dist/esm/index.js
@@ -1,3 +1,4 @@
 import FaceLogin from './components/FaceLogin';
-export default FaceLogin;
+import useUserData from './components/useUserData';
+export { FaceLogin, useUserData };
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/esm/index.js.map b/dist/esm/index.js.map
index 22035b0..33b20e2 100644
--- a/dist/esm/index.js.map
+++ b/dist/esm/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe,SAAS,CAAC"}
\ No newline at end of file
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC"}
\ No newline at end of file
diff --git a/example/package-lock.json b/example/package-lock.json
index 3130920..413553a 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -8,7 +8,7 @@
       "name": "example",
       "version": "0.1.0",
       "dependencies": {
-        "face-guardian": "^1.0.7"
+        "face-guardian": "^1.1.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.13",
@@ -1574,6 +1574,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.3.tgz",
+      "integrity": "sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2104,9 +2109,13 @@
       }
     },
     "node_modules/face-guardian": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/face-guardian/-/face-guardian-1.0.8.tgz",
-      "integrity": "sha512-0+vzQj4aNgfvgpC8Xcr4WajQ9jSfd4epzTyFJ/RgDRfstN9aezO1cHG92PGWZ1XtC5QtIFsrFzirKeg9d8pxbA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/face-guardian/-/face-guardian-1.1.0.tgz",
+      "integrity": "sha512-H85WeGF+ZRQe7rDtV1O7bYW1Y5I6OtC7zvQm4+ovTk1TA/JLkUBkdSSw2iIo51NX0Jxbb9DovMCqzSQtfWzEvA==",
+      "dependencies": {
+        "@types/js-cookie": "^3.0.3",
+        "js-cookie": "^3.0.5"
+      },
       "peerDependencies": {
         "react": ">=16"
       }
@@ -2280,6 +2289,14 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 2e03436..2c7181a 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -1,15 +1,28 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import FaceLogin from 'face-guardian';
+import ReactDOM from 'react-dom';
+import { FaceLogin, useUserData } from 'face-guardian';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <div>
-      <h2>Face Guardian</h2>
-      <FaceLogin appId="6d30891b-50de-401e-8dc2-b5af36a24b94" />
-    </div>
-  </React.StrictMode>
-);
+const App = () => {
+  const userData = useUserData();
+
+  return (
+    <React.StrictMode>
+      <div>
+        <h2>Face Guardian</h2>
+        <FaceLogin
+          appId="6ba4b716-dcb0-4493-8e02-c405071c80aa"
+          buttonStyles={{ background: 'blue', fontSize: '20px' }}
+          buttonText="Login with Face Guardian"
+        />
+        {userData && (
+          <div>
+            <h2>User Data:</h2>
+            <pre>{JSON.stringify(userData, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    </React.StrictMode>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/package-lock.json b/package-lock.json
index 65f87da..3cead1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "face-guardian",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "face-guardian",
-      "version": "1.0.9",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "@types/js-cookie": "^3.0.3",
diff --git a/package.json b/package.json
index d8569f3..51827cb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "face-guardian",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Face Guardian Components",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
diff --git a/src/components/FaceLogin/index.tsx b/src/components/FaceLogin/index.tsx
index 33f0bd7..487c215 100644
--- a/src/components/FaceLogin/index.tsx
+++ b/src/components/FaceLogin/index.tsx
@@ -26,7 +26,7 @@ const FaceLogin: React.FC<FaceLoginProps> = ({
 
     if (authorizationCode) {
       // Call API with authorization code
-      fetch('https://www.face-guardian.com/api/request_token', {
+      fetch('https://www.face-guardian.com/api/request-token', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
diff --git a/src/components/useUserData/index.tsx b/src/components/useUserData/index.tsx
new file mode 100644
index 0000000..1f6c3b8
--- /dev/null
+++ b/src/components/useUserData/index.tsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+import Cookies from 'js-cookie';
+
+const useUserData = () => {
+  const [userData, setUserData] = useState<any>(null);
+
+  useEffect(() => {
+    // Check if user data already exists in cookie
+    const existingUserData = Cookies.get('userData');
+    if (existingUserData) {
+      setUserData(existingUserData);
+      return;
+    }
+
+    // Get token from cookie
+    const token = Cookies.get('token');
+
+    // Fetch user data if token exists
+    if (token) {
+      fetch('/api/get-user', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          // Save user data to cookie and state
+          Cookies.set('userData', JSON.stringify(data));
+          setUserData(data);
+        })
+        .catch((err) => console.error(err));
+    }
+  }, []);
+
+  return userData;
+};
+
+export default useUserData;
diff --git a/src/index.ts b/src/index.ts
index 049f5c1..36def6c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
 import FaceLogin from './components/FaceLogin';
+import useUserData from './components/useUserData';
 
-export default FaceLogin;
+export { FaceLogin, useUserData };
diff --git a/tests/common.test.tsx b/tests/common.test.tsx
index 54240d7..7f46b87 100644
--- a/tests/common.test.tsx
+++ b/tests/common.test.tsx
@@ -1,18 +1,24 @@
-// tests/useFaceRecognition.test.js
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import FaceLogin from '../src';
+import { FaceLogin } from '../src';
 
 const TestComponent = () => {
   return (
     <div>
-      <FaceLogin appId="6d30891b-50de-401e-8dc2-b5af36a24b94" />
+      <FaceLogin
+        appId="6ba4b716-dcb0-4493-8e02-c405071c80aa"
+        buttonText="Test Login"
+        buttonStyles={{ color: 'red' }}
+      />
     </div>
   );
 };
 
 describe('Common render', () => {
-  it('renders FaceLogin component and user, message', () => {
-    render(<TestComponent />);
+  it('renders FaceLogin component with correct button text and style', () => {
+    const { getByText } = render(<TestComponent />);
+    const button = getByText('Test Login');
+    expect(button).toBeDefined();
+    expect(button.style.color).toBe('red');
   });
 });