diff --git a/TODO.md b/TODO.md
index 00d5e1c..102e1d3 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,3 +1,17 @@
+2025-08-05 11:00:00 KST - Descope 연동 완료
+
+---
+- **사용자 인증**: Descope SDK를 연동하여 로그인, 로그아웃, 사용자 정보 조회 기능 구현.
+- **UI 개선**:
+  - 로그인 상태에 따라 사용자 프로필 아이콘(사진/이니셜/기본 아이콘) 동적 변경.
+  - 테마(Light/Dark)에 따라 로고 이미지 자동 전환.
+  - 로그아웃 시 홈페이지로 리디렉션.
+- **피드백 작성 연동**:
+  - 새 피드백 작성 시, 로그인한 사용자 정보를 '작성자' 필드에 자동으로 채우고 수정 불가 처리.
+  - 로그인하지 않은 경우 '새 피드백 작성' 버튼 숨김 처리.
+- **무한 렌더링 버그 수정**: `FeedbackCreatePage`에서 `useEffect` 의존성 문제로 발생하던 무한 렌더링 오류 해결.
+- **Favicon 설정**: 프로젝트 favicon을 올바르게 표시하도록 `index.html` 수정.
+
 2025-08-05 10:30:00 KST - 이슈 API 연동 및 UI 개선 완료
 
 ---
@@ -10,4 +24,4 @@
   - **UI/UX 개선**:
     - `DynamicTable`의 검색창과 카드 간 여백 조정.
     - `IssueDetailCard`의 제목, 레이블, 컨텐츠 스타일을 개선하여 가독성 향상.
-  - **접근성(a11y) 수정**: `DynamicTable`의 컬럼 리사이저에 `slider` 역할을 부여하여 웹 접근성 lint 오류 해결.
+  - **접근성(a11y) 수정**: `DynamicTable`의 컬럼 리사이저에 `slider` 역할을 부여하여 웹 접근성 lint 오류 해결.
\ No newline at end of file
diff --git a/descope-react-sdk-readmd.md b/descope-react-sdk-readmd.md
new file mode 100644
index 0000000..6b04d09
--- /dev/null
+++ b/descope-react-sdk-readmd.md
@@ -0,0 +1,855 @@
+# Descope SDK for React
+
+The Descope SDK for React provides convenient access to the Descope for an application written on top of React. You can read more on the [Descope Website](https://descope.com).
+
+## Requirements
+
+- The SDK supports React version 16 and above.
+- A Descope `Project ID` is required for using the SDK. Find it on the [project page in the Descope Console](https://app.descope.com/settings/project).
+
+## Installing the SDK
+
+Install the package with:
+
+```bash
+npm i --save @descope/react-sdk
+```
+
+## Usage
+
+### Wrap your app with Auth Provider
+
+```js
+import { AuthProvider } from '@descope/react-sdk';
+
+const AppRoot = () => {
+  return (
+    <AuthProvider
+      projectId="my-project-id"
+      // If the Descope project manages the token response in cookies, a custom domain
+      // must be configured (e.g., https://auth.app.example.com)
+      // and should be set as the baseUrl property.
+      // baseUrl = "https://auth.app.example.com"
+    >
+      <App />
+    </AuthProvider>
+  );
+};
+```
+
+### Use Descope to render specific flow
+
+You can use **default flows** or **provide flow id** directly to the Descope component
+
+#### 1. Default flows
+
+```js
+import { SignInFlow } from '@descope/react-sdk'
+// you can choose flow to run from the following
+// import { SignUpFlow } from '@descope/react-sdk'
+// import { SignUpOrInFlow } from '@descope/react-sdk'
+
+const App = () => {
+    return (
+        {...}
+        <SignInFlow
+            onSuccess={(e) => console.log('Logged in!')}
+            onError={(e) => console.log('Could not logged in!')}
+        />
+    )
+}
+```
+
+#### 2. Provide flow id
+
+```js
+import { Descope } from '@descope/react-sdk'
+
+const App = () => {
+    return (
+        {...}
+        <Descope
+            flowId="my-flow-id"
+            onSuccess={(e) => console.log('Logged in!')}
+            onError={(e) => console.log('Could not logged in')}
+            // onReady={() => {
+            //   This event is triggered when the flow is ready to be displayed
+            //   Its useful for showing a loading indication before the page ready
+            //   console.log('Flow is ready');
+            // }}
+
+            // theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light"
+            // theme="dark"
+
+            // locale can be any supported locale which the flow's screen translated to, if not provided, the locale is taken from the browser's locale.
+            // locale="en"
+
+            // debug can be set to true to enable debug mode
+            // debug={true}
+
+            // tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant
+            // tenant=<tenantId>
+
+            // Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user)
+            // redirectUrl=<redirectUrl>
+
+            // autoFocus can be true, false or "skipFirstScreen". Default is true.
+            // - true: automatically focus on the first input of each screen
+            // - false: do not automatically focus on screen's inputs
+            // - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
+            // autoFocus="skipFirstScreen"
+
+            // validateOnBlur: set it to true will show input validation errors on blur, in addition to on submit
+
+            // restartOnError: if set to true, in case of flow version mismatch, will restart the flow if the components version was not changed. Default is false
+
+            // errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
+            // NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
+            // Example:
+            // const errorTransformer = useCallback(
+            // 	(error: { text: string; type: string }) => {
+            // 		const translationMap = {
+            // 			SAMLStartFailed: 'Failed to start SAML flow'
+            // 		};
+            // 		return translationMap[error.type] || error.text;
+            // 	},
+            // 	[]
+            // );
+            // ...
+            // errorTransformer={errorTransformer}
+            // ...
+
+
+            // form is an object the initial form context that is used in screens inputs in the flow execution.
+            // Used to inject predefined input values on flow start such as custom inputs, custom attributes and other inputs.
+            // Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.".
+            // NOTE: form is not required. If not provided, 'form' context key will be empty before user input.
+            // Example:
+            // ...
+            // form={{ email: "predefinedname@domain.com",  firstName: "test", "customAttribute.test": "aaaa", "myCustomInput": 12 }}
+            // ...
+
+
+            // client is an object the initial client context in the flow execution.
+            // Keys passed can be accessed in flows actions and conditions prefixed with "client.".
+            // NOTE: client is not required. If not provided, context key will be empty.
+            // Example:
+            // ...
+            // client={{ version: "1.2.0" }}
+            // ...
+
+
+            // logger is an object describing how to log info, warn and errors.
+            // NOTE: logger is not required. If not provided, the logs will be printed to the console.
+            // Example:
+            // const logger = {
+            // 	info: (title: string, description: string, state: any) => {
+            //      console.log(title, description, JSON.stringify(state));
+            //  },
+            // 	warn: (title: string, description: string) => {
+            //      console.warn(title);
+            //  },
+            // 	error: (title: string, description: string) => {
+            //      console.error('OH NOO');
+            //  },
+            // }
+            // ...
+            // logger={logger}
+            // ...
+
+
+            // Use a custom style name or keep empty to use the default style.
+            // styleId="my-awesome-style"
+            // Set a CSP nonce that will be used for style and script tags
+            //nonce="rAnd0m"
+
+            // Clear screen error message on user input
+            //dismissScreenErrorOnInput={true}
+        />
+    )
+}
+```
+
+### `onScreenUpdate`
+
+A function that is called whenever there is a new screen state and after every next call. It receives the following parameters:
+
+- `screenName`: The name of the screen that is about to be rendered
+- `context`: An object containing the upcoming screen state
+- `next`: A function that, when called, continues the flow execution
+- `ref`: A reference to the descope-wc node
+
+The function can be sync or async, and should return a boolean indicating whether a custom screen should be rendered:
+
+- `true`: Render a custom screen
+- `false`: Render the default flow screen
+
+This function allows rendering custom screens instead of the default flow screens.
+It can be useful for highly customized UIs or specific logic not covered by the default screens
+
+To render a custom screen, its elements should be appended as children of the `Descope` component
+
+Usage example:
+
+```javascript
+const CustomScreen = ({onClick, setForm}) => {
+  const onChange = (e) => setForm({ email: e.target.value })
+
+  return (
+    <>
+      <input
+        type="email"
+        placeholder="Email"
+        onChange={onChange}
+      />
+      <button
+        type="button"
+        onClick={onClick}
+      >
+        Submit
+      </button>
+    </>
+)}
+
+const Login = () => {
+  const [state, setState] = useState();
+  const [form, setForm] = useState();
+
+  const onScreenUpdate = (screenName, context, next) => {
+    setState({screenName, context, next})
+
+    if (screenName === 'My Custom Screen') {
+      return true;
+    }
+
+    return false;
+  };
+
+  return <Descope
+  ...
+  onScreenUpdate={onScreenUpdate}
+  >{state.screenName === 'My Custom Screen' && <CustomScreen
+    onClick={() => {
+      // replace with the button interaction id
+      state.next('interactionId', form)
+    }}
+    setForm={setForm}/>}
+  </Descope>
+}
+
+```
+
+### Use the `useDescope`, `useSession` and `useUser` hooks in your components in order to get authentication state, user details and utilities
+
+This can be helpful to implement application-specific logic. Examples:
+
+- Render different components if current session is authenticated
+- Render user's content
+- Logout button
+
+```js
+import { useDescope, useSession, useUser } from '@descope/react-sdk';
+import { useCallback } from 'react';
+
+const App = () => {
+  // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context,
+  // and will throw an exception if this requirement is not met
+  // useSession retrieves authentication state, session loading status, and session token
+  // If the session token is managed in cookies in project settings, sessionToken will be empty.
+  const { isAuthenticated, isSessionLoading, sessionToken } = useSession();
+  // useUser retrieves the logged in user information
+  const { user, isUserLoading } = useUser();
+  // useDescope retrieves Descope SDK for further operations related to authentication
+  // such as logout
+  const sdk = useDescope();
+
+  if (isSessionLoading || isUserLoading) {
+    return <p>Loading...</p>;
+  }
+
+  const handleLogout = useCallback(() => {
+    sdk.logout();
+  }, [sdk]);
+
+  if (isAuthenticated) {
+    return (
+      <>
+        <p>Hello {user.name}</p>
+        <button onClick={handleLogout}>Logout</button>
+      </>
+    );
+  }
+
+  return <p>You are not logged in</p>;
+};
+```
+
+Note: `useSession` triggers a single request to the Descope backend to attempt to refresh the session. If you **don't** `useSession` on your app, the session will not be refreshed automatically. If your app does not require `useSession`, you can trigger the refresh manually by calling `refresh` from `useDescope` hook. Example:
+
+```js
+const { refresh } = useDescope();
+useEffect(() => {
+  refresh();
+}, [refresh]);
+```
+
+
+### Auto refresh session token
+Descope SDK automatically refreshes the session token when it is about to expire. This is done in the background using the refresh token, without any additional configuration.
+If you want to disable this behavior, you can pass `autoRefresh={false}` to the `AuthProvider` component. This will prevent the SDK from automatically refreshing the session token.
+
+**For more SDK usage examples refer to [docs](https://docs.descope.com/build/guides/client_sdks/)**
+
+### Session token server validation (pass session token to server API)
+
+When developing a full-stack application, it is common to have private server API which requires a valid session token:
+
+![session-token-validation-diagram](https://docs.descope.com/static/SessionValidation-cf7b2d5d26594f96421d894273a713d8.png)
+
+Note: Descope also provides server-side SDKs in various languages (NodeJS, Go, Python, etc). Descope's server SDKs have out-of-the-box session validation API that supports the options described bellow. To read more about session validation, Read [this section](https://docs.descope.com/build/guides/gettingstarted/#session-validation) in Descope documentation.
+
+There are 2 ways to achieve that:
+
+1. Using `getSessionToken` to get the token, and pass it on the `Authorization` Header (Recommended)
+2. Passing `sessionTokenViaCookie` boolean prop to the `AuthProvider` component (Use cautiously, session token may grow, especially in cases of using authorization, or adding custom claim)
+
+#### 1. Using `getSessionToken` to get the token
+
+An example for api function, and passing the token on the `Authorization` header:
+
+```js
+import { getSessionToken } from '@descope/react-sdk';
+
+// fetch data using back
+// Note: Descope backend SDKs support extracting session token from the Authorization header
+export const fetchData = async () => {
+  const sessionToken = getSessionToken();
+  const res = await fetch('/path/to/server/api', {
+    headers: {
+      Authorization: `Bearer ${sessionToken}`,
+    },
+  });
+  // ... use res
+};
+```
+
+An example for component that uses `fetchData` function from above
+
+```js
+// Component code
+import { fetchData } from 'path/to/api/file'
+import { useCallback } from 'react'
+
+const Component = () => {
+    const onClick = useCallback(() => {
+        fetchData()
+    },[])
+    return (
+        {...}
+        {
+            // button that triggers an API that may use session token
+            <button onClick={onClick}>Click Me</button>
+        }
+    )
+}
+```
+
+Note that ff Descope project settings are configured to manage session token in cookies, the `getSessionToken` function will return an empty string.
+
+#### 2. Passing `sessionTokenViaCookie` boolean prop to the `AuthProvider`
+
+Passing `sessionTokenViaCookie` prop to `AuthProvider` component. Descope SDK will automatically store session token on the `DS` cookie.
+
+Note: Use this option if session token will stay small (less than 1k). Session token can grow, especially in cases of using authorization, or adding custom claims
+
+Example:
+
+```js
+import { AuthProvider } from '@descope/react-sdk';
+
+const AppRoot = () => {
+  return (
+    <AuthProvider projectId="my-project-id" sessionTokenViaCookie>
+      <App />
+    </AuthProvider>
+  );
+};
+```
+
+Now, whenever you call `fetch`, the cookie will automatically be sent with the request. Descope backend SDKs also support extracting the token from the `DS` cookie.
+
+Note:
+The session token cookie is set as a [`Secure`](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.5) cookie. It will be sent only over HTTPS connections.
+In addition, some browsers (e.g. Safari) may not store `Secure` cookie if the hosted page is running on an HTTP protocol.
+
+The session token cookie is set to [`SameSite=Strict; Secure;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) by default.
+If you need to customize this, you can set `sessionTokenViaCookie={sameSite: 'Lax', secure: false}` (if you pass only `sameSite`, `secure` will be set to `true` by default).
+
+#### 3. Configure Descope project to manage session token in cookies
+
+If project settings are configured to manage session token in cookies, Descope services will automatically set the session token in the `DS` cookie as a `Secure` and `HttpOnly` cookie. In this case, the session token will not be stored in the browser's and will not be accessible to the client-side code using `useSession` or `getSessionToken`.
+
+````js
+### Helper Functions
+
+You can also use the following functions to assist with various actions managing your JWT.
+
+`getSessionToken()` - Get current session token.
+`getRefreshToken()` - Get current refresh token. Note: Relevant only if the refresh token is stored in local storage. If the refresh token is stored in an `httpOnly` cookie, it will return an empty string.
+`refresh(token = getRefreshToken())` - Force a refresh on current session token using an existing valid refresh token.
+`isSessionTokenExpired(token = getSessionToken())` - Check whether the current session token is expired. Provide a session token if is not persisted (see [token persistence](#token-persistence)).
+`isRefreshTokenExpired(token = getRefreshToken())` - Check whether the current refresh token is expired. Provide a refresh token if is not persisted (see [token persistence](#token-persistence)).
+`getJwtRoles(token = getSessionToken(), tenant = '')` - Get current roles from an existing session token. Provide tenant id for specific tenant roles.
+`getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions.
+`getCurrentTenant(token = getSessionToken())` - Get current tenant id from an existing session token (from the `dct` claim).
+
+### Refresh token lifecycle
+
+Descope SDK is automatically refreshes the session token when it is about to expire. This is done in the background using the refresh token, without any additional configuration.
+
+If the Descope project settings are configured to manage tokens in cookies.
+you must also configure a custom domain, and set it as the `baseUrl` prop in the `AuthProvider` component. See the above [`AuthProvider` usage](#wrap-your-app-with-auth-provider) for usage example.
+
+### Token Persistence
+
+Descope stores two tokens: the session token and the refresh token.
+
+- The refresh token is either stored in local storage or an `httpOnly` cookie. This is configurable in the Descope console.
+- The session token is stored in either local storage or a JS cookie. This behavior is configurable via the `sessionTokenViaCookie` prop in the `AuthProvider` component.
+
+However, for security reasons, you may choose not to store tokens in the browser. In this case, you can pass `persistTokens={false}` to the `AuthProvider` component. This prevents the SDK from storing the tokens in the browser.
+
+Notes:
+
+- You must configure the refresh token to be stored in an `httpOnly` cookie in the Descope console. Otherwise, the refresh token will not be stored, and when the page is refreshed, the user will be logged out.
+- You can still retrieve the session token using the `useSession` hook.
+
+### Custom Refresh Cookie Name
+
+When managing multiple Descope projects on the same domain, you can avoid refresh cookie conflicts by assigning a custom cookie name to your refresh token during the login process (for example, using Descope Flows). However, you must also configure the SDK to recognize this unique name by passing the `refreshCookieName` prop to the `AuthProvider` component.
+
+This will signal Descope API to use the custom cookie name as the refresh token.
+
+Note that this option is only available when the refresh token managed on cookies.
+
+```js
+import { AuthProvider } from '@descope/react-sdk';
+
+const AppRoot = () => {
+  // pass the custom cookie name to the AuthProvider
+  return (
+    <AuthProvider projectId="my-project-id" refreshCookieName="MY_DSR">
+      <App />
+    </AuthProvider>
+  );
+};
+````
+
+### Last User Persistence
+
+Descope stores the last user information in local storage. If you wish to disable this feature, you can pass `storeLastAuthenticatedUser={false}` to the `AuthProvider` component. Please note that some features related to the last authenticated user may not function as expected if this behavior is disabled. Local storage is being cleared when the user logs out, if you want the avoid clearing the local storage, you can pass `keepLastAuthenticatedUserAfterLogout={true}` to the `AuthProvider` component.
+
+### Seamless Session Migration
+
+If you are migrating from an external authentication provider to Descope, you can use the `getExternalToken` prop in the `AuthProvider` component. This function should return a valid token from the external provider. The SDK will then use this token to authenticate the user with Descope.
+
+```js
+import { AuthProvider } from '@descope/react-sdk';
+
+const AppRoot = () => {
+  return (
+    <AuthProvider
+      projectId="my-project-id"
+      getExternalToken={async () => {
+        // Bring token from external provider (e.g. get access token from another auth provider)
+        return 'my-external-token';
+      }}
+    >
+      <App />
+    </AuthProvider>
+  );
+};
+```
+
+### Widgets
+
+Widgets are components that allow you to expose management features for tenant-based implementation. In certain scenarios, your customers may require the capability to perform managerial actions independently, alleviating the necessity to contact you. Widgets serve as a feature enabling you to delegate these capabilities to your customers in a modular manner.
+
+Important Note:
+
+- For the user to be able to use the widget, they need to be assigned the `Tenant Admin` Role.
+
+#### User Management
+
+The `UserManagement` widget lets you embed a user table in your site to view and take action.
+
+The widget lets you:
+
+- Create a new user
+- Edit an existing user
+- Activate / disable an existing user
+- Reset an existing user's password
+- Remove an existing user's passkey
+- Delete an existing user
+
+Note:
+
+- Custom fields also appear in the table.
+
+###### Usage
+
+```js
+import { UserManagement } from '@descope/react-sdk';
+...
+  <UserManagement
+    widgetId="user-management-widget"
+    tenant="tenant-id"
+  />
+```
+
+Example:
+[Manage Users](./examples/app/ManageUsers.tsx)
+
+#### Role Management
+
+The `RoleManagement` widget lets you embed a role table in your site to view and take action.
+
+The widget lets you:
+
+- Create a new role
+- Change an existing role's fields
+- Delete an existing role
+
+Note:
+
+- The `Editable` field is determined by the user's access to the role - meaning that project-level roles are not editable by tenant level users.
+- You need to pre-define the permissions that the user can use, which are not editable in the widget.
+
+###### Usage
+
+```js
+import { RoleManagement } from '@descope/react-sdk';
+...
+  <RoleManagement
+    widgetId="role-management-widget"
+    tenant="tenant-id"
+  />
+```
+
+Example:
+[Manage Roles](./examples/app/ManageRoles.tsx)
+
+#### Access Key Management
+
+The `AccessKeyManagement` widget lets you embed an access key table in your site to view and take action.
+
+The widget lets you:
+
+- Create a new access key
+- Activate / deactivate an existing access key
+- Delete an exising access key
+
+###### Usage
+
+```js
+import { AccessKeyManagement } from '@descope/react-sdk';
+...
+  {
+	  /* admin view: manage all tenant users' access keys */
+  }
+  <AccessKeyManagement
+    widgetId="access-key-management-widget"
+    tenant="tenant-id"
+  />
+
+  {
+    /* user view: mange access key for the logged-in tenant's user */
+  }
+  <AccessKeyManagement
+    widgetId="user-access-key-management-widget"
+    tenant="tenant-id"
+  />
+```
+
+Example:
+[Manage Access Keys](./examples/app/ManageAccessKeys.tsx)
+
+#### Audit Management
+
+The `AuditManagement` widget lets you embed an audit table in your site.
+
+###### Usage
+
+```js
+import { AuditManagement } from '@descope/react-sdk';
+...
+  <AuditManagement
+    widgetId="audit-management-widget"
+    tenant="tenant-id"
+  />
+```
+
+Example:
+[Manage Audit](./examples/app/ManageAudit.tsx)
+
+#### User Profile
+
+The `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.
+
+The widget lets you:
+
+- Update user profile picture
+- Update user personal information
+- Update authentication methods
+- Logout
+
+###### Usage
+
+```js
+import { UserProfile } from '@descope/react-sdk';
+...
+  <UserProfile
+    widgetId="user-profile-widget"
+    onLogout={() => {
+      // add here you own logout callback
+      window.location.href = '/login';
+    }}
+  />
+```
+
+Example:
+[User Profile](./examples/app/MyUserProfile.tsx)
+
+#### Applications Portal
+
+The `ApplicationsPortal` lets you embed an applications portal component in your app and allows the logged-in user to open applications they are assigned to.
+
+###### Usage
+
+```js
+import { ApplicationsPortal } from '@descope/react-sdk';
+...
+  <ApplicationsPortal
+    widgetId="applications-portal-widget"
+  />
+```
+
+Example:
+[Applications Portal](./examples/app/MyApplicationsPortal.tsx)
+
+## Code Example
+
+You can find an example react app in the [examples folder](./examples).
+
+### Setup
+
+To run the examples, set your `Project ID` by setting the `DESCOPE_PROJECT_ID` env var or directly
+in the sample code.
+Find your Project ID in the [Descope console](https://app.descope.com/settings/project).
+
+```bash
+export DESCOPE_PROJECT_ID=<Project-ID>
+```
+
+Alternatively, put the environment variable in `.env` file in the project root directory.
+See bellow for an `.env` file template with more information.
+
+### Run Example
+
+Note: Due to an issue with react-sdk tsconfig, you need to remove `"examples"` from the `exclude` field in the `tsconfig.json` file in the root of the project before running the example.
+
+Run the following command in the root of the project to build and run the example:
+
+```bash
+npm i && npm start
+```
+
+### Example Optional Env Variables
+
+See the following table for customization environment variables for the example app:
+
+| Env Variable                | Description                                                                                                   | Default value                    |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| DESCOPE_FLOW_ID             | Which flow ID to use in the login page                                                                        | **sign-up-or-in**                |
+| DESCOPE_BASE_URL            | Custom Descope base URL                                                                                       | None                             |
+| DESCOPE_BASE_STATIC_URL     | Allows to override the base URL that is used to fetch static files                                            | https://static.descope.com/pages |
+| DESCOPE_THEME               | Flow theme                                                                                                    | None                             |
+| DESCOPE_LOCALE              | Flow locale                                                                                                   | Browser's locale                 |
+| DESCOPE_REDIRECT_URL        | Flow redirect URL for OAuth/SSO/Magic Link/Enchanted Link                                                     | None                             |
+| DESCOPE_TENANT_ID           | Flow tenant ID for SSO/SAML                                                                                   | None                             |
+| DESCOPE_DEBUG_MODE          | **"true"** - Enable debugger</br>**"false"** - Disable flow debugger                                          | None                             |
+| DESCOPE_STEP_UP_FLOW_ID     | Step up flow ID to show to logged in user (via button). e.g. "step-up". Button will be hidden if not provided | None                             |
+| DESCOPE_TELEMETRY_KEY       | **String** - Telemetry public key provided by Descope Inc                                                     | None                             |
+|                             |                                                                                                               |                                  |
+| DESCOPE_OIDC_ENABLED        | **"true"** - Use OIDC login                                                                                   | None                             |
+| DESCOPE_OIDC_APPLICATION_ID | Descope OIDC Application ID, In case OIDC login is used                                                       | None                             |
+
+Example for `.env` file template:
+
+```
+# Your project ID
+DESCOPE_PROJECT_ID="<Project-ID>"
+# Login flow ID
+DESCOPE_FLOW_ID=""
+# Descope base URL
+DESCOPE_BASE_URL=""
+# Descope base static URL
+DESCOPE_BASE_STATIC_URL=""
+# Set flow theme to dark
+DESCOPE_THEME=dark
+# Set flow locale, default is browser's locale
+DESCOPE_LOCALE=""
+# Flow Redirect URL
+DESCOPE_REDIRECT_URL=""
+# Tenant ID
+DESCOPE_TENANT_ID=""
+# Enable debugger
+DESCOPE_DEBUG_MODE=true
+# Show step-up flow for logged in user
+DESCOPE_STEP_UP_FLOW_ID=step-up
+# Telemetry key
+DESCOPE_TELEMETRY_KEY=""
+```
+
+## Performance / Bundle Size
+
+To improve modularity and reduce bundle size, all flow-related utilities are available also under `@descope/react-sdk/flows` subpath. Example:
+
+```
+import { Descope, useSession, ... } from '@descope/react-sdk/flows';
+```
+
+## FAQ
+
+### I updated the user in my backend, but the user / session token are not updated in the frontend
+
+The Descope SDK caches the user and session token in the frontend. If you update the user in your backend (using Descope Management SDK/API for example), you can call `me` / `refresh` from `useDescope` hook to refresh the user and session token. Example:
+
+```js
+const sdk = useDescope();
+
+const handleUpdateUser = useCallback(() => {
+  myBackendUpdateUser().then(() => {
+    sdk.me();
+    // or
+    sdk.refresh();
+  });
+}, [sdk]);
+```
+
+## Learn More
+
+To learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/).
+
+## OIDC Login
+
+Descope also supports OIDC login. To enable OIDC login, pass `oidcConfig` prop to the `AuthProvider` component. Example:
+
+### AuthProvider setup with OIDC
+
+```js
+import { AuthProvider } from '@descope/react-sdk';
+
+const AppRoot = () => {
+  return (
+    <AuthProvider
+      projectId="my-project-id" // also serves as the client ID
+      oidcConfig={true}
+
+      /* alternatively, you can pass the oidcConfig object
+      oidcConfig={{
+        applicationId: 'my-application-id', // optional, if not provided, the default OIDC application will be used
+          
+        redirectUri: 'https://my-app.com/redirect', // optional, if not provided, the default redirect URI will be used
+        
+        
+        scope: 'openid profile email', // optional, if not provided, default is openid email offline_access roles descope.custom_claims
+      }}
+      */
+    >
+      <App />
+    </AuthProvider>
+  );
+};
+```
+
+### Login
+
+Use the `oidc.loginWithRedirect` method from the `useDescope` hook to trigger the OIDC login. Example:
+
+```js
+const MyComponent = () => {
+  const sdk = useDescope();
+
+  return (
+    // ...
+    <button
+      onClick={() => {
+        sdk.oidc.loginWithRedirect({
+          // By default, the login will redirect the user to the current URL
+          // If you want to redirect the user to a different URL, you can specify it here
+          redirect_uri: window.location.origin,
+        });
+      }}
+    >
+      Login with OIDC
+    </button>
+  );
+};
+```
+
+### Redirect back from OIDC provider
+
+The `AuthProvider` will automatically handle the redirect back from the OIDC provider. The user will be redirected to the `redirect_uri` specified in the `oidc.login` method.
+
+### Logout
+
+You can call `sdk.logout` to logout the user. Example:
+
+```js
+const MyComponent = () => {
+  const sdk = useDescope();
+
+  return (
+    // ...
+    <button
+      onClick={() => {
+        sdk.logout();
+      }}
+    >
+      Logout
+    </button>
+  );
+};
+```
+
+If you want to redirect the user to a different URL after logout, you can use `oidc.logout` method. Example:
+
+```js
+const MyComponent = () => {
+  const sdk = useDescope();
+
+  return (
+    // ...
+    <button
+      onClick={() => {
+        sdk.oidc.logout({
+          // by default, the logout will redirect the user to the current URL
+          // if you want to redirect the user to a different URL, you can specify it here
+          post_logout_redirect_uri: window.location.origin + '/after-logout',
+        });
+      }}
+    >
+      Logout
+    </button>
+  );
+};
+```
+
+## Contact Us
+
+If you need help you can email [Descope Support](mailto:support@descope.com)
+
+## License
+
+The Descope SDK for React is licensed for use under the terms and conditions of the [MIT license Agreement](./LICENSE).
diff --git a/viewer/.env b/viewer/.env
index 0d67dc5..95512a4 100644
--- a/viewer/.env
+++ b/viewer/.env
@@ -7,4 +7,28 @@ VITE_API_KEY=F5FE0363E37C012204F5
 VITE_DEFAULT_PROJECT_ID=1
 
 # 기본으로 사용할 채널 ID
-VITE_DEFAULT_CHANNEL_ID=4
\ No newline at end of file
+VITE_DEFAULT_CHANNEL_ID=4
+
+# Your project ID
+VITE_DESCOPE_PROJECT_ID=P2wON5fy1K6kyia269VpeIzYP8oP
+# Login flow ID
+VITE_DESCOPE_FLOW_ID=sign-up-with-password-standard
+
+VITE_DESCOPE_USER_PROFILE_WIDGET_ID=user-profile-widget-standard
+# Descope base URL
+DESCOPE_BASE_URL=""
+# Descope base static URL
+DESCOPE_BASE_STATIC_URL=""
+# Set flow locale, default is browser's locale
+DESCOPE_LOCALE=""
+# Flow Redirect URL
+DESCOPE_REDIRECT_URL=""
+# Tenant ID
+DESCOPE_TENANT_ID=""
+# Enable debugger
+DESCOPE_DEBUG_MODE=true
+# Show step-up flow for logged in user
+DESCOPE_STEP_UP_FLOW_ID=step-up
+# Telemetry key
+DESCOPE_TELEMETRY_KEY=""
+
diff --git a/viewer/index.html b/viewer/index.html
index e4b78ea..8060863 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Baron 컨설턴트 제품 피드백</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/viewer/package.json b/viewer/package.json
index 158c549..a7409a8 100644
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -12,6 +12,9 @@
 		"shadcn": "shadcn-ui"
 	},
 	"dependencies": {
+		"@descope/react-sdk": "^2.16.4",
+		"@radix-ui/react-avatar": "^1.1.10",
+		"@radix-ui/react-dialog": "^1.1.14",
 		"@radix-ui/react-dropdown-menu": "^2.1.15",
 		"@radix-ui/react-icons": "^1.3.2",
 		"@radix-ui/react-label": "^2.1.7",
diff --git a/viewer/pnpm-lock.yaml b/viewer/pnpm-lock.yaml
index 5e5d18b..2b8ba12 100644
--- a/viewer/pnpm-lock.yaml
+++ b/viewer/pnpm-lock.yaml
@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@descope/react-sdk':
+        specifier: ^2.16.4
+        version: 2.16.4(@reduxjs/toolkit@2.8.2(react@19.1.1))(@types/react@19.1.9)(immer@10.1.1)(react@19.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.14
+        version: 1.1.14(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.15
         version: 2.1.15(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -61,7 +70,7 @@ importers:
         version: 3.3.1
       zustand:
         specifier: ^5.0.7
-        version: 5.0.7(@types/react@19.1.9)(react@19.1.1)
+        version: 5.0.7(@types/react@19.1.9)(immer@10.1.1)(react@19.1.1)(use-sync-external-store@1.5.0(react@19.1.1))
     devDependencies:
       '@biomejs/biome':
         specifier: ^2.1.3
@@ -249,6 +258,59 @@ packages:
   '@date-fns/tz@1.2.0':
     resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
 
+  '@descope/access-key-management-widget@0.5.0':
+    resolution: {integrity: sha512-+9nhS3+hC5JaL0k8GoxCOtljvpA5KG/aPmeWBjOVX9M1DtebfkkPzSL1RS1mkr0Q1zjUC+6bVjknwgtbyjGuJw==}
+
+  '@descope/applications-portal-widget@0.4.0':
+    resolution: {integrity: sha512-b0b1jY/FDCOKC15KynuVEe/Eq+EK9YYlORZjmN7VFPPfdYYNGcTl8xpRlOsG7PDvVVh8gTcR1peP3DjLQz7ZkA==}
+
+  '@descope/audit-management-widget@0.5.0':
+    resolution: {integrity: sha512-tUVigNHJQmaVt1AQZqtfpJbAoP4C/Xjkb2CQfJ2TsdSP7AQlUNCaSAOvVqXltw8niFR44QJo/PCGoAU3B/5K+g==}
+
+  '@descope/core-js-sdk@2.44.4':
+    resolution: {integrity: sha512-eCFhb/7SBdPbx/i808BqXJh4F2WM9HP0UdXhbWu4PhboeO030tVWkpzMSHNzkU4khJQ0zJrNXOsccMOgc6Gzcg==}
+
+  '@descope/escape-markdown@0.1.5':
+    resolution: {integrity: sha512-TbYhdQCdJoySICCASVuWed8ciQcHt5/zMJc9ar8qvyV0bY9IJ8SKTw+6j9mg0xhnwG9bSivDW2hvqJk45hhxUQ==}
+
+  '@descope/react-sdk@2.16.4':
+    resolution: {integrity: sha512-0QPHMoUDCOAExleag3MInZOEx9pyKr7Jq9l0rWWo3Y/2B0FteonOe4kwvv5SdtZjKUoLPFEEXRbjmgwsAQ+DOg==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
+  '@descope/role-management-widget@0.4.0':
+    resolution: {integrity: sha512-4oTQh6Iqrc70cF33uvrl4Jt3b/N+cGHhAtYKX8+YJrXCH0wuVu78TMGt84SCb3RtyTHJ0Xnl7C2lBdBZreZ/jw==}
+
+  '@descope/sdk-component-drivers@0.4.0':
+    resolution: {integrity: sha512-p1jDNSJib2gcqfL7kAXPXJmYLGbQPgAb00D8xEJvGqBMRmLhb5KiBM172Z5EB9SnyoK14QPWkU5hDNACm5W8pg==}
+
+  '@descope/sdk-helpers@0.3.0':
+    resolution: {integrity: sha512-x3SMc5i1julo/J7boX0UiX33bWFv4nRrpJuw3ua2DjRYocDFX595r4BWu3uMvuwU4aCWUzLDgvkVdFNtSXhwDw==}
+
+  '@descope/sdk-mixins@0.13.8':
+    resolution: {integrity: sha512-9a4IvUYJB6MT96GvHFqWOdJu++fxhh+ySsezbwM4TGeOeEF5UCOhMHG8zGkS7DkAEmyfb5zg4cPM95mGd1eO7A==}
+    peerDependencies:
+      '@reduxjs/toolkit': ^2.0.1
+      immer: ^10.0.3
+      redux: 5.0.1
+      redux-thunk: 3.1.0
+
+  '@descope/tenant-profile-widget@0.2.1':
+    resolution: {integrity: sha512-9bzd7nRD4X/v+OlU+Q2sFYp2P4Qxz87gUoFlaSkQDO7vLMyoswCVwyUtZUst2z4O+pJodb6qciVszBos4mG+kA==}
+
+  '@descope/user-management-widget@0.8.0':
+    resolution: {integrity: sha512-yIMNvYMK9LiEvKdXXpYtma72/2vWNEvJPREH/3dR8kxF6hx922CPa0QGaBQq67xXu2cq1jaDAUJtZ3QrKhb80A==}
+
+  '@descope/user-profile-widget@0.6.4':
+    resolution: {integrity: sha512-okbUfeD+1U8/jhiqUfPt9COfdWmM77pLrt57iuRUfgYyaRXUwUMbbGd7pCRkwJw2K8XWhxbDRyirtW1DkvNGfA==}
+
+  '@descope/web-component@3.44.3':
+    resolution: {integrity: sha512-dNMKxz9oTy2jqvVT0xCDDyatJM+PObzuuv/ufD0tp2j9L3CTspiBahgiP4JNeeOcexBKV827ZFPRfKw5iyjo6g==}
+
+  '@descope/web-js-sdk@1.33.5':
+    resolution: {integrity: sha512-tI70itTK3NfxfmLLu1KbZbxkOQOSA+ByfiB4a0FEqHEEAxbANvsx9jMIsKOCkpMo/W1tMa+Kyoc2EU/kiT1RYQ==}
+
   '@esbuild/aix-ppc64@0.25.8':
     resolution: {integrity: sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA==}
     engines: {node: '>=18'}
@@ -405,6 +467,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@fingerprintjs/fingerprintjs-pro@3.11.6':
+    resolution: {integrity: sha512-ohN4lorSzV0fzs8fELWuO3bvMMfzF5qyQSOWBvqwGaq6yPP+XSRJOeFdFFiwAqFWYJDEoDOlQluGfa0Rfk7mAQ==}
+
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
@@ -472,6 +537,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -503,6 +581,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.14':
+    resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -749,6 +840,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -801,6 +901,17 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
+  '@reduxjs/toolkit@2.8.2':
+    resolution: {integrity: sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -904,6 +1015,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
@@ -1154,6 +1271,9 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  immer@10.1.1:
+    resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1188,6 +1308,10 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1201,6 +1325,13 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jwt-decode@4.0.0:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
+
+  libphonenumber-js@1.11.17:
+    resolution: {integrity: sha512-Jr6v8thd5qRlOlc6CslSTzGzzQW03uiscab7KHQZX1Dfo4R6n6FDhZ0Hri6/X7edLIDv9gl4VMZXhxTjLnl0VQ==}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1415,6 +1546,17 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
   resolve@1.22.10:
     resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
     engines: {node: '>= 0.4'}
@@ -1554,6 +1696,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -1794,6 +1941,194 @@ snapshots:
 
   '@date-fns/tz@1.2.0': {}
 
+  '@descope/access-key-management-widget@0.5.0(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/applications-portal-widget@0.4.0(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/audit-management-widget@0.5.0(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/core-js-sdk@2.44.4':
+    dependencies:
+      jwt-decode: 4.0.0
+
+  '@descope/escape-markdown@0.1.5': {}
+
+  '@descope/react-sdk@2.16.4(@reduxjs/toolkit@2.8.2(react@19.1.1))(@types/react@19.1.9)(immer@10.1.1)(react@19.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)':
+    dependencies:
+      '@descope/access-key-management-widget': 0.5.0(react@19.1.1)
+      '@descope/applications-portal-widget': 0.4.0(react@19.1.1)
+      '@descope/audit-management-widget': 0.5.0(react@19.1.1)
+      '@descope/core-js-sdk': 2.44.4
+      '@descope/role-management-widget': 0.4.0(react@19.1.1)
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/tenant-profile-widget': 0.2.1(react@19.1.1)
+      '@descope/user-management-widget': 0.8.0(react@19.1.1)
+      '@descope/user-profile-widget': 0.6.4(react@19.1.1)
+      '@descope/web-component': 3.44.3(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@types/react': 19.1.9
+      react: 19.1.1
+    transitivePeerDependencies:
+      - '@reduxjs/toolkit'
+      - immer
+      - react-redux
+      - redux
+      - redux-thunk
+
+  '@descope/role-management-widget@0.4.0(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/sdk-component-drivers@0.4.0':
+    dependencies:
+      '@descope/sdk-helpers': 0.3.0
+      tslib: 2.8.1
+
+  '@descope/sdk-helpers@0.3.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@descope/sdk-mixins@0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      tslib: 2.8.1
+
+  '@descope/tenant-profile-widget@0.2.1(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-component': 3.44.3(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@descope/core-js-sdk': 2.44.4
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/user-management-widget@0.8.0(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      libphonenumber-js: 1.11.17
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/user-profile-widget@0.6.4(react@19.1.1)':
+    dependencies:
+      '@descope/sdk-component-drivers': 0.4.0
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-component': 3.44.3(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@reduxjs/toolkit': 2.8.2(react@19.1.1)
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@descope/core-js-sdk': 2.44.4
+    transitivePeerDependencies:
+      - react
+      - react-redux
+
+  '@descope/web-component@3.44.3(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)':
+    dependencies:
+      '@descope/escape-markdown': 0.1.5
+      '@descope/sdk-helpers': 0.3.0
+      '@descope/sdk-mixins': 0.13.8(@reduxjs/toolkit@2.8.2(react@19.1.1))(immer@10.1.1)(redux-thunk@3.1.0(redux@5.0.1))(redux@5.0.1)
+      '@descope/web-js-sdk': 1.33.5
+      '@fingerprintjs/fingerprintjs-pro': 3.11.6
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@reduxjs/toolkit'
+      - immer
+      - redux
+      - redux-thunk
+
+  '@descope/web-js-sdk@1.33.5':
+    dependencies:
+      '@descope/core-js-sdk': 2.44.4
+      '@fingerprintjs/fingerprintjs-pro': 3.11.6
+      js-cookie: 3.0.5
+      jwt-decode: 4.0.0
+      tslib: 2.8.1
+
   '@esbuild/aix-ppc64@0.25.8':
     optional: true
 
@@ -1872,6 +2207,10 @@ snapshots:
   '@esbuild/win32-x64@0.25.8':
     optional: true
 
+  '@fingerprintjs/fingerprintjs-pro@3.11.6':
+    dependencies:
+      tslib: 2.8.1
+
   '@floating-ui/core@1.7.3':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -1940,6 +2279,19 @@ snapshots:
       '@types/react': 19.1.9
       '@types/react-dom': 19.1.7(@types/react@19.1.9)
 
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.9)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.9
+      '@types/react-dom': 19.1.7(@types/react@19.1.9)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.9)(react@19.1.1)
@@ -1964,6 +2316,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
+  '@radix-ui/react-dialog@1.1.14(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.9)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.9)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.9)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.9
+      '@types/react-dom': 19.1.7(@types/react@19.1.9)
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.1.9)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -2221,6 +2595,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.9)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      use-sync-external-store: 1.5.0(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.9
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.9)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -2258,6 +2639,17 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@reduxjs/toolkit@2.8.2(react@19.1.1)':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@standard-schema/utils': 0.3.0
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      react: 19.1.1
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/rollup-android-arm-eabi@4.46.2':
@@ -2320,6 +2712,10 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.46.2':
     optional: true
 
+  '@standard-schema/spec@1.0.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
   '@tanstack/react-table@8.21.3(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@tanstack/table-core': 8.21.3
@@ -2581,6 +2977,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  immer@10.1.1: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -2609,12 +3007,18 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   jsesc@3.1.0: {}
 
   json5@2.2.3: {}
 
+  jwt-decode@4.0.0: {}
+
+  libphonenumber-js@1.11.17: {}
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -2787,6 +3191,14 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  reselect@5.1.1: {}
+
   resolve@1.22.10:
     dependencies:
       is-core-module: 2.16.1
@@ -2954,6 +3366,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.9
 
+  use-sync-external-store@1.5.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
   util-deprecate@1.0.2: {}
 
   vite@7.0.6(@types/node@24.1.0)(jiti@1.21.7)(yaml@2.8.0):
@@ -2990,7 +3406,9 @@ snapshots:
 
   yaml@2.8.0: {}
 
-  zustand@5.0.7(@types/react@19.1.9)(react@19.1.1):
+  zustand@5.0.7(@types/react@19.1.9)(immer@10.1.1)(react@19.1.1)(use-sync-external-store@1.5.0(react@19.1.1)):
     optionalDependencies:
       '@types/react': 19.1.9
+      immer: 10.1.1
       react: 19.1.1
+      use-sync-external-store: 1.5.0(react@19.1.1)
diff --git a/viewer/public/favicon.ico b/viewer/public/favicon.ico
new file mode 100644
index 0000000..6b3e68c
Binary files /dev/null and b/viewer/public/favicon.ico differ
diff --git a/viewer/src/App.tsx b/viewer/src/App.tsx
index 03a03b4..59ea32c 100644
--- a/viewer/src/App.tsx
+++ b/viewer/src/App.tsx
@@ -6,6 +6,7 @@ import { FeedbackListPage } from "@/pages/FeedbackListPage";
 import { FeedbackDetailPage } from "@/pages/FeedbackDetailPage";
 import { IssueListPage } from "@/pages/IssueListPage";
 import { IssueDetailPage } from "@/pages/IssueDetailPage";
+import { ProfilePage } from "@/pages/ProfilePage";
 
 function App() {
 	const defaultProjectId = import.meta.env.VITE_DEFAULT_PROJECT_ID || "1";
@@ -43,11 +44,15 @@ function App() {
 				<Route path="issues/:issueId" element={<IssueDetailPage />} />
 			</Route>
 
+			{/* 전체 레이아웃 */}
+			<Route element={<MainLayout />}>
+				<Route path="/profile" element={<ProfilePage />} />
+			</Route>
+
 			{/* 잘못된 접근을 위한 리디렉션 */}
 			<Route path="*" element={<Navigate to="/" />} />
 		</Routes>
 	);
 }
 
-
 export default App;
diff --git a/viewer/src/assets/logo_dark.png b/viewer/src/assets/logo_dark.png
new file mode 100644
index 0000000..6cd396b
Binary files /dev/null and b/viewer/src/assets/logo_dark.png differ
diff --git a/viewer/src/assets/logo_light.png b/viewer/src/assets/logo_light.png
new file mode 100644
index 0000000..6cd396b
Binary files /dev/null and b/viewer/src/assets/logo_light.png differ
diff --git a/viewer/src/components/Header.tsx b/viewer/src/components/Header.tsx
index c96e920..3c4c1ee 100644
--- a/viewer/src/components/Header.tsx
+++ b/viewer/src/components/Header.tsx
@@ -1,7 +1,9 @@
+import { useState, useEffect } from "react";
 import { Menu } from "lucide-react";
 import { NavLink } from "react-router-dom";
 
-import Logo from "@/assets/react.svg";
+import LogoLight from "@/assets/logo_light.png";
+import LogoDark from "@/assets/logo_dark.png";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -21,7 +23,25 @@ const menuItems = [
 ];
 
 export function Header() {
-	const { projectId, channelId } = useSettingsStore();
+	const { projectId, channelId, theme } = useSettingsStore();
+	const [currentLogo, setCurrentLogo] = useState(LogoLight);
+
+	useEffect(() => {
+		const getSystemTheme = () =>
+			window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+		const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
+		setCurrentLogo(resolvedTheme === "dark" ? LogoDark : LogoLight);
+
+		if (theme === "system") {
+			const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			const handleChange = () => {
+				setCurrentLogo(mediaQuery.matches ? LogoDark : LogoLight);
+			};
+			mediaQuery.addEventListener("change", handleChange);
+			return () => mediaQuery.removeEventListener("change", handleChange);
+		}
+	}, [theme]);
 
 	const getPath = (type: string, basePath: string) => {
 		if (type === "issue") {
@@ -30,15 +50,15 @@ export function Header() {
 		return `/projects/${projectId}/channels/${channelId}${basePath}`;
 	};
 
-	const homePath = `/projects/${projectId}`;
+	const homePath = projectId ? `/projects/${projectId}` : "/";
 
 	return (
 		<header className="border-b">
 			<div className="container mx-auto flex h-16 items-center">
 				{/* Left Section */}
 				<div className="flex items-center gap-6">
-					<NavLink to={homePath} className="flex items-center gap-2">
-						<img src={Logo} alt="Logo" className="h-8 w-auto" />
+					<NavLink to="/" className="flex items-center gap-2">
+						<img src={currentLogo} alt="Logo" className="h-8 w-auto" />
 					</NavLink>
 					<ProjectSelectBox />
 				</div>
@@ -87,15 +107,16 @@ export function Header() {
 								</DropdownMenuItem>
 							))}
 							<div className="border-t my-2" />
-							<DropdownMenuItem>
+							<div className="px-2 py-1.5 text-sm">
 								<ThemeSelectBox />
-							</DropdownMenuItem>
-							<DropdownMenuItem>
+							</div>
+							<div className="px-2 py-1.5 text-sm">
 								<LanguageSelectBox />
-							</DropdownMenuItem>
-							<DropdownMenuItem>
+							</div>
+							<div className="border-t my-2" />
+							<div className="flex items-center justify-center py-2">
 								<UserProfileBox />
-							</DropdownMenuItem>
+							</div>
 						</DropdownMenuContent>
 					</DropdownMenu>
 				</div>
diff --git a/viewer/src/components/LoginModal.tsx b/viewer/src/components/LoginModal.tsx
new file mode 100644
index 0000000..0c4b590
--- /dev/null
+++ b/viewer/src/components/LoginModal.tsx
@@ -0,0 +1,37 @@
+// src/components/LoginModal.tsx
+import { Descope } from "@descope/react-sdk";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+
+interface LoginModalProps {
+	isOpen: boolean;
+	onOpenChange: (isOpen: boolean) => void;
+	onSuccess: () => void;
+}
+
+const flowId = import.meta.env.VITE_DESCOPE_FLOW_ID || "sign-up-or-in";
+
+export function LoginModal({
+	isOpen,
+	onOpenChange,
+	onSuccess,
+}: LoginModalProps) {
+	return (
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>로그인 또는 회원가입</DialogTitle>
+				</DialogHeader>
+				<Descope
+					flowId={flowId}
+					onSuccess={onSuccess}
+					onError={(e) => console.error("로그인 실패:", e)}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/viewer/src/components/UserProfileBox.tsx b/viewer/src/components/UserProfileBox.tsx
index 01104bc..971c70f 100644
--- a/viewer/src/components/UserProfileBox.tsx
+++ b/viewer/src/components/UserProfileBox.tsx
@@ -1,11 +1,96 @@
-import { CircleUser } from "lucide-react";
+// src/components/UserProfileBox.tsx
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useDescope, useSession, useUser } from "@descope/react-sdk";
+import { User } from "lucide-react";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "./ui/button";
+import { LoginModal } from "./LoginModal";
 
 export function UserProfileBox() {
+	const { isAuthenticated, isSessionLoading } = useSession();
+	const { user, isUserLoading } = useUser();
+	const sdk = useDescope();
+	const navigate = useNavigate();
+	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+
+	const handleLogout = useCallback(() => {
+		sdk.logout();
+		navigate("/");
+	}, [sdk, navigate]);
+
+	const handleLoginSuccess = () => {
+		setIsLoginModalOpen(false);
+	};
+
+	if (isSessionLoading || isUserLoading) {
+		return (
+			<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center animate-pulse" />
+		);
+	}
+
 	return (
-		<Button variant="ghost" size="icon">
-			<CircleUser />
-			<span className="sr-only">사용자 프로필</span>
-		</Button>
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="ghost" className="relative h-8 w-8 rounded-full">
+						<Avatar className="h-8 w-8">
+							{isAuthenticated && user?.picture && (
+								<AvatarImage src={user.picture} alt={user.name ?? ""} />
+							)}
+							<AvatarFallback>
+								{isAuthenticated && user?.name ? (
+									user.name
+										.split(" ")
+										.map((chunk) => chunk[0])
+										.join("")
+										.toUpperCase()
+								) : (
+									<User className="h-5 w-5" />
+								)}
+							</AvatarFallback>
+						</Avatar>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent className="w-56" align="end" forceMount>
+					{isAuthenticated ? (
+						<>
+							<DropdownMenuLabel className="font-normal">
+								<div className="flex flex-col space-y-1">
+									<p className="text-sm font-medium leading-none">
+										{user?.name}
+									</p>
+									<p className="text-xs leading-none text-muted-foreground">
+										{user?.email}
+									</p>
+								</div>
+							</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem onClick={() => navigate("/profile")}>
+								내 프로필
+							</DropdownMenuItem>
+							<DropdownMenuItem onClick={handleLogout}>로그아웃</DropdownMenuItem>
+						</>
+					) : (
+						<DropdownMenuItem onClick={() => setIsLoginModalOpen(true)}>
+							로그인
+						</DropdownMenuItem>
+					)}
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<LoginModal
+				isOpen={isLoginModalOpen}
+				onOpenChange={setIsLoginModalOpen}
+				onSuccess={handleLoginSuccess}
+			/>
+		</>
 	);
 }
diff --git a/viewer/src/components/ui/avatar.tsx b/viewer/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..51e507b
--- /dev/null
+++ b/viewer/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/viewer/src/components/ui/dialog.tsx b/viewer/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..d40c864
--- /dev/null
+++ b/viewer/src/components/ui/dialog.tsx
@@ -0,0 +1,119 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/viewer/src/main.tsx b/viewer/src/main.tsx
index df3f3a5..c57e0b1 100644
--- a/viewer/src/main.tsx
+++ b/viewer/src/main.tsx
@@ -1,22 +1,24 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "@descope/react-sdk";
 import App from "./App.tsx";
 import { ThemeProvider } from "./components/providers/ThemeProvider.tsx";
 import "./index.css";
 
-const rootElement = document.getElementById("root");
-
-if (!rootElement) {
-	throw new Error("Failed to find the root element");
+const projectId = import.meta.env.VITE_DESCOPE_PROJECT_ID;
+if (!projectId) {
+	throw new Error("VITE_DESCOPE_PROJECT_ID is not set in .env");
 }
 
-createRoot(rootElement).render(
-	<StrictMode>
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
 		<BrowserRouter>
-			<ThemeProvider>
-				<App />
-			</ThemeProvider>
+			<AuthProvider projectId={projectId}>
+				<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+					<App />
+				</ThemeProvider>
+			</AuthProvider>
 		</BrowserRouter>
-	</StrictMode>,
+	</React.StrictMode>,
 );
diff --git a/viewer/src/pages/FeedbackCreatePage.tsx b/viewer/src/pages/FeedbackCreatePage.tsx
index aad385d..1f9eedc 100644
--- a/viewer/src/pages/FeedbackCreatePage.tsx
+++ b/viewer/src/pages/FeedbackCreatePage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useUser } from "@descope/react-sdk";
 import { useSettingsStore } from "@/store/useSettingsStore";
 import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import {
@@ -15,8 +16,10 @@ export function FeedbackCreatePage() {
 	useSyncChannelId();
 	const navigate = useNavigate();
 	const { projectId, channelId } = useSettingsStore();
+	const { user } = useUser();
 
 	const [fields, setFields] = useState<FeedbackField[]>([]);
+	const [initialData, setInitialData] = useState<Record<string, unknown>>({});
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<string | null>(null);
 	const [successMessage, setSuccessMessage] = useState<string | null>(null);
@@ -40,6 +43,35 @@ export function FeedbackCreatePage() {
 		fetchSchema();
 	}, [projectId, channelId]);
 
+	useEffect(() => {
+		if (user && fields.length > 0) {
+			const authorField = fields.find((f) =>
+				["customer", "author", "writer"].includes(f.id),
+			);
+
+			if (authorField && !authorField.readOnly) {
+				const { name, email, customAttributes } = user;
+				const company =
+					customAttributes?.familyCompany ||
+					customAttributes?.company ||
+					customAttributes?.customerCompany ||
+					"";
+				const team = customAttributes?.team || "";
+				const companyInfo = [company, team].filter(Boolean).join(", ");
+				const authorString = `${name} <${email}>${
+					companyInfo ? ` at ${companyInfo}` : ""
+				}`;
+
+				setInitialData((prev) => ({ ...prev, [authorField.id]: authorString }));
+				setFields((prevFields) =>
+					prevFields.map((field) =>
+						field.id === authorField.id ? { ...field, readOnly: true } : field,
+					),
+				);
+			}
+		}
+	}, [user, fields]);
+
 	const handleSubmit = async (formData: Record<string, unknown>) => {
 		if (!projectId || !channelId) return;
 		try {
@@ -67,6 +99,7 @@ export function FeedbackCreatePage() {
 			<FeedbackFormCard
 				title="새 피드백"
 				fields={fields}
+				initialData={initialData}
 				onSubmit={handleSubmit}
 				onCancel={handleCancel}
 				submitButtonText="제출하기"
diff --git a/viewer/src/pages/FeedbackListPage.tsx b/viewer/src/pages/FeedbackListPage.tsx
index 1b562a8..f6628da 100644
--- a/viewer/src/pages/FeedbackListPage.tsx
+++ b/viewer/src/pages/FeedbackListPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { useSession } from "@descope/react-sdk";
 import { useSettingsStore } from "@/store/useSettingsStore";
 import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import { DynamicTable } from "@/components/DynamicTable";
@@ -18,6 +19,7 @@ export function FeedbackListPage() {
 	useSyncChannelId();
 	const { projectId, channelId } = useSettingsStore();
 	const navigate = useNavigate();
+	const { isAuthenticated } = useSession();
 
 	const [schema, setSchema] = useState<FeedbackField[] | null>(null);
 	const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
@@ -71,9 +73,11 @@ export function FeedbackListPage() {
 			title="피드백 목록"
 			description="프로젝트의 피드백 목록입니다."
 			actions={
-				<Button asChild>
-					<Link to="new">새 피드백 작성</Link>
-				</Button>
+				isAuthenticated ? (
+					<Button asChild>
+						<Link to="new">새 피드백 작성</Link>
+					</Button>
+				) : null
 			}
 		>
 			{error && <ErrorDisplay message={error} />}
diff --git a/viewer/src/pages/ProfilePage.tsx b/viewer/src/pages/ProfilePage.tsx
new file mode 100644
index 0000000..cfcee65
--- /dev/null
+++ b/viewer/src/pages/ProfilePage.tsx
@@ -0,0 +1,31 @@
+// src/pages/ProfilePage.tsx
+import { UserProfile } from "@descope/react-sdk";
+import { PageLayout } from "@/components/PageLayout";
+import { useNavigate } from "react-router-dom";
+
+const widgetId = import.meta.env.VITE_DESCOPE_USER_PROFILE_WIDGET_ID;
+
+export function ProfilePage() {
+	const navigate = useNavigate();
+
+	if (!widgetId) {
+		return (
+			<PageLayout title="오류">
+				<p>프로필 위젯 ID가 설정되지 않았습니다.</p>
+			</PageLayout>
+		);
+	}
+
+	return (
+		<PageLayout title="내 프로필" description="프로필 정보를 수정할 수 있습니다.">
+			<div className="mt-6 flex justify-center">
+				<UserProfile
+					widgetId={widgetId}
+					onLogout={() => {
+						navigate("/");
+					}}
+				/>
+			</div>
+		</PageLayout>
+	);
+}
diff --git a/viewer/vite.config.ts b/viewer/vite.config.ts
index 8efd243..849c00a 100644
--- a/viewer/vite.config.ts
+++ b/viewer/vite.config.ts
@@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => {
 			extensions: [".ts", ".tsx", ".mjs", ".mts", ".json"],
 		},
 		server: {
+			allowedHosts: ["eg-qna.hmac.kr"],
 			proxy: {
 				// 나머지 /api 경로 처리
 				"/api": {